Illustrator vs Fireworks
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.
28 Comment(s):
What do you think to the Gnu's not UNIX image manipulation program (or GIMP for short)? Monday, July 03, 2006 2:30:00 AM
I've not used GIMP so can't really comment with any authority, but I believe it's predominantly a bitmap editor - more an open source challenger to Photoshop. I read a little about it on the website, and it seems that vector editing is there, but it's a bit in it's infancy.
The thing I came to appreciate about Fireworks through the comparison is that it is written from the ground up to meet the needs of the web designer - the whole user interface, and the type of features it provides. I guess to have ultimate creative freedom, you would use a number of different sofware packages in combination. However, if I could only take one away with me on a desert island, for the purposes of web design, I think it would have to be Fireworks. Monday, July 03, 2006 12:11:00 PM
Thanks for a great review. This was exactly what I was looking for. I'm a web designer and you are doing the same thing I am doing. I'm very fluent with Fireworks but "thought" that Illustrator would be the application more suited. Wrong, Fireworks is a proffesional applications and it's use of Photoshop plug in's makes it my app of choice. There are some great books out on Fireworks and the results are proffesional. Thank you for saving me a lot time and unnecessary learning.
Ken Vaughn
IT Director
BS&R Design & Supplies
ken@bsrequipment.com Wednesday, July 12, 2006 3:30:00 PM
Found this article while Googling in my spare time to see what people think of Fireworks vs Illustrator ... and I found myself nodding for each point. Last March, I had the same thoughts - Both Photoshop and Fireworks are very bitmap-focused, yet web design primarily deals with rendered layers and objects, so wouldn't Illustrator serve better? As I saw the artboard-style layout, I thought it would serve well, but proceeded to encounter the same problems you highlighted. From lines appearing fuzzy (and disabling anti-aliasing to get the jaggies) to the odd problems with the text tools ... it was a mess.
I continue to do most of my web design work in Fireworks 8, though I do wish that Fireworks made it more natural to resize objects, so I could use simply the black arrow tool instead of doing CTRL+T to transform shapes (or painfully select each of the points with the white arrow).
One alternative that I haven't yet tried - Using InDesign for text and mockup, with Photoshop and Illustrator Smart Objects, and transforming my InDesign document to XHTML and CSS in GoLive.
Although InDesign has awesome text tools - and styles (!) - it still shares some of the problems you mentioned with Illustrator - primarily colour swatches and its print focus. Although, it's more friendly than Illustrator ... it's just not as simple as Fireworks.
I guess we'll both have to wait to see what the new Adobe lineup will be like in 2007. Perhaps they'll start to merge the products, for the best of both? (Or more likely, they'll get it half right and we'll have other problems to work around. Sigh.) Monday, August 21, 2006 10:44:00 PM
Thanks for the useful information.
Robert.
Professional Website templates Thursday, August 31, 2006 4:58:00 AM
Great comparison! I too have come to the same conclusions you have. I've been using Fireworks (for Windows) since version 4! I've attempted to use Illustrator multiple times, yet always fall back to Fireworks out of frustration.
It's just easier to do the the things I need it to do. I do user interface design and need a tool that blends bitmap editing with vector-based drawing.
I agree with your comment about the complexity of color selection in Illustrator. Don't even get me started on gradients! Saturday, October 07, 2006 5:37:00 PM
Thank you so much for this great comparison from a professional. I have started doing design as well recently and had a chance to use both Fireworks and Illustrator. I would like to add one point, in Fireworks you can have flexibility and efficiency by using symbols. Say your design is going to have lots of elements that should look the same. For example, you have lots of buttons that should have the same style(pin-shaped background), you can make the background into a symbol and create buttons using that symbol, and later on you want to change all the buttons to a square-shaped background, you make the change in one place and voila all the other buttons take on the new look. This makes it easy to experiment with different styles. You cannot do this sort of thing inside Illustrator even though it has something also called "symbol". Another real life example, in my work I had to design about 50 pages of content, on each page I have photos or notes that are clipped to a panel; and one day my boss looked at it and says "please remove the paper clip, I don't want to see it". I simply open up the symbol and hide the layer, and voila the paper clip disappears from all pages. With illustrator, I probably would have to go in to each place and make some change. Wednesday, December 06, 2006 9:55:00 AM
Oh, I forgot about another thing about Illustrator. I cannot preview the font as I move my mouse down the list of fonts - I don't have any idea of what an unfamiliar font would look like until I select it. So to select the right font, you would have to click and select lots and lots more times than in Fireworks. Wednesday, December 06, 2006 10:04:00 AM
Excellent review. I am just learning illustrator, but use Fireworks all of the time. I was searching for a comparison and this is what I was looking for
thanks Sunday, September 09, 2007 1:13:00 PM
Oh my LORD, I couldn't agree more with your points. Thanks for saving me 2 more weeks of frustration! Tuesday, June 10, 2008 8:47:00 PM
Hi ppl,
I used both Illustrator and Fireworks in the past years.
I am a software developer but vector graphics is one of my hobbies. Personally I find both tools interesting, but my favorite software is Xara.
I would recommend it to anyone without thinking more than a second. The only thing that AI and FW have and Xara lacks is the famous FW to XAML tool, or AI to XAML tool, ideal for WPF applications.
Andrei Thursday, June 12, 2008 4:58:00 AM
[…] Read the rest of this great post here […] Friday, June 13, 2008 2:37:00 AM
maybe you can`t use illustrator correctly!?.. Tuesday, June 24, 2008 9:10:00 AM
Just like everyone else who has posted here, I thank you for a fantastic comparison and for helping me feel better for thinking the exact same way. I truly thought that I needed to learn Illustrator more in depth to be a true professional, but it's not the case. I'll feel better as I continue to use the more intuitive Fireworks... Sunday, June 29, 2008 9:36:00 PM
Hi Tim,
Thanks a lot for doing this comparison. I had no idea that Fireworks was such a great product. I was going to start learning illustrator and you have just saved me a LOT of time that I might have wasted.
Thanks Again
Vivek..... Tuesday, July 29, 2008 6:13:00 AM
I was just deciding which suite to buy, the one with fireworks, or the one without. I didn't know what fireworks was supposed to do or how it different from illustrator. As I do interface/web design, it was really helpful for me to read this! Thanks!!! Thursday, August 21, 2008 4:50:00 PM
Thank you, I can now go to bed now that this quandary has been rooted out. :-) Tuesday, February 03, 2009 10:17:00 PM
Thank you for doing this comparison - it helps me a lot in deciding where to focus my energy.. I, like yourself, assumed that Illustrator would offer the best possibilities for creating vector-based graphics for web, but you've saved me a lot of time and grief with this. I'm gonna dive straight into Fireworks now. Thanks again.. Thursday, April 23, 2009 12:39:00 PM
This goes out to the person talking about gimp.
Gimp, should only be used till you can afford Photoshop (gimp is mediocre compared to the ability's of Photoshop)
The purpose of Photoshop and Gimp are for Bitmaps, they are not the key to making a good website (Fireworks&Illustrator) Are the key =)
Btw, What are your inputs on using Illustrator for button graphics? Thursday, April 30, 2009 5:30:00 PM
thank you very much for this comparison. I read the whole thing.
This was exactly what I wanted. Thursday, August 13, 2009 3:11:00 PM
Hello,
I'm very new to webdesign. I'm just following a course dremweaver. After this course I wanted to follow either Fireworks-course or Illustrator course. I'm using CS3. Are the things about illustrator in comparison with fireworks, as mentioned in the original message, still true?
Thanx Friday, October 02, 2009 2:16:00 AM
Thank you very much! I was just wondering which would be better for website templates. Now I don't have to try and learn both to compare! I really appreciate it.
-Adad64 Monday, October 19, 2009 5:20:00 PM
Nice, thank you :) Sunday, December 06, 2009 5:44:00 PM
Thank you Tim for this article, I have been teaching Webdesign using Fireworks for about 4 years and the more I teach the more I like the tool, I've always received comments on "why don't you switch to Ilustrator?" but despite I refused to do it I start to learn ilustrator just to find the some dificulties as mentioned in your review but never did a deep comparison on both app. Your article details all the pros and cons in very gret way, so I can reinforce my opinion using your profesional expertise and research.
Thanks again.
"Let's make our part to keep the planet a good place". Tuesday, January 26, 2010 9:53:00 AM
Having been a long time user of Fireworks I haven't failed to notice that it has ended up as the runt of Adobe's litter. This is very disappointing as I love the ease of use of Fireworks and it does everything I need as a web designer.
But I feel that sticking with Fireworks is going to render me unemployable eventually.
Surely the flexibility of working in vectors lends itself to illustrator being the web designers app of choice?
But as you have discovered, illustrator just doesn't cut it for web design.
Most web designers seem to be now using Photoshop for their web design work and I am curious as to why. Maybe it is simply because of the influx of print designers into the web business and they are sticking with their tool of choice?
But I have always felt that Photoshop, as a bitmap editor, doesn't really work for web page design - it is so much easier to react to a client's propensity to want to resize things at the 11th hour when working in vectors.
Unfortunately when/if Adobe ditches Fireworks, then we'll be forced down the Photoshop or illustrator route and neither is as right for the job as Fireworks. Wednesday, January 27, 2010 8:08:00 AM
Both programs are excellent and according to the project I decide which to use. I prefer to use photoshop for the photographic treatment and Ilustrator for the subject of vectors. Wednesday, February 10, 2010 7:11:00 AM
Its such a great post...
thanks a lot Sunday, February 28, 2010 11:20:00 PM
Thanks to everyone who has read this article and for the postive and insightful comments you have left. I appreciate knowing there are many others who have read this post and for whom it has been helpful.
Commenting will be now closed as this blog is powered by Blogger, which will be ending its FTP-based blogging service as of today. If you would like to see more of my work, you can visit my business website at StemPixel.com.
Thanks again, Tim Saturday, May 01, 2010 10:01:00 AM
Post a Comment