Hicks

You’re reading all articles on The Hickensian tagged 'fireworks'

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.

group

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.

Criteria

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:

  1. 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.
  2. Vector editing. A broad term to mean being able to add strokes, fills and different types of gradients.
  3. 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.
  4. Text Controls. It must be able to set leading and kerning, but ligature support would be good too.
  5. 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.
  6. 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:

test artwork

Let’s see how they all fared (click the larger screenshots to see the full image)…

Acorn

Acorn screenshot

acornI 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:

test graphic in acorn

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

screenshot of drawit

drawitDrawIt’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:

test.drawit

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.

Opacity

opacity screenshot

opacityThe 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:

Factories

Factories Inspector

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!

Variables

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.

Values

Enter calculations to let opacity work it out for you

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.

Preview

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:

test in opacity

All 6! What’s more, I took substantially less time to create than in the other two.

Conclusion

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!

A big-assed post about Fireworks

This is a post about Fireworks. Not about Photoshop, Illustrator and which is ‘best’. This is about a frustrated love hate relationship.

I love Fireworks.

It’s been my tool of choice for a rather long time. In the previous year of working for Opera, I’ve used it more than any other app. Whether I’ve been working on interactive wireframes, UI mockups, icons or final production artwork, Fireworks is the one that I go to.

When people ask why I don’t use Illustrator or Photoshop I sometimes find it hard to articulate precisely why. Illustrator is undoubtedly best for print/high-res illustrations and logos, while Photoshop is the first choice for manipulating photos, especially for print. Each have some tools from the other, but neither is intended for creating screen graphics with vector and bitmap tools in the way that Fireworks is.

It loves pixels. Photoshop and Illustrator only ‘do’ pixels when they’re coerced, and by golly do they take persuasion sometimes. For example, in Illustrator, why does a 1 pixel stroke on a pixel perfect box, placed on pixel perfect co-ordinates have sub-pixels on the top edge? Why do I have to make the stroke 0.9px instead of 1px just to get a crisp 1px edge?

Screenshot of the 1px border bug in Illustrator

This is surely the most basic of things to get right? Photoshop can do vectors and some of what Fireworks can – it just makes it harder to do it.

What’s so great about Fireworks…

Pixel-snapping vector tools aside, it’s most useful feature (that still isn’t present in anything else I’ve tried) is multiple Pages and States. Why have 45 separate files for a set of icons, when I can have one file that will export to 45 individual files? Let’s say all these icons have the same background, like a typical OS X toolbar button, and you notice a glitch. To update all those files would be tedious, but because it’s in Fireworks on a shared layer (or Master Page) one update is all that is needed. Master Pages in particular come in handy with site designs, as each page can be a different size and canvas colour.

Here’s a sample working file of Opera Unite icons:

Fireworks

It contains five different pages (one for each pixel resolution) and 10 icons per page, each on a different ‘state’. 50 icons, one file, one export. I’ve attempted replicating this functionality with layers, layer comps and multiple artboards, but they don’t come close.

Every time I’ve worked on wireframes and mockups, I’ve felt blessed that I’ve got symbols. Anyone that’s used Flash will know what a symbol library is, but for those that haven’t, think of them like this: Reusable content. Take the example of a form button in a site design. I can create a button symbol, specify how that graphic can be resized (with 9 slice guides), and place it anywhere in my document. Again, updating and editing is a do-once, update every instance affair.

It’s not all roses though.

I also hate Fireworks.

With a growing passion. With each update we get more tools and features that I care nothing for – Adobe Air, Bridge and Flex integration and CSS export. Worst of all it’s become remarkably unstable, particularly under Snow Leopard. It crashes, even when you don’t look at it funny.

I use it because it’s the best there is, but there are a lot of holes that need filling for me:

  • Auto-activating fonts. Whether this is down to Adobe or the developers of Font Managers I’m not sure. To get a newly activated font to show up, you need to restart Fireworks
  • Export to Illustrator. Yes, this option exists, but it ignores gradients, transparency effects, and just about everything but the paths themselves. When I know that the artwork will be needed beyond screen use, I work in Illustrator from the outset, but there isn’t always that fore-warning.
  • Placing items outside the canvas. A pasteboard area to place surplus artwork would make life a lot easier, and stop the ‘resizing the canvas cuts overlapping artwork’ pain.
  • It’s taken to CS4 to get palettes that scroll with a scrollwheel, and even now, they don’t ALL do it
  • In CS4, when using the ‘application frame’ you need to click inside the active document before commands like zoom work, otherwise it does nothing.

I really could go on, but there are also more general problems with the Adobe Creative suite:

  • Expensive – not two ways about it, it costs a few bob, and it often feels like better performance/bug fixes have to be paid for. I upgraded to CS3, solely to have a suite that worked properly on an Intel Mac. It now feels like those CS2 days are here again with Snow Leopard.
  • Bloated in feel: both with sluggish performance and barrel loads of features you never use. This can of course be entirely psychological.
  • Keyboard shortcuts deviate from the OS X standard, and from each other. Command-H should always Hide the application, Command-1 should always show the the document at 100%.
  • Installation: To reinstall CS4 recently took an hour, during which it also wants to take a big smelly dump in your Applications folder: Adobe Media Player, Adobe Drive, Adobe Bridge, Version Cue… STOP! Also – why make me close all my browsers?
  • Licensing/activation process. I know this is an anti-piracy measure, but it actually makes a cracked version more appealing.
  • Updating: Do I need to say anything here? It’s a dark land far, far away from the ease of Sparkle, where even the updater needs to update itself.
  • Then there are those glitches with artefacts which have been creeping into Fireworks of late too. Blobs of pixels that aren’t really there, but show up because the screen hasn’t been redrawn correctly. Cumulative wasted hours trying to get rid of artwork that is a phantom.

