The Fireworks Workspace

Guide Lines
Turn the rulers on
Click and drag from the vertical ruler to create a vertical guide.
View/Guides/Snap to Guides.
To measure distance between the guides use the Select tool and hold the Shift key.

Workspace
To undock a panel drag from the gripper away.
To re-dock properties pane drag from the side bar to the bottom of page.
To hide the panels press F4

Capture a Screenshot
Select Commands/Take Screenshot
Select region
Open a new canvas then paste the captured image in.

Master Page
Create a page with your common content on it. ie banners, navigation and titles.  In properties set this as your Master Page.  When ever you create another page it will contain the master Page content. Its like a template.  Only one Master Page per project.

Sharing Layers across Pages
To share a layer, first select the layer then click options. Select Share Layers and pick the pages.

More coming……

Fireworks shapes

Here are some handy tips when working with shapes in Fireworks :

Combine shapes together
Select the shapes to combine
In top menu – Modify/Combine Paths/Union

Punch Shapes out (Cookie Punch)
Position two shapes with cut out tool on top
Select both shapes
In top menu – Modify/Combine paths/Punch

Importing an image to your size
In top menu – Import/File/Select the image/Open
Click and drag for size

Putting round corners on an image
Place an image on canvas
Position a new white rectangle over it (mask)
Round its Corners
Select both images
In top menu – Modify/Mask/Group as mask
Image below can be repositioned using thumb

Copying Shapes
Click and hold on the shape. Then press ALT. Move mouse to drag out another copy.
(If you hold the shift key out it will keep it on same axis)
 - Modify/Group : To group shapes
 - Modify/Transform/Flip : To flip shapes

Confine restraints (Drag a circle)
Hold Shift and drag

Styles
Pre defined styles can be applied to any shape.

1. Create a shape
2. Select a style from the styles panel on the right.
3. If you press Alt+Drag on a styled shape, you will create an identical one. If you then edit ti and click on thr “Redefine Style” button in the properties panel. The edited style is applied to all shape instances.

Notes
Use the Cut tool  and Shift key to cut shapes up (utilise grid lines)

Masking and Gradients in Fireworks

These technique are for fading an image in or out.  It’s mainly used for creating web site banners.

• Import an image or photo
• Create a white rectangle over the image.
• Select the white rectangle and in the properties panel set the fill property to Gradient/Linear.
• Alter gradient left to right, white on black. The white is where the image will be seen clearly and the black areas will be masked out.
• Select both objects then Modify/Mask/Group as Mask
• Use the pointer tool to drag the picture beneath (image selected in layers panel)
• Select the gradient rectangle in layer panel to adjust gradient and colour (colour=canvas colour)
• Multiple fades is achieved in fade fill box property.  Clicking adds extra thumbs ie Black,white,black

Vector Masks
These can be used for placing an image on a defined shape. And for fading in and out two pictures.

1. Put the required shape on to the canvas.  This can be any shape.
2. import and position the image or photo above it.
3. Select the top original rectangle and select Edit/Cut
4. Select the image in the layers panel and then Edit/Paste as Mask.
5. The image can be repositioned on the shape by selecting it then click and drag on the centre thumb.
6. To create photo’s fading in the process can be repeated. Place the two photo’s on the canvas. Select the top photo then Commands/Creative/Auto Vector Mask. Pick a preference and edit using the properties panel.

These notes can be printed.

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

Creating a Navigation bar

This method is for creating web site navigation bars in Fireworks and importing them into Dreamweaver.

• Create your canvas
• Open the Document Library in the side panel or from top menu – Windows/Document Library
• Select Edit/Insert/New button
• Select the rectangle tool and draw a button on top centre cross
• Add text
• Select the button and text. Then from top menu – Modify/Align/Centre Vertical. Then repeat for Centre Horizontal.  You have now created the UP state for the button.
• Now select the “Over” state in the properties panel.
• Select “Copy up graphic”
• Edit the image to reflect the OVER state.
• Select the “Page 1 ” tab to go back to the button image
• In the original view, position the button on the canvas
• To get another button instance, drag it from the “Document Library” panel onto the canvas and position it.  repeat this for number of buttons required.
• Select Modify/Canvas/Fit Canvas to crop to size
• Select each button in turn and change its text in the properties text box
• Make sure the button images are GIF’s and then save as a PNG
• To preview operation select File/Preview in Browser
• To edit all buttons (Library Image) double click the button in the Document Library then Select Up or Over state and edit.  This is then applied to all
• To export for Dreamweaver select File/Export/Select the Folder (html and images)/

In Dreamweaver select the location for insertion. Then Insert/Image Object/Fireworks HTML.  Browse to the .htm of the fireworks exported files and select.  With the Nav bar now in place link each button to its required page.  This is done using the SRC Target tool in the properties pane.  Future button edits are done in Fireworks and re exported.

In the Common Library pane pre designed buttons (Mac/Button) can be dragged onto the canvas and customised :
- Select Edit/Insert/New Button and drag a button in from the Common Library.
- In the Symbol Property tab at the bottom change its label to “Home”
- Now Edit/Copy the button. Then select “State 2″ and Paste it in.
- In the Symbols Properties change its State to Press
- Double click on the stage to go back to original canvas
- In web tools turn off slice mode.  Go to the states tab and create a duplicate state.
- Select State 1 then File/Export (images only)

Rounding corners on a image

This article lists how to put rounded corners on an image like on a web site banner

• Import your image onto the canvas
• Put a rectangle over the image (copy/Paste)
• Apply “round corners” to the top image
• Select both images
• From top menu select – Modify/Mark/Group as mask

These notes can be printed.

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

« Previous Page