10 Reasons why I prefer Fireworks CS4 to Photoshop for Web Design
Posted in Design on: Tuesday, September 29, 2009 by Leigh Howells
Leigh Howells (a designer at Headscape) shares why he has decided to make the transition from Photoshop to Fireworks.
I have been a Photoshop user for over sixteen years, ten of which have been in a production web design environment. I’ve got used to the way it works. I’m used to its feature set and how it does what it does. I’ve worked happily within that framework and mostly not digressed unless my requirements have been to design a logo – where a vector illustration package like Illustrator has come into its own. More recently, however, I’ve begun to feel like I’m actually using the wrong tool for the job, in some ways like using a word-processor to replicate the work of a spreadsheet.
Just after Adobe’s CS4 suite was released, I decided to have another look at Fireworks – a package I had looked at a few times in earlier versions, but repeatedly given up on – each time falling back to Photoshop. I played with it, and I was impressed by a lot of what I was seeing. I persevered with it and started producing much of my my day-to-day work in preference to Photoshop.
1. Multiple Pages (with Master Page)
A Photoshop file consists of a single image with multiple layers. A Fireworks file on the other hand allows multiple pages with multiple layers per page. When working on a multi-page mock-up for a site design, the advantages of having all your assets contained within a single file are enormous. Although having 5 different PSD files may be workable initially, once edits and changes are required, for example changing text in a consistent header or footer, things can soon get messy and time-consuming as changes have to be made across all files. It’s also very nice that each page can be a different size, perfect for the different sizing which is often required between home pages and content pages.
As well as having multiple pages within the Fireworks .png file (the native file format) the powerful Master Page allows you to define consistent template elements which appear across all other pages. This is very powerful for defining a consistent header/footer which appears on each page and only needs to be edited on the Master Page to be updated across the design. A single page can also be detached from the Master Page if there is a unique page requirement.
2. Symbols
Symbols allow you to define an element or group of elements into a single object which can then be used all over your design across all your pages. This symbol can then be edited in a single place and all changes are reflected throughout your document. Imagine a graphic for a bullet icon which is used in many places across the design. To change the colour or shape of the icon within Photoshop may require lengthy manual editing and copying and pasting across multiple files. But with a multi-page Fireworks document using symbols, the change is only required in a single place for all the icons to be changed instantly across the design. This is a very powerful feature enabling design tweaks which may have otherwise been abandoned due to the time and effort involved.
3. Styles
Styles are to Fireworks as a CSS style sheet is to a web page. An items fill, stroke, font and effects can be defined into a style. These styles appear on the styles list and can be applied to other elements in the document. The real power lies in the fact that these styles can be amended and the changed cascading across the multi-page document automatically. Imagine a style of image with a particular border and drop shadow used in many places which you decide would look better with a different border colour and no drop shadow at all. If you have defined this image with your own style a single update will change all instances without all the pain. Like with symbols this can be a huge time saver whilst encouraging design experimentation and consistency.
4. Vector Objects
Fireworks offers the same basic tools as Photoshop for Bitmap editing but also has many extra vector tools. Lots of vector shapes are welcome with many control points for creating stars, polygons and regular shapes. In addition the Autoshapes panel provides a more diverse collection ranging from stick men with moveable bones, to clocks, calendars and title blocks.
My personal favorite or at least the one I have used the most so far, however, is the humble rounded rectangle which has control points for individual corners making a single rounded corner on a rectangle a simple task compared to Photoshop.
I also like the precise pixel control over each of fireworks elements in the Properties toolbar which makes sizing of images and vector objects a breeze to set to required sizes.
5. Libraries
Both symbols, styles and vector shapes can be saved for re-use and collected into useful library resources. In addition Fireworks ships with a common library of useful objects including buttons, browser and application elements for both Mac and Windows look and feel. A number of pre-defined styles are also provided ranging from Chrome and wood styles to more useful line shading and tool-tip styles.
6. Grouping
In more recent versions of Photoshop layer groups have allowed you to virtually group objects together. Though this works well, it requires a certain level of organisation moving individual layers into folders manually. Unfortunately, I have never liked working this way. I like to work quickly as inspiration guides me without having to laboriously put everything into layers and name them. Though the layer group model is still present in Fireworks it allows you to quickly select individual elements and group them together. The necessity to name layers is lessened by the fact they can be directly clicked on as in most vector packages, unlike Photoshop’s right click and ‘guess the layer’ (which didn’t get named!) method.
7. Interactive Gradients
Fireworks’s Interactive gradients are a simple enhancement to what is already available in Photoshop, but the gradient being used has control handles allowing it to be moved and sized within the object. A very simple enhancement but it works well and allows fine control and becomes particularly useful with using rectangular shading styles.
8. Web Layers
The web layer allow you to quickly add hotspot areas and links between the pages in your Fireworks document, or external URLs. Whilst being useful for linking together simple wireframes, it can also be applied to fully designed mockup pages illustrating how a finished site may navigate.
Fireworks’ initial conception was to help designers produce quick web sites with its ability to output html, rollovers and interactivity. All those features are still there and whilst you may not want to use the code it produces for final sites, for outputting your designs as an interactive mockup site, for example, Fireworks does a great job of exporting your images and html.
9. 9-Slice Scaling
This scaling technique can be applied to bitmaps aswell as to vector objects. This allows intelligent scaling as can be seen in the bitmap below; the four lines define vertical and horizonal sections on the image which will scaling areas when the image is resized, leaving the remaining areas untouched. This can be applied to dialogues boxes, headers, scroll bars, anything which you would want to scale, but to scale non-uniformally.
10. Small learning curve
Lots of things are just the same as in Photoshop – lots of keyboard shortcuts, tools palette – windows, toolbars, panel layouts etc. It all mostly feels the same and I have got to grips with it intuitively moving from Photoshop.
In addition to these ten points, Fireworks is also cheaper than Photoshop!
Some things I don’t like so much
Though I love Fireworks so far, I have some niggles. These may be due to my lack of experience, but then if that’s the case maybe my main niggle is the fact they aren’t obviously overcome!
1. Masks
These aren’t quite as intuitive as Photoshop yet. I have always been a big fan of quick masks in Photoshop; i.e.; pressing ALT between 2 layers making the lower layer mask the layer above. Though layer masks are the same, and there is the ability to paste bitmaps within objects using ‘Paste Inside’, these don’t work quite as freely at the moment.
2. Text Anti-aliasing.
I can’t quite put my finger on it, but the anti-aliasing of text isn’t quite as good as Photoshop’s yet. Even thought there is actually more control with the ‘Custom Anti-Alias’ panel – which allows you to edit parameters, sometimes text can look decidedly ropey at smaller sizes without lots of twiddling.
3. Performance
I can’t quite put my finger on this one either, but Fireworks doesn’t feel as solid as Photoshop. Maybe this is familiarity, but I feel like I’m working from within a piece of carved granite whilst inside Photoshop’s windows. I don’t have that feeling with Fireworks yet, but maybe it will come. (I also don’t know how many of the occasional memory problems and crashes have been due to running a pre-release version on Windows 7).
4. Snobbery
This is a terrible reason for not using one piece of software over another. However, I feel it’s very valid and I’m yet to tell a client I will provide them with Fireworks .png files rather than Photoshop PSD files (although multi-layered PSDs can be output directly from Fireworks). Maybe there is a fear your reputation as a designer is at stake if you aren’t using ‘the big and mighty Photoshop’. Maybe you fear you will not be taken as seriously, like in the old days of DTP using Pagemaker instead of Quark, or sequencing music in Cakewalk rather than Cubase or Logic.
Conclusion
To be honest, I’m not 100% happy with either product for web design work. I still prefer and am more comfortable with some of Photoshop’s familiarity, but I’m enticed by all the other features that Fireworks offers to make life easier and production more streamlined.
I guess the conclusion if you own both is obvious; use them in tandem. Use Photoshop for image editing, and more advanced image correction and manipulation, and use Fireworks for layout mockup of complex web sites which may end up with hundreds of layers. Note that with Photoshop installed, Photoshop’s layer filters are directly accessible within Fireworks in addition to Fireworks own filter options (which have all the basics; drop shadows, glows etc. etc.).
I eagerly look forward to future updates to Fireworks and wonder how the two products may diverge further now that they are both under Adobe’s wings. Although I wish they would change the name from Fireworks, to something like ‘Webshop’ as I keep mixing up Fireworks and Firefox both in conversation and launching the wrong application all the time! But maybe that’s just me.
35 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
I love Fireworks. I’ve used it since Macromedia Fireworks MX and can’t see myself stopping in the near future. The reason FW is better for web design work than Photoshop is simple; That’s the job it was specifically written to do. Photoshop is meant to do everything from Diddle Eyed Joe to damned if i know… but FW is for one job, making and optimising graphics for the web and it does that superbly.
Nice article.
Masking… I was actually blog reading just now during a break from the frustration of masking in Fireworks! Seriously, why is this process so convoluted?!? Heaven forbid I have to go back and edit the masked objects/layers that had to be grouped together just so they could be masked…. PLEASE Adobe, let me apply a mask to a layer/sub-layer without having to group them!
masking is ridiculously easy in fireworks – draw a shape (the mask) position the item you want masked over the top cut it – select the mask shape then shift apple V to paste inside.
if you need to move or scale later just select the layer with it on click the link symbol to temporarily unlink the two and bobs your uncle.
Personally I prefer Photoshop, but this is purely down to familiarity with the software. However there is one massive boon for Fireworks that you fail to mention and one that means I use it for exporting web graphics. That is the output of 8-bit PNG files with 8-bit transparency. The only alpha option in Photoshop for an 8-bit PNG is 1-bit transparency. This means that if you want full transparency out of Photoshop you have to use 24-bit mode which can result in massive files.
Hi Leigh, thanks for the post. I’ve made a few unsuccessful attempts to switch over to Fireworks in the past, always reverting quickly back Photoshop because I’m much more familiar and efficient with it. After reading your post, I’m determined to use Fireworks for my next site design. I think that it is easy for designers to get accustomed to working in certain patterns, and those patterns can influence their design, with the danger of unknowingly becoming repetitive. Changing up your tools, or adding some new ones to the arsenal is a good way to approach common tasks with a fresh perspective.
Definitely need to give Fireworks another go, I agree that it’s easier for many common web design tasks, but there are a few Photoshop features you may have missed that make it possible (although painful by comparison to Fireworks) to achieve some of the above in PS:
Layer Comps are fiddly for major projects but for smaller ones they’re a good alternative to one PSD per page. I tend to use them for mocking up different page states. As good for that as Fireworks pages I think.
Symbols – obviously vector artwork is impossible with PS, but Smart Objects will get you some of what you’re looking for with the reusable object that you only need to edit in one place.
Libraries – you can save palettes of gradients, textures, swatches etc to files in PS for re-use (I keep mine in a Dropbox so I have them across machines), although it doesn’t; come with particularly useful starting sets like Fireworks.
Layer linking – again very fiddly but easier than organising things into groups when you want to move objects together. Once you’re hot on the keyboard shortcuts this is a doddle.
All that said, I’m sure Fireworks is still the winner, but for those of us stuck with or insistent upon staying with PS, the above are handy tricks. One thing I want in both these apps is Anti Aliasing settings that let me mimic the AA behaviour of common web browsers.
A very good overview on how much time I could have saved if I had read this sooner!
I’ve never really used Fireworks, but it looks great for web design from your write up.
A few details seem to jump to mind that could save me a lot of time designing my sites.
I am planning on buying Fireworks next week to compare the two for myself.
Thanks for the informative article.
Interesting to see the comparison, Someone I’ve worked with for a while is a die hard Fireworks user and I’ve often had the argument over which is better.
One thing that I thought Fireworks allways had the edge on was font rendering especially on smaller type, its interesting to see that the tables have turned there, this may tempt me to take a look at FW again but at the moment I’m happy with being able to export PSD files so I can use my colleague’s artwork.
Nice article, I have never really used Firework for webdesign, maybe I’ll give it a shot
One other point worth mentioning is that FW is easier to manipulate. You can grab and move layers with such efficiency, it’s almost as though you’re working with your hands. And there’s some satisfaction in the reverse snobbery of using FW over PS.
I’m a big fan of Fireworks. I think there are many improvements with CS4 but there are two things that have stopped me making the full switch over from CS3; font rendering and blurry underlines (I’d love to know if anyone has found a way around this).
Nice article, thanks for sharing your thoughts and experiences.
As a long-time Fireworks user, I’ve come to prefer it over PhotoShop for a couple reasons. One – it does what it was made to do. Whereas some tools are done better in PS, FW integrates a lot of PS effects, tools and options that make the switch easier. Because of the ease of production and slicing of websites – including how simple it is to optimize graphics for the web – I’m able to turn out the same quality work in about 40% less time.
I just purchased a MacBook Pro, upgraded to Snow Leopard, and have the full CS4 Suite at my disposal – but Fireworks is the primary one I use for web design. It easily integrates with the other programs in the suite and provides me with a “Grand Central Station” approach to designing and developing websites.
I do, however, use Photoshop for my photography. I find it more useful in this manner because the adjustments and tools help me do my job better.
The only downside I’ve really seen is the inability to use Photoshop Brushes in Fireworks files. Other than that, Photoshop takes a back seat to Fireworks.
Great article, I might have to give Fireworks another go! Completely agree it needs a name change though, I always say Firefox when I mean Fireworks and vice-versa.
Photoshop contains most of these features already, so I’m still finding it difficult to switch away from a piece of software I’ve been using for almost a decade.
Some of the Fireworks features are obviously more suited to web work (such as multiple pages vs layer comps in Photoshop), however I don’t like the idea of switching between programs to get the job done.
By the way, you can select layers by directly clicking on them in Photoshop. With the select tool active, check ‘Auto select’ in the options at the top left of the application, and from the dropdown, choose ‘Layer’. You can leave auto-select off, and select layers by cmd-clicking on them.
I started working with Adobe@ Fireworks CS4@ (gotta love the “@”:)) about 4 months ago and it really can be a timesaver!
Just finished a big project, a site with over 30 pages. For big projects like that Adobe@ FireWorks@ really is alot better then Adobe@ Photoshop@. You can make one masterpage, with one symbol (including rollover!) for the nav button and use them across all pages.
In Fireworks you can use just one symbol for a button but still change the text that is shown on the button. Combine this with 9-slice scaling (allowing you to stretch the button to fit any text) and you have a very flexible navigation design setup. The client wants the buttons “just a little bigger”? no problem just edit one symbol and all the buttons on all the pages are changed!
So I use Adobe@ FireWorks CS4@ for my bigger web projects, but still love Adobe@ Photoshop CS4@ for image editing and single page designs.
I too was a fw user …..up until CS4. The number of crashes really started to annoy me. I now work in PS but Adobe get it sorted, also the masking.
I love Fireworks and have used it for web design for years. I would agree on the short comings of image masks and I would also lack of support for custom brushes to the mix.
Snobbery is also rife, it still amazes me that people will accept PSD’s for almost anything but not a layered working PNG. Look at template websites for a start, how many of them will let you submit designs from Fireworks?
Thanks for the great article. As someone that is just getting started in web design, I have been hesitating to make the investment to either of these because I wasn’t able to get a clear picture of what each one is specifically for. I’ll be getting FW this week.
Great article and comparisons. I don’t know that I’m convinced to switch but now I know what my options are. Thanks!
This is brilliant! and very convincing. Been working with CS3, I love Fw but there are certain thing that I can only do with Ps.
Think I should get meself the CS4 .
Thanks for such a great post!
Cheers
I just build everything using code. Then add graphics later… :/
Maybe im the one doing this wrong.
FLASH IS KINGGGGGG!!!!!
“I guess the conclusion if you own both is obvious; use them in tandem. Use Photoshop for image editing, and more advanced image correction and manipulation, and use Fireworks for layout mockup of complex web sites which may end up with hundreds of layers.”
That is exactly how i use the two programmes when working on web designs.. using which ever of the two is best suited to the particular task in hand. I do prefer the immediacy of Fireworks when creating layouts and wireframes and the learning curve is easy if you’ve used either Photoshop or Illustrator before.
Interesting write up – I thought I was the only fireworks user left on the planet! I’ve been using Fireworks since Macromedia Fireworks4 but have also used Photoshop for print and photo editing.
For web, Fireworks is so much more intuitive than PS. Direct select speeds the process and although this can also be done in PS, you can’t select multiple objects in PS and change their colour for example or properties such as shadows.
The ability to get clean lines using vector shapes is a huge benefit and at much lower file size. Lines in PS don’t have the pixel perfect crispness needed for web. Slicing and exporting is another obvious benefit as you mention.
Because of the point above, if I have to markup another designers work from Photoshop I often end up bringing it into Fireworks and redoing half the graphics to get the clean lines!
The main downside to using FW is its not industry standard and exporting to PS is not the same as the other way round. Then again, if more web designers used FW as they should it wouldn’t be like that!
Reverse snobbery all the way – I’m a proud Fireworks user!
There was a rumour that Adobe was going to drop Fireworks when CS4 came out so lets keep up the love!
Love love love Fireworks and have never understood why people used Photoshop. Of course, maybe I was just indoctrinated early in the Macromedia days.
Thank you for posting this! I agree 100% and have always promoted this to my peers and students, but very few wanted to give it a try. I will gladly share this. Very well written :)
I’ve always been a fan of Fireworks over Photoshop. When ever people ask me why, I just reply “Use the right tool for the right job”.
Hello,
nice article. I’ve been using Fireworks for about 6 months and I like it alot!
Thanks
I have both, but still love making mockups with Fireworks because making groups and rendering text is quick and fast.
The biggest thing that held fireworks back was the ability to make your own brushes, where as photoshop it’s quick and painless.
However, Photoshop CS4 is far different from using older versions of itself, and has new features like rotating the Rotate View Tool, which is really cool when working with a pen tablet, along with 3D Tools, and the ability to crop and scale without distorting images, photoshop now has way more features. Which isn’t fair because Fireworks is great for visually laying out a website and seeing it on screen.
I can stomach Photoshop because CS4 has a new layout and you can customize the background which you’re working on, where in fireworks youre constrained to gray…
Great Article btw!
I’ve dipped into FW a few times as die-hard pshop user. I can definitely see the advantages to it for web work, but for some reason I find it hard to make the mental jump from PS to FW. Something about the interface and way of working won’t let me get my head around it and bounces me back to familiar ground.
I looked around for a good intro book on Fireworks — sort of a Fireworks for Photoshop Users type thing — and was amazed how little I found. Every other software out there seems to have a dozens of books on the subject, catering to everyone from novices up to hardcore specialists (PS, of course, has hundreds) but FW seems to have been ignored. Anyone have any books to recommend on that score?
Paul,
A very neat and clean description of things which sets Fireworks apart from PS for the web work.
We hear the niggles.
..Sarthak
More designers are inclined towards Photoshop because Adobe is not taking care of Fireworks as it is doing for Photoshop. Fireworks have definite edge over photoshop for web designers (if they try and use it). Rather I would say Photoshop can’t do things faster than Fireworks.
At the end it depends upon once style – fancy graphics or clean designs. Photoshop or Fireworks.
Nice list of features by the way.
There is another advantage on using FW derived of the possibility of using your personal symbol library…
You can build your wireframe objects library and easily throw them on the drawing board to build really fast early stage prototypes just to test the layout of the site… and reuse them everytime…
Sadly, I may have to switch to FW too. I say that because it is clear that it has many features that make web design easier, but it is so primitive in many ways. I just opened a psd in FW and the clipping masks were all messed up as was some of the text. After reading about this, I learned that clipping paths are just one of a number of “differences”. Adjustment layers aren’t supported, multiple alpha channels, etc. Even many of the shortcuts I am used to are gone or different. Adobe really has to get its act together on this app and make it more inline with PS before adding all sorts of extraneous new features.
Ok, this is a good post but the first 3 are basically the same thing with the exception of multiple pages.
No 5 is also similar to photoshop (what version are you using).
Other than that, they are meant for different things and I believe photoshop is best at photo editing and manipulation and fireworks no where near that but at least photoshop is used for many other things as well.
Your are right but what ’bout States, Point Tool, Inline Editing, Object Selecion (front, behind with selection arrow), Extentions, Twist & Fade.
I have more options… FW is better than PS but poorly is say that’ FW is buggiest software. :(