00 FW1 UM.Book Macromedia Fireworks Manual

User Manual: manual pdf -FilePursuit

Open the PDF directly: View PDF .
Page Count: 142

Download
Open PDF In Browser	View PDF

macromedia

®
®

FIREWORKS

Using Fireworks

™

macromedia

Licenses and Trademarks
Fireworks was created by Macromedia, Inc. © 1998. All rights reserved. Apple, the Apple Logo, Macintosh, Power Macintosh, Mac OS, and LaserWriter
are registered trademarks of Apple Computer, Inc. Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun
Microsystems, Inc. in the U.S. and other countries. GIF-LZW licensed under U.S. Patent No. 4,558,302 and foreign counterparts. This software is based in
part on the work of the Independent JPEG Group. The Graphics Interchange Format is Copyright © CompuServe Incorporated. GIF is a Service Mark
and the property of CompuServe Incorporated. Portions Copyright © 1988–1992 Sam Leffler. Portions Copyright © 1991, 1992 Silicon Graphics.

Fireworks and Microsoft Windows
FIREWORKS OPERATES IN A GRAPHICS ENVIRONMENT CALLED MICROSOFT WINDOWS, CREATED BY MICROSOFT
CORPORATION. AN EXTENSION OF THE MS-DOS OPERATING SYSTEM, MICROSOFT WINDOWS GIVES A STANDARD
LOOK AND FEEL TO FIREWORKS AND ALL OTHER WINDOWS APPLICATIONS. TO RUN FIREWORKS UNDER
MICROSOFT WINDOWS, YOU NEED TO LICENSE AND INSTALL MICROSOFT WINDOWS.

Fireworks and the Apple Macintosh
SYSTEM UTILITIES AND TOOLS ARE COPYRIGHTED PROGRAMS OF APPLE COMPUTER, INC., LICENSED TO
MACROMEDIA, INC. TO DISTRIBUTE FOR USE ONLY IN COMBINATION WITH FIREWORKS. APPLE SOFTWARE SHALL
NOT BE COPIED ONTO ANOTHER DISK (EXCEPT FOR ARCHIVAL PURPOSES) OR INTO MEMORY UNLESS AS PART OF
THE EXECUTION OF FIREWORKS. WHEN FIREWORKS HAS COMPLETED EXECUTION, APPLE SOFTWARE SHALL NOT
BE USED BY ANY OTHER PROGRAM. APPLE COMPUTER, INC., MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED,
REGARDING THE ENCLOSED COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY, OR ITS FITNESS FOR ANY
PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE
EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY
BE OTHER RIGHTS THAT YOU HAVE WHICH VARY FROM STATE TO STATE.
U.S. Patents 5,353,396, 5,361,333, 5,434,959, 5,467,443, 5,500,927, 5,594,855 and 5,623,593. Other patents pending.
Macromedia, the Macromedia logo, Authorware, Director, Dreamweaver, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio,
Macromedia xRes, Shockwave, and Xtra are trademarks or registered trademarks of Macromedia, Inc. Other product names mentioned within this
publication may be trademarks of Macromedia, Inc. or other entities.
Copyright © 1998 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic
or machine-readable form in whole or in part without prior written approval of Macromedia, Inc.
Part number ZFW10M100
First Edition: May 1998
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103

Acknowledgments
Written by Rocky Angelucci, Stuart Manning, and Randy Varnell.
Edited by Monte Williams and Stuart Manning.
Project management by Monte Williams.
Production by Rocky Angelucci.
Special thanks to Doug Benson, Dennis Griffin, David Morris, Samantha Seals-Mason, and Joanne Watkins.

CONTENTS

CHAPTER 1
Getting Your Bearings . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
What’s in this package. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Macintosh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Installing and starting Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Uninstalling Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Resources for learning Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
What’s unique about Fireworks? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Welcome to Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What is Fireworks? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Using the document window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Using the toolbars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Using panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Navigating your document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Setting document magnification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Shortcut menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Multiple document views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Optimizing document redraw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
A case study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Before Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
The Fireworks way. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Working with Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Object mode versus image edit mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Editability. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Setting up your document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Importing and exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
Importing bitmap images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
Importing vector art. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28

iii

CHAPTER 2
Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Tips for using the tutorials. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Font substitution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Opening tutorial files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Correcting mistakes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Tasks and pictures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Toolbox tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Working with panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Paths and marquees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Object opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Working in object mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
Activating image edit mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Applying and editing fills. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38
Reshaping paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Masking objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
Working with text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Creating rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Linking an image map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Working with animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
CHAPTER 3
Creating and Editing a Graphic . . . . . . . . . . . . . . . . . .55
Object mode and image edit mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Fireworks drawing and editing tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Object mode basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Drawing in object mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Editing in object mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61
Switching to and from image edit mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
Image edit mode basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
Converting an object to an image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65
Using Xtras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65
Transforming and distorting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65
Using color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Using the Color Mixer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Using the Swatches panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
System color pickers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Using color wells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Contents

Applying brushes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
The Brush panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
The Fill panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
Adding texture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
Applying effects to objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Live Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Using Xtras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Using text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76
Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Attaching text to a path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Converting text to paths and images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Organizing your document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Grouping objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Arranging objects on a layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Using layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Using frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Symbols and Instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Creating a Symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Creating an Instance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Modifying a Symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Modifying an Instance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Working with Symbols and Instances. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
Tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
Compositing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Using the Opacity toolbar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Using blending modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
CHAPTER 4
Importing and Exporting . . . . . . . . . . . . . . . . . . . . . . . . 89
Fireworks in the workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Importing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Import File dialog box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Drag and drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Copy and paste. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Importing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Importing Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Importing FreeHand, Illustrator, or CorelDRAW files . . . . . . . . . . . . . . . . . . . . .93
Importing animated GIFs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Contents

Using Export Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95
Preview area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Options panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97
File panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Animation panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Export Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Web export formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
GIF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Web format comparison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Other export formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
TIFF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
PICT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
BMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
xRes LRG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
Working with other applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Working with Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Editing Fireworks images in other image editors. . . . . . . . . . . . . . . . . . . . . . . . . . .105
CHAPTER 5
Web Design Features . . . . . . . . . . . . . . . . . . . . . . . . . 107
Designing web components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Using the URLs toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Creating an image map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Choosing a source graphic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Creating a hotspot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Exporting an image map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Client-side and server-side image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Exporting image map code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Slicing images when exporting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Creating a sliced image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Exporting an image in multiple slices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Setting slice object properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Contents

Animated GIF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Opening animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Creating animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Exporting animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Disposal method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Transparency. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Frame delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Looping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Lossy Optimization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
GIF transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
PNG alpha transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
JavaScript rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
The Down state. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Drawing buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Assigning URL links to rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Exported JavaScript code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Using Fireworks HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Some HTML basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Common HTML tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Copying and pasting from a Fireworks HTML file . . . . . . . . . . . . . . . . . . . . . . . 119
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121

Contents

vii

viii

Contents

CHAPTER 1

Getting Your Bearings

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

What’s in this package

System requirements

The Fireworks package contains:

Fireworks runs on either the Windows or Macintosh
operating systems. Before you install Fireworks, you
need the following equipment:

◆

A CD-ROM containing the Fireworks installer
and the sample artwork.

◆

Using Fireworks, the manual you are now reading.

Windows
◆

Windows 95 or Windows NT 4 (with Service
Pack 3) or later

◆

Intel Pentium 120 MHz processor required
(Pentium 166 MHz with MMX recommended)

◆

32 MB of system RAM on Windows 95 (40 MB
or more recommended for Windows NT)

◆

60 MB of available hard disk space (100 MB or
more recommended)

◆

CD-ROM drive

◆

Mouse or digitizing tablet

◆

640x480 resolution, 256-color monitor required
(1024x768 resolution, millions of colors
recommended)

Macintosh

Chapter 1

◆

System 7. 5.5 or higher

◆

Adobe Type Manager 4 or higher to use Type 1
fonts

◆

Power Macintosh processor required (Power
Macintosh 604/120 MHz or greater, 603e/180
MHz or greater, or G3 recommended)

◆

24MB of application RAM with virtual memory
on (32 MB or more with virtual memory off
recommended)

◆

60 MB of available hard disk space (100 MB or
more recommended)

◆

CD-ROM drive

◆

Mouse or digitizing tablet

◆

640x480 resolution, 256-color monitor required
(1024x768 resolution, millions of colors
recommended)

Installing and starting
Fireworks
Before installing Fireworks, make sure your computer
meets the system requirements listed in “System
requirements” on page 2. Read the ReadMe document
on the Fireworks CD-ROM for late-breaking
information.

To install and start Fireworks on a Macintosh:
1

Disable virus-protection extensions and restart
your computer.

Insert the Fireworks CD-ROM in your CDROM drive.

Double-click to launch the Fireworks Installer.

Follow the instructions that appear on screen.

Double-click the Fireworks icon to launch
Fireworks from the Finder.

To install and start Fireworks on Windows NT 4 or
Windows 95:
1

Insert the Fireworks CD-ROM in your CD-ROM
drive.

Uninstalling Fireworks

Follow the instructions that appear on screen.

Use the uninstaller to ensure that all Fireworks files are
removed from the computer.

The installer application prompts you to enter
required information.
3

When Fireworks is installed, launch Fireworks
from the Start menu.

Windows NT 4 and Windows 95 have four alternative
ways to install Fireworks:
◆

Double-click the installation application Setup.exe.

◆

Click the Install button in the Add/Remove
Programs module in the Control Panel and
navigate to the Setup.exe application in the
Fireworks folder.

◆

Use the Run command in the Start menu and
navigate to the Setup.exe application in the
Fireworks folder.

◆

Select the CD-ROM icon in the Windows
Explorer or My Computer, right-click to display the
menu, and choose AutoPlay.

Note: To disable AutoPlay, hold down the Shift key
while inserting the Fireworks CD-ROM.

To uninstall Fireworks on Windows NT 4 or
Windows 95:
1

Choose Start > Settings > Control Panel.

Double-click Add/Remove Programs.

Select Macromedia Fireworks in the list box.

Click the Add/Remove button.

Follow the instructions that appear on screen.

The uninstaller removes all Fireworks program files
from your system.
On Windows, manual uninstallation may leave several
DLLs and registry database entries.
To uninstall Fireworks on the Macintosh:
1

Run the installer from the Fireworks CD-ROM and
choose Remove from the Options pop-up.

Follow the instructions that appear on screen.

The uninstaller removes all Fireworks application
files from your computer.
On the Macintosh, manually removing Fireworks can
leave several preference files in the System folder.
If you used Custom installation to install Fireworks in a
different folder than the default location, you must
specify the same location when uninstalling.

Getting Your Bearings

Resources for learning
Fireworks

What’s unique about
Fireworks?

Use these resources to learn Fireworks quickly:

The premier production tool for creating web graphics,
Fireworks has features that can save hours by
simplifying the web-graphic creation workflow.
Fireworks was created from the ground up specifically
for the web.

◆

Fireworks Help
Fireworks Help, available whenever the Fireworks
application is active, includes information on every
Fireworks tool, panel, dialog box, and preference.

◆

Using Fireworks manual
The Using Fireworks manual includes tutorials and
chapters covering basic and advanced Fireworks
features.

◆

Live effects—Create drop shadows, bevels, glows, and

embosses that are fully editable. Watch them update
automatically!
Vector tool flexibility with an organic bitmap
look—Bézier paths and shapes have bitmap brush

www.macromedia.com

strokes and textured fills. Apply customizable Live
Effects to objects.

Macromedia’s award-winning web site contains
Fireworks tutorials, sample art, and updates.

Total text control—At last, the precise text control of

an illustration tool in an image-editing application.
Control kerning, leading, text effects, alignment, and
more. Apply Live Effects to text, and best of all, text is
always editable, all the time. Change text after applying a
Live Effect and watch the effect update automatically.
Export preview—Directly view the graphic after each
adjustment of export settings without switching to your
web browser. Compare up to four alternative files
simultaneously to choose the best mix of quality and
file-size reduction.
Export optimization—Simplify file format, palette
settings, dithering, and more to optimize your web
graphics. Or use the Export Wizard to optimize
automatically.
Batch processing—Save your optimization and export

settings and use them to batch process an entire folder of
images.
Image maps—Create editable, color-coded hotspots on
an overlay above the image. Enter a URL link and
browser status bar message for each hotspot.
JavaScript rollovers—Automatically generate code for

interactive buttons and other graphics.
Slice images—Slice images on export. Automatically

generate HTML table code to reassemble images and
add links.

Chapter 1

Welcome to Fireworks
What is Fireworks?
Fireworks creates the smallest, highest-quality JPEG
and GIF graphics in the fewest number of steps. It is a
total solution for creating and producing web graphics.
Fireworks simplifies and streamlines the process of
making web and screen graphics, while providing the
ultimate in flexibility and editability.
Fireworks also makes it easy to minimize file size
without sacrificing quality, which results in faster web
sites and higher satisfaction among web site visitors.
Without Fireworks, for example, a web designer creates
an image in a vector-based drawing program such as
FreeHand, then imports the vector art into a bitmap
graphics program to rasterize and apply filters.
Continuing the creative process, the designer exports the
graphic for import into a color palette-conversion utility
and then optimizes the palette and image format for
either web- or screen-based delivery. The designer might
also use an animation tool or image map utility to create
a dynamic image.

Fireworks is a solution to the challenges faced by web
designers. Accordingly, Fireworks is not optimal for
creating or modifying images intended for traditional
commercial printing. The Fireworks environment is
based on the RGB color model, ideally suited for images
rendered at screen, rather than print, resolutions.
The advantages to using Fireworks over other tools
include efficiency, convenience, and adaptability. With
Fireworks, the designer is free to focus on design and
creation without the distraction of switching from tool
to tool.
This efficient workflow is even more convenient with
Fireworks’ incredible power over color palettes and file
formats. Advanced preview capabilities allow the
designer to see the effect of palette and color depth
changes without the time-consuming step of viewing
graphics in a browser.
Amazingly, both text and objects in a Fireworks graphic
are fully editable at any time. This means that graphics
can be easily modified without recreating them.

To test the graphic, the designer must view it in a web
browser application. Revising the graphic at this point
may force the designer to start from the beginning and
repeat every step.
With Fireworks, the designer’s creativity is no longer
complicated by switching from tool to tool, and
valuable time is saved by avoiding repetitive procedures.
Fireworks is a single tool that performs all the
necessary steps.
By creating editable paths with bitmap attributes,
Fireworks ensures that your work is fully editable
throughout every stage of the design process. Fireworks’
powerful export preview capabilities integrated with
color palette and graphic formatting offer the designer
control over exporting.

Getting Your Bearings

Using the document
window
Fireworks is both a vector graphics and a bitmap
graphics application. Vector objects are composed of
paths, and bitmap objects are composed of individual
pixels. Fireworks combines the organic look of bitmap
objects with the flexibility, control, and editability of
Bézier paths.

Launching Fireworks displays the document window,
your interface to the illustration. A Fireworks canvas
can be up to 6000 pixels wide by 6000 pixels tall. Move
and resize the panels, Toolbox, and toolbars to customize
your environment.

Main toolbar (Windows only)
URLs toolbar

Opacity toolbar

Info bar

Toolbox

Status bar
(Windows only)
View Controls toolbar (Windows only)

Fireworks on Windows

Chapter 1

Modify toolbar (Windows only)

Swatches

Using the toolbars

Toolbox

Fireworks has several toolbars:

The Toolbox contains 32 tools, some of which are
contained in tool groups, as shown. To display a tool
group, press and hold any tool showing a triangle in the
lower-right corner.

◆

Toolbox

◆

Main toolbar (Windows only)

◆

Info bar

◆

Modify toolbar (Windows only)

◆

Opacity toolbar

◆

Status bar (Windows onl.y)

◆

Swatches

◆

URLs toolbar

◆

View Controls toolbar (Windows only)

Each toolbar is moveable. On Windows, each toolbar is
dockable. This chapter describes the default location and
configuration of the toolbars.
Note: On Macintosh, use the menu to duplicate
functions found on the Windows Main toolbar and
Modify toolbar.

To show or hide individual toolbars, choose Window >
Toolbars and choose a toolbar. To show or hide the
Toolbox, choose Window > Toolbox.

Press and hold a tool to reveal tool groups.
Click an alternate tool to choose it from the tool group.
On both Macintosh and Windows, pressing letter keys
switches quickly between tools. Press the letter key
shown in the following chart to choose a tool.
Fireworks operates in either object mode or image edit
mode. Object mode is the default mode, where vector
graphic creation and some image manipulation occurs.
Image edit mode is where pixel editing occurs within an
image object or the background image, which is a
permanent image in any Fireworks document.

Getting Your Bearings

Some tools only work in object mode and others only
work in image edit mode. Still others change function
depending on the current mode. For a discussion of how
tools function in these modes, see “Fireworks drawing
and editing tools” on page 56.
Use this tool

Select and drag
objects.
Pointer
Select objects behind
other objects.
Select
Behind
Discard portions of an
image.

Activate by
pressing
v
or
0 (zero)
v
or
0 (zero)

Use this tool

Change view
magnification.

Draw straight lines.

Draw paths by
anchoring points.

Draw rectangles,
rounded rectangles,
and squares.

Draw ellipses and
circles.

Draw polygons and
stars.

Create text blocks.

j
Line

a or 1
Pen

m
Rectangle

m
Ellipse

Polygon

Text

Chapter 1

spacebar
or
h

Magnify

Lasso

Ellipse
Marquee
Select a freeform pixel
area in image edit
mode.

Select pixel areas of
similar color in image
edit mode.

Hand

Marquee
Select an elliptical pixel
area in image edit
mode.

Pan the view of the
document.

Subselection
Select a rectangular
pixel area in image edit
mode.

Select a polygonal pixel
area in image edit
mode.

Magic Wand

Export Area
Select an object within
a group or points on a
path.

Activate by
pressing

Polygon
Lasso

Crop
Export a portion of
your document.

Use this tool

Draw one-pixel pencil
strokes.

Activate by
pressing

Use this tool

Pencil

Activate by
pressing

Sample a color and
apply it to the active
color well.

Eyedropper
Draw brush strokes
using Brush panel
settings.

Fill objects with color,
gradients, or patterns
and adjust fills with
Paint Bucket Paint Bucket handles.

Redraw portions of a
selected path using
Brush panel settings.

Remove or replace
portions of image
objects and cut paths.

Clone portions of an
image object.

Brush

Redraw Path

Eraser
Resize and rotate
objects.

Scale

Rubber
Stamp
Slant and rotate
objects, and change
perspective.

Distort and rotate
objects.

Pull a path segment or
push a path segment
using a resizable
cursor.

Reshape a selected
path within the area of
the resizable cursor.

Increase stroke
characteristics
controlled by pressure
or speed.

Decrease stroke
characteristics
controlled by pressure
or speed.

Skew

Distort

Freeform

Reshape
Area

Path
Scrubber (+)

Path
Scrubber (–)

Getting Your Bearings

Main toolbar (Windows only)
Use

Use

Paste the Clipboard’s contents into
the active document.

To
Create a new document.

Paste
View Object Properties for the
selected object.

New
Open an existing document.

Object
Properties

Open

Open the Color Mixer.
Save the active document.
Color Mixer

Save

Open the Brushes panel.
Import a file.
Brushes

Import

Open the Fill panel.
Export a file.
Fills

Export

Open the Layers panel.
Print the active document.
Layers

Activate the Help cursor.
Undo the last action.
Help

Undo
Redo the last action.

Redo
Cut the selected object to the
Clipboard.
Cut
Copy the selected object to the
Clipboard.
Copy

Chapter 1

ToolTips name or describe each button’s function as well
as other user-interface features throughout Fireworks.
Pause the cursor over a button on a toolbar to display a
small label, which disappears when you move the cursor
away from the item.

Info bar

Modify toolbar (Windows only)

Options for choosing a color model
and document unit of measurement

The Modify toolbar contains buttons for frequently
used modifications. All commands in the Modify
toolbar are available in the Modify menu.

Color of pixel beneath cursor
Alpha opacity measured in increments
from 0 to 255

Use

To
Group selected objects.

Cursor position
Position of bounding box’s upper-left
corner point

Group
Ungroup selected objects.

Dimensions of selected object
Ungroup

The Info bar provides feedback for selected objects,
depending on object type and current action. Feedback
includes the color of the pixel beneath the cursor in the
current color model values, the position of the cursor,
the location of the selected object’s bounding box, and
the selected object’s dimensions. Choose Window >
Toolbars > Info to show or hide the Info bar.

Join selected objects.

Join
Split selected objects.

Split

The Info bar’s Options pop-up contains settings for
your document’s color model and unit of measurement.

Bring selected objects to front.

Bring to
Front
Bring selected objects forward.

Bring
Forward
Send selected objects backward.

Send
Backward
Send selected objects to back.

Send to Back
Align selected objects according to
the setting in the adjacent pop-up.
Align

Getting Your Bearings

Use

Opacity toolbar

Rotate selected objects 90 degrees
counterclockwise.
Set opacity.

Rotate
90º CCW

View object status
information
(Macintosh only).

Choose
blending
mode.

Rotate selected objects 90 degrees
clockwise.

Flip selected objects horizontally.

Use the Opacity toolbar to set opacity and choose a
blending mode. On the Macintosh, the right side of the
toolbar contains status information for selected objects.
On Windows, this status information is located in the
lower-left corner of the document window. For more
information on opacity and blending modes, see
“Compositing” on page 84 and Fireworks Help.

Flip selected objects vertically.

Do this

Flip Vertical

Set the opacity of a
single object

Set the value using the
opacity slider.

For more information about the Modify toolbar and
about transforming objects, see Fireworks Help.

Apply the same opacity Group the objects and
changes to multiple
alter the group’s
objects
opacity using the
opacity slider.

Rotate
90º CW

Flip
Horizontal

Return individual
Ungroup the objects.
objects to the previous
opacity before
grouping
Set the blending mode Choose from the
of a single object
blending mode pop-up.
Apply the same
blending mode to
multiple objects

Group the objects and
alter the group’s
blending mode using
the blending mode
pop-up.

Return individual
Ungroup the objects.
objects to the previous
blending mode before
grouping

Chapter 1

URLs toolbar
Show or hide the URL overlay.
Choose URL viewing options.

Choosing Image Map Options from the Options popup opens the Image Map Options dialog box. Choose
Map Type, Background URL, and enter an Alternate
Image Description, which is a text message that appears
in a web browser when an image fails to load.

Select, move, and resize URL objects.
Create URL shapes.
Create, edit, duplicate, and remove
links. Choose image map options.

Assign URLs to selected URL objects.
Create rectangular slice objects.

URL stands for Uniform Resource Locator, which is an
address of a specific page or file on the Internet. Use the
URLs toolbar to attach URL hotspots to objects. These
hotspots link an object to a particular URL and are
retained in an image map when your image is exported.
Use the URLs toolbar’s Slice tool to define parts of the
image that are exported as individual files. For more
information on slicing images upon export, see “Slicing
images when exporting” on page 110.
Create URL objects using one of these methods:
◆

Use the URL drawing tools to create a shape.

◆

Select an object and choose Select > Copy to URL.

Use the URLs toolbar Options pop-up to open the
Object Properties dialog box and modify the URL
object shape and linked URL.

Use

Show/Hide
URLs

Make the URL overlay visible.
Objects outside this layer become
unselectable.

URL Pointer
tool

Move and reshape URL and slice
objects.

URL shape tools Create URL objects of various
shapes.
Slice tool

Define parts of the image that are
exported as individual files

Link pop-up

Assign a URL link to an object.

Options pop-up Create, edit, duplicate, and delete
links. Open the Image Map
Options dialog box or the Object
Properties dialog box. View and
modify an object’s URL link and
shape.
Image Map
Options dialog
box

Choose a Map Type and
Background URL, and enter an
Alternate Image Description.

Object
Properties
dialog box

View and modify Object Properties
for the selected object.

For more information on assigning URLs, see “Creating
an image map” on page 109.

Getting Your Bearings

View Controls toolbar (Windows only)
Set magnification.

Tool Options panel

Preview page setup.

Choose display mode.

Use the View Controls toolbar to change document
magnification and display mode. Click the Preview Page
button to see your document’s dimensions and pixel
resolution.
Note: On the Macintosh, the View Controls are located
at the lower-left corner of the document window.

For more information on display modes, see
“Optimizing document redraw” on page 21.
Using panels
Fireworks panels float above the document. Place them
anywhere on your screen. Click a tab to display a
particular panel.
To return the panels to their default positions and reset
application-level preferences, quit Fireworks, delete the
preferences file named Fireworks Preferences located in
the Fireworks folder (Windows) or the
System Folder\Preferences folder (Macintosh) and
relaunch Fireworks.
These panels are tabbed: Layers, Frames, Brush, Fill, and
Effect. Close any of these panels using the standard
Windows or Macintosh close box. Open or close them
by choosing the appropriate command from the
Window menu.

Chapter 1

Options related to the active tool
appear on the Tool Options panel.
The Tool Options panel contains settings for most
Fireworks tools. For example, the Freeform tool options,
shown above, include pressure sensitivity, preview, and
maximum stroke size. Double-click a tool in the toolbox
to open and close its Tool Options panel.
For a complete discussion of Tool Options, see
Fireworks Help.

Swatches panel
Use the Options
pop-up to add,
replace, delete,
save, and sort
swatches, and
choose a color
palette.
Scroll the swatches.

Macintosh

Add a color to the
palette by clicking
in an empty area.

View all swatches.

Windows (docked)
The Swatches panel shows Fireworks’ current color
palette. Choose from this palette when designing
graphics. Select a preset palette or import a palette using
the Options pop-up. Use the Save Swatches command
to save custom palettes for later import. Extract the color
table from an indexed GIF graphic using the Add
Swatches command.

Getting Your Bearings

Color Mixer
To

Do this

Add swatches to the
panel

Choose Add Swatches.

Select Brush or
Fill color.
Choose a color mode
from the Options pop-up.

