GRAF 1031 – Week 1: Web Graphics

Design Principles | Web Colours | File Format/Resolution | Fireworks basics

Fireworks Basics

- Working environment (doc, panels, tools, etc)
- creating a new doc (options)
- navigating doc
- editing canvas/image size
- open an image
- layer and image manipulation basics (including cropping)
- optimize panel and preview window
- saving/exporting

Tools

Bitmapped images

Tools for editing bitmaps in FW

the top 4 tools (or groups of tools) are selection tools
use these tools to isolate and area of a bitmapped image
the next two are the pencil and eraser
and the last are for more advanced image manipulation

images to use for practice:
peaches | apples

Vector images

Tools for editing vector images in FW

the line tools creates a simple line shape
the pen tool draws/edits vector paths
second row on the left are a group of geometric vector shapes
then the type tool
and the bottom tools are more advanced (I may demo them)

Homework

PEACHES

using the polygonal lasso tool, create a selection around this peach, copy and paste it, and move/transform:

try rotating, transforming, and erasing part of the image to make it fit "behind" another peach

TIP: use the scale tool (under the pointer tool (black arrow)) to make quick transformations

APPLES

create a selection around the apple in the foreground, then copy and paste it

go to Filters>Adjust Colour>Hue/Saturation...then modify the hue to make the apple red

HEART

create a circle with the Ellipse tool (vector tool), then using the subselection tool modify the anchors/handles to turn it into a heart

TIP: to break the handles, Option+Drag

Submitting your work

Submit the 3 files to the drop box named FW Wk 1 Homework, before the begining of class next week.