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.
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 . 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 and the Pen Tool . Look at the example below, you will see how you can step-by-step create a uniform curve
- Step 1: Click on rectangle and select one of its points using the Subselection Tool . While selecting the point Fireworks might tell you that the object is going to be ungrouped, click ok.
- Step 2: Using the Pen Tool place a point on the bottom line of the rectangle (approximate center) and without releasing the point drag your mouse (click+drag). The curve handles of the point will appear. Release the click.
- Step 3: To adjust the curve, just click the point just created and adjust the curve by clicking and dragging either of the curve handle.
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
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
Create the site name text:
Click the 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:
Create The Text