Replace all swatches with Choose Replace
an external set
Swatches.
Save swatches to an
external set

Choose Save Swatches.

Delete all swatches from
the panel

Choose Clear Swatches.

Change to Macintosh,
Windows, Web 216, or
Grayscale palette

Choose a palette from
Options pop-up.

Sort the swatches by
color

Choose Sort by Color.

Use the custom color
palette from the Export
Preview dialog box

Choose Current Export
Palette.

Chapter 1

Manually apply changes
to selected objects.
Check to automatically apply
changes to selected objects.
Swap brush and fill colors.
Use default colors.

When moving the cursor over the Swatches panel, the
cursor becomes an Eyedropper tool. Click a color to
apply it automatically to selected objects and color wells.

Set color values.
Pick a color from the
color bar.

Create colors using the Color Mixer, then apply colors
to brushes. fills, effects, and text. Use the Options pop-up
to select a color mode: RGB, Hexadecimal, CMY, HSB,
or grayscale.
To

Do this

Apply color changes to
the selected object’s
brush

Click the Brush color well
before choosing a new
color.

Apply color changes to
the selected object’s fill

Click the Fill color well
before choosing a new
color.

Apply color changes to
the selected object’s
effect

Click the Effect color well
in the Effect panel
before choosing a new
color.

Apply color to selected
text

Click the Fill color well
before choosing a new
color.

Switch color modes

Choose the desired color
mode from the Color
Mixer Options pop-up.

Do this

Switch brush and fill color Click the Switch Colors
button.

Revert to default colors

Click the Default Colors
button.

Define colors using the
system color picker

Double-click and color
well.

Change color models in
the color bar only

Point to the color bar
and use Control-click
(Windows) or
Option-click
(Macintosh).

Choose Edit Brush from the Options pop-up to open
the Edit Brush dialog box. The Options, Shape, and
Sensitivity panels within the Edit Brush dialog box
control current brush attributes. Save, delete, and
rename custom brushes using the Brush Options popup.
See “The Brush panel” on page 70 and Fireworks Help
for more information on brush options and settings.
Fill panel
Save, edit, name, and
delete gradients using
the Options pop-up.

Choose a fill.

Brush panel
Save, edit, name, and
delete brushes using the
Options pop-up.

Preview and apply a fill.

Choose a brush.
Choose fill-specific
settings.
Choose brush-specific
settings.

Preview and apply
the brush stroke.

Use the Brush panel to design and modify brushes, as
well as alter the appearance of paths that have already
been drawn. Changing brush settings affects selected
paths and paths drawn after the settings are changed.
Clicking Apply manually applies changes to selected
paths. Checking the Auto-Apply checkbox
automatically updates selected path and text objects as
you change brush settings.

Use the Fill panel to control how objects are filled.
Choose from the available fill categories, and then choose
one of the many fill types from within each category.
Modify any fill by choosing a texture and intensity, fill
color, anti-aliasing, feather, or hard edge. Check
Transparent for a transparent fill texture and enter a
texture amount greater than zero. Use the Fill Options
pop-up to save, name, and delete Gradient fills.
See “The Fill panel” on page 72 and Fireworks Help for
more information on fill options and settings.

Getting Your Bearings

Effect panel

Text Editor
Save, rename, and
delete effects using the
Options pop-up.

Set font, size, and style.
Adjust kerning and leading.

Set orientation,
alignment, and
flow.

Choose an effect.

Choose effect-specific
settings.

Set horizontal
scaling and
baseline shift.
Type or edit
text.

Preview and apply
effect.
Apply changes to the document
without closing the text editor.

Use the Effect panel to apply and modify Live Effects in
your document. Effects applied using the Effect panel
are maintained and updated when the affected object is
altered. For example, if you apply an edge bevel to a
rectangular object and then make the object circular, the
beveled edge adjusts accordingly. In addition, you can
modify effects after applying them to an object by
changing settings in the Effect panel. Effects that can be
altered in this way are known as Live Effects.
Like the Brush and Fill panels, the Effect panel has
controls for selecting effect type and name. Use the
Options pop-up to save, name, and delete custom
effect settings.
Note: To apply more than one effect to an object,
choose Modify > Group after applying each effect.

For more information on using effects, see “Live Effects”
on page 74.

Chapter 1

Use the Text Editor to create and edit text. Unlike many
other applications, Fireworks text is always editable all
the time. Edit text quickly and easily after custom effects
have been applied.
Open the Text Editor by clicking on a document with
the Text tool, double-clicking a text container, or
selecting a text block and choosing Text > Editor.
After closing the Text Editor, resize the text block by
pulling or pushing handles. Move selected text blocks
with the Pointer tool.
For more information on creating and modifying text,
see “Using text” on page 76.

Layers and Frames panels
Navigate quickly to
a specific frame.

Change global view
and lock settings;
create, delete, and
rename layers using the
Options pop-up.
Drag to rearrange
layers. Double-click to
rename a layer.

Drag to assign
selected objects to
another layer.
Lock and unlock individual layers.
Show or hide individual layers.

Create, delete, and duplicate frames.
Distribute items across frames. Copy
selected items to specific frames.

Use the Layers panel to manage multilayered
documents. The Options pop-up includes commands
for creating, deleting, and renaming layers and
commands for viewing and locking all layers.
To show or hide individual layers, click the Show/Hide
icon at the left of the layer name. When the icon is
visible, the layer is also visible. Similarly, clicking the
Lock/Unlock icon locks and unlocks individual layers.
When a layer is locked, items on that layer may not be
moved or deleted. To move a selected object to another
layer, drag the square indicator.
Use the Frame pop-up and Previous Frame and Next
Frame buttons to quickly scroll frames in your
illustration without switching to the Frames panel.
The Frames panel is the key to Fireworks animation
and rollovers. Use the Frames panel and the Animation
panel in the Export Preview dialog box to create
animated GIFs. The Frames panel lists each frame of
your animation and has controls for adding and deleting
frames. Use the Options pop-up to add, delete, duplicate,
and copy objects to specific frames.
For more information on animation, see “Animated
GIF” on page 113.

Drag to rearrange
frames.

Use the Layers and Frames panels to organize and
animate your illustration. Layers divide an illustration
into discrete planes, as though the different components
of the illustration were drawn on separate tracing
paper overlays.

Getting Your Bearings

Navigating your document
Setting document magnification

Fireworks magnification ranges from 6 percent to 6400
percent.

Enlarge a document Choose the Magnify tool and
view level
click inside a document
window
or
Choose an increment from the
Magnification pop-up
or
Choose View > Magnification
and choose a magnification
level.

Choose a magnification
setting from the pop-up.

Do this

Reduce a document Choose the Magnify tool, hold
view level
down Alt (Windows) or Option
(Macintosh), and click in a
document
or
Choose an increment from the
Magnification pop-up
or
Choose View > Magnification
and choose a magnification
level.
Zoom to the highest Choose 6400% from the
magnification
Magnification pop-up
or
Choose View >
Magnification > 6400%
or
Press Control-6 (Windows) or
Command-6 (Macintosh).
Zoom to the lowest Choose 6% from the
magnification
Magnification pop-up
or
Choose View >
Magnification > 6%.

Chapter 1

Zoom in to view a
specific area

Choose the Magnify tool and
drag a selection area.

Zoom out

Choose the Magnify tool and
hold down Alt (Windows) or
Option (Macintosh) and drag a
selection area.

Using magnification shortcuts

Multiple document views

Use

Use multiple views to see one document at two different
view modes or magnifications simultaneously.

Set view to 50%

Control-5 (Windows) or
Command-5 (Macintosh)

To open a second document view:

Set view to 100%

Control-1 (Windows) or
Command-1 (Macintosh)

Set view to 200%

Control-2 (Windows) or
Command-2 (Macintosh)

Set view to 400%

Control-4 (Windows) or
Command-4 (Macintosh)

Set view to 800%

Control-8 (Windows) or
Command-8 (Macintosh)

Set view to 3200%

Control-3 (Windows) or
Command-3 (Macintosh)

Set view to 6400%

Control-6 (Windows) or
Command-6 (Macintosh)

Zoom in

Control-Spacebar (Windows)
or Command-Spacebar
(Macintosh)
or
Control-+ (Windows) or
Command-+ (Macintosh)

Zoom out

Control-Alt-Spacebar
(Windows) or CommandOption-Spacebar (Macintosh)
or
Control-[minus] (Windows) or
Command-[minus]
(Macintosh)

Shortcut menus
Click the right mouse button (Windows) or use
Control-click (Macintosh) to display a shortcut menu
containing a variety of commands. These menus vary
according to which tool is chosen or which objects are
selected. For example, one shortcut menu is available
when selecting objects, while another shortcut menu is
available when in image edit mode. Experiment with
shortcut menus to speed your work.

Choose Window > New Window.

Change the view and magnification of the new
document window.

To close a document view window, click the window’s
close box.
Optimizing document redraw
Choose one of two view modes from the View menu:
Full Display or Draft Display. View modes affect a
document’s on-screen representation, not its object data
or output quality.
When in Draft Display, switch to Full Display by
choosing View > Full Display or by using the Display
Mode pop-up on the View Controls toolbar
(Windows) or in the lower-left corner of the document
window (Macintosh).

Display controls
(Windows)

Choosing a display mode
Choose

Full Display

Display the document in all
available colors with full
detail.

Draft Display

Display paths as one pixel
wide with no fill. Each image
object appears as an x-box.

Note: For easier editing, objects selected while in Draft
Display mode display in full detail.

Getting Your Bearings

A case study
Before Fireworks
Before Fireworks, creating graphics for the web involved
several applications, with each contributing to a portion
of the task. Imagine that a web designer named Ping is
asked by a client to create an artist’s palette to serve as a
navigation graphic on a web page. The graphic will be
used to link to other places on the client’s web site and
must contain rich textures and effects to capture the
viewer’s attention. Accordingly, the graphic must
contain web-safe colors, text, textures, Live Effects, and
URL links.
How Ping approaches this task before Fireworks:
1

Create a line drawing of an artist’s palette using
an application such as Macromedia FreeHand.

Import the vector graphic into an image editing
application such as Adobe Photoshop to rasterize
the graphic (convert the vectors to pixels). Then
apply color and bevel effects.

Apply third-party filter effects, such as bevels and
drop shadows.

Use a utility such as Equilibrium DeBabelizer to
convert the image to a web-safe color palette in
the proper graphics file format with an
optimized size.

Painstakingly add URL objects or animation using
yet another application.

Manually attach hyperlinks to the hotspots that
link to the client’s web pages.

View the results of this process in a web browser.

Unfortunately, if the graphic has the slightest flaw, Ping
must often begin again and redo every step to reproduce
the graphic. In adjusting file-size optimization, Ping
may need to retrace all or some of these steps. Even if the
result is acceptable to the designer, client-driven changes
such as text edits may result in repeating these steps
many times until the final product is complete.

Chapter 1

The Fireworks way
With Fireworks, Ping doesn’t need those other
programs. He needs only Fireworks to produce this
graphic from start to finish. Even better, modifications
are easy, even after the graphic has been loaded onto the
web site.
How Ping uses Fireworks to make this job easy:
1

Open a new Fireworks document or import an
existing document.

In our example, the vector framework is created in
Fireworks using the intuitive vector tools.
Fireworks imports all major web design file formats.
Alternatively, Ping can create this vector art in
FreeHand and open it directly in Fireworks.

Create vector art in Fireworks or open FreeHand
documents directly.

Apply brushes, fills, and effects.

Apply realistic brushes, fills, and effects using the
Brush, Fill, and Effect panels. Use the Effect panel to
bevel the edge of the palette. In this example, Ping
uses the vector tools to alter the number and
location of the paint wells on the artist’s palette. He
then applies a solid fill, parchment texture, and bevel
effect to produce this image.

Add text.

Use Fireworks’ Text Editor to create and modify
text.

Fireworks text is always editable.

Use the Brush, Fill, and Effect panels to add
color and texture to objects.
3

Add a drop shadow to the text.

Apply a live drop shadow effect to the text using the
Effect panel. Even though a drop shadow effect has
been added, the text can still be modified.

Reshape the object.

Alter the shape of the artist’s palette using the
Reshape Area tool.

Getting Your Bearings

Create the image map.

Use the URLs toolbar to add URL objects to the
paint wells. These hotspots can link to any URL.
Use the Image Map Options dialog box to define
map type, background URL, and alternate image
descriptions. In our example, Ping selects the three
labeled paint wells and chooses Copy to URL. This
command creates a URL object the same size,
shape, and location as the original path. With each
path selected, Ping defines the linked URL using
the URLs toolbar.

Optimize the graphic upon export.

Exporting from Fireworks is a dynamic experience
offering live feedback and total control over color
depth, file format, palette selections, and animation.
View up to four simultaneous live previews as you
compare output options and see the results on
screen before exporting.

Revise.

Ping’s client loves the graphic but requests two
changes. The client wants a different color on the
Feedback paint well and wants the text’s drop
shadow to be changed to an inner bevel. No
problem! Ping opens the file in Fireworks, changes
the color of the Feedback paint well, changes the
drop shadow to an inner bevel, and exports again
using the previous export settings.
Objects created in Fireworks are always editable, all
the time.

Chapter 1

Working with Fireworks
Object mode versus image edit mode
In Fireworks, both vector path and bitmap image
objects can be created and modified within a single
document. Path objects may have a pixelated
appearance, but are created using lines and points that
form open or closed paths having brush strokes and fills.
Path or text objects can be converted to images. Image
objects are made up only of pixels and are created using
tools suited for manipulating pixel-based objects.

To exit image edit mode, do any of the following:
◆

Choose Modify > Exit Image Edit.

◆

Choose Control-Shift-D (Windows) or
Command-Shift-D (Macintosh).

◆

Click the Stop button on the Status toolbar
(Windows) or the Opacity toolbar (Macintosh).

◆

Click the canvas away from an image object when
the cursor changes to the Stop cursor.

Setting up your document

Fireworks operates in one of two edit modes: object
mode and image edit mode. Some tools are active in only
one edit mode and some tools change function from
mode to mode.

Consider your document’s design and final output
requirements. Decide in advance which settings are best.

Editability
Unlike many other graphics and image-editing
applications, Fireworks objects are always editable all
the time.

Set the canvas size in the New Document dialog box to
define the size of your document. Set canvas dimensions
using pixels, inches, or centimeters. Alter the canvas size
by choosing Modify > Document > Canvas Size or by
using the Crop tool to crop the background image.

To edit

Do this

Resolution

Path objects

Select a path object with the
Pointer tool, Select Behind tool, or
Subselection tool.

Image objects

Select an image object and choose
Modify > Image Object
or
Double-click an image object with
the Pointer tool.

Resolution is defined in the New Document dialog box
as either pixels per inch or pixels per centimeter.
Consider the intended delivery medium when assigning
resolution. For example, web graphics are usually saved
at 72 pixels per inch.

Background
Image layer

Text

Choose Modify > Background
Image
or
Choose the Background layer on
the Layers panel.
Double-click a text block with the
Pointer tool
or
Select a text block and choose
Text > Editor
or
Click a text block with the Text
tool.

Canvas size

Note: Be sure to set the resolution properly in the New
Document dialog box. Once your document’s resolution
has been set, it cannot be changed.

Canvas color

The canvas is the bottom layer of your document, under
the Background layer. Transparent areas of the
background layer appear as the canvas color. Choose a
white canvas, a transparent canvas, or a color canvas in
the New Document dialog box. Change canvas color
later by choosing Modify > Document > Canvas Color.

Getting Your Bearings

Number of undo steps

Guides

Choose File > Undo to reverse an action. Enter a value of
up to 100 in the File > Preferences > General > “Undo
Steps” field. RAM requirements increase as the number
of undo steps increases.

Use guides, which are non-exporting guidelines, to
precisely align and place objects. Choose View > Guides
to show or hide guides.

Note: Changes to the Undo preference do not take
effect until Fireworks is restarted.

To add a guide with the page rulers active, drag from
either the horizontal or the vertical ruler.
With View > Snap to Guides checked, objects snap
when dragged near guides.

Unit of measurement

Define canvas size using pixels, inches, or centimeters in
the New Document dialog box. The unit you choose
appears in the Info bar. Change the unit using the Info
bar’s Options pop-up.

Editing guides

Choose View > Edit Guides to open the Guides
dialog box.

Note: Regardless of the document’s unit of
measurement, rulers always display in pixels.

Rulers

To show or hide rulers, choose View > Rulers. To set the
ruler’s zero point, click and drag the zero-point marker
from the upper-left corner of the document window to a
new location. The zero point represents the intersection
of the horizontal and vertical rulers. Double-click the
zero point marker to reset the zero point to its
default position.
Grid

Use

The grid is a non-exporting background of horizontal
and vertical lines. Choose View > Grid to display the
grid. With View > Snap to Grid checked, dragging an
object near a grid line causes that object to snap to
the grid.

Color

Change the guides’ color.

Show Guides

Show or hide the guides in your
document.

Snap to
Guides

Easily align objects to guides.

Lock Guides

Prevent guides from moving.

Clear All

Remove all guides.

Set grid color.
Set horizontal
grid spacing.
Set vertical
grid spacing.

Chapter 1

Working with the grid and guides
To

Do this

Show or hide
the grid

Choose View > Grid
or
Check Show Grid in the Grid
dialog box.

Snap objects to
the grid

Choose View > Snap to Grid
or
Check Snap to Grid in the
Grid dialog box.

Modify the grid

Choose View > Edit Grid.

Show or hide rulers

Choose View > Rulers.

Show or hide guides

Choose View > Guides.

Snap objects to
guides

Choose View > Snap to
Guides
or
Check Snap to Guides in the
Guides dialog box.

Edit guides

Choose View > Edit Guides.

Lock guides

Choose View > Lock Guides.

Importing and exporting
Fireworks can import a wide variety of vector and
bitmap graphic formats and can export many bitmap
graphic formats. Discussed in “Using Export Preview”
on page 95, one of Fireworks’ greatest strengths is the
ability to export many formats with extensive export
preview capabilities.
Export preview provides immediate and dynamic
feedback on the appearance and technical specifications
of your graphics before exporting them. Use the Export
Preview to experiment with export formats, color depth,
and palette assignments and immediately see the results.
Importing bitmap images
Fireworks imports BMP, GIF, JPEG, PICT
(Macintosh), PNG, TIFF, xRes LRG, and Photoshop
files. When imported, these files are fully editable using
Fireworks bitmap editing tools and many Photoshop
third-party plug-ins while in image edit mode. In
addition to file name and location, the Import File
dialog box shows file size, format, and a thumbnail
preview, if available.
To import a bitmap graphic:
1

Choose File > Import or use Command-R
(Macintosh) or Control-R (Windows).

Choose the file to import.

Position the import cursor where the upper-left
corner of the graphic is to appear.

Click the mouse button to place the graphic at its
default size, or click and drag the import cursor
to resize the image while importing.

Importing vector art
Fireworks imports vector graphics from Macromedia
FreeHand 7 and 8, Adobe Illustrator 7, and
CorelDRAW. Imported paths are fully editable as if
they were created in Fireworks.

Getting Your Bearings

Fireworks offers several choices for importing multilayer
documents, including layer-to-layer and layer-to-frame
interpretations. See “Importing FreeHand, Illustrator, or
CorelDRAW files” on page 93 for more information on
importing vector graphics.

Choose file format.

Exporting
Note: See Chapter 4, “Importing and Exporting,”
for a complete discussion of Fireworks’ extensive
export capabilities.

View specifications for current
export settings.

Save and choose preset
export settings.

Automatically
optimize.
Choose color
options.
View the current
color palette.

Adjust transparency.

Pick, pan, and
magnify preview.
Scroll or play
animation frames.
Choose up to four
simultaneous
previews.

Keep settings as
document defaults
but do not export yet.
Activate the
Export Wizard.

Chapter 1

Preview current
export settings.
Open the Export File
dialog box.
Resize this dialog box.

To export a graphic:
1

Choose File > Export or use Control-Shift-R
(Windows) or Command-Shift-R (Macintosh) to
open the Export Preview dialog box.

Choose settings on the Options, File, and
Animation panels.

View the effect of your settings in the
preview area.

The preview area can display up to four views
simultaneously.
4

Click Export when you are ready to export the file
with the current settings.

For more information on exporting graphics, see “Using
Export Preview” on page 95.
Export Wizard

Activate the Fireworks Export Wizard by choosing
File > Export Wizard or by clicking the Export Wizard
button in the Export Preview dialog box. The Export
Wizard asks questions regarding your exported file’s
intended use and suggests appropriate graphic formats.

Getting Your Bearings

Chapter 1

CHAPTER 2

Tutorials

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tips for using the tutorials
The tutorials in this chapter quickly introduce you to an
assortment of graphic creation and production tasks
that are fully described elsewhere in this manual, Using
Fireworks, and in Fireworks Help. The ongoing example
assumes you are designing the web home page shown
below for a fictitious company called StarGaze.

Note: The Macromedia web site www.macromedia.com
has more information about using Fireworks, including
tips and tutorials.

Font substitution
To accurately reproduce the tutorial illustrations on
your computer, install the fonts Antique Olive T
Medium and Copperplate T Bold. Included with
Fireworks, these fonts are in the Tutorials folder within
your Fireworks application folder. Without these fonts,
Fireworks may warn you and automatically substitute
another font when opening some tutorial files.
Opening tutorial files
To preserve the tutorial files for reuse, it is important to
open each using the File > Open command and check
Open as “Untitled” in the Open File dialog box.
Opening an untitled document minimizes the chance
of saving over the original file. However, if you do
open the original file, remember to save the file using
another name.

These tutorials are not start-to-finish instructions for
creating web site features. They demonstrate Fireworks
concepts and activities to help you understand how to
use the application.
Each tutorial is self-contained, so you can work on them
out of order. Choose the topics that best suit your
learning goals:
◆

Working in object mode

References

◆

Activating image edit mode

◆

Applying and editing fills

◆

Reshaping paths

◆

Masking objects

◆

Working with text

◆

Creating rollovers

◆

Linking an image map

◆

Working with animation

Chapter 2

The greater-than ( > ) sign indicates a series of menu
commands. Here is an example of a sentence
directing you to choose the Bring to Front
command from the Arrange menu:
Choose Modify > Arrange > Bring to Front.

◆

Names of elements that appear in the menus, on
panels, in dialog boxes, or in ToolTips are capitalized.

◆

With Auto-Apply checked, press Enter or click
Apply after typing a value in one or more fields on a
panel. Auto-Apply does not automatically apply
typed values.

Preferences
Preferences are application-level settings. To edit these
settings, choose File > Preferences. To reset your
preferences to the Fireworks defaults, exit Fireworks,
delete the preferences file named Fireworks
Preferences.txt located in the Fireworks folder
(Windows) or Fireworks Preferences located in the
System Folder\Preferences folder (Macintosh) and then
relaunch Fireworks.

Toolbox tools
To choose a tool in the Toolbox, click the tool’s button. A
tool with a triangle at the lower-right corner belongs to a
tool group. To choose a tool in a tool group, click and
hold down the button to display the tool group, move
the pointer cursor over the desired tool, and release the
mouse button.

Choose the Crop tool in the Pointer tool group in the Toolbox.

Working with panels
When a step asks you to display a panel, choose the
panel name from the Window menu. With a panel
already displayed, choosing the panel name from the
Window menu closes it. If this happens, repeat the
command to display the panel again.
Paths and marquees

Correcting mistakes
Remember that if you make a mistake, you can choose
Edit > Undo. The default number of undo steps is eight.
To adjust the number of undo steps, choose File >
Preferences to display the Preferences dialog box. Type a
new value in the Undo Steps field, click OK, and
relaunch Fireworks.

If a selected path or marquee is hard to see because of its
highlight color, choose File > Preferences, click the
Highlight color well, and choose a new color from the
system color picker.
If a marquee or the paths of selected objects are hidden,
uncheck View > Hide Edges to show the marquee or
paths of selected objects. Use the Hide Edges command
to hide a marquee or an object’s path when it obscures
your on-screen work.

Tasks and pictures

Object opacity

Each step in the tutorials is actually a series of short tasks
comprising a step group. Not every task has a
corresponding picture. If you complete a task and
cannot find a picture as a guide, go to the next task.
Generally, the final picture for the step group
corresponds to the last task in the procedure.

Before beginning a tutorial, choose Window > Toolbars >
Opacity. Set the opacity to 100 and choose the Normal
blending mode, so that the objects you create are fully
opaque and have no blending mode.

Tutorials

Working in object mode
Fireworks has two primary working environments:
object mode and image edit mode. Most Fireworks
graphic creation and design occurs in object mode. Pixel
editing occurs in image edit mode. For a detailed
discussion of these modes, see “Object mode and image
edit mode” on page 56. In this lesson, learn how to select
and manipulate objects comprising the planet Saturn.

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Planets.png file, and click Open.
If necessary, choose Window > Layers to display
the Layers panel. Click the show/hide icon in the
first column next to the Text layer, the Earth layer,
and the More planets layer to hide each layer.
Leave the Saturn, Foreground, and Background
layers visible.

Show/Hide icon

Open the Planets.png file. Hide all layers except Saturn, Foreground,
and Background.
2

Choose the Pointer tool in the Pointer tool group.
If necessary, choose Window > Tool Options and
check Mouse Highlight in the Tool Options panel.
The mouse highlight previews currently selectable
objects. Move the Pointer tool over the body of
the planet Saturn.
Saturn’s body consists of two objects: a circle and
a half circle. Its ring is a composite path
consisting of two ellipses.

Move the Pointer tool over the planet Saturn and observe the
mouse highlight.
3

Use the Pointer tool to drag away one of the two
objects forming Saturn’s body. Notice that the
path along the selected object is highlighted. If
you cannot see a selected object’s path, uncheck
View > Hide Edges to show the hidden path.
Drag away the second object. Notice how the
planet is constructed and then choose
Edit > Undo to reassemble the pieces.

Drag apart the pieces of Saturn.

Chapter 2

