Tim Thompson's blog: Illustrator vs Fireworks

Wednesday, 28 June 2006

Please note: this article is now out of date. However, as of CS4 I still largely concur with many of my findings back in 2006. My view as of today (March 2010) is that Fireworks - even though it appears Adobe markets it more as prototyping software - is still the superior program for generating web template graphics. Photoshop is a bitmap editor and Illustrator is for generating vector illustrations. I think the basic lesson to take away from the comparison here which still stands true today is: 'use the right tool for the right job'.

Shameless plug: drop by Stem Pixel, my web design and development business. All examples of my websites were built using Fireworks, Photoshop and Illustrator, allowing each application be true to itself. If you like my work, I'm available for hire.

So, you're a web designer. You use Macromedia Fireworks to generate your website templates, but have been frustrated that you want a bit more creativity in your layouts. You know Fireworks can generate the sort of vector graphics that might give your work that bit more flair, but lets face it, when it comes to vectors, Adobe Illustrator is King. And what's the point of investing precious time learning the vector tools of Fireworks which will no doubt be more limited in function than Illustrator? Well, if you're that person, then you'd be something like me.

Yes, there is Flash too, which generates vectors very intuitively - but that orients its toolset for animation. If you want an application which will give you the greatest freedom for static creatives, Illustrator has to be the tool for the job.

So if Illustrator is so good, why not use Illustrator rather than Fireworks to generate website templates? Well, this is a question that has been on my mind for sometime, so I sought to find an answer on the internet. Unfortunately, I couldn't find any comparisons that addressed the specific questions that I had, so set out to do a comparison of my own, and this is the result of my findings.

I do not do a full review of each application, rather I just pick up on the points of interest as I sought to try to achieve with Illustrator the types of tasks I might want to do in generating creative website layouts.

For the comparison I used Illustrator CS 2, and Fireworks MX 2004.

The background to my quest

The reason I don't already know how Illustrator stands up as a tool to generate website template graphics is that, despite having designed websites for some years now, it was not until recently that I had the opportunity to learn a fully-fledged vector illustration program.

For many years I have been wanting to learn a professional illustration package such as Freehand or Illustrator, though or one reason or another, with all the twists and turns that life brings, I've never been able to justify the time learning one. Well, in 2003 I acquired my first personally owned copy of Macromedia Studio. I was very excited that it came with Freehand, and thought this would be the time to dive in. However, it was also becoming painfully obvious that Adobe Illustrator was winning the war of the illustration packages. Macromedia had not updated its Freehand for the Studio 2004 release, and soon thereafter Adobe announced it's acquisition of Macromedia - so it was a no brainer really - Freehand was being end-of-lifed, and I was going to have to jump ship to Illustrator if I was to make my learning time a worthwhile investment.

In 2005 I made my first ever purchase of the Adobe CS 2 suite. My decision to purchase (as opposed to 'acquire') was a moral one; I was coming out to work for a Christian organisation here in Mexico, and thought it only right (quite ironic really, as this is the country of pirated software, but hey). So here I am in 2006, and have found the time at last to devote a bit of learning to Illustrator.

Learning Illustrator

I started - as I do with learning any new software - by picking up one of the many tutorial books available. In my case, I used Adobe Illustrator CS2 @Work: Projects You Can Use on the Job from SAMS Publishing. I ran through a few lessons that would help me get up and running quickly, and very slowly, Illustrator began to transform from this strange, foreign, complicated looking program, into something which began to feel more familiar and intuitive.

I began to understand how the tools and palettes worked, and which would be the most useful for me. Slowly, I began to feel like I was the one in control of the creativity and not the limits of my knowledge. I spent time practising and coming to understand the pen tool; I began to learn how to apply strokes and fills, and then apply effects such as blending, warping, masking and so forth.

After having developed some competency with the application, I turned my attention to how to use these skills to generate the type of vector objects, text effects and so forth that I would want to produce in the development of a creative website template.

Creating website graphics with Illustrator

Encouragingly, Adobe provides all the 'basics' to easily allow you to output graphics to the web. As with Fireworks, Illustrator:

offers a 'Pixel Preview', so you can see how the image rasters to a 72dpi screen,
allows you to view colours according to their hexadecimal values (eg #33FF99), and
offers 'Slicing' support, so you can export later on.

Great, I thought. Surely it would just be a matter of creating the text and geometric objects that would compose the template, and using Illustrator's superior creative tools, I could add that bit more magic to my layouts. Well, it's about at this point, after two weeks of labouring with Illustrator and the hope of all its potential, that my dream came to an abrupt, disappointing end.

As I began to generate the first of the 'boxes' that would form the basic framework to the template (page content, section navigation, masthead etc), Illustrator very quickly began to show that it is not an application optimised for generating webpage layouts.

Below, like the strewn-out wreckage from a plane crash, are all the problems that I encountered along the way in trying to generate a website template from Illustrator:

Pixel-level graphics do not render correctly

You draw a box, apply a stroke and fill as you would like to see it exported. However, looking twice at the box, you notice that one of the strokes that makes up the border is in fact feathered to a depth of 2 pixels. Once you've noticed this, you can't un-notice it. This might not sound like a big issue, but often, when you're creating a clean graphic that need to blend invisibly with a CSS-rendered 1-pixel line, this is a big issue, and a seemly silly one for what is a pro-level graphics application.

The documentation explains how Illustrator rasterises according to the position of the rulers etc. But it seems a no-brainer to me. If you have 'pixel-preview' and 'snap-to-pixel' enabled, specify your units of measurement by pixels in the preferences - when drawing a 1-pixel line, you should get a 1-pixel line! I did find one work-around, which was to disable anti-aliasing from the preferences box, but then all my other graphics would be rendered in a 'jagged' way, so this was simply not an option. Frankly, Illustrator does not provide the pixel-level accuracy of Fireworks.

Colours are difficult to choose, mix and apply

No, I'm not a circus entertainer jumping through hoops - but Adobe wants you to be one. That's what it's like to select and mix colours using Illustrator. The colour mixing method is in fact common amongst Adobe apps, and I'm not convinced by it. I won't go too much into the ins-and-outs here (which would merit a blog in it's own right), it just seems that somehow mixing and choosing colours in Fireworks is so vastly easier than in Illustrator. And I mean vastly easier.

