26/10/2009

The features that make Fireworks the application of choice for web designers

by Steve Jaggard, Founder 5 minute read

Amongst the web design community there is an ongoing debate over the relative merits of Photoshop and Fireworks for creating web graphics and mock-ups. There shouldn’t be – Fireworks is king. There, I said it.

Fireworks has been built from the ground up as a web publishing tool. Photoshop has been built from the ground up as photo manipulation tool. Simple as that.

I’m not knocking the power of photoshop for image manipulation – I’d never do a cutout in Fireworks for example. However, if you’re designing websites of more than about five pages the difference in the efficiency of the relative work flows is enormous.

There are many reasons why Fireworks is a more powerful tool for creating web mock-ups than Photoshop. I’ll try to summarise the most significant here:

Pages, Frames & Layers

Whilst Photoshop allows you to work only in layers, Fireworks (from CS3 onwards) allows you to create multiple web pages within a single png file. Each of these pages will have its own set of layers and additionally can have any number of frames (great for rollover states – more on these later).

Master pages

To streamline workflow on site-wide features (eg top nav) Fireworks allows you to create master pages. Any changes/amends can then be implemented across all pages in the png, a lovely.

Pixel perfect positioning and sizing

Much like the measurements panels/toolbar in Quark and InDesign, Fireworks’ ‘Properties panel’ allows you to place and size objects with pixel precision. No more guess work when working with grid systems or maintaining consistency generally.

Symbols

symbolspanel

What would you do if your lovingly created buttton (which appears 30 times across 15 different pages) is rejected by the client on the basis that the text should be in Georgia rather than Arial? Do your curse the fact the your next hour will be spent changing all the buttons on the mock-ups, or do you rejoice in the fact that you created them as a symbol and can make the change with a couple of clicks of the mouse?

Rapid slicing

Select object, Shift+alt+p, done.

Clickable Prototypes

Its really easy to export the pages within the png as html. This is where the slices and frames come in very handy. In the ‘Properties’ pane’ you can give make the slice a link, either to an external url, or more importantly for prototyping, to another page within the png.

Now all you need to do is export to ‘html and images’ and hey presto, clickable prototypes.

What’s more, with the ‘Behaviors’ panel you can add rollover effects using the rollover states in the other frames you created earlier.

Paste attributes

A simple, hidden gem of a feature that will increase your workflow. it allows you to quickly copy styles (text, gradients etc) from one object to another.

Select the item (eg vector shape with a gradient applied) and hit command+c. Then select the object you want to apply the style to (the gradient) and hit shift+alt+command+v.

Common Library

commonlibrary

Fireworks has a library of commonly used interface elements, such as radio buttons, check boxes and drop downs for rapid use in mock-ups. You can add your own elements here to further speed up your workflow.

Stroke control

stroke

Settle down at the back. Control over paths and strokes is a major strong point of Fireworks. Not convinced? Then open Photoshop and try making a one pixel weight path, 750 pixels long, colour it # 333333 and place it at x 340px and y 500px – shall I put the kettle on?

Select behind

Anyone who has spent time trawling through the layers panel looking for that layer will love this tool.

Brought to you by John at Further search marketing.

Colin / 9 years ago

Fireworks sounds pretty good, I've never investigated it before. Photoshop has Select Behind though, ctrl + click with Move Tool (or probably right click if you've more than 1 mouse button).
Chris / 9 years ago

We were only having a discussion about Fireworks in the pub on Friday night after work...
I never really saw any benefits to using Fireworks over Photoshop - but I guess it's just what your used to for efficient workflow. I'd happily be shown otherwise!
Might just check it out.
Lee Powell / 9 years ago

As a front-end developer, I prefer to receive designs built with Fireworks. The application makes the process much quicker to deconstruct designs and build from. Photoshop is quite simply a pain to work with from this perspective.
Rick / 9 years ago

John, you are right on the money. For web design nothing touches Fireworks. It is so good that Adobe killed ImageReady, which was a distant second in capabilities. The seamless movement between vector and raster capabilities alone make Fireworks the right choice. A hell of a lot easier than working between Illustrator and Photoshop to get the job done. All of the capabilities in one app. Masking in Fireworks is a much quicker process as well. Don't get me wrong. I would never use Fireworks to do complex image editing or for print work...Photoshop is still the ultimate image editor. But for web design, make mine Fireworks.
Mark H / 9 years ago

I used to use it quite a bit for making rollovers back in the days of web 1.0. It's all done with CSS now ;)
Derek / 9 years ago

I've never seriously considered Fireworks for my web layout. I've been stuck with the notion that Fireworks - my only experience w it years (and years) old - was a lesser ripoff on Photoshop.

Some of those reasons are making me rethink. I should give it another shot.

Thanks!
Michel / 9 years ago

Excellent article, John!

You have covered most of Fireworks's strong points and specific features that make it so useful in design for Web/screen!

I've been using Fireworks for 5+ years now and I cannot imagine my Web design workflow without it... I use Ps only when I have no other choice;)
Clavel Macias / 9 years ago

I am using Fireworks since it's first version, that is the first true article I saw about why Fireworks is better than PS for web design.
Jim Babbage / 9 years ago

Great article, John! Nice to see someone extolling the virtues of FIreworks. I've been using it since version 1 for web and screen design and can't do without it.
web design uk / 6 years ago

Thanks to a brilliant effort in publishing your article. One can be more informative as this. There are many things I can know only after reading your wonderful article......