Use the Pointer tool to select all three pieces of
Saturn. Click to select the ring. Hold down Shift
and click the bright side of the planet to add the
half circle to the selection. Choose the Select
Behind tool in the Pointer tool group. Hold down
Shift and click the bright side again to add the
circle behind the half circle to the selection.
In object mode, feedback defining the current
selection appears in the Status bar (Windows) or
in the Opacity toolbar (Window > Toolbars
>Opacity) (Macintosh). The selection feedback
reads “3 Objects.”

Use the Pointer tool and the Select Behind tool to select all three
objects in the planet. View the selection feedback.
5

With these objects selected, choose Modify >
Group to group them together. The selection
feedback reads “Group: 3 Objects.” A group has a
selection handle at each corner.
Choose any tool in the Transform tool group to
activate eight transformation handles. Move the
tool outside one of the corner transformation
handles until the rotate cursor appears. Drag
outside the handle to rotate the group. When
finished rotating, double-click to deactivate the
transformation handles.

Group the three objects. Choose any Transform tool and use the
transformation handles to rotate the group.
6

The half circle and circle have a Radial fill that
transitions from the bright color at the center to a
dark color. Choose the Subselection tool to select
these objects within the group. Click the bright
side of the planet to select the half circle. Hold
down Shift and click the dark side of the planet to
select the circle. Leave these objects selected.
If you make a mistake selecting, choose Select >
None and try again. Notice that objects selected
with the Subselection tool display path points.

Use the Subselection tool to select the half circle and the circle.
7

Choose the Paint Bucket tool to display fill
handles for selected objects. Move the tool over
the round handle marking the center of the fill.
The paint bucket cursor changes to a pointer
cursor. Drag the round handle to reposition the
center of the fill. Drag the square handle to set
the radius of the bright color.
For more information about working in object
mode, see the tutorial “Reshaping paths” on
page 40, which features editing tasks in
object mode.

Use the Paint Bucket tool to reset fills.

Tutorials

Activating image edit mode
Switch to image edit mode to edit the pixels of imported
images, images created with Fireworks, or the
Background image. For details about object mode and
image edit mode, see “Object mode and image edit mode”
on page 56. In this lesson, become familiar with
switching between the two modes.

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Star.png file, and click Open.
In Fireworks, files open in object mode. The
Star.png file consists of an image, a star-shaped
object, and a text block.

Open the Star.png file.
2

Choose the Pointer tool in the Pointer tool group
and click the star to select it. Choose Select >
Convert to Image to convert this path object into
an image object. Leave the star selected and
choose Modify > Image Object to activate image
edit mode and the tools specific to this mode.
In object mode, a selected object has a
highlighted path, and a selected image has a
rectangular bounding box. In image edit mode,
the bounding box becomes a striped border.

Select the star and convert it into an image object. Activate image edit
mode.
3

Stop cursor

Using the Polygon Lasso tool,
trace the right half of the
star starting at the top, then
close the marquee at the
starting point.

Chapter 2

Use the Polygon Lasso tool in the Lasso tool
group to select the right half of the star along the
inside edge of the brush stroke. Starting at the
top point, click each vertex around the right half,
then click the starting point again to close the
marquee.
Press Delete to create a transparent area through
which the nebula image is visible. Move the
cursor away from the star image. When a stop
cursor appears, click to switch to object mode.

Choose the Crop tool in the Pointer tool group
and drag a crop marquee that fits to the size of
the image. Drag the handles as necessary to
resize the crop marquee. Double-click the Crop
tool cursor within the crop marquee to remove
the visible canvas. The Crop tool is available only
in object mode.

Crop tool cursors

Select the nebula image and place it on the Background layer. Use
the Crop tool to crop the canvas to the size of the image.
5

Status bar

Use the Pointer tool to select the nebula image.
Note that it has a bounding box. Choose Select >
Drop Selection to merge the nebula image with
the Background image on the Background layer.
The nebula image becomes deselected.

Stop buttons

Choose Modify > Background Image to activate
image edit mode on the Background layer. A
striped border appears around the entire
background image. Explore the Toolbox to see
which tools are available in image edit mode.
Click the Stop button on the Status bar
(Windows) or on the Opacity toolbar (Macintosh)
to deactivate image edit mode. To display the
Opacity toolbar, choose Window > Toolbars >
Opacity.

Opacity toolbar
Click the Stop button on the Status bar (Windows) or
Opacity toolbar (Macintosh) to deactivate image edit mode.
Import cursor

Importing and placing an image is a function of
object mode. Choose File > Import, and in the
Import dialog box, choose the Earth.png file, and
click Open. When the import cursor appears, click
to place the upper-left corner of the Earth image
below the word “StarGaze.”
If necessary, use the cursor keys to center the
Earth on the star. Choose the Pointer tool and
double-click the Earth image to activate image
edit mode.

Import the Earth image, then switch to image edit mode.
7

Choose the Magic Wand tool in the Lasso tool
group, click the black area of the Earth image to
select the region of black pixels. Press Delete to
change the black area to transparent. The star
image object and the background image are now
visible.
This completes practice switching between
modes. See also the tutorial “Working in object
mode” on page 34 to learn more about
manipulating objects in that mode.

Select the black area in the Earth image and delete it.

Tutorials

Applying and editing fills
Use the Paint Bucket tool and the Fill panel to apply
preset or custom fills. Specify fill color, texture, and
opacity. Apply and modify fills in path objects or
in images.

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Planets.png file, and click Open.
If necessary, choose Window > Fill to display the
Fill panel and Window > Layers to display the
Layers panel. Click the show/hide icon in the first
column next to the Text layer to hide the layer.
Leave the other layers visible. If necessary, choose
Window > Toolbars > Opacity to display the
Opacity toolbar. Set the opacity to 100 using the
pop-up slider.

Show/Hide icon

Open the Planets.png file. Hide the Text layer. Set the opacity to 100.
2

On the Fill panel, choose Waves from the Fill
category pop-up, choose “Red, Blue” from the Fill
name pop-up, and choose Anti-Alias from the
Edge pop-up. Choose Plaster from the Texture
pop-up, type 15 in the Amount of texture field
and press Enter. Uncheck Transparent. If
unchecked, check the Auto-Apply checkbox.

Choose the Paint Bucket tool. If necessary, choose
Window > Tool Options to display the Tool
Options panel. Check Mouse Highlight and
uncheck Selected Paths Only.

Create a Waves fill in the Fill panel.

Move the Paint Bucket tool over the blue planet
to display a red mouse highlight. The mouse
highlight previews currently fillable and
selectable objects.

Set options for the Paint Bucket tool.

Chapter 2

With the Paint Bucket tool, click the planet to
apply the current fill and to display the object’s
fill handles. Drag the round handle for the Waves
fill toward the right and drag the square handle
toward the lower-left. This creates a pattern of
narrow waves on the planet.

Choose Edit Gradient from the Options pop-up
on the Fill panel to display the Edit Gradient
dialog box. Drag the color well at the right to the
middle of the color ramp. Then click at the far
right to place a third color well along the color
ramp. Double-click the third color well to display
the system color picker. Choose a color and close
the picker. Then click OK to close the Edit
Gradient dialog box.

Use the fill handles to modify the look of the Waves fill.
Moved color well

Added color well

Choose Select > None to deselect the planet.

Edit the colors in the Waves fill.
6

On the Fill panel, choose Solid from the Fill
category pop-up, choose Anti-Alias from the
Edge pop-up, choose Ripple from the Texture
pop-up, type 65 in the Amount of texture field
and press Enter. Uncheck Transparent.
If necessary, choose Window > Color Mixer to
display the Color Mixer. Type 0 in each of the
color value fields to create a black fill and click
Apply on the Color Mixer.

Set the texture and color for a new fill.
7

Choose Modify > Background Image to activate
image edit mode. A striped border appears
around the nebula image.
Type 25 in the Opacity field on the Opacity
toolbar and press Enter. Click the Paint Bucket
tool within the border to apply the fill. Click the
image a second time to increase the intensity of
the fill.

Click the Paint Bucket tool to apply the fill to the Background image.
Click the tool again to increase the intensity of the fill.

In image edit mode, the Paint Bucket tool fills
entire images or floating pixel selections. To learn
more about applying and editing fills, see
“Applying brushes and fills” on page 70.

Tutorials

Reshaping paths
In this lesson, use the Pen, Freeform, Reshape Area, and
Path Scrubber tools to modify simple shapes in a scene
depicting a comet’s collision with a planet.

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Comet.png file, and click Open.
If necessary, choose Window > Brush to display
the Brush panel and choose Window >
Toolbars > Opacity to display the Opacity
toolbar. Make sure the opacity is set to 100.

Impact zone
Comet’s tail
Comet’s core
Planet

Open the Comet.png file.
2

Create a brush to draw the cloud formations in
the planet’s atmosphere. Choose Unnatural from
the Brush category pop-up and choose 3D Glow
from the Brush name pop-up. Drag the Edge
Softness slider to about midway and type 25 in
the Brush Tip Size field. Choose Chiffon from the
Texture pop-up and type 40 in the Amount of
Texture field. Double-click the Brush color well to
display the system color picker, choose a reddishorange color, and close the picker.

Choose the Brush tool in the Brush tool group. In
a blank area next to the planet, draw a series of
horizontal lines that slightly overlap one another
and extend beyond the planet’s width.

Create a brush for the planet’s clouds.

Choose the Pointer tool. Drag a selection area
around all the lines to select them. Choose
Modify > Join to join them into a single
composite path. Leave the path selected.

Draw a series of horizontal lines and join them together to form a
single composite path.

Chapter 2

Reshape area cursor

Choose the Reshape Area tool in the Freeform
tool group, and if necessary, choose Window >
Tool Options to display the Tool Options panel.
Type 80 in the Size field and 40 in the Strength
field and press Enter. Uncheck Preview.
Move the Reshape Area tool over the lines, click
to display the reshape area cursor, and drag
slightly upward or downward. Release the mouse
button. Click and drag again to continue
reshaping the composite path to create a wavy
cloud pattern.

Choose the Reshape Area tool and set options. Use the tool to
transform the horizontal lines into a wavy cloud pattern.
5

Use the Pointer tool to drag the composite path
over the planet. With this path selected, choose
Edit > Cut. Use the Pointer tool to select the
planet and choose Edit > Paste Inside to create a
paste inside group. Choose Select > None to
deselect the composite path within the group.

Use the Pointer tool to drag the comet’s core next
to the planet and leave it selected. Choose the
Pen tool and move it over a path segment. When
the insert point cursor appears, click to add a
point to the path. Hold down Control (Windows)
or Command (Macintosh) to temporarily switch
to the Subselection tool, and drag the point to a
new position.

Choose Window > Effect to display the Effect
panel, choose Inner Bevel from the Effect
category pop-up, and choose Flat from the Effect
name pop-up. Type 7 in the Width field, 85 in the
Contrast field, 1 in the Softness field, and 320 in
the Angle field and press Enter. Choose Raised
from the Button Preset pop-up. If unchecked,
check the Auto-Apply checkbox. Choose Select >
None to deselect the core.

Paste the cloud pattern inside the planet.

Use the Pen tool to add a point and use the Subselection tool to
reposition it.

Apply an effect to the comet’s core.

Tutorials

Use the Pointer tool to drag the comet’s tail next
to the comet’s core and leave it selected. Choose
the Path Scrubber (+) tool in the Freeform tool
group to adjust the brush stroke of the comet’s
tail. On the Tool Options panel, check Pressure,
uncheck Speed, and type 5 in the Rate field.
The Path Scrubber tool changes the pressure and
speed effects of brushes that have a tapered
appearance in the Brush panel preview. The tail’s
brush stroke is Calligraphy Bamboo.

Drag the comet’s tail next to the comet’s core and leave it selected.
Choose the Path Scrubber (+) tool.
9

Drag the tool over the selected path near the
comet’s core to create a wide head for the comet.
With the Path Scrubber tool chosen, hold down
Alt (Windows) or Option (Macintosh) to switch to
the Path Scrubber (-) tool. Do not release Option
or Alt. Drag the tool over the selected path away
from the head to taper the tail. Continue
modifying the brush stroke until you obtain the
desired effect.

Scrub the tool on the selected path so that the brush stroke is thicker
near the comet’s head and thinner farther away.
10 Create an object marking the impact zone of the

comet and the planet. Locate the circle with the
Starburst gradient at the lower-right corner of
the canvas. Use the Pointer tool to drag this
shape over the planet.
Choose the Freeform tool in the Freeform tool
group. On the Tool Options panel, type 24 in the
Size field and press Enter. Check Preview.

Move the circle with the Starburst gradient over the planet. Choose the
Freeform tool and set options.
11

Use the Freeform tool to create an object for the impact zone.

Chapter 2

Move the Freeform tool over the selected ellipse.
When the pull cursor appears, drag the path
inward. Do not release the mouse button. Press
the left cursor key or the right cursor key to
decrease or increase the length of the segment
pulled. Release the mouse button when finished.
Continue pulling more path segments to finish
the object. Choose Select > None to deselect the
reshaped ellipse. With the Pointer tool, drag the
comet and the tail into place.
To learn more about modifying paths, see
“Editing in object mode” on page 61.

Masking objects
Create masks in object mode. Mask objects either by
choosing Edit > Paste Inside to paste objects within a
selected path or by choosing Modify > Mask Group to
use the alpha transparency of the topmost object in a
group. Masks and mask objects are always editable. In
this lesson, create a graphic using text, a star-shaped path,
and an image of a nebula.

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Star.png file, and click Open.
Choose File > Preferences to display the
Preferences dialog box, and click the Highlight
color well to display the system color picker.
Choose a color other than blue and close the
picker. Click OK to close the Preferences dialog
box. Make sure View > Hide Edges is unchecked.

Open the Star.png file. Change the path highlight color in the
Preferences dialog box.
2

Use the Pointer tool to select the nebula image. A
selected image has a rectangular bounding box.
Choose Edit > Cut to cut the image to the
Clipboard. Select the star and choose Edit > Paste
Inside. This creates a paste inside group in which
the star (the masking path) masks the nebula.
Choose Select > None to deselect the image, and
then use the Pointer tool to select the paste inside
group. Drag the mask handle to offset the image
within the group. Leave the group selected.

Mask handle

Paste the nebula image inside the star. Once it is pasted, use the mask
handle to move the image within the paste inside group.
3

Choose the Select Behind tool, hold down Alt
(Windows) or Option (Macintosh), and click twice
to select the star. If necessary, choose
Window > Fill to display the Fill panel. Choose
Solid from the Fill category pop-up and Feather
from the Edge pop-up. Type 20 in the Amount of
feather field and press Enter.
To observe how the blue glow changes, enter
incremental amounts up to 40. Click the Brush
tab, and choose None from the Brush category
pop-up to eliminate the brush stroke.

Subselect the star and then feather its fill.

Tutorials

Choose Select > None to deselect the path. Use
the Pointer tool to select the paste inside group.
The mask handle appears at the center of the
selected group. Choose Modify > Object
Properties to display the Object Properties dialog
box. Choose the Clip To Top Object’s Image
option, which activates the alpha transparency of
the masking path, and click OK.
Note: To dismantle either a paste inside group or an
alpha mask group, select it and choose Modify >
Ungroup.

Convert the paste inside group into an alpha mask group.
5

Choose the Select Behind tool, hold down Alt
(Windows) or Option (Macintosh), and click twice
to select the masking path. On the Fill panel,
choose Onyx from the Texture name pop-up, type
75 in the Amount of texture field and press Enter.
Check Transparent.
The light regions of the texture designate
transparent areas showing the canvas color. The
dark regions of the texture designate opaque
areas showing the image. Leave the masking path
selected.

Apply a transparent texture to the masking path.
6

Press the left cursor key or the right cursor key to
decrease or increase the length of the pulled
segment. Release the mouse button when
finished. Continue pulling out more path
segments to create a gaseous cloud.

Use the Freeform tool’s pull cursor to pull the masking path.
7

Create an alpha mask group using the text as the masking path.
The text remains editable.

Chapter 2

Choose the Freeform tool in the Freeform tool
group. If necessary, choose Window > Tool
Options to display the Tool Options panel, and
then uncheck Preview. Move the tool over the
path. When the pull cursor appears, click and
drag the path outward from the center of the
star. Do not release the mouse button.

Choose Select > All and then choose Modify >
Mask Group. Because the text is the topmost in
the object stacking order, it becomes the masking
path of the alpha mask group. Choose the Text
tool and click the text block to open the Text
Editor. Type 100 in the Size field, type the letters
“SG” in the text field, and click OK to apply the
changes.
See “Masking” on page 86 for more information
about mask groups.

Working with text
Creating and editing text in Fireworks is easy. Click the
canvas with the Text tool to open the Text Editor, choose
text attributes such as font, size, and alignment, and type
text in the text preview.
Apply color, texture, and Live Effects to text; attach text
to a path; and use the transform tools to scale and distort
text. In this lesson, create the StarGaze logo and
company slogan.
1

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Logo.png file, and click Open. Use the
Pointer tool to select the blue ellipse. Selecting
this object sets the current fill color to blue.
Note: For information regarding the fonts used in
this lesson, see “Tips for using the tutorials” on
page 32.

Current fill color

Open the file Logo.png and set the fill color.
2

Choose the Text tool and click the canvas above
the blue ellipse to display the Text Editor. Choose
Copperplate T Bold from the Font pop-up, type
44 in the Size field, and type 70 in the Horizontal
Scale field. In the text preview, type “STARGAZE”
in uppercase letters. Click OK to apply the settings
and close the Text Editor. Drag the text block
above the ellipse. Leave the text block selected.

Choose the Pointer tool, hold down Shift, and
click the blue ellipse to add it to the selection. If
you accidentally select a different object, hold
down Shift and click it again to deselect it.
Choose Text > Attach to Path. The path is
visible only when selected. Leave the text on a
path selected.

Horizontal Scale

Create the name of the company in the Text Editor.

Attach the text to the blue ellipse.

Tutorials

If necessary, choose Window > Effect to display
the Effect panel. Choose Inner Bevel from the
Effect category pop-up and choose Smooth from
the Effect name pop-up. Type 7 in the Width
field, 85 in the Contrast field, 5 in the Softness
field, and 135 in the Angle field and press Enter.
Check the Auto-Apply checkbox.

With the text on a path selected, choose
Modify > Group and leave the group selected.

Apply the Smooth Inner Bevel effect to the text.

On the Effect panel, choose Glow from the Effect
category pop-up and choose Basic from the Effect
name pop-up. Type 45 in the Opacity field, 20 in
the Softness field, and 8 in the Width field and
press Enter. The default color for the effect is red.
Leave “STARGAZE” selected.
Note: After applying one effect, you must group an
object or objects before applying another effect.

Group before applying another effect.
6

Click the color well on the Effect panel if it is not
active. An active color well has a black border. If
necessary, choose Window > Swatches to display
the Swatches panel and choose Web 216 Palette
from the Options pop-up.
Move the cursor over the Swatches panel until it
changes to an eyedropper cursor. You may need
to scroll to view the white swatch at the bottom
of the panel. Click the white swatch to apply the
color to the Effect color well and change the glow
from red to white.

Change the color of the glow from red to white.
Kerning field

Subselect the text in the group and change the kerning.

Chapter 2

Choose the Subselection tool and double-click the
text to display the Text Editor. Insert the cursor
between the letters R and G. Type 40 in the
kerning field and click OK to close the Text Editor.
Select the yellow star, drag it over the word, and
center it between the letters R and G. Choose
Modify > Arrange > Bring to Front so that the
star is on top.

With the Pointer tool, select the text block at
the right for the company slogan. Choose the
Skew tool from the Transform tool group to
display eight transformation handles around the
text block.
Moving the tool over each handle changes the
cursor to indicate which transformation function
is available. Move the tool over the lower-left
handle until the pointer cursor appears. Drag
this handle upward to squash the left side of the
text block.

Use the Skew tool to resize the left side of the text block containing the
company slogan.
9

Double-click the text block to deactivate the
transformation handles, and double-click it again
to display the Text Editor. Highlight all the text in
the text preview, click the Stretched Alignment
button to stretch the text to fit the text block,
and click OK. If necessary, use the cursor keys to
better position the text block.

In the Text Editor, set the text to fit the text block.
10 Use the Pen tool to create a wavy line from left to

right that is as wide as the text block. Click the
Pen tool midway along the left edge of the text
block to place a corner point. Click and drag the
tool in the center of the text block to place a
curve point. Double-click midway down the right
edge of the text block to place another corner
point and finish the line. Leave the line selected.

Use the Pen tool to draw a smooth, wavy line.
11

Choose the Pointer tool, hold down Shift, and
click the text block to add it to the selection.
Choose Text > Attach to Path to attach the
paragraph to the wavy line.
To learn more about modifying text attributes,
see “Using text” on page 76.

Attach the paragraph to the path.

Tutorials

Creating rollovers
JavaScript rollovers enhance web interactivity by
changing appearance, or state, in response to mouse
cursor activity. Rollovers often appear as buttons on a
web page. The common rollover states are Up, Over,
Down, and onClick.
Create the states, placing each on its own frame, and then
export them. Fireworks outputs the necessary HTML
and JavaScript code. This tutorial creates four states of a
single rollover.

Over

Down

OnClick

Choose File > Open. In the Open File dialog
box, navigate to the Tutorials folder within
the Fireworks folder. Check Open as
“Untitled,” choose the Button.png file, and
click Open. This file contains a text block and a
spiral-shaped object.

Choose the Pointer tool, and select the object. Do
not select the text block. If necessary, choose
Window > Effect to display the Effect panel.
Choose Inner Bevel from the Effect category popup and Flat from the Effect name pop-up. Type 6
in the Width field, 79 in the Contrast field, 3 in
the Softness field, and 135 in the Angle field and
press Enter. Choose Raised from the Button
Preset pop-up. If unchecked, check the AutoApply checkbox. Leave the button selected.

Open the Button.png file.

Auto-Apply
checkbox

Note: Fireworks Button Preset options are suggested
effect presets. They do not create rollovers.

Use the object and the Effect panel to design an Up button.
3

Duplicate the current frame three times for a total of four frames,
one for each button state.

Chapter 2

If necessary, choose Window > Frames to display
the Frames panel. Hold down Shift and add the
text block to the selection. Choose Duplicate
Frame from the Frames panel Options pop-up.
Type 3 in the Number field to specify the number
of duplicates, choose After current frame, and
click OK. In the Frames panel, three new frames
appear after the first for a total of four frames,
one for each button state. Frame 2 becomes the
active frame.

Apply Raised in Frame 1.

Apply Highlighted in Frame 2.

Apply Inset in Frame 3.

Apply Inverted in Frame 4.

Select the object in Frame 2 and choose
Highlighted from the Button Preset pop-up on
the Effect panel. Click Frame 3 on the Frames
panel. Select the object and choose Inset from
the Button Preset pop-up on the Effect panel.
Likewise, click Frame 4, select the object, and
choose Inverted from the Button Preset pop-up.

Choose the Rectangle URL tool on the URLs
toolbar. Choosing any tool on the URLs toolbar
shows the URL overlay, where the document’s
URLs reside. Draw a URL object over the entire
canvas. The new URL object is selected. Choose
New Link from the Options pop-up. In the Link
Info dialog box, type “http://
www.getfireworks.com” in the Link To field, type
“Get Fireworks!” in the Browser Status Bar
Message field, and then click OK.

Apply a different button state effect to each object.

Rectangle URL tool

Optionally, click the Show/Hide URLs icon on the
URLs toolbar to hide the URL overlay.

Create a URL link for the button.
6

Choose File > Export. On the Export Preview
Options panel, choose GIF Rollover from the
Format pop-up and check Optimized for file size
reduction. Choose WebSnap Adaptive from the
Palette pop-up and uncheck Dither. The file
attributes are displayed above the preview.
Note: When creating rollovers with the URL Slice
tool, use the Object Properties dialog box to link and
export rollovers. For more information, see
“Creating a sliced image” on page 110.

Choose an optimized GIF rollover and WebSnap Adaptive palette.
7

Click Export to display the Export File dialog box.
Choose a destination folder, name the file, check
Generate HTML, and click Save (Windows) or
Export (Macintosh). For each rollover state,
Fireworks exports a separate GIF file and creates
an HTML file containing the rollover JavaScript
code. To learn more about creating and exporting
rollovers, see “JavaScript rollovers” on page 117.
Note: When this rollover is previewed in a browser,
the Down state is not included. To learn how to
preview all rollover states, see “The Down state” on
page 117 and Fireworks Help.

Tutorials

Linking an image map
Fireworks offers a convenient way for web designers to
assign URLs to graphics. Use the familiar shape tools on
the URLs toolbar to create hotspot regions with a
specified link, status bar message, and target. Categorize
links by assigning unique overlay colors. Generate
image maps that are client-side, server-side, or both. In
this lesson, create a client-side image map of a stylized
solar system.

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Planets.png file, and click Open.
This opens a graphic with a partially finished
image map for http://www.gaze.com. If
necessary, choose Window > Toolbars > URLs to
display the URLs toolbar.

Open the Planets.png file and display the URLs toolbar.
2

Choose the URL Circle tool. Choosing a tool on
the URLs toolbar activates the URL overlay.
Locate the planet with the word “Forum” on it.
Hold down Alt (Windows) or Option (Macintosh),
click at the center of the planet, and drag from
the center to draw a circle covering the planet.
Release the mouse before releasing Alt or Option.
If necessary, use the cursor keys to nudge the URL
object into place. Leave the object selected.

Use the URL Circle tool to create a URL object over a planet.
3

This circle defines the URL region linking the
Forum planet to the current URL shown in the
URLs toolbar. Choose New Link from the Options
pop-up on the URLs toolbar to open the Link Info
dialog box.
In the Link to field, change the text to “http://
www.gaze.com/forum.html.” Type descriptive
text in the Browser Status Bar Message field to
provide information that displays in the browser
window’s status bar. Choose “_blank” from the
Target pop-up.

Assign a new link for the URL object created.

Chapter 2

