fireworks web page mockups. set up canvas/page size fireworks is very well-suited to designing...
TRANSCRIPT
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