Developing the design

Most web pages include a header, a footer, and at least one or two columns. The design in this tutorial follows the current trend toward using a centered, fixed-width layout that includes two columns: one for the main content and another for sidebar material or secondary navigation. Deciding on some basic specs should not inhibit your creativity; in fact, it can enhance it by freeing you from concerns over the basic shell. Deciding on the core layout up front enables you to think in CSS and gives you a head start in deciding how to slice and prepare your design in Fireworks for use in Dreamweaver.

Shapes such as rectangles, squares, circles, and polygons form the core building blocks of all graphics. When you start punching holes in those basic shapes, joining their paths, changing their colors, or even just overlapping them, they start to gel as a creative formation. This tutorial design makes extensive use of this technique. Figure 1 shows a preview of the finished comp for the fictitious company, Blue Skies Design, that this tutorial helps you produce.

Figure 1. Preview of the Blue Skies comp

Creating the canvas

To get started, launch Fireworks and create a new canvas (see Figure 2):

1. Choose File > New.
2. Set the width to 800 pixels, height to 650 pixels, and resolution to 72 pixels/inch.
3. Select the Custom color option and type the hexadecimal code #94C945 in the color picker.

Figure 2. New Document dialog box settings

Developing the page background

A popular convention for the page background is to tile a graphic across the x axis or y axis of the body of the page. This design uses a gradient rectangle with a white border. To create it, draw a rectangle at the top of the canvas and fine-tune it with the following settings in the Property inspector (see Figure 3):

1. Set the width to 800 and height to 195.
2. Position rectangle at X: 0 and Y: 0.
3. Select Linear Gradient with the left color #B8DCE8 and the right color #2A70AE.

4. Switch the gradient to vertical with the darker blue at the top.

   Hint: Use the Gradient tool and hold down the Shift key while dragging.

5. Set the Texture to Swish at 8% with the Transparent option enabled.

Figure 3. Gradient rectangle property settings

Be sure to give each object you create a meaningful name so you can easily recognize each one as the list of objects and layers grows. Name this rectangle Body bg. Figure 4 shows what your work should look like so far.

Figure 4. Big Skies canvas with page background

The last effect to add to the page background is the white border that sits at the bottom:

1. Select the Line tool.
2. Draw a line at the bottom of the gradient rectangle.
3. Open the Property inspector and set the width to 800 pixels and the height to 1 pixel.
4. Position it at X: 0 and Y: 195.
5. Set the stroke to 1-Pixel Hard with the color white.
6. Name this object White border.

This completes the body background image.

Before you go any further, organize these components onto a layer to separate them from the others you will soon create:

1. Click the New/Duplicate Layer button at the bottom of the Layers panel (see Figure 5).

   

   Figure 5. New/Duplicate Layer button

2. Name the new layer Body Background.
3. Drag the white border and Body bg objects to the new layer.

4. Drag the new layer to the bottom of the stacking order (see Figure 6).

   

   Figure 6. Layers stacking order

5. Close the layer by toggling the down arrow so that it points to the right and lock it by clicking the pencil icon. This prevents you from accidentally deleting or changing anything in the layer.

Page 2 of 6

Previous Page

Next Page