I’ve often marvelled at those “air” styled Photoshop web designs and wondered how I could set about re-creating this technique with Fireworks, my preferred web design package. So I thought I would create a layout to demonstrate that Fireworks can be as good as Photoshop for this style of design.
Create a blank page 1000x1000px. Don’t worry about the background colour yet. Import the provided graphic to the left (or use your own) and place it touching the top.
Now change the page background colour, modify->canvas-canvas color and use the dropper to select an appropriate colour from the photo.
To merge the photo out at the bottom, so that the line between it and the background is in distinct, create a rectangle that covers the photo and fill with gradient from white to dark grey (#444444) with a vertical gradient as follows
Select both objects and modify->mask->group as mask
Create a rounded rectangle about 950x230px, set transparency to 50% in the layers dialog and apply the following formatting:
Place it below the photo.
Create two similar rounded rectangles around 470×380 px and position side by side below the main rectangle
Create a rectangle to fit over the top of one of the smaller rectangles from above and use the fill as follows
Duplicate it (Ctrl-Shift-D) and move it across to cover the other rounded rectangle
Create a rounded rectangle 765x55px with gradient fill #6A2A00 to #FF6600 and a 1px border of #FF6600. Place it overlapping the top edge of the top boxand set transparency to 80%
Create another rounded rectangle about half the height of the previous one, fill it with white and set transparency to 20%
Group these two together by Shift-Click both and pressing ctrl-G. Duplicate ctrl-shift-D and move one to the bottom. Resize by using ctrl-t and dragging out to both sides. Double click within the rectangle to finish
Create a new group and call it headings.
Create a rectangle 570x95px, fill with white and set transparency to 10%
Create some text
And a slogan
Create a new group and call it “menu”. Create your menu text
And change the text fill to a gradient by clicking on “fill options” in the colour palette.
Create the vertical bars to go between each menu as follows.
2 vertical lines. The first 2 px wide and grey (note the overlay has been changed rfom normal to lighten)
and the second ..
Group them together (select both and press ctrl-G) and then duplicate as required (ctrl-shift-D) and move using shift–left-arrow or shift-right-arrow, so that they always line up.