Part 1 – Preparation
(1) Discuss the requirement with client
(2) Submit a design document to the client for them to fill out.
(3) On your PC create the file structure for the new site. (see Photo)
(3) Based on discussions and the returned Web design document, create the fluid “Site Design Document”. This is a design document detailing all information concerning the site. It acts as the top document and is issues and updated as required through out the development of the site.
(4) Using Adobe Fireworks design a mockup of the home page and submit it to the client for approval.
(5) Once approved Edit the Fireworks design to reflect the accurate final mockup. Attention to slicing, positioning, colours and text must be given such that its components (slices) can be utilised in the final site. Slicing must be appropite for final site assets (make sure images are named and optimised. (see Photo)

(6) Export individual slices to the sites image folder ready for use in Dreamweaver.
(7) Sketch a layout diagram of layout slices and text areas.  Note the areas sizes.  This will help when you start creating the layout Div’s in Dreamweaver.

You now have the web design layout designed and approved. The graphic elements have been sliced up and imported in to the sites image file ready for uploading.

This tutorial assumes you have already created a web page with navigation.
- Open the Page Panel and right click on your page. Then select “Set as Master Page”.
- Click on each nav button in turn and set the link in the Properties pane (index.html)
- Right click on the Master Page in the pages panel and select Duplicat. Then name it.
- Repeat for all pages.
- Export as “HTML and Images” set the following properties. Unselect : “current page only”, Select : “images in subfolder”, “include areas without slices”
- You now have a working site with working navigation.
- Go back into Fireworks and edit each page to your likeing

The Firefox web browser can be a superb tool for web designers.  A number of add ons are available to allow sites to be analaysed and coding techniques tested.  No good web designer should be without it.  Here is a list of must have add ons :

Firebug : Link
FireFTP : Link
YSlow : Link
ColorZilla : Link
Abduction : Link
Webdeveloper : Link

Keep up to date use RSS feeds

Swatches
Once a swatch is assigned, it will always load unless removed.

To assign a colour from the swatch panel

1. Open a canvas and place a shape on it.
2. Ensure the swatch panle is open Windows/Swatches.
3. In the properties panel either select its fill or outline
4. Now pick desired colour from the swatch panel.

Assigning and Loading Swatches

1. In the swatch panel select Options.
2. From here other swatch groups can be loaded. The default in “Color Cubes”
3. Imported swatch groups are usuall .act or .gif type
4. To add a colour to the swatches use the “eye dropper” tool to select the colour then click on an empty slot in the swatch panel.
5. To replace a swatch hold the Shift key down when dropping a colour on to it.
6. To remove the Swatch click control and click on swatch.

Adobe Kuler
Kuler is a color tool accessible either directly on their web site at kuler.adobe.com or from within Fireworks CS4 Windows/Extensions/Kuler. Once registered with Kuler you are able to create your own swatches or download from the library.

Using the Fireworks tool find a theme you like by clicking on the Browse button. Then select “add selected theme to swatch. If you want to create your own , click on the Create button.

These notes can be printed

A full screen HD video of this tutorial is available Here or click within the video box

Video of the Wacom Tablet

Marquee and Oval Tools
These tools allow you to create a selection. Then you can apply things to that selection.

Lasso Tool
With this tool you are able to make a free hand selection.

Magic Wand
This will select areas automatically based on pixel colors

Pencil and Paint Brush
Permanent Markers

Rubber Stamp
Use the ALT key to select sample point. Then apply.

Selections
When you have made a selection, you can then use the Magic Wand tool to add to this by holding down the Shift Key.  You can also use the Lasso tool to add selections.  Alternativly hold down the ALT key to remove selections.  To smooth out your selection then set smooth out to 2 in Select/Smooth Marque.

To convert the selection to a vector Select  ”Convert Marque to Path”
To save the bitmap selection Select “Save Bitmap selection”. To recall the selection Select “Restore Bitmap Selection”.

Drawing Tools
When editing a Photo its wise to create a new layer for the drawing so as not to loose the original copy.

Replace Colour Tool
First set up the properties for it to either replace an image or swatch selection to a swatch.  This tool is great for changing out colors.

Level Filters
Select your image and then Filters/Levels.  The adjustemts will be applied to the whole image. If you want to apply to only an area then first select the area using the Wand or Lasso tool. Then from the upper menu select Filter/Adjust Colors/Levels.  In this area you can also blur.

Masking one Image on Another
This method allows you to let a bottom image show through into a top image.  It uses a black/white mask to represent opaque/transparent areas.   Normally a Black/White gradient is used as the mask to create a fade in/out of the lower photo.

1. Create two layers with a photo on each. The top image will be the mask. Meaning the black areas of this photo will allow the lower photo to show through.
2. Select both photo’s
3. From top menu select Modify/Mask/Group as Mask.

Creating bitmap masks with a Montage

1. Put a backgrounf photo on your background layer.
2. Put another Photo on a layer above.
3. Repeat (2) for other montage images.
4. Select each photo in turn and select the area you want viewable.  Then click on “Add Mask” in the layers panel.  The photo will now crop to the selection.
5. Repeat for all images in montage.
6. Select all photos and apply border effects using Filters/Photoshop Live Effects in the properties panel.
7. Individually select and position each photo for your montage layout.
8. Remember you can still select what you see of each photo by selecting it and dragging the mask centre point.

How to Convert Bitmaps to Vectors

1. Use the Magic Wand tool to select an area. Adjust the tolerance to improve the selection. Use Shift and Alt to either Add or Remove to the selection.
2. The Lasso tool can also be used in the same way to add and remove to the selection.
3. You can save the selection using Select/Save Bitmap Selection.
4. You can convert the selection to a Vector using Select/Convert Marquee to Path.