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

1...2...3....Go!

img-01.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
img-03.png 
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
img-07.png 
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 
img-10.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 

Headings

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
img-12.png 
And a slogan
img-13.png
img-14.png 
Create a new group and call it "menu". Create your menu text
img-15.png 
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 ..
img-18.png 
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 ...


Beginning Yii ...

I'm very excited about a new Yii Training course that has just been published.

The course is designed for anyone wanting to learn Yii, whether new to frameworks or converting from another.

Eight chapters, each having five videos of between 3 and 5 minutes, take you through the basics of the Yii Framework, building a web application step-by-step.

Save 40% - introductory offer $20.99 / £13.19 / €16.19 / A$20.99

Leave a Comment

twitterfacebookgooglelinkedin https://me.yahoo.com