I’m going to show you my particular workflow for creating a web layout with Adobe Fireworks, and I’m also going to cover the selection tools. When I get started on a new project, I like to have as much open canvas space as possible. Yet it’s also important to keep what’s going to become your finished product at the correct size for the eventual export.

To get started, click File > New to open the New Document Window. Here is where you set the document size and background color. I’m going to leave the discussion on ideal width for a website for a different post, but for our purposes here we’ll be using a relatively wide fixed-width design. So set the width to 940 px, the height to 3000 px or so (think big canvas) and choose a white background color. Make sure your DPI is set to 72, and click ok.

With your new canvas, zoom into 100% using ctrl + and scroll up to the top of the page. Select the rectangle tool from the panel, and draw a rectangle of any height and color that covers the entire canvas (940px, no more and no less). If you need to adjust your rectangle’s size, you have lots of options. For now, just select the rectangle, then select the Scale tool from the tool panel and resize the rectangle as needed.

Now we need to make some more room to work with. Go to Modify > Canvas > Change Size. Change the width to 2000 PX, leave everything else untouched and click “ok”. Make sure your view is still centered on our rectangle.

Now click View > Rulers. Click and hold the mouse button down on the ruler to the left of our rectangle to drag out a guide. Place the guide on the left hand side of the rectangle. Make sure the guide is rubbing right up on the side of our box by zooming in on it with the zoom tool located in the tool panel (zoom back with ctrl+1).

Now just repeat this step for the guide on the right, and delete our handy rectangle. You can change the color of the guides by clicking View > Guides > Edit Guides. I find the green a little distracting sometimes, so go with something a little less noticeable. What you now have are guides centered on a giant canvas awaiting creative input. I’d suggest saving your work at this point, or download the Fireworks PNG file here (Right-click, save as).

Say for example you had a blue box on a white canvas. If the file was a raster file, it would be made up of a series of blue pixels on a white background. A vector file would be made up of four points, four lines that connect the points, and a fill that makes our box blue.

Adobe Photoshop, a raster based photo editing program, wasn’t quite right for what was basically a new visual industry – but that’s what designers flocked to as the web grew in popularity. Since Photoshop works by adding or manipulating images on a pixel by pixel basis, what if a client wanted a particular box larger, or the dimensions of a button different? In Photoshop this would mean changing any number of layers and flat bitmap images.Enter Macromedia Fireworks. Using our example above with Fireworks, we can enlarge our box and change our buttons by simply manipulating the raw shapes, characteristics, fills, and effects that make up each shape in the design. But it gets better! Unlike other vector editing programs like Illustrator, Fireworks also lets you edit raster based images right in the same environment. This allows you to import a photo, manipulate it in a similar fashion to Photoshop, and then treat it like any other object in Fireworks. Once you’re ready you can slice, optimize, and export your images for the web. In addition Fireworks creates and exports animations, batch process images, creates drop down menus that seamlessly snap into Dreamweaver, and tons of other things useful for a web designer.

I’m quite sure I can convince any web professional that Fireworks is an invaluable tool, and if you continue reading I’ll attempt to do just that for you, dear reader.

For a more in depth read on Fireworks, I highly recommend the following read from Stéphane Bergeron at the Adobe Developer Center.

Then continue on to my first tutorial, Setting the Stage: A New Fireworks Document.

I’m using this blog as a way of warming up to writing a book on the use of the program, so please bear with me if my tutorials seems less than well formulated at first. My goal for the book, and in the short term this blog, is to show new users my web design and development process for a new project from beginning to end. From the initial concept development in Fireworks and Photoshop to the complete html/css framework in Dreamweaver. From there who knows, but I already have tons of ideas!