Click the Overlay Color color well in the Link Info
dialog box. In the system color picker, choose a
distinct color for this URL. Close the picker and
click OK in the Link Info dialog box.
The Forum hotspot is now linked to
“http://www.gaze.com/forum.html.” Choose
Select > None to deselect the object.

Assign a distinct overlay color for the forum link using your system
color picker.
5

Choose the URL Polygon tool, and locate the
planet with the words “StarGazer’s Handbook.”
Click around the visible portion of the planet to
draw a closed URL polygon. Assign a new link to
the URL object by choosing
“http://www.gaze.com/handbook.html” from the
URL Link pop-up. Choose Select > None to
deselect the object.

Click the Show/Hide URLs button on the URLs
toolbar to deactivate the URL overlay. Choose the
Pointer tool in the Toolbox and select the star
partially behind the Events planet. Choose
Select > Copy to URL. This creates a URL object
that matches the shape of the original object.

Choose Image Map Options from the Options
pop-up on the URLs toolbar to display settings.
Choose Client-side from the Map Type pop-up
and choose None from the Background URL popup. In the Alternate Image Description field, type
a description for the image map that appears if
the image fails to appear in the browser. Click OK
to close the dialog box.

Use the URL Polygon tool to create an irregularly shaped URL
object.

Select an object in the file and choose the Copy to URL command to
make a URL object.

Choose the type of image map you want to create before exporting.
The Client-side option produces two files, an HTM and a JPG.

Note: When exporting, check Generate HTML in
the Export File dialog box to export both the image
and the HTML file containing the image map.

Tutorials

Working with animation
Fireworks streamlines the generation of one of the most
popular web animation formats—the animated GIF.
Create and edit objects and then place these objects on
frames. Use the Export Preview dialog box to optimize
GIF settings and to designate the pace of the animation,
the method of transition between frames, and the
number of times an animation repeats.

Choose File > Open. In the Open File dialog box,
navigate to the Tutorials folder within the
Fireworks folder. Check Open as “Untitled,”
choose the Banner.png file, and click Open.
If necessary, choose Window > Frames to display
the Frames panel. When the file opens, Frame 1 is
the active frame. Click Frame 2 through Frame 4
on the Frames panel to view a different comet
object on each frame. Frame 5 is blank.

Open the Banner.png file. View frames using the Frames panel.
2

Finish Frame 5 in this document using the objects
on Frame 4. Click Frame 4 to make it active, and
choose Select > All to select all objects on that
frame. From the Options pop-up on the Frames
panel, choose Copy to Frames. Choose Next
frame and click OK. Click Frame 5 to activate it
and choose Select > None to deselect all objects.

Choose the Pointer tool, hold down Shift, and
select the comet’s purple core and its white, starshaped head. Drag these objects downward and
to the right to continue the comet’s course.

Copy objects from Frame 4 to Frame 5.

Select only the comet’s tail. Choose the Redraw
Path tool from the Brush tool group. Move the
tool over the right end of the tail until a plus sign
appears next to the cursor. Drag toward the
comet head to lengthen the comet’s tail.

Drag the comet core and head to define the last position in its course.
Use the Redraw Path tool to extend the comet’s tail.

Chapter 2

Click Frame 1 to make it active and choose
Select > All to select all objects on that frame.
Choose the Pointer tool. Hold down Shift and
click the comet’s purple core and its white, starshaped head to deselect these items.
With everything else on Frame 1 selected, choose
Select > Drop Selection to merge these objects
with the Background image on the Background
layer. Now all frames have the same starry
backdrop for the moving comet.

Select all objects on Frame 1 except the comet’s core and head,
and drop these to the Background layer.
5

Choose File > Export to display the Export
Preview dialog box. Choose Animated GIF from
the Format pop-up and check Optimized. Choose
Adaptive from the Palette pop-up. Type 100 in
the Number of colors field and press Enter.

Frame delay

Click the Animation tab. Select Frame 1, hold
down Shift, and click Frame 5 to choose all five
frames. Choose Unspecified from the Disposal
Method pop-up.

Play once

With all five frames selected, type 30 in the Frame
delay field to display each frame for 30
hundredths of a second. Click the Loop button,
and choose 5 from the Number of loops pop-up.

Number of
colors

Set color palette options for the animated GIF.
Disposal method

Loop
Number of loops pop-up

Choose a disposal method, a frame delay, and a looping option.
7

Play button

Click the Play button in the frame controls to
preview the animated GIF.
Click Export in the Export Preview dialog box to
display the Export dialog box. Type a file name
and click Save (Windows) or Export (Macintosh)
to export the animated GIF file.
For more information about creating an
animated GIF, see “Animated GIF” on page 113.

Play the animated GIF in the Export Preview dialog box before
exporting the file.

Tutorials

Chapter 2

CHAPTER 3

Creating and Editing a Graphic

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Object mode and image edit
mode
Computer graphics are one of two types: vector
drawings created in an application such as Macromedia
FreeHand, and bitmap images created in an application
such as Adobe Photoshop.
Paths are the basic elements of vector graphics.
Generated mathematically, a path has at least two points.
Each point joins path segments and point handles
control the shape and length of adjacent segments.
Pixels, the basic elements of bitmap graphics, are tiny
squares that combine like the tiles of a mosaic to create
an image. A bitmap image becomes more granulated as
magnification reveals the individual pixels.
Fireworks blurs the distinction between vector graphics
and bitmap image graphics. The path of a Fireworks
object has an editable vector path. Yet it may also have a
wide, textured stroke, an image fill, and an effect such as
a drop shadow, bevel, or glow.
Magnifying any Fireworks object reveals pixels. Yet the
object’s pixels redraw in response to vector editing. Even
effects—previously reserved for bitmap image
applications—redraw after an object is edited.
Fireworks has two basic modes—object mode and image
edit mode. Object mode is the default mode, where
vector graphic creation and some image manipulation
occurs. Image edit mode is where pixel editing occurs
within an image object or the background image, which
is a permanent image in any Fireworks document.

Chapter 3

Fireworks drawing and editing tools
The table below describes each tool’s basic function in
each mode. Some tools work only in one mode, while
others work in both. The behavior and characteristics of
some tools change according to the current mode. Tools
that behave exactly the same in either mode are not in
this table. For detailed descriptions of tools, see “Toolbox”
on page 7 and Fireworks Help.
This tool

In object mode

In image edit mode

Pointer

Selects and moves
paths on screen.
Double-click an
image to switch to
image edit mode.

Moves the image or
moves pixels bound
by a marquee.

Select
Behind

Selects an object
Moves the image or
behind the selected moves pixels bound
object.
by a marquee.

Crop

Discards portions of Is not available.
a document.

Export
Area

Exports a portion of Is not available.
a document.

SubSelects and moves
selection paths on screen,
selects an object
within a group or
Symbol, displays
points on a path,
and selects points.

Moves the image or
moves pixels bound
by a marquee.

Marquee Is not available.
or Ellipse
Marquee

Selects or moves a
rectangular or
elliptical area of
pixels.

Lasso or Is not available.
Polygon
Lasso

Selects or moves a
freeform area of
pixels.

Magic
Wand

Selects an area of
similarly colored
pixels.

Is not available.

Line,
Draws objects as
Pen, and editable paths.
Basic
Shapes

Paints pixel brush
strokes on an image
object.

Text

Exits image edit
mode, creates text
blocks, and opens
the Text Editor.

Creates and edits
text blocks and
opens the Text
Editor.

This tool

In object mode

In image edit mode

Pencil

Draws one-pixel
pencil strokes as
freeform paths.

Draws one-pixel
pencil strokes with
no paths.

Brush

Draws brush
strokes as paths.

Paints brush strokes
as pixels.

Redraw
Path

Redraws a segment Paints brush strokes
of a selected path as pixels.
or draws brush
strokes as paths.

Freeform Pulls or pushes a
selected path to
reshape it.

Is not available.

Reshape Reshapes the parts
Area
of a selected path
that lie within the
Reshape Area
cursor area.

Is not available.

◆

Importing, positioning, and applying effects to
bitmap images.

◆

Importing and editing documents with vector
graphics created in applications such as FreeHand.

In object mode, paths and points are the basic elements
of graphic design. Upon magnification, Fireworks brush
strokes appear pixelated, as if painted in an image-editing
application. Fireworks combines the editability of Bézier
curves with the organic look of bitmap images in
object mode.
To place the brush stroke along the inside or outside of a
path, choose Modify > Object Properties, then choose
Inside or Outside from the Brush Stroke pop-up. For
more information, see “Reorienting the brush stroke” on
page 61.

Path
Alters a path’s
Is not available.
Scrubber pressure and speed
characteristics
without changing
its shape.
Eraser
(Knife)

Cuts a selected
path into separate
paths.

Erases pixels from an
image.

Rubber
Stamp

Is not available.

Clones portions of
an image object.

Object mode basics
Activities in object mode include:
◆

Drawing paths by dragging a basic shape tool or the
Line tool, placing points with the Pen tool, or
drawing a path with a pixel-wide stroke with the
Pencil tool.

◆

Drawing paths with a wide variety of brush strokes,
including textures and patterns with the Brush tool.

◆

Editing paths with the Freeform, Reshape Area,
Redraw Path, Eraser, Path Scrubber, and other tools.

◆

Editing paths by moving points and adjusting
Bézier handles.

◆

Typing and editing text.

A vector object with an
editable path and points.

A bitmap image with a
rectangular image
bounding box.

Brush strokes created in image edit mode may appear
the same as those drawn in object mode, but they are
strictly bitmap images. Conventional vector-editing
techniques cannot edit these images. Working in image
edit mode is similar to other image-editing applications
with some enhancements.

Creating and Editing a Graphic

Open and closed paths

Drawing paths

Open—An open path has a beginning point and an

◆

ending point that do not connect.
Closed—A closed path has a beginning point and

◆

an ending point that connect.

Use the Pen tool to draw paths by plotting points, as in
FreeHand, or use the Brush tool to paint paths, as in
Photoshop. Either way, a brush stroke with a path and
points is created when in object mode.

Pen tool

Brush tool

Displaying and selecting paths

Open path

Closed path

All path objects in object mode are editable. The active
tool and the status of the Hide Edges command
determine which path and point information is
displayed.
◆

A single path can overlap itself to create a loop that
appears to enclose an area, but that is not a closed path.
Only joined endpoints create a closed path. Either type
of path can have a fill. Paths drawn with basic shape
tools are closed paths.

Displayed path and hidden points— Use the
Pointer tool to drag a selection area around any part
of one or more paths or click a path to select it.

To resume drawing an existing open path, use the Pen or
Redraw Path tool to click the ending point and continue
the path.
Completing open and closed paths

To end an open path when using the Pen tool, doubleclick the Pen tool at the ending point when a small
arrow appears next to the cursor. To end an open
path when using other drawing tools, release the
mouse button.
To close a path with any drawing tool, return the cursor
to the starting point of the path and click when a black
square appears next to the cursor.
When this square appears,
release the mouse button to
close the path.

Chapter 3

An object selected with the Pointer tool displays the
path of the object without points.

◆

Displayed path and points—Choose the

Editing points to reshape paths

Subselection tool to automatically display the points
on all selected paths. Use the Subselection tool to
drag a selection area around one or more paths,
displaying the path and points of all selected objects,
or click a path to select it.

Points are the framework for a vector path. The position
and length of each point handle determines the shape
and position of adjacent path segments.

Subselection tool

◆

An object selected with the Subselection tool
displays the path of the object with points.

To select an individual point, use the Subselection tool.
Either click individual points or drag a selection area
around one or more points. To move a point, drag it with
the Subselection tool.

Hidden path and points—Choose View >
Hide Edges to hide the paths and points of
selected objects.

Fireworks has two point types:
◆

curve point with the Pen tool converts it to a corner
point, retracting the handles and straightening the
adjacent segments.
◆

A selected object displays no path
when Hide Edges is checked.

With Hide Edges checked, choosing the Subselection
tool shows the points of selected objects without the
path.
Note: With Hide Edges checked, look at the Status bar
(Windows) or Opacity toolbar (Macintosh) to identify
the currently selected object. Hide Edges also hides
marquees in image edit mode.

To add more objects to a current selection, hold down
Shift and select the additional objects. To select a path
behind another path, use the Select Behind tool.

Curve—Adjacent segments are curved. Clicking a

Corner—One or both adjacent segments are

straight lines. Clicking a corner point and dragging
away from it with the Pen tool converts it to a curve
point, extending the handles and curving the
adjacent segments.
To change the shape of an adjacent path segment, drag a
point handle. The path preview shows the result of
moving the handles.
Point handle
Subselection cursor
Path preview
Path

Selected point

Drag a point handle with the Subselection tool to edit
adjacent path segments.
Select Behind tool

Creating and Editing a Graphic

If handles are not visible, drag from a point using the
Subselection tool so that the point handles appear.
To bend only one adjacent segment, leaving the other
segment unedited, hold down Alt (Windows) or
Option (Macintosh) and drag a point handle from the
point with the Subselection tool.
Drawing in object mode
Draw paths in any of three ways:
◆

Use the Brush tool or Pencil tool to draw freeform
paths.

◆

Use the Line, Rectangle, Ellipse, or Polygon tool to
draw paths by dragging.

◆

Use the Pen tool to draw paths by plotting points.

To both constrain a shape and draw from the
centerpoint, hold down Shift-Alt (Windows) or ShiftOption (Macintosh) while using a drawing tool.
The corner rounding percentage setting on the
Rectangle Tool Options panel determines the
curvature of the corners of rectangles drawn using the
Rectangle tool. To assign a rounding percentage value
to the corners of a rectangle, enter a value or use the
slider on the Rectangle Tool Options panel before
drawing the rectangle.
Use the Polygon tool to draw stars and other polygons.
Use the Polygon Tool Options panel to set the number
of sides, choose stars or shapes, and set angle acuteness.

Drawing by dragging

A five-point star
with Angle =
Automatic
Line tool

A five-sided
polygon

An eight-point star
with Angle = 10

Basic shape tools
Drawing by plotting points

To draw using the Line tool or a basic shape tool, hold
down the mouse button to start a path, drag to draw,
and release the mouse button to complete the path.
Use Shift with the

To constrain shapes to

Rectangle tool

Squares.

Ellipse tool

Circles.

Polygon tool

Polygons oriented at
increments of 45 degrees.

Line tool

Lines at increments of 45
degrees.

To draw a basic shape from a specific centerpoint, hold
down Alt (Windows) or Option (Macintosh) and
drag a drawing tool. The Polygon tool always draws
from a centerpoint.

Chapter 3

To draw using the Pen tool:
1

Choose the Pen tool.

Click to plot corner points.

Press and hold the mouse button on a point, then
drag to draw curves.
3

End the path.
◆

To end an open path, double-click the last point
when a small arrow appears next to the cursor.

◆

To end a closed path, click the starting point
when a solid square appears next to the cursor.
Point handle

Path preview
Pen cursor

Draw paths with the Pen tool by plotting point by point.

To move the brush stroke of one or more objects
inside or outside the path:
1

Select one or more objects.

Choose Modify > Object Properties.

Choose Inside or Outside from the Brush Stroke
pop-up and click OK.

Checking Draw Fill over Brush in the Object
Properties dialog box fills selected objects all the way to
the paths. With this option checked, opaque fills may
obscure the brush strokes inside paths. Fills with a
degree of transparency may tint or blend with brush
strokes inside paths.
Editing in object mode

Reorienting the brush stroke

An object’s brush stroke is centered on the path by
default, but options for placing the brush stroke
completely inside or outside the path are available.

In addition to dragging point handles, several Fireworks
tools edit paths in object mode.

The Freeform, Reshape Area, Path Scrubber, Path Redraw,
and Eraser (Knife) tools are the object mode editing tools.
Centered stroke

Stroke inside

Stroke outside

Creating and Editing a Graphic

This cursor

Specified length

Indicates
The Freeform tool or the Reshape Area
tool is in use. Move onto a selected
path to activate the pull cursor. Click
and hold away from a selected path to
activate the push cursor or reshape
cursor.
The Freeform tool is in use. The pull
cursor is in position to pull the
selected path. Click and hold the
mouse and drag to reshape the path.

The Freeform tool pulls a path segment.

The Freeform tool is in use. The pull
cursor is pulling the selected path.
Release to redraw the path.
The Freeform tool is in use. The push
cursor is active. Push the selected path
with the adjustable circle to reshape
the path.
The Reshape Area tool is in use and the
cursor is active. Drag the area of the
selected path under the cursor. The
area from the inner circle to the outer
circle represents reduced strength.

The Freeform tool
pushes a path segment.
◆

Reshape Area tool—Pull the area of a selected

path within the outer circle of the Reshape Area
cursor. On the Tool Options panel, enter a value in
the Size field or use the pop-up slider to set the size
of the reshape area cursor. Enter a value in the
Strength field or use the pop-up slider to set the size
of the inner circle of the reshape area cursor. The
inner circle is the boundary of the tool at full
strength. The area between the inner and outer
circle reshapes paths at less than full strength.

The Redraw Path tool is in use. The
redraw path cursor is on a selected
path to be redrawn.
The Path Scrubber tool is in use. The
path scrubber plus cursor is active.
Trace a brush stroke to change the
path’s pressure- or speed-sensitive
data.

The path redraws to
reflect the push.

◆

Path Redraw tool—Redraw a segment of a

selected path, retaining the brush, fill, and effect
characteristics of the path.

The Path Scrubber tool is in use. The
path scrubber minus cursor is active.
Trace a path to change the path’s
pressure- or speed-sensitive data.
The knife cursor is active. Drag the
knife line across the selected path to
cut it into two or more paths.
◆

Freeform tool—Push or pull any part of a selected
path. Fireworks automatically adds, moves, or
deletes points along the path as you edit it. On the
Tool Options panel, enter a value in the Size field or
use the pop-up slider to set the size of the push
cursor and the length of the path segment the pull
cursor affects.

Chapter 3

The Path Redraw tool redraws a path segment.
◆

Eraser (Knife) tool—Drag the knife cursor across

a selected path to slice it into two or more paths.
See Fireworks Help for more information about
these tools.

Switching to and from image edit mode
Although graphics created in object mode may have
bitmap image characteristics, Fireworks also has a mode
specifically for editing bitmap images pixel by pixel. In
image edit mode, each pixel of a selected image object or
the background layer is editable.

Return to object mode from image edit mode in any of
three ways:
◆

Note: An image imported in object mode remains an
image. A vector object can be converted to an image by
choosing Select > Convert to Image.
To

Do this

Edit an image
object

Select the object, and then
choose Modify > Image Object
or
Double-click the object using
the Pointer tool.

Create a new
image

1. Choose Edit > Create Empty
Image.
2. Drag to define the size of the
image object.

Edit the
Choose Modify > Background
Background image Image
or
Click the Background layer in
the Layers panel.

A striped border surrounds the selected image object or the
Background in image edit mode.

Move the cursor beyond the striped border until the
cursor becomes a stop cursor, and then click the
mouse button.

Stop cursor
◆

Click the Stop button on the Status bar (Windows)
or on the Opacity toolbar (Macintosh).

Click the Stop button to exit image edit mode.

◆

Choose Modify > Exit Image Edit.

◆

Choose Control-Shift-D (Windows) or
Command-Shift-D (Macintosh).

Image edit mode basics
Switch to image edit mode to directly edit pixels in an
image or in the Background. Activities in image edit
mode include:
◆

Creating and editing images for the web.

◆

Editing images imported from the web.

◆

Editing pixels with the Pencil tool.

◆

Replicating image elements with the Rubber
Stamp tool.

◆

Painting in color with the Brush tool.

◆

Erasing to transparency or to another color.

◆

Applying Xtra filters to pixel selections.

◆

Editing imported GIFs, JPEGs, and PNGs.

◆

Creating composite images.

Fireworks has up to 100 undo steps, which are available
in both image edit mode and object mode. The default
Number of Undo steps preference is 8.

Creating and Editing a Graphic

Selecting an image object

Each bitmap image in Fireworks has a rectangular
bounding box. This box is highlighted when an image is
selected in object mode with View > Hide Edges
unchecked. To switch to image edit mode, double-click
the image.
The Background layer image

The Background layer is a permanent image stretching
across the entire canvas under which no objects or layers
can be placed. It is editable only in image edit mode. The
Background layer is shared across all frames in an
animation. For more information about frames, see
“Animated GIF” on page 113.
◆

◆

Choosing Select > Drop Selection drops selected
objects onto the background layer. Dropped objects
become part of the background image, losing their
status as individual, editable objects.
Choosing Select > Flatten Layers drops all objects—
paths and images—onto the Background layer.
All objects on all layers become part of the
Background image, losing their status as individual,
editable objects.

Use these tools to highlight an area of pixels to edit,
move, cut, or copy. Each draws a marquee that becomes
a flickering dotted shape when complete. To remove a
marquee, draw another one, choose Select > None, or exit
image edit mode.
Use this tool

Marquee

Highlight a rectangular area of
pixels.

Elliptical
Marquee

Highlight an elliptical area of
pixels.

Lasso

Highlight a freeform area of pixels.

Polygon Lasso

Highlight an area of pixels bound
by a polygon.

Magic Wand

Highlight an area of pixels of
similar color.

Note: Hold down Shift to draw square or circular
marquees or to constrain lasso lines to 45-degree
increments. Hold down Control (Windows) or Option
(Macintosh) to draw from the centerpoint.

Using marquees

In image edit mode, the primary selection tools are the
Marquee and Ellipse Marquee tools, the Lasso and
Polygon Lasso tools, and the Magic Wand tool.

An object in image edit mode with a circle marquee

For more information about the Marquee and Lasso
tools, see Fireworks Help.
Marquee tools

Chapter 3

Lasso tools

Converting an object to an image

Transforming and distorting objects

Convert one or more selected objects to an image object
in any of three ways:

Use the Transform tools or menu items to scale, rotate,
distort, and skew an object, a group of objects, or a pixel
selection area.

◆

Choose Select > Convert to Image, which converts
selected objects into a single image object.

◆

Choose Select > Drop Selection, which drops all
selected objects to become part of the Background
layer image.

◆

Choose Select > Flatten Layers, which drops all
objects from all layers to become part of the
Background layer image.

A path-to-image conversion is irreversible, except when
choosing Edit > Undo is still an option.
Note: Flatten Layers is not available in documents with
multiple frames.

Transform tools

Choosing any Transform tool or menu item displays the
transform handles. The handles frame the entirety of
selected objects. In image edit mode, the transform
handles frame the pixel selection.
Transformation handles

Using Xtras
The Xtras menu has effects that are not reversible. Once
these effects are applied to an object, the object is no
longer editable and becomes a floating image object.
Fireworks Xtras include Blur, Invert, and Sharpen.
Photoshop plug-ins also work in Fireworks. Copy
Photoshop plug-ins into the Fireworks Xtras folder
to add them to the Xtras menu. Alternatively, use
the Preferences dialog box to target an additional
plug-in folder.

Center point

Original object

For more information about Xtras, see Fireworks Help.

Scaled
Rotated

Skewed

Distorted

Drag any transform handle to edit the selected objects
interactively. The cursor changes to indicate the available
activity.

Creating and Editing a Graphic

When dragging a transform handle in transform mode
hold down Alt (Windows) or Option (Macintosh)to
scale objects bi-directionally from the centerpoint.
When moving the cursor beyond the handles in
transform mode to rotate selected objects interactively:
◆

Hold down Shift to constrain rotation.

◆

Drag the round centerpoint away from the center of
the handles to relocate the axis of rotation.

Using color
Use the Color Mixer and the Swatches panel to create or
choose colors for Fireworks brush strokes, fills, and
effects.
Check to apply a color to the brush color well.
Check to apply a color to the fill color well.

Choose a color model.

When dragging a transform handle in distort mode:
◆

Hold down Shift to constrain handle movement to
45-degree angles.

◆

Hold down Control (Windows) or Command
(Macintosh) to achieve the illusion of perspective
(corner handles only).

◆

Hold down Alt (Windows) or Option
(Macintosh) to distort the object symmetrically
relative to the axis point.

When moving the cursor beyond the handles in distort
mode to skew the object, hold down Alt (Windows) or
Option (Macintosh) to skew the object relative to the
centerpoint.

Create a color.
Pick a color.
Check to apply a color
automatically.
Click to switch brush and fill colors.
Click to restore default brush and fill colors.

Color Mixer
Add, replace, save, clear,
or sort swatches, or
choose a palette.

To move the centerpoint back to the center of the
transform handles, hold down Shift and Alt-doubleclick (Windows) or Option-double-click (Macintosh)
the centerpoint.

Choose a swatch.

To scale or rotate selected objects, images, and pixel
selections, choose Modify > Transform > Numeric
Transform.
For more information about the Transform tools and
transform menu items, see Fireworks Help.

Chapter 3

Click to add the active swatch to the
palette.

Swatches panel

Using the Color Mixer
By default, the Color Mixer identifies colors as RGB,
displaying a color’s values of red (R), green (G), and blue
(B) color components. RGB values are calculated based
on a range from 0 to 255.
To create a color in the Color Mixer:
1

Choose Window > Color Mixer, if necessary, to
display the Color Mixer.

Click either the brush color well or fill color well,
or display the Brush, Fill, or Effect panel, to
choose the destination for the new color.

Check or uncheck Auto-Apply.
◆

◆

Checking Auto-Apply applies the color to the
displayed current color well and all selected
objects as the color is mixed.
Unchecking Auto-Apply retains current colors
until you manually apply the new color.

Choose

To express color components as

HSB

Values of Hue, Saturation, and
Brightness, where Hue has a value
from 0 to 360 degrees, and
Saturation and Brightness have a
value from 0 to 100 percent.

CMY

Values of Cyan, Magenta, and
Yellow, where each component
has a value from 0 to 255, where
0-0-0 is white and 255-255-255 is
black.

Grayscale

A percentage of black. The single
Black (K) component has a value of
0 to 100 percent, where 0 is white
and 100 is black, and in between
are shades of gray.

Clicking the color bar while holding down Control
(Windows) or Option (Macintosh) toggles the color
bar through the RGB, Hexadecimal, and Grayscale color
models. The Color Mixer fields do not change.

