When I started working in the company I currently work for, they used Macromedia Fireworks for setting up webpage designs. I thought it looked like a hassle, and had always used Adobe Photoshop for it. As I learned more and more of Fireworks, there was no way back to Photoshop. Photoshop has been for photos after this.

Fireworks (obviously Adobe Fireworks now) is quite simply a breeze to work with. Currently in version CS4 I thought I’d share the reasons as to why it’s so simple to set up something to work with, and change it later. Maybe someone still using Photoshop for setting up designs will see the light.

Advantages

Compared to the main competition, which is Adobe Photoshop, here’s a very small list of some of the best things. Let it be noted that with CS4 many features are shared between Photoshop and Fireworks which wasn’t like this before. I haven’t looked much at Photoshop in CS4 version yet, so I can’t comment on that yet.

• The vector tools that can be used for boxes or anything else are quite simply supersmooth and fast, while also being more flexible than anything you can do the same thing with in Photoshop.
• All filters and effects + changes you make in properties can be easily changed later. And it’s all very fast also while previewing. So going back and changing a glow or drop-shadow on a box for the content would be very fast.
• Exporting something to for instance PNG32 with alpha layer for transparent shadows can be done both with intelligent web slices of the page, or by just copying the object into a new object and choosing Save for web. The save for web is also more optimized for Fireworks CS4 so that it gets even smaller files with the same quality.
• Much more, which I’ll write about in another article.

Getting started

You can get a trial of Fireworks CS4 at Adobe.com. Download, install, open it, and make a new file, for instance with the settings pictured below.

Details for new document

Creating a page background

This is really simple, if you look at the left menu, there’s a Vector section, choose the square icon here as in the picture, and drag a square from the top-left corner to the bottom-right.

Make a square object

Set the colors for the background

For this background we’d like a grey to white gradient. This is controlled by the properties for the object, so if you haven’t done already, choose the arrow tool and click the square object. In the dropdown to the right of the red circle I’ve marked in the picture, choose the Linear gradient. In the red circle, set the two colors (two square markers, one for each color). The blue marking in the picture sets the gradient distance, this is the end-point of the gradient, play with it to see how you want it. You can also move the other end of the gradient if you want it to go in another direction.

Set the color details (click for big version)

Making the content background

Now choose the square tool again. Make another big square, the size of your content, for instance 950×600. Choose the color as solid and pick white. Then select the square with the arrow tool, look at my picture and see where I have clicked to get the filter and glow tool. We will use this to make a nice shadow around the content background.

Make a square and add a glow filter (click for big version)

Setting glow details

Set the glow settings as I’ve done in the screenshot. Border 1, softness 6 and opacity 10% should do it. Color can be full black so #000000.

Set the glow settings (click for big version)

Finishing up

Make another square with some linear gradient for your menu and slap in a logo and some text, voila, you’ve got yourself a good starting point for a design. Hope this helps someone consider using Fireworks. If you’ve got questions feel free to comment. I might show some more advanced tips later. You gotta try this to see how easy it really is with Fireworks.