For the experienced user here are some clean up tips for Mac OSX

• Reboot while holding Shift Key until blue screen appears (after the grey one). This will re index the computer in safe mode. Reboot when done.
• Clear out all caches and reboot so they can be rebuilt
  • Harddrive/Library/Caches
  • Harddrive/System/library/Caches
  • Harddrive/Users/Your User/Library/Caches
• Repair Hard disk permissions. Go to Finder then HD/Apps/Utilities Disk Utilities. Select drive then “Repair Permissions”
• Defrag hard drive using iDefrag

Safari Cleanups

• Clean out the Safari Cache
• Safari/Preferences/Security/Show Cookies/Remove All
• History/Clear History
• You could enable  Safari/Private Browsing each time
• Ultimately you could use. Safari/Reset Safari

If you are experiencing issues with Aperture, or would merely like to give it a spring clean then here are a few tips. Remember to always backup your system first.

• Delete any pictures you don’t need. Then clear out your Aperture and Mac Trash Bin.
• Split your Aperture library into two. For example I have one Library for Snaps and one for my serious photos. You can do this by creating a new folder called Library 2. Then dragging all your folders for adding into it. Once done right mouse click on it and select Export/Folder as New Library. You now have two library’s which can be opened and renamed in folder view.
• Start your Library in folder view while holding down ALT + CMD. Then select and run the following in turn :

  • Repair Permissions
  • Repair Database
  • Rebuild Database
• Select all photos in Aperture Sidebar. Then from top menu select Photos/Generate Thumbnails.
• Stop multiple copies of thumbnails. Preferences/Advanced-Deselect the bottom box “Create new version when making adjustments”
• Clean up your Mac. See Article “Cleaning up my Mac“

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

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.

Fireworks vector tools are tocated in the left hand tool panel. They produce scaleable art.

The Pen Tool
To create a straight line click and release a start point and an double click to ceate the end point.  To continue the line just single click the points making sure you either double click the last point or close the vector by selecting the last point.  In all cases closing the vector will automatically fill it with any selected fill.

To create curves do not release the click. Instead click and drag. To come off a previous curve point with a straight line reclick on it first. As a guide the drag length usually equals about one third of the curve length.

Once you have created your vector further editing can take place. Using the pen tool extra point can be added by selecting the vector then clicking on the vector line. Points can be removed by clicking on it with the pen tool. Clicking and dragging a point converts it into a curve point, similarly a curve point can be made straight by clicking on it.

When using the pen tool the pen icon displays symbols denoting the following :
0 = close shape
> = convert to corner
+ = add additional point
- = Remove point

The sub selection tools allow you to drag points out. Multiple points can be selected.

The Freeform Tool
This tool allows you to pinch in holes when going from outside in. Or extend the image out when going from the inside out.  In all cases the vector must be selected and you use a click and pull technique.

The Reshape Tool
This is used to reshape tools. It can be used to apply a fixed colour fill.  One methos to create a 3D sheen effect is :

1. Apply a gradient fill to a shape, Type ellipse.
2. Make sure the colour is graduated to white for the sheen.
3. Position the gradient guides to get the effect.

Auto Shapes
Under the rectangle tool are the Auto Shapes. In here are many useful shapes and functions. Additional shapes are located in the Shapes panel on the right.
The “Measure” Shape can be used to measure and annotate distances.
The “Annotation” shape allows annotations and notes to be applied to the canvas.
The “Time Saved” stamp applies a saved stamp to the canvas.
The “Flow Chart” shape is for creating diagrams and flow charts.
The “File Info” shape stamps the file information onto the canvas.

The Measure Tool
select hte measure tool in the Vector toolbox. Click and drag to create measurements between points.

Symbols are master copies of an image or group of images. Each laid down instance is a copy of the master symbol. Updating the master updates all the instances. Ideal for creating your master template with things like the banner, footer and navigation.

Symbols are stored in the “Document Library”. They can be dragged in and scaled.  They can also be made available to all future documents by selecting it, then choosing “Save to Common Library” from the right hand panel options. By default it is saved in the “Common Library/Custom Symbols” folder with a .animation.png extension.

There are 3 symbol types : Graphic, Button and Animation.

Creating a Graphic Symbol

• Create an image and select it
• Convert this image(s) to a symbol by F8 or Modify/Symbol/Convert to symbol. Name is and select “Graphic”
• To place more instances of the symbol onto the canvas either drag them out from the Document Library or hold ALT and drag then out from the original copy on the canvas.
• Double clicking on the symbol enters edit mode.   Edits will apply to all instances.

To convert multiple images into  single symbol with 9-slice scailing.

• Use the rectangle tool to select a group of images. Make sure in the properties pane you have no fill and a border set.
• Convert to a symbol using F8. Selecting Graphic and 9-Slice scaling.
• Double click on the new symbol to enter scaling edit mode. Drag the guides to select the are to preserve when scaling (area not to be stretched)
• Now when you use instances of the symbol you can click on it and drag its size out.

Button symbols

This allows you to create buttons and navigation. 4 states can be created for use on web sites (over, down, up, selected)

• draw a button on the canvas and select all elements.
• Convert them to a symbol using F8. Name it and select “button”
• To create an “Up” state double click the button to enter Edit mode. Click away from it then select “Over” under state in the properties pane. Then pick “Copy Up Graphic” to copy up the image for editing to the Over version.
• To create moe buttons, drag them out onto the canvas sing ALT and drag. remember to change the button labels.

Creating an Animation symbol

• Select your images and convert to a symbol. Name it and pick “animation”
• In the pop up animation box pick ; 5 states, Move 250. Click OK.
• Choose Modify/Fit to Canvas if you want to size the animation. Make adjustments by dragging the animation line.

Editing a single Instance of a Symbol

To edit a single instance of a symbol you can either edit that particular instance, but with limited editing (resize, filters, opacity etc).  Or detach it for full editing capabilities using Modify/Symbol/Break Apart.  Now ungroup all its elements for editing using Modify/Ungroup.

Adding Component Symbols to a Design

Component symbols are in the “Common Library” and are pre made symbols.  Double click on one to edit, making sure 9-slice scaling is on.  Check the scaling guides then step back and drag size of symbol to your requirements.

Importing and Exporting Symbols

Symbols can be exported for emailing etc by. Options/Export Symbols/ select and export.  They can be imported by going to the Document Library the options/Import.