Choose a color model from the Color Mixer
Options pop-up, if necessary.

Note: When the Hexadecimal color bar is displayed,
color choices are restricted to the Web 216 palette.

Enter values in the color component fields or
use the pop-up sliders, or pick a color from the
color bar.

To take a color from the document and put it into the
Color Mixer, click the color using the Eyedropper tool.
The highlighted color well displays the color and the
Color Mixer displays the component values. To
immediately apply the color to all selected objects, hold
down shift while clicking the Eyedropper tool.

The cursor becomes the eyedropper cursor when it
moves over the color bar. Click to pick a color. Deselect
all objects before mixing a color to prevent unwanted
object editing as you mix colors.
Choose alternative color models from the Color Mixer
Options pop-up. The current color’s component values
change with each new color model.
Choose

To express color components as

RGB

Values of Red, Green, and Blue,
where each component has a
value from 0 to 255, where 0-0-0 is
black and 255-255-255 is white.

Hexadecimal

Values of Red, Green, and Blue,
where each component has a
hexadecimal value of 00 to FF,
where 00-00-00 is black and
FF-FF-FF is white.

Viewing color information

The Info bar displays the component values of the color
at the current cursor location. Choose an alternate Info
bar color model in the Info bar Options pop-up.
Choose the color model and unit of
measure for the Info bar.
View the color and alpha opacity
values of the color under the cursor.

The Info bar displays information about the color at
the current cursor location.

Creating and Editing a Graphic

Using the Swatches panel

To replace a swatch with the active color:

Choose Window > Swatches to display the Swatches
panel, which contains the current color palette, or group
of available color choices. Click a color swatch to choose
a brush, fill, or effect color for selected objects and objects
to be drawn later.

Note: The Swatches panel displays the current
Fireworks palette, not the current document’s palette.

To delete a swatch from the palette:

Hold down Shift and point to a swatch.

The cursor becomes the paint bucket cursor.
2

Click the swatch.

The active color replaces the original swatch.

Hold down Control (Windows) or Command
(Macintosh) and point to a swatch.

When the cursor points to a swatch, it becomes one of
three Eyedropper tool icons. Clicking a swatch
automatically assigns that color to the active color well
and applies the color to the brush stroke, fill, or effect of
all selected objects.

This eyedropper

Applies a color to

To append a palette to the current palette:

The brush color well and the
brush stroke of each selected
object.

The cursor becomes the scissors cursor.

The effect color well and the
effect of each selected object.

By default, the Swatches panel contains the Web 216
color palette. Choose alternative color palettes or
customize a palette using the Swatches panel Options
pop-up.
Customizing palettes
To add the active color to the current palette:
1

Move the cursor to the open space after the last
swatch on the Swatches panel.

The cursor becomes the paint bucket cursor.
2

Click to add the swatch.

Note: Choosing Edit > Undo does not undo swatch
additions or deletions.

Chapter 3

Choose Add Swatches from the Options pop-up.

A File dialog box opens.
2

The fill color well and the fill of
each selected object.

Click the swatch to delete it.

To clear the entire Swatches panel, choose Clear
Swatches from the Swatches panel Options pop-up.

Choose a palette file.

Fireworks adds swatches from either of two types of
files: Photoshop ACO palette files and GIFs. The
new swatches are appended to the end of the
current swatches.
To revert a color palette to its original swatches, reselect
the color palette from the Options pop-up.
To save a custom palette, choose Save Palette from the
Swatches panel Options pop-up, and then either name
the new palette or leave the previous name to replace the
original palette.
To use the current custom color palette from the Export
Preview dialog box, choose Current Export Palette from
the Swatches panel Options pop-up.
Note: Except when displaying Current Export Palette,
the Swatches panel is unrelated to the Export Preview
swatch display. For more information about swatches on
the Export Preview dialog box, as well as optimizing
color palettes, see “Options panel” on page 97.

System color pickers
Double-clicking any color well displays the Windows
Color dialog box (Windows) or the Apple Color Picker
(Macintosh). Colors created using either of these
methods bypass the Color Mixer and Swatches panel.

To activate the

Do this

Fill color well

Click the color well with the paint
bucket next to it in the Toolbox or
in the Color Mixer
or
Click the Fill tab on the Brushes
and Fill panel.

Using color wells
The current brush and fill colors are displayed in the
brush and fill color wells on the Color Mixer. Duplicate
color wells appear in the Toolbox.
Click to activate the brush color well.
Click to activate the Fill color well.
The Fill color well is shown as active.
Click to switch the colors in the brush
and fill color wells.
Click to reset to the default brush and
fill colors specified in the Preferences.

The brush and fill color wells and the color well buttons
appear in both the Color Mixer and the Toolbox.

Effect color well Click the Effect tab on the Brushes
and Fill panel. Neither the Toolbox
nor Color Mixer has an Effect
color well. Some effects do not
use color.

To swap colors so that the brush color becomes the fill
color and the fill color becomes the brush color, click
the Switch Colors button in the Color Mixer or in
the Toolbox.
To reset to the default colors, click the Default Colors
button. Specify default colors using the General > “Color
Defaults” preferences.
Note: When the Effect panel is open, neither the brush
color well nor the fill color well is active in the Toolbox
or the Color Mixer.

Applying color to the canvas

In addition, a duplicate brush color well appears on the
Brush panel and a duplicate fill color well appears on the
Fill panel. An Effect color well appears on the Effect
panel when color is an element of the effect.
To activate the

The canvas is the bottom surface, below the Background
layer. Specify a canvas color in either of two ways:
◆

When opening a new document, choose White,
Transparent, or Custom in the New Document
dialog box. To choose a canvas color using the
system color picker, click the Custom color well.

◆

With an existing document, choose Modify >
Document > Canvas Color, and then choose White,
Transparent, or Custom. To choose a canvas color
using the system color picker, click the Custom
color well.

Do this

Brush color well Click the color well with the brush
next to it in the Toolbox or in the
Color Mixer
or
Click the Brush tab on the Brushes
and Fill panel.

Creating and Editing a Graphic

Applying brushes and fills

The Brush panel

Use the Brush panel to choose a brush stroke and to
apply a brush stroke to selected objects. Use the Fill
panel to fill selected objects and subsequently drawn
objects. Use the Brush panel Options pop-up and Fill
panel Options pop-up to adjust brush and fill settings
and to create and save custom brushes and fills.

Choose a brush category.
Choose a specific brush.
Save, edit, rename, and
delete brushes.
Alter brush edge.
Alter brush size.
Change intensity of the
brush texture.
Choose a brush texture.
Show current brush shape.
Alter brush color.
Preview brush stroke.

Brush panel

Manually apply changes to
selected drawn paths.

Fill panel

Check to automatically apply
changes to selected paths.

The Brush panel and Fill panel are the control center for
creating brush strokes and fills. Save your favorite brush
and fill settings to use again. Add your own PNG files
to the appropriate Fireworks Settings folder, re-launch
Fireworks, and use them as custom brush and fill
textures and patterns.
Saving a brush only saves it for use within the current
document. To reuse a saved brush in another document,
copy and paste an object with the saved brush stroke
into the document. The saved brush is added to the
Brush panel for use within the document.

The Brush tool is the primary freeform drawing tool in
Fireworks. The Pen tool is the primary Bézier
curve drawing tool. Use either to create paths with a
wide range of possible characteristics in both object
mode and image edit mode, from thin, pencil-like
paths to wide swaths resembling spray paint or
splattered oil. A variety of brush textures add to the
range of creative possibilities.

For more information on adding textures, see
Fireworks Help.
Brush tool

Pen tool

Extensive brush editing features offer full control of
every brush nuance, including ink amount, tip size
and shape, edge effect, and aspect. Also, sensitivity
settings control how a pressure-sensitive pen affects
brush strokes.

Chapter 3

The brush stroke preview at the bottom of the Brush
panel shows the current brush with the current settings.
A stroke in the preview that tapers or fades or otherwise
changes from left to right illustrates the current pressureand speed-sensitivity settings.

Preview the brush tip shape.

A newly created brush stroke assumes the current color
displayed in the brush color well, whether in object
mode or image edit mode.

Check for a square brush tip.

Using the Edit Brush panels

Preview the brush stroke.

Choose Edit Brush from the Brush panel Options
pop-up to display the Edit Brush panels: Options,
Shape, and Sensitivity.

Set the brush tip size, edge
softness, tip aspect, and tip
angle.

Edit Brush Shape panel

Set ink amount,
spacing, and flow rate.
Overlap brush stamps for
dense strokes.

Assign the brush
property for sensitivity
data to control.

Set brush texture amount.
Set texture on the edges.

Set the degree to which
sensitivity data affects the
current brush property.

Choose an edge effect.
Set the number of tips.
Set spacing of multiple tips.
Choose the color variation
between multiple tips.

Preview the brush stroke.

Edit Brush Sensitivity panel

Saving brush settings

Any change to brush settings is saveable. Use the Brush
panel Options pop-up to save brushes, change brush
characteristics, rename the current brush, or delete the
current brush.
Saving a brush only saves it for use within the current
document. To reuse a saved brush in another document,
copy and paste an object with the saved brush stroke
into the document. The saved brush is added to the
Brush panel for use within the document.

Creating and Editing a Graphic

The Fill panel
Fireworks fill categories are None, Solid, Pattern, and
various gradient shapes. Combine fill types with
textures to quickly create complex artwork.
Save, edit, name, and
delete gradients.

Choosing Edit Gradient opens the Edit Gradient dialog
box. Choose a preset Gradient from the Preset Options
pop-up. Click an area under the color ramp to add color
wells. Double-click any color well to pick a color from
the system color picker. Add as many colors to the color
ramp as you want.

Choose a fill category.
Choose Anti-Alias, Hard
Edge, or Feathered edge.
Control edge feathering.
Choose a fill texture and
intensity and control
transparency.
Alter fill color.
Manually apply changes
to selected paths.
Check to automatically apply
changes to selected paths.

Editing a fill with the Paint Bucket tool

Choose the Paint Bucket tool to quickly edit a selected
object’s fill.

Preview fill.

Fill panel

A newly created closed path drawn with the Pen tool or
basic shape tools assumes the current fill displayed in the
Fill panel. Paths drawn with other drawing tools have a
default fill of None.

Paint Bucket tool
◆

When the Fill panel has a fill of None or Solid,
clicking inside the object with the Paint Bucket tool
adds the color in the fill color well as a Solid fill.

◆

When the Fill panel has a Pattern or Gradient fill,
clicking the Paint Bucket tool places the round
paint bucket handle, which represents the center or
starting point of the fill.

◆

When choosing a new Pattern or Gradient fill type
in the Fill panel, clicking inside a selected object
applies the new fill type to the object.

Editing and saving a gradient color ramp

All fill categories other than None, Solid, and Pattern
are Gradient fills. Use the Fill panel Options pop-up to
edit, save, rename or delete the current Gradient.
Saved fills are stored only within the current document.
To reuse a saved fill in another document, copy and paste
an object with the saved fill into the other document.
The saved fill is added to the Fill panel.

Chapter 3

Adjusting a fill interactively

Adding texture

To change or distort a selected object’s Pattern or
Gradient fill, choose the Paint Bucket tool. An L-shaped
or linear set of handles appears on or near the object. Use
these handles to adjust the object’s fill.

Both the Brush panel and the Fill panel have an option
for adding a texture to the brush stroke or fill.

Drag to
adjust fill
width and
skew.

Drag to
place a fill’s
center or
first color.

Preview a texture.
Drag to
adjust fill
angle.

Adjust texture and
transparency.

The Texture name pop-up displays a preview of the
highlighted texture.

Use the Paint Bucket tool handles to interactively adjust a
Pattern or Gradient fill.

The Amount of texture field next to the Texture name
pop-up controls the depth of the texture from 0 to 100
percent. Lower percentages result in lighter texture and
higher percentages result in heavier texture.
On the Fill panel, check Transparent to make the light
parts of the texture transparent.

The round starting handle specifies the starting point of
the fill. Drag the starting handle to move the fill within
the object without changing the size, width, skew, or
angle of the fill.
The ending handle represents the ending point of the fill.
The distance between the ending handle and the width
handle sets the fill angle. Dragging the ending handle
does not move the other handles. The width handle
represents both aspect (or width) and skew.

Creating and Editing a Graphic

Applying effects to objects
Use the Effect panel and Xtras menu commands to
enhance graphics with many Live Effects and filters.
Easily achieve common web effects such as Bevel, Glow,
Drop Shadow, and Emboss, which previously involved
labor-intensive procedures. Alter images with Xtra filter
effects such as Blur, Unsharp Mask, and Invert.

For example, create a button by applying an Outer Bevel
effect on the button itself and apply Drop Shadow to the
text on the button. The button shape and the text on the
button all remain fully editable.

Inner Bevel effect

Live Effects
Live Effects are pixel-based effects that apply to path,
image, and text objects and redraw to reflect subsequent
editing. Applying a live effect does not permanently
change the original object.
◆

The object to which the effect is applied remains
editable.

◆

The effect itself remains editable and removable.

Outer Bevel effect

Drop Shadow effect

Emboss effect

Glow effect

Chapter 3

To apply an additional effect to an object:
Save, edit, name, and
delete effects.

Apply the first effect and leave the object
selected.

Choose Modify > Group.

Choose an effect category.
Choose a specific effect.
Set effect-specific
options such as width,
contrast, and softness.

The object and the effect are grouped as an object
that can receive another effect.
3

Add as many effects as you want using this method.
Grouped objects, including text, are still editable.
The multiple effects redraw accordingly.

Choose bevel appearance.
Preview the effect.
Click to manually apply
changes to selected
objects.
Check to automatically apply
changes to selected objects.

Apply another effect.

Use the Effect panel Options pop-up to save custom
effect settings, rename an effect, and delete an effect.
Saved effects are stored only within the current
document. To reuse a saved effect in another document,
copy and paste an object with the saved effect into
the other document. The saved effect is added to the
Effect panel.

Effect panel

Using Subselect or Superselect with effects

To apply an effect to an object:

When applying various effects to a group, masking
group, or Symbol:

Select the object.

Choose the effect from the Effect panel.

Adjust Effect characteristics, viewing the results
in the Effect preview.

Click Apply, unless Auto-Apply is checked.

To edit an effect:
1

Select the object.

Adjust effect characteristics in the Effect panel.

Click Apply, unless Auto-Apply is checked.

Use Modify > Group to apply more than one Live Effect
to an object. Consider the order of effect application
when applying more than one effect to an object.

◆

Choose Select > Subselect to select all objects within
a selected group, masking group, or Symbol.

◆

Choose Select > Superselect to select the group,
masking group, or Symbol that contains the
selected object.

Using Xtras
The Xtras menu has effects that are not reversible. Once
these effects are applied to an object, the object is no
longer editable and becomes a floating image object.
Fireworks Xtras include Blur, Invert, and Sharpen.
Photoshop plug-ins also work in Fireworks. Copy
Photoshop plug-ins into the Fireworks Xtras folder
to add them to the Xtras menu. Alternatively, use the
Preferences dialog box to target an additional
plug-in folder.
For more information about Xtras, see Fireworks Help.

Creating and Editing a Graphic

Using text
Add text using the Text tool and the Text Editor. Apply
brush strokes, fills, and effects to text. Edit text and its
brush, fill, and effect attributes redraw accordingly.

To edit text, double-click a text block. Within a single
block of text, you can vary all aspects of text, including
size, font, spacing, leading, baseline shift, and more. To
resize a text block, pull any text block selection handle.
To use Type 1 fonts on the Macintosh, Fireworks
requires Adobe Type Manager 4 or higher.
Note: Anti-aliasing on text is controlled on the Fill panel,
as it is with paths.

Text tool
In Fireworks, text is neither a path nor an image. Text
initially has no brush stroke and has an anti-aliased edge.
However, a brush stroke can be added and edges can
be changed to hard-edged or feathered using the Brush
and Fill panel. A text block is a moveable and
resizable object.

Drag any text block handle to
resize a text block.

Text block

Text is convertible to an image or to paths; however,
converting text renders it uneditable as text.
To enter text:
1

Choose the Text tool and click the canvas.

The Text Editor opens.
2

Choose font, size, spacing, and other text
characteristics.

Type the text.

Click OK or press Enter.

The text appears in a text block in the Fireworks
document.
5

Resize and move the text block with the Pointer
tool.

Add a brush or effect, or change the fill.

Chapter 3

Using the Text Editor
The Text Editor is where you enter and edit text and
change text attributes. Select all or part of the text in the
Text Editor preview area and apply changes.

To view the results of changes in the document, move
the Text Editor so that the selected text block is visible,
then click Apply to see the changes without closing the
Text Editor.

Orient text horizontally or vertically.
Adjust point size.
Choose fonts from the Font pop-up.

Adjust leading.
Adjust kerning or
range kerning.
Adjust horizontal scale.

Apply Bold, Italic, or BoldItalic.

Set the direction of text
flow as left to right or
right to left.
Set text block alignment to
Left, Center, Right, Justified,
or Stretched.

Adjust baseline shift.

Type and edit text.

Check to show actual
fonts and sizes in the
Text Editor.

Attaching text to a path

Resize the Text Editor.

To edit text attached to a path, double-click the text-andpath object to open the Text Editor.

To place text on a path:
1

Select a text block and a path.

Choose Text > Attach to Path.

Optionally, choose Text > Orientation, then
choose an orientation option.

Choose any of four orientation options for text on a
path: Rotate around Path, Vertical, Skew Vertical, or
Skew Horizontal.

Creating and Editing a Graphic

To edit the shape of the path, choose Text > Detach from
Path to detach the text from the path and edit the path.
After editing the path, select it and the text block and
choose Attach to Path.

Firew
or

To move the starting point of text attached to a
path:
1

Select the text-and-path object.

Choose Modify > Object Properties.

Enter a value in the Text Offset field.

A negative offset value is valid when text is attached to a
closed path or when text is center aligned. The attached
text’s alignment and flow—set in the Text Editor—affects
the outcome of Text Offset. For more details, see
Fireworks Help.

Converting text to paths and images
After text is converted into an image object or to paths, it
is no longer editable as text. The conversion is
irreversible, except when Edit > Undo is available.

Horizontal text on a path

Vertical text on a path with
Vertical Orientation

To convert text to paths:
1

Select the text.

Choose Text > Convert to Paths.

A path to which text is attached temporarily loses its
brush, fill, and effect attributes. Subsequently applied
brush, fill, and effect attributes are applied to the text, not
the path. A path regains its brush, fill, and effect
attributes when text is detached from it.

Text converted to paths retains all of its properties and is
now editable only as paths. However, you can apply
effects to the new paths.

If text attached to an open path exceeds the length of the
path, the remaining text returns and repeats the shape of
the path.

Select the text.

Choose Select > Convert to Image.

Text on a path returns and repeats the path shape.

Chapter 3

To convert text to an image object:

Text converted to an image object retains its current
appearance.

Organizing your document
Fireworks has several features that help organize a
document as it grows more complex.
◆

Group and ungroup individual objects.

◆

Arrange objects behind or in front of other objects.

◆

Arrange, lock or unlock, and show or hide layers.

◆

Organize layers and frames within a document.

◆

Arrange frames.

To work with individual objects within a group, either
ungroup the objects or use the Subselection tool to
subselect only the objects you want to modify.
Modifying attributes of a subselected object changes
only the subselected object and not the entire group.
Subselected objects cannot be moved to other layers.

Grouping objects
Grouping two or more selected objects freezes their
positions and stacking order relative to one another, so
you can manipulate them as a single object. Objects
within a group retain their individual characteristics,
unless you modify the entire group.

Subselect an object within a group.
When working with a group, masking group, or
Symbol:
◆

Choose Select > Subselect to select all objects within
a selected group, masking group, or Symbol.

◆

Choose Select > Superselect to select the group,
masking group, or Symbol that contains the selected
object.

Arranging objects on a layer
Group selected objects as a single object.
Arranging objects on the same layer

To group two or more selected objects, choose
Modify > Group. To ungroup, select the group and
choose Modify > Ungroup.
Note: To apply another Live Effect to an object that
already has a Live Effect applied to it, group the object,
then apply the next effect to the group. For example,
apply an Emboss effect to a letter, group the letter, then
apply a Drop Shadow effect.

Do this

Move an object
forward on the
same layer

Select the object and choose
Modify > Arrange > Move
Forward.

Move an object
to the front of
a layer

Select the object and choose
Modify > Arrange > Bring to
Front.

Creating and Editing a Graphic

Do this

The active layer is highlighted. Drawn, imported, or
pasted objects initially reside on the active layer.

Move an object
backward on
the same layer

Select the object and choose
Modify > Arrange > Move
Backward.

Choose a different frame.

Move an object
to the back of
a layer

Add, duplicate, rename,
and delete layers. Hide
and show layers. Lock
and unlock layers.
Drag to move selected
objects to another layer.

Select the object and choose
Modify > Arrange > Send to
Back.

View and rearrange the
stacking order of layers.

Lock or unlock a layer.

Use the Arrange commands to change the stacking
order of objects. However, you may not see a change in
the stacking order if the objects are not overlapping.

Show or hide a layer.

Layers panel

Using layers
Layers divide a Fireworks document into discrete
planes, as though the graphic components were drawn
on separate tracing paper overlays. Each object in a
graphic resides on a layer. Create all layers before you
draw or add them as needed.

The background layer is always at the bottom of the
stacking order. Only objects on visible, unlocked layers
are editable. The canvas is below the background layer,
but it is not actually a layer.

To show or hide the Layers panel choose Window >
Layers. The Layers panel shows the current state of all
layers in the current frame of a document.
◆

Drag a layer name to rearrange the stacking order.
The order of the list reflects the stacking order of the
layers.

◆

Click the square in the first column to the left of a
layer name to show or hide that layer. A show/hide
icon indicates that a layer is visible.

◆

Click the square in the second column to the left of
a layer name to lock that layer. A padlock indicates
that a layer is locked. Objects on a locked layer are
not editable until the layer is unlocked.

◆

Drag the square icon up or down the list to move
selected objects from one layer to another.

Use the Options pop-up to add, duplicate, rename,
remove, hide or show, and lock or unlock layers. Check
Single Layer Editing to restrict editing to the current
layer.
Use the Current Frame pop-up or the Previous Frame
and Next Frame buttons to navigate among frames.

Chapter 3

Hiding a layer hides all objects on that layer, but does
not remove them from the document. Showing a layer
shows all objects on that layer. A hidden layer cannot be
an active layer.
Note: URLs reside on the URL overlay. To display URLs,
click the Show/Hide button on the URLs toolbar. For
more information, see “Creating an image map” on
page 109.

Hiding selected objects from view

Add, duplicate, or delete frames using the Frames panel
Options pop-up. Use Copy to Frames to copy the
current selection and paste it into the frame specified in
the Copy to Frames dialog box. Use Distribute Selection
to distribute all selected objects across frames according
to the stacking order from bottom to top.
For more information about using frames for animation,
see “Animated GIF” on page 113. For more information
on using frames for rollovers see “JavaScript rollovers” on
page 117.

To hide all selected objects, select them and then choose
View > Hide Selection. Locked objects remain locked
when hidden. Hide Selection does not hide guides.
To show all hidden objects, choose View > Show All.
Hidden objects remain hidden when the document is
closed and reopened.
Using frames
Frames comprise the structure for an animated
Fireworks document. Each frame within a document is
the same size and has the same layers in the same order
as the other frames. The Background layer is shared by
all frames.
Add, duplicate, and
delete frames; copy to
frames; or distribute
the selection.

Frames panel
To show or hide the Frames panel choose Window >
Frames. Frames are automatically named in numerical
order beginning with Frame 1.

Creating and Editing a Graphic

Symbols and Instances

Creating an Instance

Use Symbols and Instances to simplify Fireworks
animations and improve editability. Instances are
representations of an original Fireworks object, which is
designated as the Symbol. When the Symbol object (the
original) is modified, the Instances (the copy)
automatically change to reflect the modifications to the
Symbol.

Create an Instance using any of these methods:

Use Symbols and Instances to:
◆

Simplify modifications to existing animations by
changing only the Symbol object and having the
Instance objects update automatically.

◆

Easily modify complex illustrations containing
multiple copies of objects.

◆

Share components across rollover states.

◆

Copy and paste a Symbol.

◆

Duplicate a Symbol.

◆

Clone a Symbol.

◆

Choose a Symbol and select Copy to Frames from
the Frames panel.

◆

Alt-drag (Windows) or Option-drag (Macintosh)
a Symbol.

Creating a Symbol
Create a Symbol from any object, text, or group. Choose
Edit > Symbols > Make Symbol to turn selected objects
into a Symbol. To add objects to an existing Symbol,
select the Symbol and the objects and choose Edit >
Symbols > Add to Symbol. Symbols cannot include
Instances and other Symbols.

An arrow icon represents
an Instance object.

Modifying a Symbol
Modify a Symbol to automatically modify all associated
Instances. Symbols behave as groups when modified or
transformed. For example, apply different Live Effects to
components within a Symbol by subselecting objects
and using the Effect panel. For more information on
modifying opacity within grouped objects, see “Opacity
toolbar” on page 12.
A plus icon represents a
Symbol object.

Modifying an Instance
Instance object modifications are limited to
transformations, opacity, blending modes, and Live
Effects. When applied to an Instance, transformations
and Live Effects do not affect an Instance’s Symbol
object. Changes to an Instance are automatically
reapplied when its Symbol is modified.

Chapter 3

Working with Symbols and Instances
To

Do this

Create a Symbol

Select an object or group of
objects and choose Edit >
Symbols > Make Symbol.

Add items to an
existing Symbol

Select the Symbol and the
items and choose Edit >
Symbols > Add to Symbol.

Create an Instance

Copy and paste, duplicate, or
clone a Symbol or Instance
or
Select a Symbol and choose
Copy to Frames from the
Frames panel
or
Press Alt (Windows) or Option
(Macintosh) after you begin
dragging a Symbol.

Delete all Instances
while retaining a
Symbol

