10 Reasons why I prefer Fireworks CS4 to Photoshop for Web Design

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.

  • http://minute44.com Dan

    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.

  • Zac

    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!

    • alex morris

      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.

  • http://www.dusteddesign.com/blog Matt King

    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.

  • Dennis

    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.

    • http://www.yesyes.dk Henrik Juhl

      Hi Leigh! Great article first of all. I love to read about other FW-users. I’ve done 10 websites in Fireworks so far, but I have a tendency to fall back to Photoshop – mainly because I feel alone with that product. There’s simply a lack of resources out there – especially for people working professionally with webdesign and GUI. We really need a blog that’s concentrated around FW and its many wonders/buggies. I’m considering starting a blog with my experiences, links and frustrations…

      Meanwhile, perhaps you all could share your favorite plugins, panels and resources?

      Thanks and stay sexy!
      /H

  • http://neutroncreations.com Ben Bodien

    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.

  • http://www.abeontech.com Abe

    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.

  • http://www.stylecandy.com/ Gareth

    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.

  • James

    Nice article, I have never really used Firework for webdesign, maybe I’ll give it a shot

    • Anne

      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.

    • Phil

      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.

  • http://www.boborchard.com Bob Orchard

    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.

  • Ben

    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.

  • http://jayphen.com Jayphen

    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.

  • http://www.designfromwithin.com ThaClown

    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.

  • http://deanbarker.co.uk dudiedood

    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.

  • http://www.kamikazemusic.com Dave Sparks

    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?

  • Dax

    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.

  • http://www.thecomplexmedia.com/ theComplex

    Great article and comparisons. I don’t know that I’m convinced to switch but now I know what my options are. Thanks!

  • http://www.bebop-cafe.com BebopDesigner

    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

  • http://frankyaguilar.com Franky

    I just build everything using code. Then add graphics later… :/

    Maybe im the one doing this wrong.

    FLASH IS KINGGGGGG!!!!!

  • http://www.johntayloronline.co.uk John

    “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.

  • http://twitter.com/andrewdavidfox Andy Fox

    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!

  • Mat

    Love love love Fireworks and have never understood why people used Photoshop. Of course, maybe I was just indoctrinated early in the Macromedia days.

  • http://DeviMultimedia.com Devi

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

  • Ash

    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”.

  • http://www.futurekode.com Mark

    Hello,

    nice article. I’ve been using Fireworks for about 6 months and I like it alot!

    Thanks

  • http://elev8r.com Jafar

    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!

    • http://blogs.adobe.com/sarthak Sarthak Singhal

      Paul,

      A very neat and clean description of things which sets Fireworks apart from PS for the web work.

      We hear the niggles.

      ..Sarthak

  • http://www.sharkattack.co.uk Rick Lecoat

    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?

  • http://awayback.com Amrinder Sandhu

    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.

  • http://www.iswitch.org Joao Carvalhinho

    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…

  • http://www.dantrachtman.com Dan Trachtman

    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.

  • http://www.e11world.com e11world

    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.

  • http://blacksmoke.fi.st/ Junaid Atari

    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. :(

  • http://www.hg2media.com Heidy Gomez

    That’s why Fireworks is my #1 software for web design. I use photoshop mostly for pictures/images editing…(Photoshop name says it) {photo} =)

  • http://www.hotcustard.co.uk Hot Custard

    Great article, After just 3 days i was finding fireworks faster than photoshop (with 10 years experience). Not sure i agree about the snobbery, If you know your tool is more appropriate you can be smug yourself. Having the vectors on tap i find im using them far more and getting better results in return.

  • KevinM

    I started as a Photoshop designer and never thought I would switch to another design program until I gave Fireworks a try. After about a week I never wanted to go back to Photoshop. The vector tools are far above anything in Photoshop, the selection tools, gradients, text tools, ease of use, slicing, layers, frames, pages, and most importantly——speed. I cut my design time literally in half partly because the tools require far less clicking around with fewer key combinations. I know about the snob factor but do NOT let that stop you, this program is serious kickazz!

    • http://hg2media.com Heidy`

      The same thing happened to me! lol

  • Mario

    Thank you for this post, you are perfectly right. For me the biggest reason to switch (as a designer) is the simple fact that you can select stuff just by clicking on them on the stage and actually a bigger reason still, the ability to input exact pixel dimensions for any object. And of course lots more.

    They made PS CS5 more designer friendly but none of the features mentioned in this post – they don’t want to kill Fireworks, obviously.

  • http://chipps.ca Adrian

    Just bought Design Premium CS5 and I have decided to give Fireworks a try for some upcoming projects. I have always been fearful of leaving my comfortable Photoshop world but this article definitely provides some enticing reasons to use Fireworks. Symbols and Master Pages sound like a dream!

  • ahilal

    I use Fireworks for its simplicity. It’s not as powerful overall as Photoshop, in my opinion. But it makes a great range of web design functions available with more ease than Photoshop. I’m a web product manager and Fireworks is an efficient and fast tool for building mockups. It’s not what I would use to create a site skin from the ground up, or to produce a really slick looking button. But for building mockups it’s great. The library/symbol capabilities are fantastic. Templatize your work. And the 1 thing that makes me insane with Photoshop? Draw a box. Now deselect it. Now select it again. Selecting something is way too hard in Photoshop. Fireworks is way more tactile – point and click.

  • http://www.radutanasescu.ro/ Radu Tanasescu

    I started working with Fireworks and until recently never tried to make a web page design in Photoshop. Maybe it’s my lack of experience with Photoshop but while I find it useful in editing bitmaps it takes me about twice the time it would take in Fireworks to create a web page design in it. No to mention it’s a lot harder to work with slices too.

  • Darren

    I’m trying to switch from Photoshop to Fireworks right now. The first thing I tried to do was edit the A\V tracking to alter the space between words. Apparently in Fireworks you have to double click to select the blank space then add tracking to it. In Photoshop you just click at the end of the word then add tracking. This tiny difference adds like 10 minutes of messing around. I’m thinking that every little process may have this kind of subtle difference that will just make swapping over way to painful.

  • Alex

    Great article.

    The masking thing is actually quite powerful, but it took me a long time to work out. It’s not super-intuitive.

    FW has been my main graphics editor for about 6-7 years now, but it does take a while to tune into the best approach to take with it.

    If you’ve used Illustrator for a long time, you tend to understand images as ‘collections of thousands of blended shapes’.

    With Fireworks, you start to overlap copies of the same shape, with different filters and channels. Each copy brings some extra shadow or depth or texture, and they all combine into a seamless whole.

    It takes a little while to be able to see an image in those terms.

  • http://www.louisvuittonhouse.com/ lv

    If you’ve used Illustrator for a long time, you tend to understand images as ‘collections of thousands of blended shapes’

  • basedrop

    In photoshop:
    1. You can create multiple pages from one document using a combination of layer comps, and groups.
    2. You can group elements using the link layer feature, and or put the elements in the same group folder. You can also select multiple layers and move/edit them as a group.
    3. Photoshop has layer styles that can be copied and applied to multiple layers. To create type styles use the tool preset panel for the type tool, and or select multiple type layers and edit them simultaneously.
    4. You can place vector object in a smart layer, or create editable vector object within photoshop. Your output for the web is rastor, you shouldn’t be designing in vector.
    5. Photoshop has all these vector libraries as well.
    6. Grouping layers is more labor intensive in photoshop, but because of its methodology your work is much more organized.
    7. You got me on the funky gradients.
    8. Generated code is for monkeys.
    9. You’re willing to give up adjustment layers, layer masks, clipping masks, layer styles, layer effects… for non uniform scaling?
    10. Learning curve is in the mind of the beholder. A user should go through tutorials and learn the photoshop features. Instead most of us leave half of the features untouched.

  • http://petraquilitz.com Petra Quilitz

    9 – Wouldn’t recommend doing it this way. Results are not professional. Instead: in Photoshop: Edit/Fill/content aware.

  • http://jamesmansfield.id.au James Mansfield

    Great article Leigh, a very balanced and informative review. It’s certainly given me the impetus to give Fireworks a try.

  • http://www.indianic.com/best-website-design-service.html best website design

    I’ve even used Fireworks for business card and print ad designs too. Easier than working in PS and Illustrator. But I still use Bridge and PS for my RAW photo workflow.

  • http://www.fahdi.tk fahad

    i love fireworks … but its poor in exporting PDF … it flattens everything!!! even text!!! ( but you can still select them though) try it … any suggestions????

  • http://www.scottdot.com scottdot

    This writeup was beautifully insightful. I can’t wait to get my hands on CS5 and try Fireworks again. It’s been years since I’ve used it for any sort of prototyping or web design work. Thanks for the help.

  • http://yellowboxstudio.com Sean Boone

    To be honest I’ve been using Firworks exclusively for everything for the past few years now. I’ve nearly learned 90% of the program but still find my only limitation is file size.

    If my concept I’m working on gets too big… Fireworks crashes. The problem is that the file is getting ‘too big’ too soon. I am running a clean machine with 8GB of memory. Shouldn’t be happening.

    Nonetheless Fireworks outplays Photoshop for web & branding design in too many areas to go back to the big and bulky Photoshop.

  • http://n/a Vegas Designer

    Darn photoshop for being so dam good!

  • Ivan

    Should we talk about changing corners’ radius of a given rectangle in Fireworks, a 2-second operation (both in pixels and percentage!), vs. the nightmare of this trivial operation in Photoshop?
    Or should we talk about those pretty nice extensions that over-improve gradient manipulation in Fireworks (“Fill Handles Assistant” and “Gradient Panel”?

  • http://www.42nd-works.com/www Collins

    This was a very good article, I found it quite informative!

    Also, as far as snobbery is concerned; I feel that if you want my services, I can use what program I want.

  • David Greenwell

    I’ve flipped to and from Fireworks, Photoshop and, recently, Illustrator for designing web pages (I’m a print-based graphic designer) and have never really found one that is perfect… they all have “sticking points”.
    To me, the sticking point with Fireworks is text formatting/editing (call it what you want… I’m talking mainly about tracking/kerning/leading/etc).
    I know Fireworks allows you to do all of this stuff but it just feels so clunky (that’s my print background coming through… InDesign is just perfect with all this stuff).
    Shame really because apart from that, Fireworks is pretty damn good!

    • Mike Nottebrock

      Well, the point is, that Fireworks is intended to be used for web/screen applications – and NOT (primarily) for print. Typography doesn’t play that big of a role in such an environment yet. The major problem, that’s adressed here is that most designers still stick to Photoshop (the kinda-workin-yet-inefficient-tool) for wireframes, screendesigns and mockups.

  • http://twitter.com/danitabecker Danita Becker

    Great article :) I just purchased CS5 and was wondering what Fireworks has to offer. Your rundown answered the question for me and now I’m eager to try a more efficient method of site comping;  Photoshop gets the job done but can get very cumbersome for a site with multiple templates.

  • http://www.facebook.com/robin.rowell1 Robin Rowell

    I like the styles aspect but if I am building a prototype where I have a text object filled with paragraph text as well as my headings or list items how can I apply styles to just the text that I have selected within that text object?  Phew.. run-on sentence…

  • Anonymous

    “Your output for the web is rastor, you shouldn’t be designing in vector.”
    Could not disagree more! You should use vector. You are designing for layout, and this is what vector is wonderful for. Luckily, in Fireworks, you still get raster tools, so you aren’t forced to choose between the two.

    Beyond that, Fireworks still focuses on raster output, unlike print vector apps. Everything you see in Fireworks is rendered in output pixel fidelity, even when you zoom in (just like Photoshop.) Many tools and functions in Fireworks revolve around manipulating pixel output for both vector and bitmap.

  • http://twitter.com/Nobbby Nick Hawkes

    Fireworks CS is a fantastic package. I have been using it for designing websites for over 7 years now. It brings together all the usability of Macromedia Freehand with the visual quality of Photoshop (in the main). It seems quicker, crisper and more responsive and just more intuitive to design websites in than Photoshop – once you get your head around the functionality. However CS4 is complete pap. The memory problems are too many to mention and I have lost hours of work using this crashing version. Adobe really just need to give us all a free upgrade the CS5.

  • http://twitter.com/KushKloud_ ArizonaBreeZe

    didnt even get past point 4 and had to say thanks

  • Dustin Guinee

    Been using Photoshop to design websites for years now and this article is getting me to rethink my approach. For some reason I’ve always steered away from Fireworks, I guess cause deep down I’ve just been a PS snob. But when it comes to setting up master pages and styles, which are such an integral part of a solid web design, Fireworks makes a lot of sense. More sense than using Indesign for web layouts which I know a lot of designers do as well. Thanks for the concise write up. My next project I start today will be in Fireworks, we’ll see how it goes. It’s about time I jump into the app whether I make it my default web design app or not.

    • Blake Reynolds

      I feel the same way, I have always been a PS Snob, can’t say I haven’t been loyal to Photoshop, been using it since Elements 7! – I have used Fireworks once or twice (literally once or twice) for web design, and I am re-thinking my approach to Fireworks and how it offers a much better experience when designing for the web than what Photoshop does. I wouldn’t completely switch though, as there will be things in Photoshop which I wouldn’t be able to do in Fireworks and vice versa.

    • http://www.facebook.com/people/Julious-Loa/515758071 Julious Loa

      i’ve been using fireworks since the 8 version and i think u should definitely try it out.
      i think the ‘core’ ui principles are way better than ps’, especially when working with vectors.

  • Mircea Gutu

    The Top-Reason, or Top-Difference is still missing in your article, beeing only slightly touched by your number 4: 

    In Illustrator you edit vectors and see vectors. 
    In Photoshop you edit pixels and see pixels.
    In Fireworks you edit vectors and see pixels.
    Of course you can do this in Ps too, but that is very circumstantial.

  • algerts

    Why fix what’s not broken? Fireworks is a Macromedia left-over which Adobe has been trying to bring back to life in their latest CS releases. There is absolutely nothing Fireworks can do that Photoshop can’t and the same can’t be said vice-versa. So why complicate things?

  • http://www.facebook.com/ykesan Luis Alberto Camacho

    Hello friend Leigh Howells, I’m from Colombia, Latin America and the column I am very pleased that you have created, I thought no one would do in my country graphic design work has many variations and although more than 80 percent of the designers of my country, choose tools like Corel Draw and Illustrator for vectorization and Photoshop for finishing and editing photos, I keep myself in Fireworks, and my five years working and comparing these tools Fireworks show. I am sure that no program better than Adobe Fireworks, I compared several times with Photoshop and when work is much more dynamic Fireworks.

    like vectorization in Adobe Fireworks, is much broader and gradable with tools that they Fireworks Illustrator or Corel Draw together.

    So I’m definitely with Adobe Fireworks, and I’m glad to know the reasons why you’ve chosen this great design tool.

    So support your spine and here you will find a colleague who works strictly with Adobe Fireworks.

  • http://twitter.com/_colourspace Tristan Duncan

    The old PS vs FW argument again?
    Graphic Designers used to argue about which brand of marker or adhesive or matt was best. The answer was, and is still the same; the best tool for the job is the one you like the best. It is your job as a designer to have a bunch of tools that you know inside and out, you know what tool works best for you for different purposes.
    What’s wrong with using Fireworks for some jobs AND Photoshop for others. Or maybe go straight to the browser. It depends on the individual project needs and your knowledge and capabilities of your tools.
    Software is a tool people, there’s no defintive “best” choice. it comes down to the operator.
    I’m a die hard Photoshop man, but that’s just me, I have already solved most of the problems you have with photoshop in my day to day workflow. but I know it’s limitations and will use other things if the job calls for it. But I certainly don’t think my way of working is suited to everyone, and I wouldn’t try to claim it was “the best” way of doing things.
    Play with everything, experiment, learn and choose your tools :)

  • zoranvedek

    I prefer notepad myself, when it comes to building websites, but you guys go ahead and argue over these two all you want. I have never understood why anyone would need anything more. If you actually know how to write the code involved then placing graphics is a breeze using simple CSS and HTML, and not only that, you can go back and change the code anytime you want without having to open a program that will probably be completely outdated by the time HTML5 and CSS3 are fully implemented.

  • Tiago Farmer Reis Maia

    I was a I Fireworks user since MX – using it in tandem with Flash – favouring Illustrator for vector work and Photoshop for image editing. I was quite surprised when I moved to London and found everyone across the industry using Photoshop almost exclusively. Working for a big agency for the first time I had to conform to the team’s practices and adapt to designing in Photoshop, but I’ve never been happy with it, for all the reasons you mention in this article and more (back then, to select a text layer in photoshop, you had to click on a pixel with actual type in it. You couldn’t select by clicking the inside of an “o”. Good luck selecting that layer with only a full stop in it.)

    As for the snobbery, having made the opposite switch, I’ve always felt using Photoshop for webpage layout tasks was unprofessional and amateuristic.

  • David Greenwell

    I’ve flipped to and from Fireworks, Photoshop and, recently, Illustrator for designing web pages (I’m a print-based graphic designer) and have never really found one that is perfect… they all have “sticking points”.
    To me, the sticking point with Fireworks is text formatting/editing (call it what you want… I’m talking mainly about tracking/kerning/leading/etc).
    I know Fireworks allows you to do all of this stuff but it just feels so clunky (that’s my print background coming through… InDesign is just perfect with all this stuff).
    Shame really because apart from that, Fireworks is pretty damn good!

Headscape

Boagworld