Making a Multi Page Web Site in Fireworks

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

Colour in Fireworks

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.

Read more

Fireworks Bitmap Tools

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

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 in Fireworks

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.

Text in Fireworks

Text
Select the Text tool and type in some sample text.  The text box can then be toggled between Fixed width (wrap) or automatically extend. This is done by double clicking on the small hollow square thumb top left of the text box.

Lorum Ipsum Sample Text
To use sample text select – Commands/Text/Lorem Ipsum

Importing Text
Select the text file to import using  File/Import. Then select the text file and  drop it on the canvas using click and drag.

Making Text follow a path

1. Type in your text
2. Select the Pen tool and click and drag a path out (double click to end the path)
3. Select the Pointer tool then select text and Path line. Select Text/Attach To Path
4. The text can be edited and the path can be reprofiled using the sub selection tool.
5. To re profile text then select the text then Text / Orientation / …

Wrapping Text within a container

1.  Create your paragraph of text on the canvas.
2. Create your container shape. Maybe by drawing a number of shapes. Then Modify/Combine PAths/Union to form a single shape.
3. Select your text and drag it over the container. Then shift click to select the container as well
4. Select Text/Attach in Paths.
5. Use the sub selection tool to drag container points to a new shape.

Wrapping Text around a Picture.

1. On your canvas you should have a few paragraphs of text and your image placed over it to the right.
2. We first need to create a container representing the text box to go around the image :-
3. - Draw a rectangle (box 1) covering the text and image.
4. -Position your image on the top layer so that you can see it
5. - Now create another rectangle (box 2 ) slightly bigger than the image. This represents the text no go area.
6. - Select box 1 and box2. Then select “punch paths” in the Paths panel or Modify/Combine Paths/Punch.  Box 1 now represents the text container
7. To now put the text into this container we select it and the text. Then Text/Attach in Path.
8. The text now wraps around the image and is still editable. With the Sub Selection tool the wrap shape can be edited.

Using Text as a Mask

1. Starting condition is Text on top layer. Image 1 on middle layer and Image 2 on bottom layer. Image 1 is used as fill in for the text. (text is a mask for image 1) and sits on Image 2
2. Select the text then Edit/Cut
3. Select Image 1 Edit/Paste as Mask.
4. Select the text to apply filters like drop shadows etc. To make fills and strokes visible make sure the “Show and Fill” Selection box is ticked
5. To move the masked image (1) around on the text drag the centre thumb with the text selected.

Keeping Crisp Text when Optimising
When you optimise an image with text in it make sure you check the “Selective Quality” panel.  In the optimise panel enable it in the pop up and set a value of 80. Also check the “Preserve Quality” box.

How to Create Blurred Effect Text
Blur your text using the properties Filter/Blur. Then copy the text and remove the blur effect from one copy.

How to apply Styles to text
Select your text. then in the styles panel in the drop down box select your style. Or use “Photoshop live Filters” in the properties filter selection.  If you create your own style (combination of filters) you can save it in the style panel options.

Slicing in Fireworks for Web export

 

Image Slicing
This cuts up a design into small images for use in a Dreamweaver table layout.

1. Use the slice tool to drag out slice elements.
2. Rename the slice layers.
3. In the slice properties set the file Type, Link, Alt Tag and  Target.
4. Set the optimise panel for the prefered export file type.
5. Select File/Export and fill out the properties for export. (html and images). In the Options/Tables/Space With : select “single table no spaces”
6. For creating dummy html/code/text slice areas, repeat as above but select type as html. You then get an option button to add code/text.
7. To export a single image, select slice then right mouse click and select “Export selected slice”
8. If using the Polygon slice tool keep the number of points small.
9. To automatically slice an image. Select it then Edit/Insert/Rectangle Slices (use shift key for multiple images).

GIF Animating in Fireworks

Animating with a Gif
This creates a simple animation by changing states.

1. Create a simple image.
2. Go to the “States” panel and from the options at the top right select “Duplicate State”
3. Select State 2 then the Layers Tab and change something ie a colour.
4. Now with button State 1/State 2 under the layers panel you can see both states.
5. You can play the animation by selecting the Play icon just above the properties panel.
6. To change the time interval. Go to the states panel and select both states. Then double click one to get the delay panel up.
7. To export the animated gif go to the Optimise tab and select “Animated gif” (no transparency, images only, Html=none, slices=none)
8. To save as a Flash animation select File/Save as (select adobe flash on drop down)

Animating with Twist and Fade

1. Create a design to animate and select it.
2. select Commands/Creative/Twist and Fade. Click animation check box and adjust settings for required animation or select a preset from bottom left.
3. Click on the Run button to view the animation.

Tweened Animation
A Tween is a frame between starting and stopping of an animation sequence.

1. Select your image and change it to a symbol by Modify/Symbol/Convert to symbol (select graphic option.
2. Hold down the Alt key and drag another copy out. position it away from first symbol. repeat for a third copy.
3. Select all symbols then Modify/Symbol/Tween Instance (select 10 steps and distribute to states)
4. Run and test it
5. In the states panel you can select states within animation and use Modify/Transform/Free Transform to alter instances of the shape.
6. To change the animation speed select all the states in the State Panel. Then right mouse click to set speed.

Exporting Web Site Mock ups

HTML Export
This creates an html prototype for displaying as a web site.
- Slice the images only
- Make sure all pages are named and button links entered (home.html)
- Select File/Export/Html and images (export slices, include areas without slices, put images in subfolder, all others unticked).
Default HTML settings can be set in File/HTML Setup

CSS Export
This creates an CSS prototype for displaying as a web site.
- Slice the images only (Right click on image and select insert rectangle splice)
- Foreground slices are images which dictates layout flow.
- Background slices are images for background.
- File/Export/CSS and Images (set up options)

PDF Export
This creates a PDF document of your design.
- Name each page.
- File/Export (adobe pdf).
- Setup the options like allowing commentating

Exporting an area
- Select the export area tool from the side panel
- Select your area by dragging and then double clicking inside.
- Adjust the export properties
Another method is File/Image Profile. This brings up the export pop up dialogue.

Choosing Export Settings
- Open your image or Photo
- Zoom out and select 4 up
- Change settings in each view to show comparisons for different export settings.

Editing Photos in Fireworks

How to Make Parts of your Photo’s appear Moving
- Using the lasso tool select the part of the image you want the effect applied to.
- Select from the top Menu Filters/Motion Blur

How to Apply Blends to photo’s like HDR Effects
- Create a duplicate copy of your photo on a new layer. This can be done by dragging the photo in the layers panel down to the “new bitmap image” button.

- select the top image in the layers panel and apply the blend “multiply” by either the drop down in the layers panel or in the bottom properties panel.

- These methods can be repeated using “overlay” for a different effect. Or Use drawing tools with blend modes.

Selecting and Editing Parts of a Photo
- Use the lasso tool to click points around the image. Click on the first point to close the shape.
- To expand the selection use the Select/Feather feature or Select/Deselect to remove.
-  You can the click and drag the selection or save it Select/Save Bitmap selection for reloading later.

Altering Exposure and Colour
Images can be colour or exposure adjusted by selecting it the Filters/Adjust colour.

Next Page »