Select the Symbol and choose
Edit > Symbols > Delete
Instances
or
Select the Symbol, choose
Edit > Symbols > Break Link,
then choose Delete from the
resulting dialog box.

Tweening
Choose Edit > Symbols > Tween Instances to blend a
Symbol and one or more of its Instances, creating
interim Instance objects with transitional attributes.
This is known as tweening. Alternatively, tween two or
more Instances without using a Symbol.
Instance objects created by tweening derive attributes
from the Symbol or Instance objects used. For
example, tween a vertical Symbol with a horizontal
Instance to produce Instance objects that rotate
progressively to form a blend from the vertical object to
the horizontal object.
Tweening can apply to these object characteristics:
◆

Transformations—Tween between objects with

different rotation, scaling, or skew transformations.
◆

Opacity—Tween between opacity settings.

◆

Live Effects—Tween between settings of the same

Live Effects.

Delete a Symbol and Delete the Symbol and
all associated
confirm in the resulting dialog
Instances
box to delete all Instances.
Break the link
between a Symbol
and its Instances

Select the Symbol, choose
Edit > Symbols > Break Link,
and then choose Group from
the resulting dialog box. The
Instances are retained as
unlinked groups.

Find a Symbol for a
particular Instance

Select an Instance and choose
Edit > Symbols > Find
Symbol.

Tweened from 100% opacity to 25% opacity.

Move a Symbol and Select the Symbol, choose
its Instances
Select > Subselect, and move
simultaneously
the contents of the Symbol.
Note: Symbol and Instance functions are available only
in object mode.

Creating and Editing a Graphic

To tween:
1

Select objects to be tweened.

Select a Symbol and one or more of its Instances
or select two or more Instances of the same
Symbol object.
2

Choose Edit > Symbols > Tween Instances.

Enter the number of tween steps in the Tween
Instances dialog box and click OK.

Compositing
Compositing is the process of varying the transparency
or color interaction of two or more overlapping objects
to create a variety of graphic elements.
Using the Opacity toolbar
Adjust opacity.
Choose a blending mode.

Check Distribute to frames to distribute the
tweened objects to separate animation frames.

Opacity toolbar
Use the Opacity toolbar to adjust the opacity of selected
objects and to apply blending modes. A setting of 100
renders an object completely opaque. A setting of 0
renders an object completely transparent.
On the Macintosh, the Opacity toolbar also displays
selected-object information. In image edit mode, a Stop
button appears on the Opacity toolbar. Click the Stop
button to leave image edit mode.
Using blending modes
Blending modes manipulate the color values of
overlapping objects to create effects. They also add a
dimension of control to the opacity effect.
Choosing a blending mode applies it to the entire
appearance of selected objects. Objects within a single
document or a single layer can have blending modes that
differ from other objects within the document or layer.
To set a default blending mode for newly drawn objects,
choose Select > None and then choose a blending mode.
When objects with different blending modes are
grouped, the individual blending modes are overridden
by the group’s blending mode. Ungrouping the objects
restores the objects’ individual blending modes.

Chapter 3

A blending mode has four elements:
◆

Blend color—The color or colors of the object to

which the blending mode is applied.
◆

Opacity—The opacity of the object to which the
blending mode is applied

◆

Base color—The color of pixels underneath the

blend color.
◆

Choose

Color

Combine the hue and saturation of
the blend color with the luminance
of the base color to create the
result color, preserving the gray
levels for coloring monochrome
images and tinting color images.

Luminosity

Combine the luminance of the
blend color with the hue and
saturation of the base color to
create the result color.

Invert

Invert the base color to create the
result color.

Result color—The result of the blending mode’s

effect on the base color or colors.
Choose

Normal

Apply no blending mode.

Tint

Add gray to the base color to
create the result color.

Multiply

Multiply the base color by the
blend color, resulting in darker
colors.

Erase

Remove all base color pixels,
including those in the background
image, to reveal the canvas color.

Screen

Multiply the inverse of the blend
color by the base color, resulting in
a bleaching effect.

Darken

Select the darker of the blend color
and base color to use as the result
color. This color replaces only
pixels that are lighter than the
blend color.

Lighten

Select the lighter of the blend
color and base color to use as the
result color. This color replaces
only pixels that are darker than the
blend color.

Difference

Subtract the blend color from the
base color or the base color from
the blend color. The color with less
brightness is subtracted from the
color with more brightness.

Hue

Combine the hue value of the
blend color with the luminance
and saturation of the base color to
create the result color.

Saturation

Combine the saturation of the
blend color with the luminance
and hue of the base color to create
the result color.

Blending mode behavior
◆

In object mode, a blending mode affects the
selected object.

◆

In image edit mode, a blending mode affects the
floating selection of pixels.

◆

In image edit mode without a floating selection, a
blending mode affects the brushes and fills of
subsequently drawn objects.

◆

The effect of a blending mode in image edit mode
describes how new pixels blend against other pixels
in the same image.

For more information on blending modes, see
Fireworks Help.

Creating and Editing a Graphic

Masking
A mask group has two primary uses, both of which are
available in Fireworks:
◆

Pasting an object inside another object, so that the
enclosing object continues to be visible. This is
known as a paste inside or clipping path in
FreeHand. Cropping an image to the shape of an
object is a typical application of a paste inside.

◆

Pasting an object inside another object, so that the
enclosing object is not visible and the alpha of each
pixel in the enclosing object becomes part of the
window into the paste inside objects. This is known
as a layer mask in Photoshop. A typical application
of a mask is to create an alpha transparency from an
image arranged in front of another image so that the
image behind shows through the lighter portions of
the image in front.

Image and clipping path

Paste inside

Mask group

Chapter 3

To create a mask similar to a paste inside:
1

Position the object to be pasted in front of the
destination path.

Cut the object to the Clipboard.

Select a path inside which the object on the
Clipboard is to be pasted.

Choose Edit > Paste Inside.

Creating alpha for mask groups

Choose Xtras > Other > Convert to Alpha to convert an
object into a grayscale image object with transparency,
and then use the object as an alpha mask. Place the
converted object over other objects, such as text or
photographs, to mask them.

The object on the Clipboard is pasted inside the
selected object in the same position from which it
was cut.
To create a mask similar to a layer mask:
1

Select two or more objects.

Choose Modify > Mask Group.

Mask Group uses the top object’s alpha to mask the
objects.
Choose Modify > Object Properties to determine the
masking method using the Object Properties dialog box.
Note: The top object need not be a path for this type of
masking. It can be an image.

Editing objects within a mask group

Subselect objects within a mask group to edit or
move them. Use the Subselection tool or double-click
the mask group handle to select the contents of the
mask group.
◆

To convert a paste inside into a mask group, select
the paste inside, choose Modify > Object Properties,
and then check Clip to Top Object’s Image.

◆

To convert a mask group into a paste inside, select
the mask group, choose Modify > Object Properties,
and then check Clip to Top Object’s Path.

For more information on mask groups, see the tutorial
“Masking objects” on page 43 and Fireworks Help.

Creating and Editing a Graphic

Chapter 3

CHAPTER 4

Importing and Exporting

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Fireworks in the workflow

Importing

Although Fireworks greatly reduces the need for other
applications within the graphic creation workflow, it is
highly compatible with other applications associated
with producing web graphics.

Import graphics or text in any of four ways:

◆

Import graphics created in applications such as
FreeHand or Photoshop, and edit them using
familiar tools and similar document-organization
features such as layers and frames.
Export optimized graphics, HTML, and JavaScript
for use in Dreamweaver or in a web browser.

◆

Import and export a wide variety of file formats.

◆

Use Export Preview to quickly determine the best
balance of size and quality for your exported
graphics without switching to and from a browser.

◆

Import

◆

Open

◆

Drag and drop

◆

Copy and paste

Import File dialog box
To import a graphic using the Import File dialog
box:
1

Choose File > Import.

Select a file and click Open.

When available, a preview of the selected file is
shown along with file information such as file type
and file size.

Batch process all files within a folder and name and
save export presets.
3

Position the import cursor where you want the
upper-left corner of the object to appear.

Click the mouse button to place the object at its
default size. Click and drag to scale the object.

Imported bitmap images are placed as image objects.
For more information about image objects, see
“Image edit mode basics” on page 63.

Chapter 4

Fireworks can import these formats:

Copy and paste

◆

PNG

◆

GIF

◆

JPEG

Objects that are pasted into Fireworks from another
application are centered in the active document. When
using copy and paste, Fireworks accepts these formats
from the Clipboard:

◆

PICT (Macintosh)

◆

FreeHand 7, 8

◆

BMP

◆

Illustrator

◆

TIFF

◆

PNG

◆

xRes LRG

◆

PICT (Macintosh)

◆

ASCII

◆

DIB (Windows)

◆

RTF

◆

BMP (Windows)

◆

Adobe Photoshop 3, 4

◆

ASCII text

◆

Adobe Illustrator 7

◆

Macromedia FreeHand 7, 8

Resampling

◆

CorelDRAW 7

Resampling adds pixels to or subtracts pixels from a
resized image to match the appearance of the original
image as closely as possible. Resampling an image to a
higher resolution typically causes little data or quality
loss. Resampling to a lower resolution always causes data
loss and a drop in quality.

Drag and drop
Drag and drop objects, images, or text into Fireworks
from any application that supports OLE Drag and
Drop (Windows) or Macintosh Drag and Drop
(Macintosh), such as:
◆

Macromedia FreeHand 7, 8

◆

Macromedia Flash 2, 3

◆

Adobe Photoshop 4

◆

Adobe Illustrator 7

◆

Microsoft Office 97 (Windows)

◆

Microsoft Internet Explorer 3, 4

◆

Netscape Navigator 3, 4

◆

CorelDRAW 7 (Windows)

When pasting an image with a resolution that differs
from the destination Fireworks document, Fireworks
displays a dialog box asking if the image is to be
resampled:
◆

Click Resample to maintain the pasted data’s
original width and height, adding or subtracting
pixels as necessary.

◆

Click Don’t Resample to keep all the original pixels,
which may make the relative size of the pasted
image larger or smaller than expected.

To drag and drop into Fireworks:
1

Select a graphic in another application and drag
it over an open Fireworks document.

Position the cursor where you want to drop the
selection and release the mouse button.

Importing and Exporting

Pasting

ASCII

Each edit mode handles pasted data differently:

Import ASCII text using any of the four import
methods. Imported ASCII text is set to the default font,
12 pixels high, and uses the current fill color.

◆

In object mode, pasting a pixel selection yields a
rectangular image object, which uses alpha
transparency to maintain the appearance of the
selection.
In image edit mode, pasting a vector graphic or
image object pastes a pixel selection that remains
floating until it is deselected. When deselected, the
selection becomes part of the current image.

For a comparison of object mode and image edit modes,
see “Object mode and image edit mode” on page 56.

Importing Fireworks files
Import saved Fireworks files into the current drawing
layer of an active Fireworks document. The following
happens when importing a Fireworks file:
◆

The background layer of the imported file is placed
as an image object.

◆

URLs are placed on the URL overlay. For more
information about URLs, see “Creating an image
map” on page 109.

◆

Layers within the imported file are merged.

◆

In files with multiple frames, only the first frame
is imported.

Importing text
Import text into Fireworks using the same methods for
importing graphics. Fireworks imports two text formats:
RTF (Rich Text Format) and ASCII (plain text).
RTF

Choose File > Open or File > Import to import RTF text.
When RTF text is imported, Fireworks maintains these
attributes:
◆

Font

◆

Size

◆

Style (bold, italic)

◆

Alignment (left, right, center, justified)

◆

Leading

◆

Baseline shift

◆

Range kerning

◆

Horizontal scale

◆

First character’s color

All other RTF information is ignored.
Note: Fireworks cannot import RTF text using copy and
paste or drag and drop.

Chapter 4

Imported objects from a Fireworks file are selected when
they are first imported so they may be easily grouped or
moved immediately after import.

Importing FreeHand, Illustrator, or
CorelDRAW files

File Conversion—Specify how multipage documents
are handled when imported.

Import objects or files from Macromedia FreeHand,
Adobe Illustrator, or CorelDRAW using any four of
the import methods. When opening or importing a
vector-based file, use the Vector File Options dialog box
to define specific settings. Vector File Options do not
apply when pasting or dragging.

◆

Open a page—Import only the specified page.

◆

Open pages as frames—Import all the pages

from the document, and place each on a separate
frame in Fireworks.
◆

Remember layers—Maintain the layer structure

of the imported file.
◆

Convert layers to frames—Place each layer of

the imported document onto a separate frame in
Fireworks.
Include Invisible Layers—Import objects on layers

that have been turned off. Otherwise, invisible layers
are ignored.
Include Background Layers—Import objects from

the document’s background layer. Otherwise, the
background layer is ignored.
Render as images—Rasterize complex groups, blends,

or Tiled fills and place them as a single image object in a
Fireworks document. Enter a number in the field to
determine how many objects a group, blend, or Tiled fill
can contain before it is rasterized during import.
Anti-aliased—Anti-alias imported objects.
Note: Use Modify > Edge after importing to change
selected objects to Anti-Alias or Hard Edge.

Importing Illustrator files
Scale—Specify the scale percentage for the imported file.
Width and Height—Specify in pixels the width and

The following vector file import options are not
available when importing Illustrator files:

height of the imported file.

◆

File Conversion > Page options.

Resolution—Specify the resolution of the imported file.

◆

File Conversion > Include Background layers.

◆

Render as images > Blends over steps.

Importing and Exporting

Importing CorelDRAW files

Fireworks can import CDR files that have been created
with CorelDRAW 7 for Windows. The following
vector file import options are not available when
importing CDR files:

Exporting

◆

File Conversion > Include Background layers.

Finding a good balance between quality and speed
when exporting a graphic for use on the web is often a
daunting task. Fireworks offers several methods to help
develop the best quality graphics with the lowest file
size possible.

◆

Render as images > Blends over steps.

Fireworks exports graphics through these methods:

◆

Render as images > Tiled Fills over objects.

◆

Drag and drop

Note: Fireworks cannot open or import compressed
CDR files.

◆

Copy and paste

◆

Export

Because CorelDRAW supports a different set of
features than Fireworks, the following changes occur
when importing CDR files:

◆

Export Area tool

◆

Export Slices

◆

Export Again

◆

Master pages—The contents of the Master Pages

are cloned onto each Fireworks frame.
◆

Blends—Fireworks only imports the two end
objects of the CorelDRAW blend. The objects are
grouped after import.

To export a graphic:
1

Choose File > Export to display the Export
Preview dialog box.

Text—Only basic text is imported. Most character

Choose setting.

and paragraph parameters are unsupported.

Click Export.

In the Export dialog box, type a name for the file,
select the destination, and click Save (Windows)
or Export (Macintosh).

◆

Dimensions—Converted to vector objects.

◆

For more information about importing CorelDRAW
CDR files, see Fireworks Help.
Importing animated GIFs
Choose File > Open to import animated GIFs. When
opening an animated GIF, Fireworks places each frame
of the animated GIF on a separate frame in the
Fireworks document. Also, Fireworks creates a
Background layer based on the common pixels found in
all the imported frames.
For more information about editing and exporting
animated GIFs, see “Animated GIF” on page 113.

For more information on Export Slices, see “Slicing
images when exporting” on page 110.

Chapter 4

Choose File > Export Again to quickly export a file using
its previous export settings. Export Again bypasses the
Export Preview dialog box.

Using Export Preview
Use the Export Preview dialog box to try different
settings for the chosen file format, compare the effects of
different color palettes and transparencies, customize
palettes and animation settings, and preview the file
pixel-for-pixel as it will be exported.

Choose a format.
Check to optimize
the exported graphic.

Enter a maximum number of colors for the exported file.
Click to edit, save, or load a palette.
Preview area

Choose a color
depth.
Choose a color
palette.

Check to dither
the image.
Preview and
edit the colors
in the image’s
palette.
Choose the
type of
transparency.
Enter the index
number of the
transparent
color.
Use frame
controls to
preview frames
or play an
animated GIF.

Use the
Magnification
tool to magnify
the preview
area.

Choose the number of
views shown in the
preview area.

Click to launch the
Export Wizard.

Add to or remove
colors from the
transparency.

Importing and Exporting

Preview area

Magnification and pan control

The preview area displays the graphic exactly as it will be
exported and estimates file size and download time with
the current export settings.

Choose the Magnify tool, and then click to magnify the
preview. Alt-click (Windows) or Option-click
(Macintosh) to zoom out.
Choose the Pointer tool and drag within a preview
to pan.

Choose a saved set of options for
the selected export preview.
Click to save the export settings
used in the active view.
View and
compare
file size
and
download
time
estimates
for the
related
preview.

Check to
preview the
results of
the chosen
export
settings.

Preview area of the Export Preview dialog box

When exporting animated GIFs or JavaScript rollovers,
the estimated file size is a total of all frames.
For more information about animated GIFs, see
“Animated GIF” on page 113. For more information
about JavaScript rollovers, see “JavaScript rollovers” on
page 117.
Split view

Click a button to divide the preview area into one,
two, or four previews. Each preview window can
display a preview of the exported graphic with different
export settings.

Because each preview accurately reflects the exported
graphic, you can use split views to compare different
settings and create the smallest file size while
maintaining an acceptable level of quality.

Chapter 4

When multiple previews are open, all previews are
magnified to the same level and all previews pan
simultaneously to display the same portion of the image.
Saving export presets

Save Export Preview dialog box settings for use in future
exports or in batch processing.
To save export presets:
1

Choose settings in the Export Preview dialog box.

Click the “+” in the preview area of the Export
Preview dialog box.

Type a name for the export preset and click OK.

The preset is saved in the Fireworks\Settings\Export
Settings folder.
To apply saved export presets to a preview, choose a
preset from the Export Presets pop-up in any
preview area.
To delete an export preset, remove or delete its file
from the Fireworks\Settings\Export Settings folder.

Options panel

Color depth

Use the Options panel to choose file format and formatspecific settings for exporting. Although some settings
are common to many formats, other settings are unique
to a single format. For more information about formatspecific settings, see “Web export formats” on page 101,
and Fireworks Help.

Color depth is the number of colors used in the exported
graphic. Although most web images are created in 8-bit
color (256 colors), Fireworks exports some formats with
24-bit and 32-bit depths.
Bit depth

Maximum
Fireworks export
number of colors formats that
support this bit
depth

1-bit

2 colors

GIF, PNG, PICT,
TIFF

8-bit

256 colors

GIF, PNG, PICT,
BMP, TIFF

24-bit

16.7 million
JPEG, PNG, PICT,
colors (millions) BMP, LRG, TIFF

32-bit

16.7 million
PNG, LRG, TIFF
colors and an 8bit alpha
channel

Higher color depths create larger exported files, and are
typically not ideal for web graphics. Use 24-bit or 32-bit
color depths when exporting photographic images with
continuous tones or complex gradient blends of colors.
Format

Palette

Select the file format for the exported image. Fireworks
exports the following formats:

Color palettes are preset groups of colors used in an
exported graphic. Palettes contain up to 256 colors.

◆

GIF

◆

Animated GIF

When exporting with a Bit Depth of 8 Bit Indexed,
choose a palette from the Palette pop-up.

◆

GIF Rollover

These palettes are available by default:

◆

JPEG

◆

JPEG Rollover

Adaptive —A custom palette derived from the actual
colors in the document.

◆

PNG

◆

TIFF

WebSnap Adaptive —An adaptive palette in which
colors that are near in value to browser-safe colors are
converted to the closest browser-safe color.

◆

xRes LRG

Web 216—A palette of the 216 colors common to both

◆

BMP

◆

PICT (Macintosh)

Windows and Macintosh computers. This palette is
often called a browser-safe palette, because it produces
fairly consistent results on different platforms and with
different browsers.

Importing and Exporting

Exact—A palette containing the exact colors used in the

Palette display area

image. Only images with 256 colors or less may use the
Exact palette. If the image contains more than 256
colors, the palette reverts to Adaptive Global.

If a color palette is selected, the colors used in the palette
appear in the palette display area.
Colors specified as
transparent are marked with
an X.

System (Windows) and System (Macintosh)— Each

palette contains the 256 colors as defined by the
Windows or Macintosh platform standards.
Grayscale—A palette of 256 or fewer shades of gray

that converts the image to grayscale.
Black and White—A two-color palette that converts

the image to black and white.
Uniform—A mathematical palette based on RGB pixel

RGB color
values

values.
Custom—A palette that has been modified or loaded.
Choose Load Palette from the Export Preview Options
pop-up to load a palette.

Number of Colors pop-up

When using a palette, enter a number in the Number of
Colors pop-up to set the maximum number of colors
contained in the exported image. The number below the
entry field displays the actual number of colors used in
the image. Create smaller files by reducing the number
of colors.

Number of Colors pop-up on the Options panel of
the Export Preview dialog box

Hexadecimal
color value

Index value

To view the color value of a pixel, move the cursor over
the pixel.
To save a Custom color palette:
1

Choose Save Palette from the pop-up next to the
Format pop-up.

Type a name for the palette and choose a
destination folder.

Click Save.

The saved palette file can be loaded into the
Swatches panel or used when exporting other
documents.
Edit a palette by choosing Add Color, Delete Color, or
Replace Color from the Options pop-up on the Options
panel of the Export Preview dialog box.
Dither

Use dithering to approximate colors not in the current
palette. Dithering is especially useful when exporting
images with complex blends or gradients or when
exporting photographic images.
Note: Dithering can greatly increase file size, especially
the size of a GIF.

To dither the exported image, check Dither in the
Export Preview dialog box, then enter a number in
the Dither Amount field. Higher numbers increase
dithering.

Chapter 4

Optimize

Transparency eyedropper tools

Check Optimize to create the smallest file with the least
number of colors.

Use the transparency eyedropper tools to add or remove
colors from the transparent area of the exported image.
Changing transparency does not affect the original
image. It only affects the exported image.

Transparency

Use the Transparency tools on the Options panel to
specify which colors are transparent in exported GIFs or
PNGs. Transparent colors are indicated with an X in
the Palette Display. In the preview area, transparent
colors do not appear. A gray and white checkerboard
denotes transparent areas.

Use

Select
Transparency tool

Select a single color for
transparency by clicking in the
preview area or the palette
display.

Add to
Transparency tool

Add colors to the transparency
by clicking in the preview area
or palette display.

Subtract from
Transparency tool

Remove colors from the
transparency by clicking in the
preview area or palette display.

None —No transparency is saved with this file.
Index Color—Select a color or colors for the

transparency using the transparency eyedropper tools.
By default, this color is the document’s canvas color.
Alpha Channel—Choose to use a document’s alpha

channel to define transparency. Only PNGs support
alpha transparency. For more information about alpha
channels, see “Transparency” on page 115.
Index Number field

The Index Number field displays the palette index
number of the color currently specified as transparent.
Enter a new number to specify a different color for
transparency, or click a color in the palette display. The
index number of the specified color appears in the field.

Interlaced

Check to make the exported GIF or PNG interlaced.
When viewed in a web browser, interlaced images
quickly appear at a low resolution and then transition to
full resolution as they continue to download.

Importing and Exporting

File panel

Export Area

Use the File panel to set the scale of the exported
document.

Use the Export Area tool to export a part of a Fireworks
graphic.

Export Area tool

To export a portion of a document:
1

Choose the Export Area tool from the Toolbox.

Click and drag a marquee over the portion of the
document to export.

When you release the mouse button, the export area
remains highlighted by a marquee. Drag any of
eight marquee handles to resize the export area.
◆

Hold down Shift while dragging to resize the
export area marquee proportionally.

◆

Hold down Alt (Windows) or Option
(Macintosh) while dragging to resize the
marquee from the center.

◆

Hold down Alt-Shift (Windows) or OptionShift (Macintosh) while dragging to constrain
the proportions and resize from the center.

Scale

The Scale settings increase or decrease the size of the
image when exporting. Use either of two scaling
methods:
◆

◆

Enter a percentage or choose from the pop-up slider
to increase or decrease the exported image size by a
percentage. The W and H pixel dimensions update
automatically.

The Export Preview dialog box displays the area
defined by the export area marquee.

Enter numbers in the W and H fields to scale the
graphic to a specific pixel width and height.

Check Constrain to keep width and height proportional
when scaling.
Animation panel
Use the Animation panel when exporting an
animated GIF.
For more information on exporting animated GIFs,
see “Animated GIF” on page 113.

100

Chapter 4

Double-click inside the export area marquee or
click the Export button on the Tool Options panel
to open the Export Preview dialog box.

Adjust settings in the Export Preview dialog box
and click Export.

In the Save as (Windows) or Export (Macintosh)
dialog box, type a file name and choose a
destination folder, then click Save (Windows) or
Export (Macintosh).

To cancel without exporting, double-click outside the
export area marquee, press Esc, or select another tool.

Web export formats
GIF, JPEG, and PNG are graphic file formats that are
common in web development because they are highly
compressible, making for faster transfer across the
Internet. However, a graphic’s visual integrity can
vary from one format to another, depending upon
each format’s method of compression. Therefore, base
your choice of file format upon the design and use of
your graphic.

Compression

JPEG is a lossy format, which means that some image
data is discarded when it is compressed, reducing the
quality of the final file. However, image data can often be
discarded with little or no noticeable difference in
quality. When exporting a JPEG, use the Quality popup slider in the Export Preview dialog box to determine
how much quality is lost when compressing the file.
◆

Use a high percentage setting to maintain image
quality but compress less, producing larger files.

GIF

◆

Graphics Interchange Format, or GIF, is the most
popular web graphic format. Although it can contain
only 256 colors, GIF offers good, lossless image
compression. Also, GIFs can contain a transparent area
and multiple frames for animation.

Use a low percentage setting to yield a small file, but
produce a lower-quality image.

Use the Export Preview dialog box to test and compare
the appearance and estimated file size with different
Quality settings for an exported JPEG.

For more information about animated GIFs, see
““Animated GIF” on page 113.
Compression

