David Slack - Web developer

Fireworks is without doubt my favourite software find of the last few years. It has all the best parts of Photoshop and Illustrater for web designers. It uses vectors to create and it allows you to output in a range of bitmaps, for layout it is an amazing tool.

1. Open Fireworks CS4
2. Click Fireworks Document (PNG) on the right
   • Width = 1200
   • Height = 2000
   • Canvas color = #000000
3. Click OK

Now we have an empty canvas so we'd better start to fill it up, but first lets change the layout. There are many ways to view the tool bars and canvas on Fireworks, I have chosen EXPANDED MODE

1. On the top right next to the search bar hit the pull-down
2. Choose expanded mode

Now to build a layout

1. On the left (under Vector) click Rectangle (it'll say Rectange tool (U) if you mouse over)
2. At the bottom under Properties hit the square next to the paint bucket to choose a colour, choose the grey #999999
3. Draw a square on the black canvas any size and shape as long as it is only on the black
4. Press v on the keyboard (to get the pointer on) and click on the white rectangle
5. On the bottom under Properties change the following:
   • W = 980
   • H = 650
   • X = 110
   • Y = 20
   • Roundnes 20px (use th pull-down to change % to px)
6. Click on the + next to Filters and under 'Shadow and Glow' choose 'Glow'
7. Change the '65%' to '15%' and the red box to black (#000000)
8. Now to change the colour of the canvas to grey. Click the background (black area)
9. Click the black box next to the word Canvas under properties
10. Choose a light Grey (#CCCCCC)
11. Draw a second rectangle:
    • White #FFFFFF
    • W: 980
    • H: 530
    • X: 110
    • Y: 110
12. Download the atached logo and drag it onto your Fireworks document
13. For the properties use:
    • W: 189
    • H: 85
    • X: 120
    • Y: 25
14. Draw another box with the properties:
    • W: 180
    • H: 490
    • X: 890
    • Y: 131
    • Roundness: 15px
    • Colour: #AEDFFF (light blue)
    • Click on the + next to Filters and under 'Shadow and Glow' choose 'Drop Shadow', change '65%' to '30%' (remember thes settings, we use them when I refer to Drop Shadow from now on)
15. The next box has properties of:
    • W: 150
    • H: 200
    • X: 130
    • Y: 130
    • Colour: Black (#000000)
    • Roundness: 15px
    • Dropshadow (see baove for details)
16. The next box has properties of:
    • W: 148
    • H: 155
    • X: 131
    • Y: 260
    • Colour: Grey (#999999)
17. The next box has properties of:
    • W: 101
    • H: 54
    • X: 615
    • Y: 82
    • Colour: Grey (#666666)
    • Roundness: 10px
    • Dropshadow (see baove for details)
18. Now this last box is a tab, but it doesn't look like one yet. Press v on your keyboard (for the pointer tool) and click the latest box to select it. Now press and hold Ctrl on your keboard then tap the down arrow. Keep hold of Ctrl and tap down again. Keep doing this until the laets box gowes 'under' the white box (if it goes under the grey hold Ctrl and press up)
19. Select the 'Text tool' by pressing 't' on your keyboard
20. Click in the middle of your screen
21. Under properties choose 'Times New Roman' as the font 
22. Choose 16 as the size (next to Regular)
23. The colour is grey (#CCCCCC)
24. The B (bold) and I (italic) should be selected
25. Type the word 'Contents' (no speach marks)
26. Press Esc key on your keyboard to stop inputting text
27. Press v to choose the pointer and add these properties
    • W: 64
    • H: 22
    • X: 139
    • Y: 135

You can build up the rest of the design using these techniques, but I've attached the whole design as a png to open in fireworks CS4 if you want to save time.

Now we have a design we will turn it into a we create the website then add the design to it by creating a theme

BUT, before we turn our lovely design into a Theme we want to create the website, for this we will use the Drupal CMS, so read on