Create a Photoshop style web design using Fireworks 8

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 470x380 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.

Did you know you can hire me?

I take on projects of all sizes. From Consulting to large Development Projects.

If you're starting a new Yii project and would like some help to get setup and running or you need some help with a particular module or you just need someone to develop the whole dang thing, then just ask ...

Leave a Comment