Compare these gripes with an app like Opacity. It downloads quickly, you open it and it asks you if you want to place it inside the Applications folder – done! That’s installation. As for updating, it self-updates and lets you know what’s been changed. The least amount of friction, and you’re left with the feeling of being in control of what you’ve installed.

Now, at this point, I need to confess that I’m the worlds worst beta tester. I’ve been on Fireworks beta programmes before, but haven’t had much time to give feedback or bug reports. So it’s a bit rich of me to be whining on my blog when this is all feedback that should’ve been submitted.

The problem is, after submitting the 20th crash report of the day, I’ve lost faith that anyone ever sees them or acts upon them. Overall, it feels like Fireworks is at the point of no return – no hope of it ever being fixed or improved, only that it will get more bloated, buggy, non-native and expensive. A stable version will no doubt come, but we will have to pay for it in the form of CS5. Maybe it’s not the Fireworks team that’s the problem here, maybe it’s higher up at Adobe? Maybe it’s just my setup? I can’t tell.

The bottom line is: Fireworks was my favourite, cherished tool, and it’s unreliability and issues mean my daily workflow is badly disrupted.

So, my thoughts turn to competitors. I’m not the only one, others are fed up with Fireworks and are looking for something to use instead. John Gruber, using the analogy of Filemaker’s Bento app, hits the nail on the head:

Adobe shouldn’t scrap its existing software any more than FileMaker Inc. should scrap FileMaker. But where’s Adobe’s “Bento” for bitmap and vector image editing for the Mac? The Bentos in this space are coming from indie developers with apps like Acorn, Pixelmator, Lineform, and Opacity.”

For such a long time, there haven’t been any alternatives. Various apps have been born that compete with other Adobe Suite apps, like Lineform and VectorDesigner with Illustrator, and Pixelmator and Acorn with Photoshop. Nothing for Fireworks, and yet the need for screen graphics is surely growing daily? Not only with websites, but desktop software and mobile apps.

In the meantime, Twitter clients have become ten a penny and Omnigraffle has matured to become a truly great tool for multi-page wireframes.

Recently however, three potential alternative apps have surfaced: Drawit, Acorn 2 and Opacity. I’m going to be putting these apps through their paces, to see if they can be potential alternatives. That’s for another time though, as this post has gone on long enough!

However, initial trials are showing Opacity as the most thoroughly feature-filled contender, but with Acorn sporting undoubtedly the most thoughtful interface. Acorn also has the advantage in that it’s developer, Gus Mueller, is actively seeking feedback on how it can be more of a Fireworks competitor. Drawit also has a pleasing UI, but with some issues on rendering.

I’ll report back on these when I can!

Graphics Editor or Text Editor?

Over on 37 Signals, there’s an interesting post about why they don’t use Photoshop, and prefer to go straight to HTML and CSS to create a UI. I agree with a lot of what Jason says here, especially point number 3 – you can never get text in a static comp to look the way it does on the web. (This is unless your name is Malarkey and you create your comp text by screenshotting text from the browser!)

I would also add a couple more points in favour of going straight to HTML/CSS:

  • You can’t demonstrate a fluid design with a static comp, and show how it reflows with window sizes. This is a biggie.
  • Why spend time recreating form widgets in Photoshop, when you can have the real thing by just typing the html tag? Also whoever looks at the design, sees these widgets in the style of their OS, rather than one fixed style in a static comp.

This is the approach that I’ve been taking over the last year, and it felt right at the time. It felt like removing the middle man, and being more efficient.

The one drawback was the designs were often dull, dull, dull.

This is not an approach that encourages visual richness. That’s not to say you can’t create a good design this way, or that a design needs ‘superflous eye candy’, but my thought processes were definitely being constrained by the tool I was using. As Jeff Croft points out in the comments on , this is an approach that works well for a 37 Signals style application, but not necessarily for everything else.

I’ve been trying to think through why this is the case, and the only thing I can come up with, is that it’s easier and quicker to move stuff around in a graphics editor. Also, I find Photoshop the wrong tool for mockups. Fireworks, rules my roost, and here’s a few reasons why:

  • I can keep all the page designs of a site in just one file – with shared layers for common elements like navigation. When it’s time to export, Fireworks can create an individual file from each page with one click.
  • The ’9-slice tool’, in combination with it’s Symbols Library, means I can have a pre-made set of form widgets and other interface elements that I can drop in to the page, and resize without losing the integrity of the image. Mocking up is fast.
  • The vector tools are superb. Create a pixel-constrained layout in Illustrator is a pain, and Photoshop was never meant to be a vector creator. Any Photo collage work is done in Photoshop though.
  • The Fireworks colour picker can sample from anywhere on the screen, not just the open document. (Apparently Photoshop can now do this by clicking and holding!)

Yes I still have to create it in HTML and CSS at the end of it, but by that point I know exactly what I need to do.

Fireworks still isn’t the absolute ideal tool though. The ideal tool hasn’t been created yet, and would be a mixture of the two, but that’s for another post I think!