fireworks web page mockups. set up canvas/page size fireworks is very well-suited to designing...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/1.jpg)
Fireworks
Web Page mockups
![Page 2: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/3.jpg)
Change canvas size• Deselect everything• Click on “Canvas Size” in
the Properties window
Or• Click Modify > Canvas > Canvas Size
![Page 4: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/5.jpg)
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:
![Page 6: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/11.jpg)
Add a drop shadow• Use the filters in
the Properties
![Page 12: 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](https://reader035.vdocuments.site/reader035/viewer/2022070413/5697bff51a28abf838cbd5e1/html5/thumbnails/12.jpg)
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