Tutorials Map Use the text navigation at the bottom of the page if you cannot see the map
Graphics Tutorials Map Use the text navigation at the bottom of the page if you cannot see the map


Unlike other graphic programs that you've probably used for creating Web images, such as Photoshop, Fireworks does not color pixels (bitmap). Rather, like FreeHand or Adobe Illustrator, it's a Vector based program. Open Fireworks and practice the steps outlined in the tutorial.


From the Tools Palette pick up the Pen Tool pen tool

The start icon for the Pen Tool looks like this: Start Icon - Pen Tool

Anchor points define a path at points where the path changes. Segments are the paths that connect anchor points.

To finish a path, hold down the Command/Ctrl key, and double-click.

Paths Tools

Control handles extend from anchor points. Their length and direction controls the shape of curves of segments.

Curves do not have to be smooth. A corner curve has an abrupt change of direction.

To create a Corner curve, create an anchor point with control handles, do not release the mouse button. Hold the Option/Alt key and then drag to pivot the second handle. Release the mouse.

The longer the handle, the more steep the curve.

Points can be added and deleted to a path with the Subselection tool Subselection tool Click with the mouse to add use the Delete/Backspace key to delete.

Control Handle

Selecting Paths

Using the Pointer Tool Pointer Tool position the arrow over an object and click. A highlighted color appears along the path indicating that the object has been selected.

Several objects can be selected at one time by creating a marquee with the Pointer Tool.

Selecting Paths

Because Fireworks creates paths with anchor points you can use the Subselection Tool Subselection tool to select those points and to change the shape of objects.

Anchor points that are white are selected points.

Anchor points that are filled with the highlight color are not selected.

Select Behind Tool The Select Behind Tool allows you to select through other objects to one at the back. This is important because transparency is used in creating Fireworks graphics

Anchor Points Example


Objects can be Grouped by selecting two or more then choose Modify>Group

By using this option, the designer can change elements of the entire group at one time.

Objects are Ungrouped by choosing Modify>Ungroup

Groups can be nested


Objects can be Scaled, Skewed, Distorted, Rotated by choosing the Modify> command.

Scale Attributes extends and scaling to the size of the stroke, pattern fill, gradient fill, or effect applied to the object.

Transformations OptionsAuto Crop Images automatically shrinks the bounding box of an image to fit the new area of a transformed image

Scaling objects
The Numeric Transform window allows you to complete a transformation in percentages Numeric Transform

Vector graphics allow objects to be combined from simple path shapes into complex ones.

The commands that allow this are:






Combining objects

Web Building tutorials: Intro | Fonts | Backgrounds | Lists | Layout | Tables | Graphics | FTP
Photoshop tutorials: Getting Started | Text | Backgrounds | Filters | Icons | Photos & Scanning
Fireworks tutorials: Getting Started | Paths, Objects | Fills, Strokes, Effects | Text, Effects | Import/Export | Image Map | Slicing | Behaviors | Putting it all together

© 2005 Interactive Mystery Productions Ltd.
A Company Limited by Guarantee
Registered in England & Wales No. 4792272
All Rights Reserved