Layout Design - Design Your Website Header and Footer in Fireworks:

To see what you will be creating click the link below to open the Fireworks graphic:

Maggie Simpson Website Example

To start with you need to create a new document in Adobe Fireworks CS4 with the dimensions of 900 x 550 pixels, 72 pixels resolution with a canvas color white. Click OK to create the document.

New Document

Design the Header:

For the female characters use the color that is formatted pink and for the male characters use the color formatted blue.

To create a curve for the header select the Rectangle Tool rectangle tool . Draw out a rectangle with the dimensions of 900x139 (width: 900 and height: 139).

Load custom color swatches if they do not appear in the swatches palette (Window > Swatches)

Now select the rectangle set Stroke color as #CC3366 - #2D2DFF (first swatch) and Fill color as #56003D - #330066 (second swatch). Set the Stroke Category to Pixel Soft (Pencil >> 1-Pixel Soft) and the Tip size to 4 pixels.

Now you are going to convert the rectangle to a neat curve using the Subselection Tool subselection tool and the Pen Tool pen tool. Look at the example below, you will see how you can step-by-step create a uniform curve

Now we need to apply a shadow effect to the curve. Click to select the curve. Now on the right side of the properties window, you will find Filters, click over the + symbol and choose Drop Shadow from Shadow and Glow option. Click on the tiny blue circle with "i" next to the Drop Shadow filter (Edit and arrange live filters button) and set the following values for the filter: Opacity – 30%, Softness – 4, Angle – 319, Distance – 3, Color - #000000.

Design the Header

Flash Video

Design the Footer:

To make thins easy we are first going to copy and paste the header.

Now we will transform the copied header both vertically and horizontally to create an identical graphic but has a mirrored effect:

Select the copy of the header. Drag it to the bottom of the document window. Select Modify > Transform > Flip Horizontal then select Modify > Transform > Flip Vertical.

Design the Footer

Flash Video

Create the site name text:

Click the Text tool text tool, choose Font - Edwardian Script ITC, Font Size - 50 (header) & 28 (footer), Color - #FF99CC - #8080CO (third swatch from the left), Font Weight - bold, Anti-aliasing level - Smooth Anti-Alias and write your site name (as you like) on the right hand side of your curve, I used 'Maggie Simpson' as the site name because that is the Simpson character I chose. The image below shows the Properties Window in which you can set the font type, size and color:

Text Properties

Create The Text

Flash Video
Windows Video

Home