Fireworks

Web Page mockups

Set up canvas/page size• Fireworks is very well-suited to designing graphics

and web pages for the screen.• To create a web page, set the screen size to fit a

standard size screen, with minimal scrolling, e.g.

Change canvas size• Deselect everything• Click on “Canvas Size” in

the Properties window

Or• Click Modify > Canvas > Canvas Size

Insert more pages into the document• Locate the Pages panel (Window

> Pages or press F5 on the keyboard)

• Click the new page icon in the bottom right of the Pages pane

• To duplicate a page drag the page icon on top of the new page icon

Insert and resize pictures• Edit > Paste (or CTRL+V)• Or click File > Import, select the image file, then

click and drag a rectangle on the page• To resize, use the selection tools:

Adding text• Click the Text tool (or press T) and click on the page.• Change the properties using the Properties window. Try

out different sizes, letter spacing, fonts, colours.• Add an effect, e.g. a drop shadow using the Effects/Filters

menu

Viewing your page• Press F12 to preview your page in a web

browser• To zoom in, click the Zoom tool or press Z

on the keyboard (make sure the Text tool (T) is not active whilst doing this)

• Click on the page or draw a rectangle with the Zoom tool to zoom to a selection

• To zoom out hold the ALT key down as you click with the Zoom tool

• To pan click the Hand tool (H) and drag the screen, or (quicker) hold the Spacebar down and drag

Vector draw tools• Some of the tools have many others

underneath. E.g. the Vector tools.• Vectors are exact shapes which are

rendered from exact points, lines, curves and fills. They can be resized as many times as necessary (they always remain sharp)

• Use the Freeform tools to distort shapes. Draw shape, right click > Ungroup, then use the freeform tools

Draw an arrow• Use the line tool to draw a line• Change the settings of the line in the Properties

window if you wish• Click Commands > Creative > Add arrowheads

Put border around a picture• Copy a picture• Draw a shape, e.g. a rectangle• Click Edit > Paste inside• Use the spot at the centre to move the image inside

the shape.• Use the selection tools

to adjust

Add a drop shadow• Use the filters in

the Properties

Keyboard shortcuts• V = pointer tool• T = text tool• Spacebar = pan (make sure

text tool not selected)• Z = zoom in (hold down ALT to

zoom out)• H = hand (pan) tool• TAB = toggle tool bars and

windows on and off• F12 = web page preview in

browser• Click Edit > Keyboard shortcuts

to see listed all shortcuts