Lossless compression means that no image quality is lost
when an image is compressed. A GIF compresses by
scanning horizontally across a row of pixels, finding solid
areas of color, and then abbreviating identical areas of
pixels in the file. Therefore, images with repetitive areas
of solid color compress best when saved as GIFs. A GIF
is usually ideal for cartoon-like graphics, logos, graphics
with transparent areas, or animation.
Note: Dithering or anti-aliasing GIF images produces
larger files.

JPEG
JPEG is an alternative to GIF developed by the Joint
Photographic Experts Group specifically for
photographic images. JPEG supports millions of colors
(24-bit).

Smoothing

Use smoothing to help lower the file size of JPEGs.
Smoothing blurs hard edges, which do not compress
well in JPEGs.
To use smoothing, select a level from the Smoothing
pop-up in the Export Preview dialog box. Higher
numbers produce more blurring in the exported JPEG,
typically creating smaller files.
Progressive

Check Progressive in the Export Preview dialog box to
export a progressive JPEG. Progressive JPEGs, like
interlaced GIFs, display at low resolution and then
increase in quality as they continue to download.
Making a JPEG progressive also reduces its file size.
The JPEG format is best for scanned photographs,
images using textures, images with gradient color
transitions, or any images that require more than
256 colors.

Importing and Exporting

101

PNG

Compression

The Portable Network Graphic, or PNG, is the most
versatile of the web graphic formats. However, not all
web browsers can take full advantage of PNG
characteristics. A PNG supports up to 32-bit color,
can contain transparency or an alpha channel, and can
be progressive.

PNG compression is lossless, even in high color depths.
It compresses across rows and columns of pixels, yielding
better compression than GIF, which only scans rows. A
PNG can compress more than a GIF or JPEG of the
same color depth and quality.
The PNG format is best suited for creating complex live
transparency, high-color graphics, or better compressed
low-color graphics.

Web format comparison
GIF

JPEG

PNG

Color depth

8-bit maximum

Up to 24-bit

Up to 32-bit

Compression

Lossless; compresses
solid areas of color

Lossy; compresses subtle Lossless
color transitions

Transparency support

Yes

Advantages

Lossless compression
Transparency

Ability to control quality Lossless compression
loss in compression
Alpha transparency
Excellent compression of High color support
photographic images

Disadvantages

Maximum of 256 colors
Does not compress
gradient colors well

No transparency
Loss of quality when
compressed

Not completely
supported by common
browsers without using
plug-ins

Typical Uses

Cartoon images
Logos
Animated banners

Scanned photographs
Images with complex
textures
Images with complex
gradient colors

Images with high
numbers of colors
Complex, live
transparency

102

Chapter 4

Yes

Other export formats

Batch processing

Fireworks exports other image formats which support
up to 32-bit color.

Use batch processing to convert an entire folder of
graphics. When batch processing, any setting made in
the Export Preview dialog box may be applied to the
processed graphics. Thus, use batch processing to
convert to another format or convert to the same
format with different settings. Fireworks can batch
process all supported formats except FreeHand,
Illustrator, and CorelDRAW.

TIFF
Tagged-Image File Format, or TIFF, is used for highresolution images that are printed. TIFF files are not
suitable for use on the web because of their size.
PICT
PICT is the standard image format for the Macintosh,
and is typically used to transfer image data when
copying and pasting from one application to another.

To convert a group of files from one format to
another:
1

Choose File > Batch.

Select the folder to process.

Fireworks converts all files at the current level of
the selected folder. Files in subfolders are not
converted. If Fireworks is unable to convert a file,
the file is left unchanged.

BMP
BMP is the standard bitmap image format for
Microsoft Windows.

Click Choose.

The Batch Options dialog box appears.

xRes LRG
4

xRes LRG is the image format used by
Macromedia xRes.

Choose a preset export setting from the User
Presets pop-up.

Specify export settings in the Export Preview dialog
box. For more information, see “Using Export
Preview” on page 95.
5

Set Scale options.
◆

Choose the % option to scale images by
percentage.

◆

Click the Vertical / Horizontal scaling button
and enter numbers to scale images to specific
horizontal and vertical pixel dimensions.

◆

To scale images proportionally, enter or choose a
value in either the Horizontal Scaling field or
Vertical Scaling field, and then select Variable in
the other. For example, to proportionally scale
images to be 50 pixels wide, type 50 in the
Horizontal Scaling field and choose Variable in
the Vertical Scaling field.

Importing and Exporting

103

Click OK.

A status message displays the number of files
currently processed out of the total files appearing
in the selected folder. Unsupported files are reported
as untouched.
Click Cancel to cancel the batch process.
Converted files are saved into their source folder, while
the source files are moved into a newly created subfolder
named Original Files. File name extensions are changed
to indicate the format used in the batch conversion.
Creating thumbnails

Use Scale settings in the Batch Options dialog box to
create thumbnails from an entire folder of graphics.

Working with other
applications
Working with Dreamweaver
Macromedia Dreamweaver is a powerful visual web
page authoring tool. Use Dreamweaver and Fireworks
together to streamline your web design process.
Images

The most common way to use Fireworks and
Dreamweaver is to create web graphics in
Fireworks and include them on web pages created
with Dreamweaver.

◆

To create thumbnails that are sized proportionally to
the original graphics, click % and enter a number.

To place Fireworks images on a web page using
Dreamweaver:

◆

To create thumbnails that have the same width or
height, enter numbers in the Vertical or Horizontal
Scaling fields.

Export images from Fireworks to a web format.

Use GIF, JPEG, or PNG.
2

Copy or move Fireworks images into your
Dreamweaver project folder.

Although you can include a file from anywhere on
your hard drive, it is easier to find and upload the
files from Dreamweaver if you keep all your
images in the same place in your Dreamweaver
project folder.
3

Click the location in the Dreamweaver document
where you want to place an image, then choose
Insert > Image.

In the Insert Image dialog box, choose an image
and click OK.

Be sure the path between the HTML document
and the image exactly matches the path used on
your web server.
The link to the image is formed and the image appears
on the Dreamweaver page much as it would appear in
most web browsers.
Note: Remember to upload the image to your web
server along with the Dreamweaver HTML document.
The image must be placed on the server in the same
place in relation to the HTML document as it was in
your project folder.

104

Chapter 4

To launch and edit Fireworks graphics that are
placed in Dreamweaver 1.2:
1

In Dreamweaver, choose Edit > Preferences and
select Fireworks as an External Editor.

In Dreamweaver, choose Window > Properties to
open the Properties inspector if necessary.

Select an image and click the Edit Image button
on the Properties inspector.

Dreamweaver launches Fireworks, if it is not
already running.

HTML and JavaScript

Fireworks generates HTML files when exporting image
maps, JavaScript rollovers, or Slices. Although
Dreamweaver can generate the same data, it is often
much faster to copy and paste the HTML generated
from Fireworks into the Dreamweaver document.
When copying JavaScript from Fireworks into
Dreamweaver, be sure to:
◆

Dreamweaver searches the same folder as the
graphic for a PNG file with the same name as the
placed file in Dreamweaver, which it assumes is the
Fireworks source file.

Copy the HTML into the Dreamweaver
HTML Inspector and not directly into the
Dreamweaver page.

◆

Copy all of the JavaScript code, as well as the tags for
placing the image.

Edit the graphic in Fireworks.

Choose File > Export Again.

For more information on HTML and JavaScript, see
“Using Fireworks HTML” on page 118.

The Save As (Windows) or Export (Macintosh)
dialog box opens.
6

In the Save as (Windows) or Export (Macintosh)
dialog box, type a file name and choose a
destination folder, and then click Save
(Windows) or Export (Macintosh).

Close the Fireworks document.

Switch to Dreamweaver.

Editing Fireworks images in other
image editors
Fireworks PNG files can be edited in other image
editors that support the PNG format. However, when
other editors open and save a Fireworks PNG, the
image is flattened and all path, frame, and layer
information is lost.

The placed image updates to reflect the changes
made in Fireworks.

Importing and Exporting

105

106

Chapter 4

CHAPTER 5

Web Design Features

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

107

Designing web components
Fireworks has tools for creating many common web
components, such as image maps, buttons, and animated
GIFs. Also, Fireworks simplifies many web graphic
preparation tasks, such as slicing large graphics into
multiple files and adding JavaScript rollover capabilities.
Using the URLs toolbar
The URLs toolbar simplifies many tedious processes
involved in creating hotspot regions, linking them to
URLs, writing HTML instructions, and preparing
links for a web browser. This toolbar is the control center
for designing web components.

Switching to the URL overlay

Fireworks places all URL objects on the URL overlay, a
hidden layer in the Fireworks document.
View the URL overlay in any of four ways:
◆

Click the Show/Hide URLs button on the left
side of the URLs toolbar.

◆

Choose a URL basic shape tool from the
URLs toolbar.

◆

Choose Select > Copy to URL when an object
is selected.

◆

Choose an option from the URLs toolbar
Options pop-up.

Hide the URL overlay in either of two ways:
Show or hide the URL overlay.

◆

Click the Show/Hide URLs button.

◆

Choose a tool in the Toolbox other than the Pointer,
Select Behind, Subselection, and Hand tools.

Select and move URL objects.
Create URL objects.
Create, duplicate, and
remove links. Choose
image map and slice
object options.

Assign URLs.

Using the URLs toolbar Options pop-up

Use the URLs toolbar Options pop-up to create, edit,
duplicate, and delete URL links. Choosing New Link,
Edit Link, or Duplicate Link opens the Link Info
dialog box.

Create slice objects.
Choose to view slice objects, URL objects, or both.

Enter or edit a URL to link to the selected URL object.

URLs toolbar

Note: A URL, or Uniform Resource Locator, is an
address of a file on the Internet. Although URLs
commonly link to web pages, they can also link to
downloadable files, e-mail addresses, telnet sites,
newsgroups, Internet chat rooms, or other
Internet resources.

108

Chapter 5

Enter text to be
displayed in the
browser status bar
when the cursor is
over the hotspot.
Click to choose an overlay color
from the system color picker.
Specify the window or frame
in which the link is displayed.

Creating an image map
An image map is a graphic with URLs assigned to
hotspot regions of the graphic from within an HTML
file. Clicking a hotspot in a web browser opens the web
page to which the URL links. A well designed image
map can add significantly to a web site’s visual impact.
See the tutorial “Linking an image map” on page 50 for a
step-by-step example of working with an image map.
Choosing a source graphic
A source graphic is the graphic over which an image
map is laid. The graphic can be an imported graphic or a
graphic created in Fireworks. When choosing a graphic
on which to build an image map, choose one with
elements that people are likely to perceive as hotspots.

Optionally, click the Overlay Color color well
and choose an overlay color to organize
hotspots by color.

Click OK in the Link Info dialog box.

Exporting an image map
When the image map is complete, choose Image Map
Options from the URLs toolbar Options pop-up.
Specify whether the image map
is client-side or server-side.

Choose a URL that is
used for parts of the
image not defined by
URL objects.

Creating a hotspot
A hotspot is an area of a graphic that is linked to a URL.
When a hotspot is clicked, the web browser jumps to
the web page specified by the linked URL. In
Fireworks, define hotspots by creating URL objects.

Enter text that is displayed in a browser
when the image is not displayed.

Client-side and server-side image maps
To create a hotspot (URL object):
1

Create or open a source graphic on which to
place a hotspot.

Choose a URL basic shape tool from the
URLs toolbar.

Choosing a URL tool activates the URL overlay.
3

Create a hotspot region by dragging a URLs
shape tool.

Choose New Link from the URLs toolbar
Options pop-up.

The Link Info dialog box opens.
5

Enter a URL to which the hotspot will link,
enter a browser status bar message, and enter
a target.

A client-side image map requires image map
information to be stored within the HTML document.
A client-side image map shows the actual URL in the
status bar message at the bottom of the browser window.
A server-side (NCSA) image map requires the image
map information to be saved within a separate file stored
on a server and accessed by a CGI script. This type of
image map is far more complicated to set up, and is not
supported by all servers. Server-side image map behavior
varies from system to system, even among different
systems using the same server. A server-side image map
shows the coordinates at the bottom of the screen.
Note: Contact your service provider to find out how
your server handles server-side image maps.

Browser status bar messages and targets are
optional.

Web Design Features

109

Exporting image map code
Export image map code when exporting the image by
checking Generate HTML in the Export dialog box.
Clicking Export produces additional files:
◆

The HTML file. The suffix or extension .htm is
added to the file name being exported, and the file is
placed in the same folder as the source graphic.

◆

The MAP file is generated for server-side image
maps and is created when the user specifies a Map
Type of Both or Server-Side in the Image Map
Options dialog box.

For more information about HTML exported with
image maps, see “Using Fireworks HTML” on page 118.

Slicing images when
exporting
A common method of creating navigation bars or
navigation graphics for web sites is to create a graphic
and then cut it into pieces that are then reassembled on a
web page using an HTML table. The graphic appears
seamless in the web browser but is actually made up of
multiple pieces, each a separate file.
Creating a navigation graphic this way has several
advantages:
◆

In HTML, creating a link from an entire image is
often easier than using an image map.

◆

If a section of the graphic is updated frequently, such
as today’s date or a current news item, a single piece
may be replaced rather than the entire graphic.

◆

Parts of a graphic may be optimized individually,
creating a better appearance, especially when the
graphic contains a mix of photographic images and
text.

◆

The cumulative file size of all the pieces can be
smaller than the single, large graphic, because each
piece may be optimized individually.

Creating a sliced image
In Fireworks, use the Slice tool on the URLs toolbar to
draw rectangular slice objects. Slice objects define parts
of the image that are exported as individual files.

110

Chapter 5

For example, if you have a JavaScript rollover in the
middle of the canvas and you want to export it as a
separate image, draw a slice object over it. Then, when
you export the Slices, the JavaScript rollover and all its
states will be exported as separate files defined by the
slice object.

Using the Slice tool, draw slice objects over the
areas of the image you want to export as
individual files.

Set slice object properties for each slice object by
selecting the object and then choosing Object
Properties from the Options pop-up on the URLs
toolbar, or by choosing Modify > Object
Properties.

Slice guides

For more information about setting slice object
properties, see “Setting slice object properties” on
page 112.

Slice object

Choose File > Slice > Export Slices.

The Export Slices dialog box opens.
5

When a slice object is
drawn, slice guides
appear indicating how
the image will be sliced
into multiple files
when exported.

◆

Check Put Images in Subfolder and enter a
name to place the image files in a separate
subfolder from the HTML file. The HTML
file that is generated creates links to the images
in the subfolder. Be sure to place the images in
an equivalent subfolder when putting your files
on a server, or edit your HTML file to reflect
the new location of the images on the server.

◆

Check Create Demo Rollover HTML to
export multiple HTML files for quickly
previewing all the states of JavaScript rollovers
when they are included in your document.

Each slice is exported as
a separate file.

Fireworks creates the smallest number of slices possible
by intelligently combining sections of the image that do
not contain slice objects.
Exporting an image in multiple slices
Fireworks automatically divides an image into multiple
pieces based on where slice objects have been drawn.
To slice an image:
1

In the Export Slices dialog box, type a name for
the file and choose the destination.

Choose File > Slice > Slice Defaults and set the
default file settings used for exported slices.

Each slice may be individually optimized using the
Slice Object Properties dialog box. Slices that are not
individually optimized use the Slice Defaults
settings when exported.

Click Export.

Each region is exported as a separate graphic using the
name entered in the Slice Object Properties dialog box.
If no name is entered, then the slice is named according
to its position in the graphic.
For example, if the Fireworks document is named
Graphic.gif, then the top left region is exported as
Graphic_01_01.gif. The second region on the top row
would then be exported as Graphic_01_02.gif. The first
region on the second row would be Graphic_02_01.gif,
and so on.

Web Design Features

111

Setting slice object properties

Setting the Slice Type

Use the Object Properties dialog box to set the
characteristics for each slice object. Slice objects can have
unique names and types. Each slice can be optimized
individually using the Export Preview dialog box.

Choose the type of file to export for each slice object
from the Slice Type pop-up in the Slice Object
Properties dialog box. A single Fireworks document can
contain multiple types of slices in any combination. The
types are:
◆

Image—Export the slice in any image format that

Fireworks supports.
◆

Rollover—Export the slice as a JavaScript rollover.

The Rollover Slice format only supports GIF and
JPEG.
Check Include Down State to use the area on
Frame 3 beneath the selected slice to create a Down
state for the rollover.
Check Include onClick State to use the area on
Frame 4 beneath the selected slice to create an
onClick state for the rollover.
For information on creating a JavaScript rollover, see
“JavaScript rollovers” on page 117.
◆

No Image—Export no image file for this slice. In

the HTML table generated to reassemble the slices
in a browser, this area contains no image.

Open the Slice Object Properties dialog box by
selecting a slice object and then choosing Object
Properties from the Options pop-up on the
URLs toolbar, or by selecting an object and choosing
Modify > Object Properties.

112

Chapter 5

Use the HTML text field to enter text or HTML
code that will appear in this cell of the table when
viewed in a browser. Be careful not to enter more
text than will fit in the cell–doing so will result in
improper table formatting.

Animated GIF
An animated GIF is a GIF 89a file containing multiple
images. These images act as successive frames of
animation when the GIF is viewed in a web browser.

To change the word to “Llama,” change the Symbol on
the first frame from “Cow” to “Llama” using the Text
Editor. Every instance of that Symbol is updated to
“Llama”, but each Instance retains its characteristics—
only the text changes.

Fireworks has all the features you need for creating
and editing animated GIFs. Open and edit existing
animated GIFs or create new animated GIFs
from scratch.

For more information about Symbols and Instances, see
“Symbols and Instances” on page 82.

Opening animated GIFs

Use the Options pop-up on the Frames panel to add,
copy, or delete frames, or to copy or distribute objects
across multiple frames. The Frame panel Options popup contains the following options:

When an animated GIF is opened, Fireworks does the
following:
◆

◆

Creates a background layer based on common pixels
found in more than half of the imported frames.
Places the animated components from each frame
onto a separate frame of the Frames panel. These
components are placed as image objects on a layer
named GIF.

To edit an animated GIF, choose a frame on the Frames
panel and make any necessary changes.

Managing frames

Use

Add Frames

Add frames to a document.
In the Add Frames dialog box,
enter the number of frames to add
and choose where the new frames
will be inserted.

Duplicate
Frame

Create copies of a frame.
In the Duplicate Frames dialog
box, enter the number of
duplicates to create for the
selected frame, and choose
where the duplicate frames will
be inserted.

Delete Frame

Delete the selected frame.

Creating animated GIFs
Create each frame of the animated GIF on a separate
frame of the Frames panel, starting with Frame 1.
Objects that appear throughout the animation must be
placed on each frame or on the Background layer.
To preview the animation, choose File > Export, choose
Animated GIF from the Formats pop-up, and then
click the Play button in the Export Preview dialog box.
Use Symbols and Instances to simplify animation and
to improve editability across frames. When the original
object (called the Symbol) is modified, the copies (called
Instances) automatically change to reflect the
modifications to the Symbol.
For example, when animating the word “Cow” across
ten frames, create a Symbol from the word “Cow” on the
first frame, and then place instances of “Cow” on the
other nine frames. Move them, transform them, and
apply effects to them.

Copy To Frames Copy the current selection to other
frames.
In the Copy To Frames dialog box,
choose where the selection will
be copied.
Distribute
Selection

Distribute a selection of objects
across multiple frames, according
to their stacking order from
bottom to top.
Objects are placed on existing
frames after the current frame.
New frames are added as needed
to distribute all selected objects.

Web Design Features

113

Exporting animated GIFs
Use the Options panel in the Export Preview dialog box
to optimize the animated GIF. Use the Animation
panel to set the frame delay and disposal method of each
frame, and to set how the animated GIF loops when
viewed in a web browser.

Choose a disposal method for selected frames.

Enter a display
time for selected
frames.

To export an animated GIF:
1

Choose File > Export.

Click the Options tab and choose Animated GIF
from the Format pop-up.

Make changes to the Palette, Dither, or
Transparency options.

On the Animation panel of the Export Preview
dialog box, set the disposal method and frame
delay for each frame and choose loop settings.
◆

◆

Click to set the
animation to
play once and
then stop.

To select a range of frames, select the first frame,
hold down the Shift key, and then select the last
frame in the range.

Enter the number of times
the animation will replay.

To select multiple frames, hold down the
Control key (Windows) or Command key
(Macintosh) while selecting individual frames.

Click to set the animation
to play multiple times.
Check to create lower quality animated
GIFs in order to reduce file size.

Click Export.

In the Export dialog box, type a name for the file
and select the destination.

Disposal method
The disposal method determines how pixels of the
selected frame are replaced by the next frame
when viewed in a web browser. There are four disposal
methods:
Unspecified—No disposal method is specified.
Fireworks will automatically select the disposal method
for each frame.

Choose Unspecified to create the smallest possible
animated GIFs.

114

Chapter 5

None—The frame is not disposed before the new frame
is displayed. The next frame appears on top of the
current frame.

Choose None to add a smaller object to the existing
frame.
Restore to Background—Erases the current frame’s

image and restores the area to the background color or
pattern that appears in the web browser.

Looping
Use the Loop settings to determine how many times the
animation plays.
Click

Play once
button

Set the exported animated GIF to
play once and then stop.

Loop button

Set the exported animated GIF to
replay the animation the number
of times specified in the Number
of Loops pop-up.
For example, entering 4 plays the
animation the first time, then
replays it four more times.
Choose Forever from the Number
of Loops pop-up to play the
animation continuously.

Choose Restore to Background when moving an object
in a transparent animated GIF.
Restore to Previous—Erases the current frame’s image
and restores that area to the previous frame’s image.

Choose Restore to Previous to animate objects across a
background image.
Transparency
Fireworks exports transparent animated GIFs if the
canvas is transparent or if transparency has been defined
on the Options panel of the Export Preview dialog box.
Note: Not all web browsers support transparent
animated GIFs.

Frame delay
Set the frame delay to determine how long the current
frame is displayed. Frame delay is specified in
hundredths of a second. For example, a setting of 50
displays for half a second, while a setting of 300 displays
for 3 seconds.
◆

To make frames display as quickly as possible, set the
frame delay to 0.

◆

To enter a frame delay value, choose a frame from
the list and then enter a number in the Frame
delay field.

Lossy Optimization
When checked, Lossy Optimization compresses the
animated GIF by disposing of similar pixels between
frames rather than just identical pixels. Although this
can reduce file size, lossy optimization often reduces the
quality of the animated GIF.

Web Design Features

115

Transparency
Using Fireworks, you can create web graphics with finetuned transparencies. Transparency is supported in two
graphic formats: GIF and PNG.

To include alpha transparency in an exported
PNG:
1

Create an image in Fireworks using a transparent
canvas.

Images with feathered edges, anti-aliasing, or varied
opacity settings take advantage of alpha
transparency.

GIF transparency
Transparency is defined in GIF files by designating one
or more colors to be transparent. The designated color is
transparent when the GIF is viewed in a browser.

Choose File > Export.

Choose PNG from the Formats pop-up on the
Options panel of the Export Preview dialog box.

Use the Export Preview dialog box to set or adjust the
transparent area in a GIF. Use the Transparency
Eyedropper tools to add or remove colors from the
transparent area.

Choose Alpha Channel from the Transparency
pop-up.

Click Export.

In the Export dialog box, type a name for the file
and select the destination.

For more information on setting GIF transparency, see
“Transparency eyedropper tools” on page 99.
PNG alpha transparency
Exported PNG files can contain alpha transparency
settings. Alpha transparency is different from GIF
transparency in that gradient levels of transparency can
be specified. This means that pixels may be set to blend
with the web browser’s background color or background
image.
However, alpha transparency is not supported fully by
current browsers. Netscape Navigator 4.04 supports
PNG, but not alpha channels. Microsoft Internet
Explorer 4 partially supports PNG alpha channels, but
sometimes displays inconsistently when complex
gradient transparency is defined.

116

Chapter 5

JavaScript rollovers
JavaScript rollovers are images that change appearance
in a web browser when you move the mouse over them
or click them. JavaScript rollovers are created by
drawing different rollover states, and then using
JavaScript within an HTML file to switch to a different
image for certain events, such as moving the mouse over
the image.
To create a JavaScript rollover:
1

Draw each rollover state on a separate frame,
with each state positioned at the same location
on each frame.
◆

Up state goes on Frame 1.

◆

Over state goes on Frame 2.

◆

Down state goes on Frame 3.

◆

onClick state goes on Frame 4.

When a rollover is previewed in a browser, its Down
state is not shown. To be able to preview all four states,
use a slice object to define each rollover, choose File >
Export Slices, and then check Create Demo Rollover
HTML in the Export Slices dialog box. Fireworks
exports a group of HTML files with the word "demo"
appended to each file name. Using a browser, open the
unnumbered demo file, and then click the rollovers to
test all the states.
For more information about using Down states in
HTML files, see Fireworks Help.
Drawing buttons
Any object or effect may be used to create a rollover state.
However, because buttons are the most common type of
JavaScript rollovers, Fireworks includes Live Effect
presets to simplify the creation of common button
appearances. Apply an Inner Bevel or Outer Bevel effect
to an object, and then choose Raised, Highlighted, Inset,
or Inverted from the Button Presets pop-up on the
Effect panel.

Choose File > Export.

In the Format pop-up of the Export Preview
dialog box, choose either GIF Rollover or JPEG
Rollover.

Button Presets effects

Description

Make any other export settings.

Raised

The bevel appears
raised up from the
underlying objects.

Highlighted

The button’s colors
lighten.

Inset

The bevel appears
sunken into the
underlying objects.

Inverted

The bevel appears
sunken into the
underlying objects and
the colors lighten.

To preview each rollover state, use the frame
controls at the bottom of the Export Preview
dialog box.
5

Click Export.

In the Export dialog box, type a name for the file
and select the destination.

When exporting rollovers, Fireworks automatically
generates the JavaScript necessary for displaying the
rollovers in a web browser.
For more information on using Fireworks HTML files,
see “Using Fireworks HTML” on page 118.
The Down state
The Down state of a JavaScript rollover depicts the
rollover's state on the destination web page. For example,
the Down state is commonly used to show which
button was clicked to view the current web page.

