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).
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.
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?
Select object, Shift+alt+p, done.
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.
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.
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.
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?
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.