In Fireworks, you can just select a new colour from a pop-up swatch, mix it a bit to get a variant, and release to see your chosen colour applied. In Illustrator, for the most part, you have to have select a colour first, create a swatch from it, and then apply it. If you don't like the colour, it's not intuitive or quick to mix a variant.

I think this process of colour selection might be to do with Illustrator's print background - where choosing colours for print was and still is a much more complicated process. Thankfully, choosing colour for screen is much easier, and with Fireworks being a web-era screen-graphics program, it makes colour selection a pleasure rather than a chore.

You need that flexibility to play freely with colours when designing graphics for the web and Illustrator just doesn't provide it - and that's very, very frustrating.

There are no bitmap editing tools

Although a website template is composed predominantly of vector-based objects, it also often needs to incorporate bitmap images such as photographs. Personally, I don't need to tweak bitmap images that much - but I do often need to adjust their levels, colour settings etc, and this is a common task of mine. Although Illustrator allows you to import bitmaps, you just can't do that much with them. This means that Illustrator is dependent on having Photoshop open at the same time to tweak photos. But it gets a pain when you have to keep switching back-and-forth as you experiment with different settings.

Fireworks is a unique application in this respect, that it provides bitmap and vector editing in the same window, thus allowing you to work with photos and geometric objects at the same time. Without even having some of the most basic bitmap editing tools, Illustrator becomes cumbersome when needing to use in conjunction with Photoshop.

Support for applying patterns is limited

Of course, professional illustrators don't need pre-defined anything - they just get on and create what's in their imagination. The thing is, when creating web graphics, you often want to apply some kind of pattern to an object to give it differentiation. Patterns are handy, as they repeat accurately either horizontally or vertically (a useful characteristic in template development), and although Illustrator does support patterns through swatches, there are very few provided out-of-the box.

Fireworks on the other-hand provides a great many patterns together with a handy preview of them when you're selecting one. I considered creating a library of pattern swatches in Illustrator from the Fireworks patterns folder, but you still wouldn't get the preview facility - selecting a pattern from the swatch would be guess work.

Other li'l things

Here's a quick run-down of a few other little niggles I had when trying to use Illustrator to create a website template:

When experimenting with effects applied to objects, there is no way of quickly 'disabling' an effect, and re-enabling it later if you want to come back to it. Effects list in the 'Appearance' palette as they do in Firework's 'live effects' palette, but in Fireworks, you can choose to 'hide' or 'show' an effect - making the creative process much easier.
Dragging objects on-screen just drags their outline. This makes pixel positioning difficult. I often have to drag the object completely out of the way, then move it's outline back to get some semi-useful preview. I would like to find a preference to change this, but I can't.
In Fireworks, you can switch between standard Mac and PC gammas - this might be possible by creating different 'colour spaces' in Illustrator, but it's certainly not intuitive.

Conclusion

So there you have it: Firework is better for creating website templates, hands down.

This test was in no way intended to be a tirade against Illustrator - for the purpose of illustration, it is a very powerful tool (though I might still criticise its usability somewhat). I began this quest with the impression that Illustrator might be the right tool for the job in creating website templates, given its powerful vector illustration capabilities - however in this particular application it is by no means king of the hill.

You could say that I'm comparing one app against another, and not judging Illustrator by its own merits. However, I am trying to compare both apps against common tasks I perform as a web designer. There's no doubt in my mind that Illustrator offers creative controls that I would like Fireworks to have, but by virtue of it's design, if you're going to use Illustrator to produce a website template to your fussy creative satisfaction (which is important!), you're going to be one exhausted, emotionally drained designer by the end of it.

Salvage from the wreckage

The time spent learning wasn't entirely futile, however. I have come to apply much of what I learnt in Illustrator back to Fireworks. Although I don't think the pen tool is quite as flexible in Fireworks, I can now effectively use the pen and direct-selection tools in shaping paths, as they function in a very similar way to the equivalent tools in Illustrator - and if you're going to learn the pen tool, I think Illustrator is probably the better program for it.

Also I have come to understand better the types of work to which Illustrator lends itself. There are many occasions when I want to design small illustrations to complement a template, or add illustrations to particular articles in a webpage - contexts in which Illustrator would apply itself very well.

Final thoughts

In all, Fireworks is a very capable creative application for designing website templates. With superior usability and unique vector and bitmap editing tools within the same interface, the small ways in which it falls behind Illustrator can be forgiven. If something is so important that it needs to be done in Illustrator or another vector app, then that's an option, but for 95% of the task, Fireworks will do the job just as well, with none of the frustration of Illustrator, and in a fraction of the time.

If you found this article useful, or would like to provide feedback, please leave a comment in the space below.