Web Design Features

117

Assigning URL links to rollovers

Using Fireworks HTML

Use the URL Rectangle tool on the URLs toolbar to
assign a URL to a rollover.

Check Generate HTML in the Export dialog box to
make Fireworks export HTML any time you export an
image. For basic images, the exported HTML file sets
the background color to match the canvas color and
adds a link to the image. Viewing this HTML file in a
web browser lets you quickly preview how the image
will look in a browser with a background color.

Do this

Use the entire
image as a
rollover

Draw a rectangular URL object
over the entire image.

Create rollover
areas within a
sliced graphic

Draw a slice object over the
rollover area. Set URLs for each
rollover using the Slice Object
Properties dialog box.

For more complex web features, Fireworks exports
additional HTML to set up the appropriate behaviors.
Extra HTML is generated for the following items:
◆

JavaScript rollovers

Exported JavaScript code

◆

Image maps

When JavaScript rollovers are exported, an HTML file
is also exported that includes JavaScript used to display
the rollover in a web browser. The JavaScript exported
from Fireworks is compatible with versions 3 and 4 of
both Netscape Navigator and Microsoft Internet
Explorer. Some browsers cannot display all four
JavaScript rollover states. In that case, the JavaScript
exported by Fireworks allows those browsers to display
the Up state and link to the appropriate URL.

◆

Sliced graphics

◆

Status bar messages

Pre-caching

The JavaScript generated by Fireworks performs precaching of rollover states. This means that when the
HTML file is first loaded into the web browser all of the
rollover images, even those not initially visible, are loaded
into the browser’s memory. When the cursor is moved
over a Fireworks JavaScript rollover, the alternative state
is immediately swapped, instead of having to wait for it
to be downloaded from the server.

118

Chapter 5

View HTML files exported by Fireworks by opening
them with a web browser. Portions of those HTML
files may be copied and pasted into other HTML files.
HTML files may be edited by opening them in a text
editor, such as NotePad (Windows) or SimpleText
(Macintosh), or in a web authoring tool like
Macromedia Dreamweaver.

Some HTML basics
HTML files are essentially text files that contain:
◆

Text that appears on the web page.

◆

HTML tags that define document formatting and
structure, and link to images and other HTML
documents (web pages).

HTML tags are enclosed in brackets and look
something like this:
affected text

Like the example above, most HTML tags use both an
opening tag and a closing tag, which together define the
beginning and ending of the affected text. Some tags,
however, need only an opening tag. Many tags allow
additional variables to be added to control how the tag
affects the selected range of text. For example:
Fireworks

This tag would cause the word Fireworks to be
colored blue.
Common HTML tags
Most HTML documents contain the following tags:
—Marks the beginning and

ending of the HTML document.
—Sets the name of the document

that appears on the top of the browser window.
—Information in this section
describes various characteristics of the document such as
the document title, background color, text color, and
font usage. JavaScript code is placed within this section
of the document.
—Stores extra information about

the HTML document such as what application created
it, keywords for search engines, and other information
used by various applications. Many HTML editors or
utilities add meta information to an HTML document.
—Marks the beginning of code

—Displays an image on the web page.
For example:

This tag displays the image Picture.gif on the page.
—Creates a link from text or an image to

another HTML document. For example:
Link

In this case, clicking the word “Link” jumps to
www.macromedia.com.
To place an image and also make that image a link, use
two tags:

The image Explosion.jpg is displayed on the web page
and clicking on it takes you to www.getfireworks.com.
Note that the link to the image is placed within the link
tags, between and .
—Information within this tag
describes the shape of a hotspot using coordinates and
contains the URL destination of the hotspot.
Note: For more explanation on specific HTML tags and
their usage, consult one of the many commercially
available books or websites about HTML.

Copying and pasting from a Fireworks
HTML file
When copying HTML exported from Fireworks, it is
important to paste it to the correct place within the
destination HTML document.
When copying and pasting Fireworks HTML into
other HTML documents, you do not have to copy the
or tags. Those tags should already be
included in the destination HTML document.
For more information about where to paste sections of a
Fireworks HTML file, see Fireworks Help.

for a scripting language, such as JavaScript.
—Text or links in this section go

into the main body of the document.

Web Design Features

119

120

Chapter 5

INDEX

A
activating
image edit mode 63
object mode 63
Adaptive color palette 97
Add to Transparency tool 99
aligning
objects 11
text 47
alpha channel 116
alpha channel transparency setting 99
alpha opacity 67
animated GIFs
animation panel 53
Background layer 113
creating 113
disposal method 53, 114
exporting 114
frame rate 53
importing 94, 113
looping 53, 115
optimizing 115
previewing 113
Animation panel
in Export Preview dialog box 100
arranging
frames 81
layers 80
objects on a layer 79
windows and panels 14
ASCII text
importing 92
Attach to Path command 45
attaching
paragraphs to paths 47
text to paths 45
Auto-Apply checkbox 17

B
Background image
editing 64
flattening to 64
Background Image command 37
background image layer
editing 25
Background layer
dropping an object 65
of animated GIFs 113
banners 52
basic shape tools 60
batch processing 103–104
creating thumbnails 104
Bézier curves 57
bitmap art 56
defined 6
importing 27
manipulating 36
Black and White color palette 98
blending modes 12, 84–85
BMP export format 103
bounding box 64
Bring to Front command 46
browser-safe palette 97
Brush Options pop-up 17
Brush panel 17, 70
Brush tool 9, 70
tutorial 40

121

brushes 70–73
advanced editing 71
apply color using Color Mixer 16, 66
attributes 58
brush stroke preview 70
categories 70
choosing a brush 70
color well 69
edge 70
editing a brush 71
names 70
saving custom 71
texture 70, 73
buttons
JavaScript for 117
rollover state presets 117
rollovers 48
rounded corners 60
tutorial 48
C
canvas
custom color 69
setting color 25
setting size 25
transparent 69
centerpoint
basic shapes 60
transform 65
circles 60
Clipboard formats
on import 91
clone
using Rubber Stamp tool 57
closed paths 58
CMY color model 67

122

Index

color 66–69
adding to a custom palette 98
canvas 69
Color Mixer 67
default 69
deleting from a custom palette 98
Gradient fills 72
Info bar 67
models. See color models.
palettes 68
replacing in a custom palette 98
setting palette on export 97
specifying in system color picker 17, 40
swap brush and fill colors 69
Swatches panel 68
switch brush and fill color 17
color bar
choosing a color model 67
color depth
setting in Export Preview dialog box 97
Color Mixer 16, 66
applying brush color 16
applying effect color 16
applying fill color 16
applying text color 16
choosing a color model 66
creating colors 67
displaying a document color in 67
reverting to default colors 17
switching color models 16
color models
choosing from Color Mixer 16, 66
choosing in the color bar 67
CMY 67
Grayscale 67
Hexadecimal 67
HSB 67
Info bar and 67
color palettes
available on export 97–98
in Export Preview dialog box 97
color ramp
Gradient editor 72

color well
brush 69
effect 69
fill 69
system color picker 43, 69
composite paths 40
compression
in GIF images 101
in JPEG images 101
in PNG images 102
constraining shapes
Shift key 60
context-sensitive menus 21
Convert to Alpha Xtra 87
Convert to Image command 36, 65
converting
an object to an image 65
FreeHand files 93–94
converting CorelDRAW files 93–94
Copy and Paste
resampling graphics 91
to import graphics 91
Copy to URL command 51
CorelDRAW files
converting 93–94
importing 93–94
creating
animated GIFs 53
colors in the Color Mixer 67
composite paths 40
effects 41, 46
fills 38–39
image maps 50–51
Instances 82, 83
mask groups 43
new URL link 50
paste inside group 41
rollover buttons 48–49
Symbols 82, 83
text blocks 45
transparent texture 44
URL objects 13
vector objects 56

Crop tool 8
tutorial 37
cropping
canvas 25
images 37, 64
Custom color palette 98
custom color palettes 98
customizing brushes 71
cutting 64
D
default colors 69
applying using Color Mixer 17
deleting
Instances 83
pixels 36
Symbols 83
display mode
Draft Display 21
Full Display 21
setting 14
displaying paths 58
displaying points 59
disposal method
animated GIFs 53, 114
Distort tool 9
distorting objects 65
dithering
and file size 98
document
canvas color 25
canvas size 25
magnification 14, 20–21
multiple views 21
navigating in 20–21
Open as Untitled checkbox 32
organization 79–81
setting resolution 25
setting up 25–27
units of measurement 26
viewing dimensions 14
viewing in Full Display or Draft Display 21
viewing resolution 14
window 6

Index

123

document rulers
showing and hiding 26
units of measurement 26
Down state
JavaScript rollover 117
Draft Display mode 21
drag and drop
to import graphics 91
drawing
by dragging 60
by plotting points 60
centered shapes 60
in object mode 60
lines 58–62
with the Brush tool 70
with the Pen tool 70
Dreamweaver
exporting HTML and JavaScript to 105
using Fireworks with 104–105
Drop Selection command 37, 64, 65
E
edges
anti-alias 72
feather 72
hard edge 72
showing and hiding 59
Edit Brush panels 71
Edit Gradient dialog box 72
editability
in Fireworks 25

124

Index

editing
Background image 64
Background layer 25
Bézier curves 59
brush 42
custom color palettes 98
effects 75
feathering path objects 43
fills 72
grids 26
guides 26
image objects 25, 36–37
Live Effects 74
path objects 25, 40–42
paths 59
pixels 63
pressure 42
skewing objects 47
speed 42
text 25, 45–47
effect color
applying using Color Mixer 16
Effect panel 18, 75
drawing button states 117
Options pop-up 18
effects 65–75
applying and editing 75
applying more than one 46
applying multiple effects 75
applying to text 46
color well 69
creating 41, 46
examples 74
Live 74
Xtras 65, 75
Ellipse Marquee tool 64
Ellipse tool 8, 60
Eraser tool 9, 61, 62

Exact color palette 98
Exit Image Edit command 63
Export Again command 94
Export Area tool 8, 100
export presets
in Export Preview dialog box 96
Export Preview dialog box 27, 28
Animation panel 100
animation tutorial 53
bypassing on export 94
components of 95
dithering 98
File panel 100
magnification in 96
optimizing colors 99
Options panel 97
preview area 96
saving export presets 96
scaling images 100
setting color depth 97
setting color palette 97
setting file format 97
setting transparency 99
split view 96
Export Wizard 29

exporting
animated GIFs 53
available color palettes 97–98
dithering on export 98
editing custom color palettes 98
Export Area tool 100
Export Preview Animation panel 100
Export Preview File panel 100
Export Preview Options panel 97
graphics 29, 94–104
image maps 51, 109
Index Number field 99
interlacing on export 99
Number of Colors pop-up 98
optimizing colors on export 99
palette display area 98
PICTs 103
previewing document 53
rollover buttons 49
saving a custom color palette 98
scaling images on export 100
setting color depth on export 97
setting color palette on export 97
setting file format 97
setting transparency on export 99
supported file formats 97
supported methods listed 94
TIFFs 103
using Export Area tool 100
xRes LRG format 103
exporting BMPs 103
Eyedropper tool 9
placing a color in the Color Mixer 67

Index

125

F
feather 76
features
unique to Fireworks 4
File panel
in Export Preview dialog box 100
files
animated GIFs 53
editing Fireworks images in other applications 105
effect on file size of dithering 98
Open as Untitled checkbox 32
previewing on import 90
setting color palette in Export Preview dialog box 97
setting format in Export Preview dialog box 97
fill color
applying using Color Mixer 16, 66
Fill panel 17, 72
Options pop-up 17
fills 72–73
adjusting Pattern and Gradient fills 72, 73
attributes 58
color well 69
creating 38–39
Edit Gradient dialog box 72
editing 72
editing with the Paint Bucket tool 72
feathering 43
Gradient 72
reset center 35
texture 44, 73
transparency 84
using fill handles 35
Fireworks
a case study 22–24
editing Fireworks images in other applications 105
features in 4
importing and exporting workflow 90
importing Fireworks files 92
installing 3
maximum canvas size 6
overview 5
package contents 2
resources for learning 4
starting 3
system requirements for 2
uninstalling 3
using with Dreamweaver 104–105

126

Index

Fireworks Help 4
flatten layers 64
fonts
used in tutorials 32
frames
creating animated GIFs 113
disposal method 53, 114
imported from an animated GIF 113
Frames panel 19
Freeform tool 9, 44, 61, 62
tutorial 42, 44
FreeHand files
converting 93–94
importing 93–94
Full Display mode 21
G
GIF
animated 113
as a Web export format 101
compared to other Web formats 102
compression 101
defined 101
transparency 116
GIF 89a 113
Gradient fills 72
graphics
dithering 98
exporting 29, 94–104
importing 27, 90–94
importing using Copy and Paste 91
importing using drag and drop 91
interlacing on export 99
optimizing colors on export 99
resampling during Copy and Paste 91
resizing while importing 90
scaling images on export 100
setting transparency on export 99
slicing 110
supported export formats 97

Grayscale color model 67
Grayscale color palette 98
grid 26
Group command 35
groups
creating 35
selecting objects within 35
ungrouping 79
guides 26–27, 110
H
Hand tool 8
handles
fill 35
mask 43
paint bucket 72
point 59
transform 65
transformation 35, 47
Hexadecimal color model 67
Hide Edges command 34, 59
hiding
document rulers 26
edges 34
layers 34, 38
toolbars 7
Toolbox 7
URLs 51
hotspots
creating 108, 109
HSB color model 67
HTML
Create Demo Rollover HTML checkbox 111
exported with image maps 110
exporting to Dreamweaver 105
JavaScript code 118
pre-caching 118

I
Illustrator files
importing 93–94
image
cropping 64
filters 63
image edit mode 56–66
activating 36–37, 63
activities 63
introduced 25
Magic Wand tool 37
marquees 64
pasting in 92
tools 63
tutorial 36
using drawing and editing tools 56
Image Map Options 13, 51
image maps
client-side 109
creating 109
creating hotspots 109
exporting 109
HTML exported with 110
MAP file 110
server-side 109
URL overlay 108
Image Object command 36
image objects 64
editing 25
images
converting text to 78
in object mode 57
Import File dialog box 90

Index

127

importing
animated GIFs 94, 113
ASCII text 92
bitmap art 27
CorelDRAW files 93–94
Fireworks files 92
FreeHand files 93–94
graphics 27, 90–94
Illustrator files 93–94
resizing while importing 90
RTF text 92
supported Clipboard formats 91
supported formats listed 91
text 92
using Copy and Paste 91
using drag and drop 91
vector art 27
Index Color transparency setting 99
Index Number field
in Export Preview dialog box 99
Info bar 11
color model 67
unit of measurement 26
Inner Bevel
drawing button states 117
installing
Fireworks 3
Instances
creating 82, 83
deleting 83
modifying 82
interlacing
on export 99
J
JavaScript
exported with rollovers 118
JavaScript rollover
button states 117
Down state 117
tutorial 48
JavaScript rollover buttons
pre-caching 118
Join command 40

128

Index

JPEG
as a Web export format 101
compared to other Web formats 102
compression 101
defined 101
progressive JPEGs 101
smoothing 101
K
keyboard shortcut
magnification 21
keyboard shortcuts 8–9
Knife (Eraser) tool 61, 62
L
Lasso tool 8, 64
layers
creating 19
deleting 19
hiding 19, 34, 38
locking 19
showing 19, 34, 38
unlocking 19
Layers panel
Options pop-up 19
learning Fireworks
resources for 4
Line tool 8, 60
lines
45 degree increments 60
drawing 58–62
Link Info dialog box 50
Live Effects 74
applying multiple 75
applying to an object 75
looping 115
lossy optimization 115

M
Macintosh computers
Fireworks Preferences file 14
Fireworks, system requirements for 2
Magic Wand tool 8, 64
tutorial 37
magnification
document 20–21
in Export Preview dialog box 96
keyboard shortcut for 21
page 20–21
Magnify tool 8
Main toolbar (Windows only) 10
MAP file 110
Marquee tool 8, 64
marquees 64
removing pixels 64
showing and hiding 59
mask groups
alpha mask group 44
converting from one to the other 44
editing masking path 44
paste inside group 41, 43
selecting objects within 87
text masks 44
tutorial 43
ungrouping 44
masking 116
Convert to Alpha Xtra 87
measurement, units of 26
menus
context-sensitive 21
Microsoft Internet Explorer
PNG support 116
Microsoft Windows
Fireworks, system requirements for 2
modes
object and image edit 56
Modify toolbar 11
modifying
canvas color 25
canvas size 25
fills 35
image objects 36
Instances 82
Symbols 82

moving
in document 20–21
object to Background layer 37
multiple document views 21
N
navigating
in document 20–21
Netscape Navigator
PNG support 116
New Document dialog box
setting resolution in 25
Number of Colors pop-up
in Export Preview dialog box 98
O
object editing tools 61, 62
object mode 56–66
activating 63
activities 57
Brush tool 40
drawing 60
editing tools 61
introduced 25
manipulating objects in 34–35
pasting while in object mode 92
Path Scrubber tool 42
Pen tool 41
Reshape Area tool 41
Select Behind tool 35
Subselection tool 35
tutorial 34
using drawing and editing tools 56
Object Properties dialog box 13
objects
displaying points 59
grouping 35
joining 40
Object Properties dialog box 44
rotating 35
selection feedback 35
Opacity toolbar 12
open paths 58

Index

129

optimizing
animated GIFs 115
colors on export 99
graphics 99
Option key
drawing centered shapes 60
Options panel
in Export Preview dialog box 97
Tool Options panels 14
organizing your document 79–81
Outer Bevel
drawing button states 117
P
package
contents of Fireworks package 2
page magnification, setting 20–21
Paint Bucket tool 9, 72
editing fills 72
handles 72
tutorial 38–39
painting 70
palette display area
in Export Preview dialog box 98
palettes
changing 16
Swatches panel 68
using export palette 97
panels
Brush 17
closing 33
Color Mixer 16
displaying 33
Effect 18, 75
Fill 17, 72
Frames 19
returning to default positions 14
Swatches 15
Text Editor 18
Tool Options 14
using 14–18
Paste Inside command 41
pasting
in image edit mode 92
while in object mode 92

130

Index

path objects
editing 25, 40–42
feathering 43
Path Redraw tool 61, 62
Path Scrubber tool 9, 61
tutorial 42
paths 56
closing 58
converting text to 78
displaying points 59
displaying without points 58
editing 59
editing without point handles 62
open and closed 58
pushing and pulling 62
redrawing 62
selecting 58
Pattern fills 70
Pen tool 8, 70
inserting points 41
tutorial 41, 47
Pencil tool 9
perspective 65
Photoshop Plug-ins 65, 75
PICT export format 103
pixels 56, 63
cutting 64
editing 63
selecting 64
PNG
alpha channel 116
as a Web export format 102
compared to other Web formats 102
compression 102
defined 102
Microsoft Internet Explorer support 116
Pointer tool 8
mouse highlight 34
selecting paths 58
tutorial 34
points
corner 59
curve 59
handles 59
Polygon Lasso tool 64
tutorial 36
Polygon tool 8, 60

polygons
angle 60
number of sides 60
pre-caching
HTML 118
JavaScript rollover buttons 118
preferences
displaying 33
restoring defaults 33
Preferences file
default positions and 14
Macintosh 14
Windows 14
preview area
in Export Preview dialog box 96
Preview page button 14
progressive JPEG images 101
pulling paths 62
pushing and pulling an area 62
pushing paths 62
R
Rectangle tool 8, 60
rounded corners 60
rectangles
rounded corners 60
Redraw Path tool 9
redrawing paths 62
resampling
during Copy and Paste 91
Reshape Area tool 9, 61, 62
tutorial 41
resolution
setting 25
resources for learning Fireworks 4
RGB color model 67
right mouse button (in Windows) 21
rotating objects 35, 65
rounded corners 60
RTF text
importing 92
Rubber Stamp tool 9
cloning 57
rulers 26

S
saving a custom color palette 98
saving custom brushes 71
Scale tool 9
scaling images
on export 100
scaling objects 65
Select Behind tool 8, 59
tutorial 35, 43, 44
Select Transparency tool 99
selecting
additional objects 59
all within a group 75
an image in object mode 64
hiding edges 34
Magic Wand tool 37
mouse highlight 34
objects 58
paths 58
pixels 64
Pointer tool 34
points on a path 41
Polygon Lasso tool 36
Select Behind tool 35, 44
Subselection tool 35, 41
superselecting 75
within groups 35
within mask groups 43
Selection highlight
showing and hiding 59
setting up
document 25–27
Shift key
constraining shapes 60
shortcut. See keyboard shortcut.
Show/Hide URL button 13
showing
document rulers 26
layers 34, 38
toolbars 7
Toolbox 7
URLs 51
Skew tool 9
tutorial 47
skewing objects 65
Slice tool 13
slicing a path 62

Index

131

smoothing
in JPEG images 101
Snap to Grid command 26
split view
in Export Preview dialog box 96
squares 60
rounded corners 60
StarGaze web page 32
stars
angle 60
number of points 60
starting Fireworks 3
Status bar (Windows) 63
Stop button 63
stop cursor 63
striped border 63
Subselect command 75
Subselection tool 8, 59
selecting points 41
tutorial 35, 41
Subtract from Transparency tool 99
Superselect command 75
swap colors 69
swatches
adding to Swatches panel 16
replacing in Swatches panel 16
saving from Swatches panel 16
sorting from Swatches panel 16
Swatches panel 15, 68
adding a color 68
appending a palette 68
applying color 68
changing palette 16
deleting a color 68
eyedropper cursors 68
replacing a color 68
using the current export palette 68
Symbols
adding items to 83
creating 82, 83
deleting 83
finding 83
modifying 82
Symbols and Instances 82–84
breaking links 83

132

Index

system (Macintosh) color palette 98
system (Windows) color palette 98
system color picker
canvas 69
color wells 69
defining colors using 17, 40
system requirements for Fireworks 2
T
text
aligning 47
applying effects 46
applying stretched alignment 47
attaching paragraphs to paths 47
attaching to paths 45
converting to images 78
converting to paths 78
direction 77
editing 25, 45–47
importing 92
range kerning 77
vertical 77
text color
applying using Color Mixer 16
Text Editor 18, 76–77
in tutorial 45
opening 18
Stretched Alignment button 47
Text tool 8
tutorial 45
texture 73
thumbnails
creating during batch processing 104
TIFF export format 103
tips
for tutorials 32
tool groups
contents 7
displaying 7
tool options
Freeform tool 42
Pointer tool 34
Reshape Area tool 41
tool options panels 14–18

toolbars
hiding 7
Info bar 11
Modify toolbar 11
Opacity toolbar 12
showing 7
URLs toolbar 13, 50
using 7–14
View Controls 14
Toolbox 7
choosing tools in 33
contents 8–9
hiding 7
showing 7
showing tool groups 7
tools 44
Brush tool 40
Crop tool 37
Export Area tool 100
Freeform tool 42
in Toolbox 8–9
Magic Wand tool 37
Paint Bucket 38–39
Path Scrubber tool 42
Pen tool 41, 47
Pointer tool 34
Polygon Lasso tool 36
Redraw Path tool 9
Reshape Area tool 41
Select Behind tool 35, 43
Skew tool 47
Subselection tool 35, 41
Text tool 45
Transform tools 65
transparency 73
Add to Transparency tool 99
alpha channel transparency 99, 116
Convert to Alpha Xtra 87
fills 84
in animated GIFs 115
Index Color transparency 99
on export 99
Select Transparency tool 99
Subtract from Transparency tool 99
texture 72
when exporting graphics 99

Tutorials
Activating image edit mode 36
Applying and editing fills 38
Creating rollovers 48
fonts used 32
hiding layers 34, 38
Linking an image map 50
Masking objects 43
opening art files 32
Reshaping paths 40
tips for using 32
Working in object mode 34
Working with animation 52
Working with text 45
U
Undo
command 26, 33, 34
levels 26
number of steps 33, 34
Uniform color palette 98
uninstalling Fireworks 3
units of measurement 26
URL Link pop-up 13
URL Object Properties dialog box 13
URL objects
creating 13
URL overlay
changing colors in 108
hiding 108
URL Pointer tool 13
URL pop-up 13
URL shape tools 13
URL Slice tool 13
URLs
adding to objects 13
assigning 13
defined 13
Image Map Options 13
Link pop-up 13
Object Properties 13
Options pop-up 13
toolbar 13, 108

Index

133

URLs toolbar
displaying 50
hiding 108
options 108
Show/Hide URLs button 51
V
vector art
defined 6
importing 27
vector drawing 56
Vector File Options
when importing 93, 94
Vector File Options dialog box 93, 94
View Controls toolbar 14
viewing document
Full Display or Draft Display 21
views, multiple 21
W
Web 216 palette 97
Web export formats 101–102
Web formats compared 102
WebSnap Adaptive palette 97
Windows
Fireworks Preferences file 14
Fireworks system requirements for 2
workflow
How is Fireworks unique? 22–24
importing and exporting 90
working with other applications 104
X
xRes LRG export format 103
Xtras 65, 75
Blur Xtra 65, 75
Invert Xtra 65, 75
Sharpen Xtra 65, 75
Z
zooming in 20
zooming out 20

134

Index

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.2
Linearized                      : Yes
Encryption                      : Standard V1.2 (40-bit)
User Access                     : Print, Annotate, Fill forms, Extract, Assemble, Print high-res
Create Date                     : 1998:05:21 15:18:37
Producer                        : Acrobat Distiller 3.01 for Power Macintosh
Author                          : Rocky
Title                           : 00 FW1 UM.Book
Creator                         : FrameMaker 5.5
Modify Date                     : 1998:05:21 15:41:36
Page Count                      : 142
Page Mode                       : UseOutlines

EXIF Metadata provided by EXIF.tools

00 FW1 UM.Book Macromedia Fireworks Manual

Navigation menu

Versions of this User Manual:

Views

Navigation