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. orange.png



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 img-02.png 
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: img-04.png 
Place it below the photo. Create two similar rounded rectangles around 470x380 px and position side by side below the main rectangle img-05.png 
Create a rectangle to fit over the top of one of the smaller rectangles from above and use the fill as follows img-06.png 
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% img-08.png 
Create another rounded rectangle about half the height of the previous one, fill it with white and set transparency to 20% img-09.png 
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% img-11.png 
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
. img-16.png 
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) img-17.png 
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. img-19.png

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

Jumpstart Yii2 ... Coming Soon!

I'm in the process of planning a new course on Yii2 and want your feedback.

What is your preferred format? What did you think of my Yii 1.x video course "Beginning Yii"?

What would you like to see different?

How much would you pay?

Leave a Comment