You’re reading all articles tagged 'vector'
Affinity Designer, Sketch and Illustrator
Do you fancy trying a new OS X Vector Illustration app? An upstart called Affinity Designer is out and even though it’s a first version beta, it already looks like a good competitor to Adobe Illustrator. From when you first launch Affinity Designer and create a new document you can tell that they’re going after Adobe Creative Cloud with their trio of apps aimed replacing Illustrator, Photoshop (Affinity Photo) and InDesign (Affinity Publisher).
Therein, for me, lies the conflict. Sometimes Affinity goes so far in following Illustrator’s path that I can’t help feel its missing an opportunity to take a fresh approach like Bohemian Coding did with Sketch. The Sketch interface is native, bright and yet neutral, whereas Affinity goes for the more contrasting ‘Dark UI’ of Adobe and Apple Pro apps. The advantage with Affinity’s approach though is that there is less to relearn, and you can start ‘feeling at home’ early on. As someone who has spent a long time getting used to Sketch, I would say its well worth the learning curve.
Opening a new Sketch document is a breath of fresh air. It doesn’t constrict you into choosing a document size, or output resolution, its just an infinite blank canvas. You can start working straight away without any confines. If you’re designing a website, the document size dialog restricts your thinking before you’ve even started.
As I do a lot of icon work, one of my first tests in any vector app is whether I can keep all the icon set in one file, and output each one to SVG easily with exactly the filename I desire. Its not ideal to work on icons in isolation, when they’re together you judge balance and consistency at a glance.
Illustrator performs very poorly at this test – it removed the ability to output slices to SVG in CS5.5, leaving only the option to export artboards to SVG. Trouble is, it only allows 100 artboards, a limit that can be easily reached with iconsets like Spotify with three different sizes per icon. Therefore iconsets have to split over several documents. Exporting SVG from artboards also adds the main document name to the filename, when all I want is the artboard name. I’m currently testing a new version of Tom Byrne’s Multi Exporter script, (coming out soon) which makes this process a lot better, and allows layers to output to SVG with exactly the filename you want. If only Adobe hadn’t removed the slice to SVG functionality. Weirdos.
Affinity Designer only currently supports saving the whole document as SVG, and doesn’t have artboards – just slices. However, slices can easily be created with either the slice tool, or by exporting a particular layer, and SVG output is on their roadmap. So that’s good news! Filename is taken from the slice name so you have full control over that. Once SVG output is added, it will overtake Illustrator in this test.
Sketch is the King when it comes to export options however. Export Artboards, Slices or Layers to multiple file formats and folder locations at once. It couldn’t be more flexible. In my day to day work, the balance is tipping between Illustrator and Sketch. The drawing tools in Illustrator are more mature (although still prone to having WTF moments), but Sketch is progressing fast and unencumbered by legacy UI, like having to tick a checkbox in order to just preview an effect. Its 2014 now Adobe, I’m sure my computer can handle it.
My preference is now for working mostly in Sketch. I’ll definitely keep an eye on Affinity Designer though, and more competition for the subscription-based Adobe Creative Cloud can only be a good thing for all of us.
Update: The Iconfinder Blog has a more in depth review and comparison of features.
Fireworks alternatives on trial: Acorn, Drawit and Opacity
Last October, I wrote about my frustrations with Fireworks CS4, and the search for decent competitors to Adobe Software. Photoshop has many alternatives, and Illustrator has a handful, but nothing else seemed to cater for the mix of vector and bitmap editing that is Fireworks.
I recently tried both Photoshop and Illustrator again for icon creation, and Illustrator in particular irritated the hell out of me with it’s pixel preview artefacts (still not fixed from CS3). Before I get a sackful of comments from diehard Photoshop fans, please believe me when I say that Photoshop is not the right tool.
That post did point to 3 possibilities however: Acorn, Drawit and Opacity. I didn’t include Inkscape, not because it’s bad, but I’m looking for better integration with OS X than Adobe products, and Inkscape feels like a step further away from that. Linux and Windows users will find that it feels more at home for them.
Why this post took so long
In order to trial these applications properly, you have to use them in anger. That is, on something real. However, the approach and workflow of any new tool is going to be different. Commands won’t be in the same place as you expect them to be, or even named the same. There will be different ways of achieving the same end goal, and getting used to all these takes time.
When you’re up against with deadlines, it’s never the right time to go through that process. So you end up the tool that you know, that you will enable you to deliver on time with confidence. Times that by three, and you’ll know why this has taken so long to write.
Disclaimer: No app can be perfect, and it takes a lot of time to trial them and understand their approach. It could be the these apps do have the features that I’ve claimed are missing, but there’s only so much time I can give them all. Do point out if that’s the case.
I’ll be using this app for website designs, icons and interface elements, so some of the key things that I’m looking for are:
- Pixel snapping. I must have the confidence that when I draw a vector object it’s dead on, no decimal points in either the dimensions or the positioning.
- Vector editing. A broad term to mean being able to add strokes, fills and different types of gradients.
- Boolean Operations. Which is apparently the posh term for what I’m more used to calling ‘Pathfinder’, making a new shape by subtracting, adding or intersecting two vector paths.
- Text Controls. It must be able to set leading and kerning, but ligature support would be good too.
- Multiple States. States and Pages are features in Fireworks that I use lot. I love being able to store multiple versions of a design (different pages of a site design, resolutions of an icon, a series of icons etc.) in one file. A similar function would be wonderful.
- Export to png, svg, eps, .ico,.icns and pdf.
There are more requirements (taken for granted things like layers) and nice-to-haves, but these are the core dependencies.
For the sake of a starting point, I set a basic task of drawing a button with rounded corners (set with a value), transparent stroke, inner highlight, linear gradient with transparent colours and an outer shadow. I also chose to overlay the word ‘Waffle’ to test kerning and ligatures. Like this:
Let’s see how they all fared (click the larger screenshots to see the full image)…
I found Acorn’s layout beautiful, intuitive and well thought out. In fact, it was my favourite (with DrawIt a close second). One of the turn-offs of Adobe software are some of the non-native UI decisions, but Acorn embraces modern Mac UI design with vigour. These things matter!
Acorn allows the basic vector drawing abilities that you would expect, such as editing and positioning elements (particularly vector shapes) numerically with x,y,w&h values. It also has that wonderful feature of taking screenshots with each window on a separate layer.
However it’s intention is primarily a bitmap editor, and was missing functions like:
- Gradient fills
- Guides (although these will be in Acorn 2.3!)
- Ability to apply a stroke to the outside or inside of a shape, as well as centred
- Boolean operations
- and so on…
So this was a far as I could get without converting the shape to a bitmap:
That’s a score in items 1,2 (partially) and 4 (partially). I could export to .png, but that was it. I was able to alter kerning overall and manually between pairs of letters, but I couldn’t find support for ligatures.
You may wonder why I include Acorn in the alternatives if it doesn’t fulfil enough of the criteria? Well, it’s a bloody good image editor, and it’s lack of vector capabilities may not be an issue for everyone. It also has the bitmap editing features that the other choices here lack.
It’s clear that Acorn’s priorities are elsewhere, but the basis for a fantastic competitor is there. Whether it makes commercial sense for Gus to take it that direction only he can tell, but I would love to see Acorn’s vector capabilities expanded. If you do too, please write to Flying Meat Software, as I’m sure if there was enough demand and constructive suggestions, he would consider it.
DrawIt’s interface is a single-window affair, with only the OS X colour and text palettes being separate. On the left is layers and properties, and on the right side are the ‘special attributes’ where you add fills, strokes, shadows and so on.
Drawit seems more aimed at the Fireworks market: vector drawing with bitmap effects. It’s a big step up from Acorn in terms of drawing capabilities, and (initially) it felt like using Keynote after years of Powerpoint. Remember that feeling?
We’re getting close with Drawit. It boasts:
- Excellent Mac integration and UI design
- Pixel snapping
- Multiple strokes!
- Gradient strokes!
- All manner of editable effects!
- Exposé layers!
- Easy Locking and unlocking layers.
Shapes are automatically drawn with certain effects, but once you’ve removed what you normally wouldn’t need, you can right click on it and ‘set effects as default’.
What it lacks:
- A tools palette. I don’t want to go through dropdown menus in order just to add a vector shape to the canvas
- Export to .eps option. Granted it allows bitmap effects which wouldn’t export, but I would love to be able to get vector artwork out in a format that other vector apps understand. (Apparently vector export is on the way though!)
- No multiple page function
- No alt-drag to create a duplicate shape
- No alt-key modifier to resize objects from the centre outwards
- No bitmap editing tools
- No manual guides (but it does have smart guides!)
This is what I could achieve with the test artwork:
So that’s a score in items 1,2,3 (partially) and 4. Unfortunately, I came across some buggy rendering behaviour, which meant that not everything could be done with the same vector shape/layer (update as of v3.10.3 these have now been fixed). I think if I’d have persevered, I could’ve added the outer shadow. In particular, there is a nasty bug with boolean operations and shapes with rounded corners, which creates very wacky results. There’s also a nasty undo bug, and I often find I can’t undo any steps at all. All quirks that I’m sure can be fixed if I take the time to file a bug report though.
Overall, DrawIt is on the right lines. I do have concerns that their other app Sketch (a purely vector drawing app) is going to divide up the developers attention too much. I would’ve liked to see DrawIt developed in this way, rather than branching off those features into a separate app. Especially as Sketch has the multiple page facility, and export to eps and svg that was part of my criteria. Pieter Omvlee, the developer of DrawIt replied to these fears on Twitter…
…as to your fear about Sketch vs DrawIt; they do share a lot of code and I def plan to bring features back to DrawIt.
The main interface of Opacity is split into the canvas window (left, with layers on the side) and the inspector on the right. It’s focus is creating resolution-independent graphics, and if you’re designing for software (icons, interface graphics in general) you’ll find a lot to love here.
Compared to Acorn and DrawIt, Opacity doesn’t score quite as well in the beautiful Mac UI design stakes. It’s not ugly by any means, but there is a mixture of styles and a little less coherent interface. For example, text can’t be edited directly on the canvas, only via an inspector, which seems very odd. Fine for small amounts of text, but this would be a royal pain in the arse for site designs.
Let’s get my other complaints out of the way first:
- No bitmap editing tools, although can draw with pixels, something Shaun Inman might like. I would at least like to be able to select areas of bitmaps and copy or transform them. (Update turns out you CAN do basic bitmap editing, but images have to be rasterized first)
- Can’t select an object in another layer without selecting the layer first (there’s no cmd-select option as there is in Photoshop).
- No alt-key modifier to resize objects from the centre outwards.
However, these are moot points in what is otherwise an incredibly powerful app. In fact, there is so much you can do in Opacity that I know I’ve not been able to explore it all. Here are some of my favourite features:
- Pixel snapping
- Multiple strokes!
- Gradient strokes!
- All manner of editable effects!
- Multiple resolutions in one file
- Multiple frames, with option to export to individual files, as well as share layers across frames.
- Excellent export options: png, jpg, jpg2000, tiff, gif, ico, icns, svg, pdf, bmp, even .icontainer. (no .eps though).
And in particular:
This is one of Opacity’s genius features! Factories are all about setting up how you export your files, in as many different ways as you need. Let’s say for example you need a png. ico and .icns versions of your icon artwork. Add a new factory for each, choosing the destination folder and compression. For added ease, check the ‘Build Factories on Save’ option, and Opacity will export the files whenever you save. No fiddling with save dialogs where the app doesn’t remember the place you last exported, just apple-s. Only until you use this do you realise how much time you used to waste exporting files.
It even taps into my favourites in Transmit to allow me to save to a server!
There are all sorts of variables that you can use in your artwork, but one that I would use a lot is Resolution. With this, I can create all the different sizes for an icon, and alter the artwork based on it’s resolution, such as removing detail at small sizes.
The value fields in Opacity respond to sums – that is you can type 25*2, 100-50 or 20+30 to get the same result. Handy, as sometimes positioning and sizing requires some maths.
Opacity makes it very easy to try your artwork with many different backgrounds. Apart from being able to choose checkerboard, colour or an image, it comes with many built in backgrounds, such as the Leopard Aurora desktop or Windows XP’s Bliss.
Finally, let’s see how it fared on the little test:
All 6! What’s more, I took substantially less time to create than in the other two.
There still isn’t one app that will replace Fireworks completely, but elements of these 3 are on the right tracks, and a combination works right now. My personal favourite here is Opacity, as it has almost all the feature set I need and more that Fireworks doesn’t provide. I’ve used it in a production environment too – all new graphics for Opera 10.50 have been made in Opacity.
It just needs a bit of UI love in the way that Acorn and DrawIt have, and a better system for dealing with text. I’ll still keep an eye on the other two, but I’ll be using Opacity alongside Fireworks for now. All three are being developed by people who care and are responsive over email.
So that’s my thoughts, it’s now up to you to try them yourself!