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

by Steve Jaggard, Founder
26th Oct 2009 - 4 min 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

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

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

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.