00 FW1 UM.Book Macromedia Fireworks Manual

User Manual: manual pdf -FilePursuit

Open the PDF directly: View PDF .
Page Count: 142 [warning: Documents this large are best viewed by clicking the View PDF Link!]

Table of Contents
Getting Your Bearings
Tutorials
Creating and Editing a Graphic
Importing and Exporting
Web Design Features
Index

macromedia

™

macromedia®

Using Fireworks

FIREWORKS®

Licenses and Trademarks

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

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.

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.

iii

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

Contents

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

vii

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

viii

CHAPTER 1

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

Getting Your Bearings

Chapter 1

What’s in this package

The Fireworks package contains:

◆

A CD-ROM containing the Fireworks installer

and the sample artwork.

◆

Using Fireworks

, the manual you are now reading.

System requirements

Fireworks runs on either the Windows or Macintosh

operating systems. Before you install Fireworks, you

need the following equipment:

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

◆

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)

Getting Your Bearings

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 Windows NT 4 or

Windows 95:

Insert the Fireworks CD-ROM in your CD-ROM

drive.

Follow the instructions that appear on screen.

The installer application prompts you to enter

required information.

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 install and start Fireworks on a Macintosh:

Disable virus-protection extensions and restart

your computer.

Insert the Fireworks CD-ROM in your CD-

ROM 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.

Uninstalling Fireworks

Use the uninstaller to ensure that all Fireworks files are

removed from the computer.

To uninstall Fireworks on Windows NT 4 or

Windows 95:

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:

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.

Chapter 1

Resources for learning

Fireworks

Use these resources to learn Fireworks quickly:

◆

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.

◆

www.macromedia.com

Macromedia’s award-winning web site contains

Fireworks tutorials, sample art, and updates.

What’s unique about

Fireworks?

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.

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

strokes and textured fills. Apply customizable Live

Effects to objects.

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.

Getting Your Bearings

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.

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.

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.

Chapter 1

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.

Info bar

Main toolbar (Windows only)

URLs toolbar

Modify toolbar (Windows only)View Controls toolbar (Windows only)

Opacity toolbar

Toolbox

Fireworks on Windows

Swatches

Status bar

(Windows only)

Getting Your Bearings

Using the toolbars

Fireworks has several toolbars:

◆

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.

Toolbox

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.

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.

ress and hold a tool to reveal tool groups.

Chapter 1

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 To Activate by

pressing

Pointer

Select and drag

objects. v

0 (zero)

Select

Behind

Select objects behind

other objects. v

0 (zero)

Crop

Discard portions of an

image. c

Export Area

Export a portion of

your document. j

Subselection

Select an object within

a group or points on a

path.

a or 1

Marquee

Select a rectangular

pixel area in image edit

mode.

Ellipse

Marquee

Select an elliptical pixel

area in image edit

mode.

Lasso

Select a freeform pixel

area in image edit

mode.

Polygon

Lasso

Select a polygonal pixel

area in image edit

mode.

Magic Wand

Select pixel areas of

similar color in image

edit mode.

Hand

Pan the view of the

document. spacebar

Magnify

Change view

magnification. z

Line

Draw straight lines. n

Pen

Draw paths by

anchoring points. p

Rectangle

Draw rectangles,

rounded rectangles,

and squares.

Ellipse

Draw ellipses and

circles. r

Polygon

Draw polygons and

stars. g

Text

Create text blocks. t

Use this tool To Activate by

pressing

Getting Your Bearings

Pencil

Draw one-pixel pencil

strokes. y

Brush

Draw brush strokes

using Brush panel

settings.

Redraw Path

Redraw portions of a

selected path using

Brush panel settings.

Scale

Resize and rotate

objects. q

Skew

Slant and rotate

objects, and change

perspective.

Distort

Distort and rotate

objects. q

Freeform

Pull a path segment or

push a path segment

using a resizable

cursor.

Reshape

Area

Reshape a selected

path within the area of

the resizable cursor.

Path

Scrubber (+)

Increase stroke

characteristics

controlled by pressure

or speed.

Path

Scrubber (–)

Decrease stroke

characteristics

controlled by pressure

or speed.

Use this tool To Activate by

pressing

Eyedropper

Sample a color and

apply it to the active

color well.

Paint Bucket

Fill objects with color,

gradients, or patterns

and adjust fills with

Paint Bucket handles.

Eraser

Remove or replace

portions of image

objects and cut paths.

Rubber

Stamp

Clone portions of an

image object. s

Use this tool To Activate by

pressing

Chapter 1

Main toolbar (Windows only)

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.

Use To

New

Create a new document.

Open

Open an existing document.

Save

Save the active document.

Import

Import a file.

Export

Export a file.

Print the active document.

Undo

Undo the last action.

Redo

Redo the last action.

Cut

Cut the selected object to the

Clipboard.

Copy

Copy the selected object to the

Clipboard.

Paste

Paste the Clipboard’s contents into

the active document.

Object

Properties

View Object Properties for the

selected object.

Color Mixer

Open the Color Mixer.

Brushes

Open the Brushes panel.

Fills

Open the Fill panel.

Layers

Open the Layers panel.

Help

Activate the Help cursor.

Use To

Getting Your Bearings 11

Info bar

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.

The Info bar’s Options pop-up contains settings for

your document’s color model and unit of measurement.

Modify toolbar (Windows only)

The Modify toolbar contains buttons for frequently

used modifications. All commands in the Modify

toolbar are available in the Modify menu.

Options for choosing a color model

and document unit of measurement

Color of pixel beneath cursor

Alpha opacity measured in increments

from 0 to 255

Cursor position

Position of bounding box’s upper-left

corner point

Dimensions of selected object

Use To

Group

Group selected objects.

Ungroup

Ungroup selected objects.

Join

Join selected objects.

Split

Split selected objects.

Bring to

Front

Bring selected objects to front.

Bring

Forward

Bring selected objects forward.

Send

Backward

Send selected objects backward.

Send to Back

Send selected objects to back.

Align

Align selected objects according to

the setting in the adjacent pop-up.

Chapter 112

For more information about the Modify toolbar and

about transforming objects, see Fireworks Help.

Opacity toolbar

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.

Rotate

90º CCW

Rotate selected objects 90 degrees

counterclockwise.

Rotate

90º CW

Rotate selected objects 90 degrees

clockwise.

Flip

Horizontal

Flip selected objects horizontally.

Flip Vertical

Flip selected objects vertically.

Use To

To Do this

Set the opacity of a

single object Set the value using the

opacity slider.

Apply the same opacity

changes to multiple

objects

Group the objects and

alter the group’s

opacity using the

opacity slider.

Return individual

objects to the previous

opacity before

grouping

Ungroup the objects.

Set the blending mode

of a single object Choose from the

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

objects to the previous

blending mode before

grouping

Ungroup the objects.

Set opacity. View object status

information

(Macintosh only).

Choose

blending

mode.

Getting Your Bearings 13

URLs toolbar

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.

Choosing Image Map Options from the Options pop-

up 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.

For more information on assigning URLs, see “Creating

an image map” on page 109.

Show or hide the URL overlay.

Choose URL viewing options.

Create URL shapes.

Create rectangular slice objects.

Assign URLs to selected URL objects.

Create, edit, duplicate, and remove

links. Choose image map options.

Select, move, and resize URL objects.

Use To

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.

Chapter 114

View Controls toolbar (Windows only)

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.

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.

Set magnification.

Choose display mode.

Preview page setup.

Options related to the active tool

appear on the Tool Options panel.

Getting Your Bearings 15

Swatches panel

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.

Add a color to the

palette by clicking

in an empty area.

Use the Options

pop-up to add,

replace, delete,

save, and sort

swatches, and

choose a color

palette.

Macintosh

Windows (docked)

Scroll the swatches.

View all swatches.

Chapter 116

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.

Color Mixer

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

Add swatches to the

panel Choose Add Swatches.

Replace all swatches with

an external set Choose Replace

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.

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.

Pick a color from the

color bar.

Check to automatically apply

changes to selected objects.

Select Brush or

Fill color.

Choose a color mode

from the Options pop-up.

Set color values.

Use default colors.

Manually apply changes

to selected objects.

Swap brush and fill colors.

Getting Your Bearings 17

Brush panel

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.

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 pop-

up.

See “The Brush panel” on page 70 and Fireworks Help

for more information on brush options and settings.

Fill panel

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.

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).

To Do this

Save, edit, name, and

delete brushes using the

Options pop-up.

Choose a brush.

Preview and apply

the brush stroke.

Choose brush-specific

settings.

Save, edit, name, and

delete gradients using

the Options pop-up.

Choose a fill.

Preview and apply a fill.

Choose fill-specific

settings.

Chapter 118

Effect panel

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.

Text Editor

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.

Save, rename, and

delete effects using the

Options pop-up.

Choose an effect.

Preview and apply

effect.

Choose effect-specific

settings.

Set font, size, and style. Set orientation,

alignment, and

flow.

Adjust kerning and leading.

Set horizontal

scaling and

baseline shift.

Type or edit

text.

Apply changes to the document

without closing the text editor.

Getting Your Bearings 19

Layers and Frames panels

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.

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.

Navigate quickly to

a specific frame.

Lock and unlock individual layers.

Change global view

and lock settings;

create, delete, and

rename layers using the

Options pop-up.

Show or hide individual layers.

Drag to rearrange

layers. Double-click to

rename a layer.

Drag to assign

selected objects to

another layer.

Create, delete, and duplicate frames.

Distribute items across frames. Copy

selected items to specific frames.

Drag to rearrange

frames.

Chapter 120

Navigating your document

Setting document magnification

Fireworks magnification ranges from 6 percent to 6400

percent.

Choose a magnification

setting from the pop-up.

To Do this

Enlarge a document

view level Choose the Magnify tool and

click inside a document

window

Choose an increment from the

Magnification pop-up

Choose View > Magnification

and choose a magnification

level.

Reduce a document

view level Choose the Magnify tool, hold

down Alt (Windows) or Option

(Macintosh), and click in a

document

Choose an increment from the

Magnification pop-up

Choose View > Magnification

and choose a magnification

level.

Zoom to the highest

magnification Choose 6400% from the

Magnification pop-up

Choose View >

Magnification > 6400%

Press Control-6 (Windows) or

Command-6 (Macintosh).

Zoom to the lowest

magnification Choose 6% from the

Magnification pop-up

Choose View >

Magnification > 6%.

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.

Getting Your Bearings 21

Using magnification shortcuts

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.

Multiple document views

Use multiple views to see one document at two different

view modes or magnifications simultaneously.

To open a second document view:

1Choose Window > New Window.

2Change 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).

Choosing a display mode

Note: For easier editing, objects selected while in Draft

Display mode display in full detail.

To Use

Set view to 50% Control-5 (Windows) or

Command-5 (Macintosh)

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)

Control-+ (Windows) or

Command-+ (Macintosh)

Zoom out Control-Alt-Spacebar

(Windows) or Command-

Option-Spacebar (Macintosh)

Control-[minus] (Windows) or

Command-[minus]

(Macintosh)

Choose To

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.

Display controls

(Windows)

Chapter 122

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:

1Create a line drawing of an artist’s palette using

an application such as Macromedia FreeHand.

2Import 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.

3Apply third-party filter effects, such as bevels and

drop shadows.

4Use 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.

5Painstakingly add URL objects or animation using

yet another application.

6Manually attach hyperlinks to the hotspots that

link to the client’s web pages.

7View 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.

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:

1Open 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.

Getting Your Bearings 23

2Apply 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.

3Reshape the object.

Alter the shape of the artist’s palette using the

Reshape Area tool.

4Add text.

Use Fireworks’ Text Editor to create and modify

text.

5Add 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.

Use the Brush, Fill, and Effect panels to add

color and texture to objects.

Fireworks text is always editable.

Chapter 124

6Create 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.

7Optimize 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.

8Revise.

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.

Getting Your Bearings 25

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.

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.

Editability

Unlike many other graphics and image-editing

applications, Fireworks objects are always editable all

the time.

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

Consider your document’s design and final output

requirements. Decide in advance which settings are best.

Canvas size

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.

Resolution

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.

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.

To edit Do this

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

Double-click an image object with

the Pointer tool.

Background

Image layer Choose Modify > Background

Image

Choose the Background layer on

the Layers panel.

Text Double-click a text block with the

Pointer tool

Select a text block and choose

Text > Editor

Click a text block with the Text

tool.

Chapter 126

Number of undo steps

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.

Note: Changes to the Undo preference do not take

effect until Fireworks is restarted.

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.

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

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.

Guides

Use guides, which are non-exporting guidelines, to

precisely align and place objects. Choose View > Guides

to show or hide guides.

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.

Editing guides

Choose View > Edit Guides to open the Guides

dialog box.

Set grid color.

Set horizontal

grid spacing.

Set vertical

grid spacing.

Use To

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.

Getting Your Bearings 27

Working with the grid and 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:

1Choose File > Import or use Command-R

(Macintosh) or Control-R (Windows).

2Choose the file to import.

3Position the import cursor where the upper-left

corner of the graphic is to appear.

4Click 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.

To Do this

Show or hide

the grid Choose View > Grid

Check Show Grid in the Grid

dialog box.

Snap objects to

the grid Choose View > Snap to Grid

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

Check Snap to Guides in the

Guides dialog box.

Edit guides Choose View > Edit Guides.

Lock guides Choose View > Lock Guides.

Chapter 128

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.

Exporting

Note: See Chapter 4, “Importing and Exporting,”

for a complete discussion of Fireworks’ extensive

export capabilities.

Choose ﬁle format.

Choose color

options.

View the current

color palette.

Adjust transparency.

Pick, pan, and

magnify preview.

Scroll or play

animation frames.

Activate the

Export Wizard.

View speciﬁcations for current

export settings.

Save and choose preset

export settings.

Choose up to four

simultaneous

previews.

Preview current

export settings.

Keep settings as

document defaults

but do not export yet.

Automatically

optimize.

Open the Export File

dialog box.

Resize this dialog box.

Getting Your Bearings 29

To export a graphic:

1Choose File > Export or use Control-Shift-R

(Windows) or Command-Shift-R (Macintosh) to

open the Export Preview dialog box.

2Choose settings on the Options, File, and

Animation panels.

3View the effect of your settings in the

preview area.

The preview area can display up to four views

simultaneously.

4Click 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.

Chapter 130

CHAPTER 2

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

Tutorials

Chapter 232

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.

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

◆Activating image edit mode

◆Applying and editing fills

◆Reshaping paths

◆Masking objects

◆Working with text

◆Creating rollovers

◆Linking an image map

◆Working with animation

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.

References

◆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.

Tutorials 33

◆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.

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.

Tasks and pictures

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.

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.

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

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.

Object opacity

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.

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

Chapter 234

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.

1Choose 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.

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

and Background.

Show/Hide icon

2Choose 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.

3Use 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.

Tutorials 35

4Use 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.

5With 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.

6The 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.

7Choose 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.

Chapter 236

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.

1Choose 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.

2Choose 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.

3Use 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.

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.

Tutorials 37

4Use 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.

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.

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.

Crop tool cursors

5Choose 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.

Click the Stop button on the Status bar (Windows) or

Opacity toolbar (Macintosh) to deactivate image edit mode.

Stop buttons

Status bar

Opacity toolbar

6Importing 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.

Import cursor

7Choose 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.

Chapter 238

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.

1Choose 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.

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

Show/Hide icon

2On 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.

Create a Waves fill in the Fill panel.

3Choose the Paint Bucket tool. If necessary, choose

Window > Tool Options to display the Tool

Options panel. Check Mouse Highlight and

uncheck Selected Paths Only.

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.

Tutorials 39

4With 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.

Use the fill handles to modify the look of the Waves fill.

5Choose 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.

Choose Select > None to deselect the planet.

Edit the colors in the Waves fill.

Added color well

Moved color well

6On 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.

7Choose 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.

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.

Click the Paint Bucket tool to apply the fill to the Background image.

Click the tool again to increase the intensity of the fill.

Chapter 240

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.

1Choose 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.

Open the Comet.png file.

Planet

Comet’s core

Impact zone

Comet’s tail

2Create 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 reddish-

orange color, and close the picker.

Create a brush for the planet’s clouds.

3Choose 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.

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.

Tutorials 41

4Choose 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.

Reshape area cursor

5Use 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.

Paste the cloud pattern inside the planet.

6Use 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.

Use the Pen tool to add a point and use the Subselection tool to

reposition it.

7Choose 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.

pply an effect to the comet’s core.

Chapter 242

8Use 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.

9Drag 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 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.

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

Tutorials 43

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.

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 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.

Paste the nebula image inside the star. Once it is pasted, use the mask

handle to move the image within the paste inside group.

Mask handle

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.

Chapter 244

4 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 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.

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 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.

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

The text remains editable.

Tutorials 45

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.

1Choose 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.

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

Current ﬁll color

2Choose 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.

Create the name of the company in the Text Editor.

Horizontal Scale

3Choose 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.

ttach the text to the blue ellipse.

Chapter 246

4If 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.

pply the Smooth Inner Bevel effect to the text.

5With the text on a path selected, choose

Modify > Group and leave the group selected.

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.

6Click 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.

7Choose 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.

Subselect the text in the group and change the kerning.

Kerning ﬁeld

Tutorials 47

8With 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.

9Double-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.

ttach the paragraph to the path.

Chapter 248

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.

Down

Over

OnClick

1Choose 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.

Open the Button.png file.

2Choose 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 pop-

up 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 Auto-

Apply checkbox. Leave the button selected.

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.

Auto-Apply

checkbox

3If 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.

Duplicate the current frame three times for a total of four frames,

one for each button state.

Tutorials 49

4Select 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.

pply a different button state effect to each object.

Apply Raised in Frame 1.

Apply Inset in Frame 3.

Apply Highlighted in Frame 2.

Apply Inverted in Frame 4.

5Choose 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.

Optionally, click the Show/Hide URLs icon on the

URLs toolbar to hide the URL overlay.

Create a URL link for the button.

Rectangle URL tool

6Choose 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.

7Click 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.

Chapter 250

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.

1Choose 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.

2Choose 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.

3This 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.

ssign a new link for the URL object created.

Tutorials 51

4Click 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.

5Choose 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.

Use the URL Polygon tool to create an irregularly shaped URL

object.

6Click 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.

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

make a URL object.

7Choose 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 pop-

up. 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.

Note: When exporting, check Generate HTML in

the Export File dialog box to export both the image

and the HTML ﬁle containing the image map.

Choose the type of image map you want to create before exporting.

The Client-side option produces two files, an HTM and a JPG.

Chapter 252

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.

1Choose 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.

2Finish 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.

Copy objects from Frame 4 to Frame 5.

3Choose the Pointer tool, hold down Shift, and

select the comet’s purple core and its white, star-

shaped head. Drag these objects downward and

to the right to continue the comet’s course.

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.

Tutorials 53

4Click 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, star-

shaped 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.

5Choose 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.

Set color palette options for the animated GIF.

Number of

colors

6Click 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.

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.

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

Loop

Play once

Disposal method

Frame delay

Number of loops pop-up

7Click 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.

Play button

Chapter 254

CHAPTER 3

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

Creating and Editing a Graphic

Chapter 356

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.

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

behind the selected

object.

Moves the image or

moves pixels bound

by a marquee.

Crop Discards portions of

a document. Is not available.

Export

Area Exports a portion of

a document. Is not available.

Sub-

selection Selects and moves

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

or Ellipse

Marquee

Is not available. Selects or moves a

rectangular or

elliptical area of

pixels.

Lasso or

Polygon

Lasso

Is not available. Selects or moves a

freeform area of

pixels.

Magic

Wand Is not available. Selects an area of

similarly colored

pixels.

Line,

Pen, and

Basic

Shapes

Draws objects as

editable paths. Paints pixel brush

strokes on an image

object.

Text Creates and edits

text blocks and

opens the Text

Editor.

Exits image edit

mode, creates text

blocks, and opens

the Text Editor.

Creating and Editing a Graphic 57

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.

◆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.

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.

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

of a selected path

or draws brush

strokes as paths.

Paints brush strokes

as pixels.

Freeform Pulls or pushes a

selected path to

reshape it.

Is not available.

Reshape

Area Reshapes the parts

of a selected path

that lie within the

Reshape Area

cursor area.

Is not available.

Path

Scrubber Alters a path’s

pressure and speed

characteristics

without changing

its shape.

Is not available.

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.

This tool In object mode In image edit mode

vector object with an

editable path and points.

A bitmap image with a

rectangular image

bounding box.

Chapter 358

Open and closed 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.

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.

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, double-

click 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.

Drawing paths

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.

Displaying and selecting paths

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.

◆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.

Open path Closed path

When this square appears,

release the mouse button to

close the path.

Pen tool Brush tool

An object selected with the Pointer tool displays the

path of the object without points.

Creating and Editing a Graphic 59

◆Displayed path and points—Choose the

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.

◆Hidden path and points—Choose View >

Hide Edges to hide the paths and points of

selected objects.

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.

Editing points to reshape paths

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.

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.

Fireworks has two point types:

◆Curve—Adjacent segments are curved. Clicking a

curve point with the Pen tool converts it to a corner

point, retracting the handles and straightening the

adjacent segments.

◆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.

An object selected with the Subselection tool

displays the path of the object with points.

A selected object displays no path

when Hide Edges is checked.

Select Behind tool

Subselection tool

Drag a point handle with the Subselection tool to edit

adjacent path segments.

Subselection cursor

Point handle

Path preview

Selected point

Path

Chapter 360

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.

Drawing by dragging

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.

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.

To both constrain a shape and draw from the

centerpoint, hold down Shift-Alt (Windows) or Shift-

Option (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 plotting points

To draw using the Pen tool:

1Choose the Pen tool.

2Click to plot corner points.

Press and hold the mouse button on a point, then

drag to draw curves.

3End the path.

◆To end an open path, double-click the last point

when a small arrow appears next to the cursor.

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.

Line tool Basic shape tools

A five-point star

with Angle =

Automatic

An eight-point star

with Angle = 10

A five-sided

polygon

Creating and Editing a Graphic 61

◆To end a closed path, click the starting point

when a solid square appears next to the cursor.

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.

To move the brush stroke of one or more objects

inside or outside the path:

1Select one or more objects.

2Choose Modify > Object Properties.

3Choose 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

In addition to dragging point handles, several Fireworks

tools edit paths in object mode.

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

Pen cursor

Path preview

Point handle

Centered stroke

Stroke inside

Stroke outside

The Freeform, Reshape Area, Path Scrubber, Path Redraw,

and Eraser (Knife) tools are the object mode editing tools.

Chapter 362

◆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.

◆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.

◆Path Redraw tool—Redraw a segment of a

selected path, retaining the brush, fill, and effect

characteristics of the path.

◆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.

This cursor 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 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 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 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.

The Freeform tool pulls a path segment.

Specified length

The Freeform tool

pushes a path segment. The path redraws to

reflect the push.

The Path Redraw tool redraws a path segment.

Creating and Editing a Graphic 63

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.

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.

Return to object mode from image edit mode in any of

three ways:

◆Move the cursor beyond the striped border until the

cursor becomes a stop cursor, and then click the

mouse button.

◆Click the Stop button on the Status bar (Windows)

or on the Opacity toolbar (Macintosh).

◆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.

To Do this

Edit an image

object Select the object, and then

choose Modify > Image Object

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

Background image Choose Modify > Background

Image

Click the Background layer in

the Layers panel.

A striped border surrounds the selected image object or the

Background in image edit mode.

Stop cursor

Click the Stop button to exit image edit mode.

Chapter 364

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.

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.

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.

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.

For more information about the Marquee and Lasso

tools, see Fireworks Help.

Marquee tools Lasso tools

Use this tool To

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.

n object in image edit mode with a circle marquee

Creating and Editing a Graphic 65

Converting an object to an image

Convert one or more selected objects to an image object

in any of three ways:

◆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.

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.

Transforming and distorting objects

Use the Transform tools or menu items to scale, rotate,

distort, and skew an object, a group of objects, or a pixel

selection area.

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.

Drag any transform handle to edit the selected objects

interactively. The cursor changes to indicate the available

activity.

Transform tools

Original object

Rotated

Scaled

Skewed Distorted

Center point

Transformation handles

Chapter 366

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.

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.

To move the centerpoint back to the center of the

transform handles, hold down Shift and Alt-double-

click (Windows) or Option-double-click (Macintosh)

the centerpoint.

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.

Using color

Use the Color Mixer and the Swatches panel to create or

choose colors for Fireworks brush strokes, fills, and

effects.

Color Mixer

Choose a color model.

Create a color.

Pick a color.

Check to apply a color

automatically.

Check to apply a color to the fill color well.

Check to apply a color to the brush color well.

Click to restore default brush and fill colors.

Click to switch brush and fill colors.

Swatches panel

Add, replace, save, clear,

or sort swatches, or

choose a palette.

Choose a swatch.

Click to add the active swatch to the

palette.

Creating and Editing a Graphic 67

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:

1Choose Window > Color Mixer, if necessary, to

display the Color Mixer.

2Click 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.

3Check 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.

4Choose a color model from the Color Mixer

Options pop-up, if necessary.

5Enter values in the color component fields or

use the pop-up sliders, or pick a color from the

color bar.

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.

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.

Note: When the Hexadecimal color bar is displayed,

color choices are restricted to the Web 216 palette.

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.

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 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.

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.

Choose To express color components as

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.

Chapter 368

Using the Swatches panel

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.

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.

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:

1Move the cursor to the open space after the last

swatch on the Swatches panel.

The cursor becomes the paint bucket cursor.

2Click to add the swatch.

Note: Choosing Edit > Undo does not undo swatch

additions or deletions.

To replace a swatch with the active color:

1Hold down Shift and point to a swatch.

The cursor becomes the paint bucket cursor.

2Click the swatch.

The active color replaces the original swatch.

To delete a swatch from the palette:

1Hold down Control (Windows) or Command

(Macintosh) and point to a swatch.

The cursor becomes the scissors cursor.

2Click the swatch to delete it.

To clear the entire Swatches panel, choose Clear

Swatches from the Swatches panel Options pop-up.

To append a palette to the current palette:

1Choose Add Swatches from the Options pop-up.

A File dialog box opens.

2Choose 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.

This eyedropper Applies a color to

The brush color well and the

brush stroke of each selected

object.

The fill color well and the fill of

each selected object.

The effect color well and the

effect of each selected object.

Creating and Editing a Graphic 69

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.

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.

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 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 ﬁll color well is active in the Toolbox

or the Color Mixer.

Applying color to the canvas

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.

To activate the Do this

Brush color well Click the color well with the brush

next to it in the Toolbox or in the

Color Mixer

Click the Brush tab on the Brushes

and Fill panel.

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.

Fill color well Click the color well with the paint

bucket next to it in the Toolbox or

in the Color Mixer

Click the Fill tab on the Brushes

and Fill panel.

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 activate the Do this

Chapter 370

Applying brushes and fills

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.

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.

For more information on adding textures, see

Fireworks Help.

The Brush panel

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.

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.

Brush panel Fill panel

Save, edit, rename, and

delete brushes.

Choose a brush category.

Choose a specific brush.

Show current brush shape.

Choose a brush texture.

Preview brush stroke.

Manually apply changes to

selected drawn paths.

Check to automatically apply

changes to selected paths.

Alter brush edge.

Alter brush size.

Change intensity of the

brush texture.

Alter brush color.

Brush tool Pen tool

Creating and Editing a Graphic 71

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 pressure-

and speed-sensitivity settings.

A newly created brush stroke assumes the current color

displayed in the brush color well, whether in object

mode or image edit mode.

Using the Edit Brush panels

Choose Edit Brush from the Brush panel Options

pop-up to display the Edit Brush panels: Options,

Shape, and Sensitivity.

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.

Set ink amount,

spacing, and flow rate.

Overlap brush stamps for

dense strokes.

Set brush texture amount.

Set texture on the edges.

Choose an edge effect.

Set the number of tips.

Set spacing of multiple tips.

Choose the color variation

between multiple tips.

Edit Brush Shape panel

Preview the brush tip shape.

Check for a square brush tip.

Set the brush tip size, edge

softness, tip aspect, and tip

angle.

Preview the brush stroke.

Edit Brush Sensitivity panel

Preview the brush stroke.

Assign the brush

property for sensitivity

data to control.

Set the degree to which

sensitivity data affects the

current brush property.

Chapter 372

The Fill panel

Fireworks fill categories are None, Solid, Pattern, and

various gradient shapes. Combine fill types with

textures to quickly create complex artwork.

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.

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.

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.

Editing a fill with the Paint Bucket tool

Choose the Paint Bucket tool to quickly edit a selected

object’s fill.

◆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.

Choose a fill category.

Save, edit, name, and

delete gradients.

Control edge feathering.

Choose a fill texture and

intensity and control

transparency.

Preview fill.

Manually apply changes

to selected paths.

Check to automatically apply

changes to selected paths.

Alter fill color.

Fill panel

Choose Anti-Alias, Hard

Edge, or Feathered edge.

Paint Bucket tool

Creating and Editing a Graphic 73

Adjusting a fill interactively

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.

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.

Adding texture

Both the Brush panel and the Fill panel have an option

for adding a texture to the brush stroke or 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.

Use the Paint Bucket tool handles to interactively adjust a

Pattern or Gradient fill.

Drag to

adjust fill

width and

skew.

Drag to

adjust fill

angle.

Drag to

place a fill’s

center or

first color.

Preview a texture.

The Texture name pop-up displays a preview of the

highlighted texture.

Adjust texture and

transparency.

Chapter 374

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.

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.

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

Outer Bevel effect

rop Shadow effect

Emboss effect

Glow effect

Creating and Editing a Graphic 75

To apply an effect to an object:

1Select the object.

2Choose the effect from the Effect panel.

3Adjust Effect characteristics, viewing the results

in the Effect preview.

4Click Apply, unless Auto-Apply is checked.

To edit an effect:

1Select the object.

2Adjust effect characteristics in the Effect panel.

3Click 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.

To apply an additional effect to an object:

1Apply the first effect and leave the object

selected.

2Choose Modify > Group.

The object and the effect are grouped as an object

that can receive another effect.

3Apply another effect.

Add as many effects as you want using this method.

Grouped objects, including text, are still editable.

The multiple effects redraw accordingly.

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.

Using Subselect or Superselect with effects

When applying various effects to 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.

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.

Save, edit, name, and

delete effects.

Choose a specific effect.

Preview the effect.

Click to manually apply

changes to selected

objects.

Check to automatically apply

changes to selected objects.

Set effect-specific

options such as width,

contrast, and softness.

Choose an effect category.

Effect panel

Choose bevel appearance.

Chapter 376

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.

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.

Text is convertible to an image or to paths; however,

converting text renders it uneditable as text.

To enter text:

1Choose the Text tool and click the canvas.

The Text Editor opens.

2Choose font, size, spacing, and other text

characteristics.

3Type the text.

4Click OK or press Enter.

The text appears in a text block in the Fireworks

document.

5Resize and move the text block with the Pointer

tool.

6Add a brush or effect, or change the fill.

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

Drag any text block handle to

resize a text block.

Text block

Creating and Editing a Graphic 77

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.

Attaching text to a path

To place text on a path:

1Select a text block and a path.

2Choose Text > Attach to Path.

3Optionally, 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.

To edit text attached to a path, double-click the text-and-

path object to open the Text Editor.

Choose fonts from the Font pop-up. Apply Bold, Italic, or BoldItalic.

Set text block alignment to

Left, Center, Right, Justified,

or Stretched.

Adjust leading.

Type and edit text.

Set the direction of text

flow as left to right or

right to left.

Adjust kerning or

range kerning.

Adjust baseline shift.

Adjust horizontal scale.

Adjust point size.

Orient text horizontally or vertically.

Resize the Text Editor.

Check to show actual

fonts and sizes in the

Text Editor.

Chapter 378

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.

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.

If text attached to an open path exceeds the length of the

path, the remaining text returns and repeats the shape of

the path.

To move the starting point of text attached to a

path:

1Select the text-and-path object.

2Choose Modify > Object Properties.

3Enter 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.

To convert text to paths:

1Select the text.

2Choose Text > Convert to Paths.

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.

To convert text to an image object:

1Select the text.

2Choose Select > Convert to Image.

Text converted to an image object retains its current

appearance.

Vertical text on a path with

Vertical Orientation

Horizontal text on a path

Text on a path returns and repeats the path shape.

Creating and Editing a Graphic 79

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.

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.

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.

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.

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

Arranging objects on the same layer

Group selected objects as a single object.

To 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.

Subselect an object within a group.

Chapter 380

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.

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.

The active layer is highlighted. Drawn, imported, or

pasted objects initially reside on the active 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.

Move an object

backward on

the same layer

Select the object and choose

Modify > Arrange > Move

Backward.

Move an object

to the back of

a layer

Select the object and choose

Modify > Arrange > Send to

Back.

To Do this

Choose a different frame. Add, duplicate, rename,

and delete layers. Hide

and show layers. Lock

and unlock layers.

Drag to move selected

objects to another layer.

Show or hide a layer.

Lock or unlock a layer.

View and rearrange the

stacking order of layers.

Layers panel

Creating and Editing a Graphic 81

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

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.

To show or hide the Frames panel choose Window >

Frames. Frames are automatically named in numerical

order beginning with Frame 1.

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.

Add, duplicate, and

delete frames; copy to

frames; or distribute

the selection.

Frames panel

Chapter 382

Symbols and Instances

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.

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.

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.

Creating an Instance

Create an Instance using any of these methods:

◆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.

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.

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.

A plus icon represents a

Symbol object.

An arrow icon represents

an Instance object.

Creating and Editing a Graphic 83

Working with Symbols and Instances

Note: Symbol and Instance functions are available only

in object mode.

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.

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

Select a Symbol and choose

Copy to Frames from the

Frames panel

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

Select the Symbol, choose

Edit > Symbols > Break Link,

then choose Delete from the

resulting dialog box.

Delete a Symbol and

all associated

Instances

Delete the Symbol and

confirm in the resulting dialog

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.

Move a Symbol and

its Instances

simultaneously

Select the Symbol, choose

Select > Subselect, and move

the contents of the Symbol.

Tweened from 100% opacity to 25% opacity.

Chapter 384

To tween:

1Select 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.

2Choose Edit > Symbols > Tween Instances.

3Enter the number of tween steps in the Tween

Instances dialog box and click OK.

Check Distribute to frames to distribute the

tweened objects to separate animation frames.

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

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.

Adjust opacity.

Choose a blending mode.

Opacity toolbar

Creating and Editing a Graphic 85

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.

◆Result color—The result of the blending mode’s

effect on the base color or colors.

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.

Choose To

Normal Apply no blending mode.

Multiply Multiply the base color by the

blend color, resulting in darker

colors.

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.

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.

Tint Add gray to the base color to

create the result color.

Erase Remove all base color pixels,

including those in the background

image, to reveal the canvas color.

Choose To

Chapter 386

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

Creating and Editing a Graphic 87

To create a mask similar to a paste inside:

1Position the object to be pasted in front of the

destination path.

2Cut the object to the Clipboard.

3Select a path inside which the object on the

Clipboard is to be pasted.

4Choose Edit > Paste Inside.

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:

1Select two or more objects.

2Choose 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 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.

Chapter 388

CHAPTER 4

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

Importing and Exporting

Chapter 490

Fireworks in the workflow

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 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.

◆Batch process all files within a folder and name and

save export presets.

Importing

Import graphics or text in any of four ways:

◆Import

◆Open

◆Drag and drop

◆Copy and paste

Import File dialog box

To import a graphic using the Import File dialog

box:

1Choose File > Import.

2Select 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.

3Position the import cursor where you want the

upper-left corner of the object to appear.

4Click 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.

Importing and Exporting 91

Fireworks can import these formats:

◆PNG

◆GIF

◆JPEG

◆PICT (Macintosh)

◆BMP

◆TIFF

◆xRes LRG

◆ASCII

◆RTF

◆Adobe Photoshop 3, 4

◆Adobe Illustrator 7

◆Macromedia FreeHand 7, 8

◆CorelDRAW 7

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)

To drag and drop into Fireworks:

1Select a graphic in another application and drag

it over an open Fireworks document.

2Position the cursor where you want to drop the

selection and release the mouse button.

Copy and paste

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:

◆FreeHand 7, 8

◆Illustrator

◆PNG

◆PICT (Macintosh)

◆DIB (Windows)

◆BMP (Windows)

◆ASCII text

Resampling

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.

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.

Chapter 492

Pasting

Each edit mode handles pasted data differently:

◆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 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.

ASCII

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.

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.

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 and Exporting 93

Importing FreeHand, Illustrator, or

CorelDRAW files

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.

Scale—Specify the scale percentage for the imported file.

Width and Height—Specify in pixels the width and

height of the imported file.

Resolution—Specify the resolution of the imported file.

File Conversion—Specify how multipage documents

are handled when imported.

◆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

The following vector file import options are not

available when importing Illustrator files:

◆File Conversion > Page options.

◆File Conversion > Include Background layers.

◆Render as images > Blends over <number> steps.

Chapter 494

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:

◆File Conversion > Include Background layers.

◆Render as images > Blends over <number> steps.

◆Render as images > Tiled Fills over <number> objects.

Note: Fireworks cannot open or import compressed

CDR ﬁles.

Because CorelDRAW supports a different set of

features than Fireworks, the following changes occur

when importing CDR files:

◆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.

◆Dimensions—Converted to vector objects.

◆Text—Only basic text is imported. Most character

and paragraph parameters are unsupported.

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.

Exporting

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.

Fireworks exports graphics through these methods:

◆Drag and drop

◆Copy and paste

◆Export

◆Export Area tool

◆Export Slices

◆Export Again

For more information on Export Slices, see “Slicing

images when exporting” on page 110.

To export a graphic:

1Choose File > Export to display the Export

Preview dialog box.

2Choose setting.

3Click Export.

4In the Export dialog box, type a name for the file,

select the destination, and click Save (Windows)

or Export (Macintosh).

Choose File > Export Again to quickly export a file using

its previous export settings. Export Again bypasses the

Export Preview dialog box.

Importing and Exporting 95

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.

Check to optimize

the exported graphic.

Choose a color

depth.

Choose a color

palette.

Check to dither

the image.

Choose a format.

Preview and

edit the colors

in the image’s

palette.

Choose the

type of

transparency.

Use frame

controls to

preview frames

or play an

animated GIF.

Enter the index

number of the

transparent

color.

Use the

Magniﬁcation

tool to magnify

the preview

area.

Enter a maximum number of colors for the exported ﬁle.

Preview area

Choose the number of

views shown in the

preview area.

Add to or remove

colors from the

transparency.

Click to edit, save, or load a palette.

Click to launch the

Export Wizard.

Chapter 496

Preview area

The preview area displays the graphic exactly as it will be

exported and estimates file size and download time with

the current export settings.

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.

Magnification and pan control

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.

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:

1Choose settings in the Export Preview dialog box.

2Click the “+” in the preview area of the Export

Preview dialog box.

3Type 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.

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

ﬁle size

and

download

time

estimates

for the

preview.

Check to

preview the

results of

the chosen

export

settings.

Preview area of the Export Preview dialog box

Importing and Exporting 97

Options panel

Use the Options panel to choose file format and format-

specific settings for exporting. Although some settings

are common to many formats, other settings are unique

to a single format. For more information about format-

specific settings, see “Web export formats” on page 101,

and Fireworks Help.

Format

Select the file format for the exported image. Fireworks

exports the following formats:

◆GIF

◆Animated GIF

◆GIF Rollover

◆JPEG

◆JPEG Rollover

◆PNG

◆TIFF

◆xRes LRG

◆BMP

◆PICT (Macintosh)

Color depth

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.

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.

Palette

Color palettes are preset groups of colors used in an

exported graphic. Palettes contain up to 256 colors.

When exporting with a Bit Depth of 8 Bit Indexed,

choose a palette from the Palette pop-up.

These palettes are available by default:

Adaptive —A custom palette derived from the actual

colors in the document.

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.

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

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.

Bit depth Maximum

number of colors

Fireworks export

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

colors (millions) JPEG, PNG, PICT,

BMP, LRG, TIFF

32-bit 16.7 million

colors and an 8-

bit alpha

channel

PNG, LRG, TIFF

Chapter 498

Exact—A palette containing the exact colors used in the

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.

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

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.

Palette display area

If a color palette is selected, the colors used in the palette

appear in the palette display area.

To view the color value of a pixel, move the cursor over

the pixel.

To save a Custom color palette:

1Choose Save Palette from the pop-up next to the

Format pop-up.

2Type a name for the palette and choose a

destination folder.

3Click 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 ﬁle 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.

Number of Colors pop-up on the Options panel of

the Export Preview dialog box

Colors specified as

transparent are marked with

an X.

RGB color

values

Hexadecimal

color value

Index value

Importing and Exporting 99

Optimize

Check Optimize to create the smallest file with the least

number of colors.

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.

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.

Transparency eyedropper tools

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.

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.

Use To

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.

Chapter 4100

File panel

Use the File panel to set the scale of the exported

document.

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.

◆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.

Export Area

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

graphic.

To export a portion of a document:

1Choose the Export Area tool from the Toolbox.

2Click 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 Option-

Shift (Macintosh) while dragging to constrain

the proportions and resize from the center.

3Double-click inside the export area marquee or

click the Export button on the Tool Options panel

to open the Export Preview dialog box.

The Export Preview dialog box displays the area

defined by the export area marquee.

4Adjust settings in the Export Preview dialog box

and click Export.

5In 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.

Export Area tool

Importing and Exporting 101

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.

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.

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 ﬁles.

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).

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 pop-

up 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.

◆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.

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.

Chapter 4102

PNG

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.

Web format comparison

Compression

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.

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

color transitions Lossless

Transparency support Yes No Yes

Advantages Lossless compression

Transparency

Ability to control quality

loss in compression

Excellent compression of

photographic images

Lossless compression

Alpha transparency

High color support

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

Importing and Exporting 103

Other export formats

Fireworks exports other image formats which support

up to 32-bit color.

TIFF

Tagged-Image File Format, or TIFF, is used for high-

resolution 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.

BMP

BMP is the standard bitmap image format for

Microsoft Windows.

xRes LRG

xRes LRG is the image format used by

Macromedia xRes.

Batch processing

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.

To convert a group of files from one format to

another:

1Choose File > Batch.

2Select 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.

3Click Choose.

The Batch Options dialog box appears.

4Choose 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.

5Set 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.

Chapter 4104

6Click 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.

◆To create thumbnails that are sized proportionally to

the original graphics, click % and enter a number.

◆To create thumbnails that have the same width or

height, enter numbers in the Vertical or Horizontal

Scaling fields.

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 place Fireworks images on a web page using

Dreamweaver:

1Export images from Fireworks to a web format.

Use GIF, JPEG, or PNG.

2Copy 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.

3Click the location in the Dreamweaver document

where you want to place an image, then choose

Insert > Image.

4In 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.

Importing and Exporting 105

To launch and edit Fireworks graphics that are

placed in Dreamweaver 1.2:

1In Dreamweaver, choose Edit > Preferences and

select Fireworks as an External Editor.

2In Dreamweaver, choose Window > Properties to

open the Properties inspector if necessary.

3Select an image and click the Edit Image button

on the Properties inspector.

Dreamweaver launches Fireworks, if it is not

already running.

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.

4Edit the graphic in Fireworks.

5Choose File > Export Again.

The Save As (Windows) or Export (Macintosh)

dialog box opens.

6In 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).

7Close the Fireworks document.

8Switch to Dreamweaver.

The placed image updates to reflect the changes

made in Fireworks.

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:

◆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.

For more information on HTML and JavaScript, see

“Using Fireworks HTML” on page 118.

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.

Chapter 4106

107

CHAPTER 5

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

Web Design Features

Chapter 5108

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.

Note: A URL, or Uniform Resource Locator, is an

address of a ﬁle on the Internet. Although URLs

commonly link to web pages, they can also link to

downloadable ﬁles, e-mail addresses, telnet sites,

newsgroups, Internet chat rooms, or other

Internet resources.

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:

◆Click the Show/Hide URLs button.

◆Choose a tool in the Toolbox other than the Pointer,

Select Behind, Subselection, and Hand tools.

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.

URLs toolbar

Choose to view slice objects, URL objects, or both.

Create, duplicate, and

remove links. Choose

image map and slice

object options.

Show or hide the URL overlay.

Create URL objects.

Assign URLs.

Select and move URL objects.

Create slice objects.

Enter or edit a URL to link to the selected URL object.

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.

Web Design Features 109

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.

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.

To create a hotspot (URL object):

1Create or open a source graphic on which to

place a hotspot.

2Choose a URL basic shape tool from the

URLs toolbar.

Choosing a URL tool activates the URL overlay.

3Create a hotspot region by dragging a URLs

shape tool.

4Choose New Link from the URLs toolbar

Options pop-up.

The Link Info dialog box opens.

5Enter a URL to which the hotspot will link,

enter a browser status bar message, and enter

a target.

Browser status bar messages and targets are

optional.

6Optionally, click the Overlay Color color well

and choose an overlay color to organize

hotspots by color.

7Click 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.

Client-side and server-side image maps

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 ﬁnd out how

your server handles server-side image maps.

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.

Enter text that is displayed in a browser

when the image is not displayed.

Chapter 5110

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.

Web Design Features 111

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.

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:

1Choose 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.

2Using the Slice tool, draw slice objects over the

areas of the image you want to export as

individual files.

3Set 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.

For more information about setting slice object

properties, see “Setting slice object properties” on

page 112.

4Choose File > Slice > Export Slices.

The Export Slices dialog box opens.

5In the Export Slices dialog box, type a name for

the file and choose the destination.

◆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.

6Click 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.

When a slice object is

drawn, slice guides

appear indicating how

the image will be sliced

into multiple files

when exported.

Each slice is exported as

a separate file.

Slice object

Slice guides

Chapter 5112

Setting slice object properties

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.

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.

Setting the Slice Type

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.

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.

Web Design Features 113

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.

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.

Opening animated GIFs

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.

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.

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.

For more information about Symbols and Instances, see

“Symbols and Instances” on page 82.

Managing frames

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 pop-

up contains the following options:

Use To

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.

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.

Chapter 5114

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.

To export an animated GIF:

1Choose File > Export.

2Click the Options tab and choose Animated GIF

from the Format pop-up.

3Make changes to the Palette, Dither, or

Transparency options.

4On the Animation panel of the Export Preview

dialog box, set the disposal method and frame

delay for each frame and choose loop settings.

◆To select a range of frames, select the first frame,

hold down the Shift key, and then select the last

frame in the range.

◆To select multiple frames, hold down the

Control key (Windows) or Command key

(Macintosh) while selecting individual frames.

5Click Export.

6In 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.

Choose a disposal method for selected frames.

Enter a display

time for selected

frames.

Click to set the

animation to

play once and

then stop.

Enter the number of times

the animation will replay.

Click to set the animation

to play multiple times.

Check to create lower quality animated

GIFs in order to reduce file size.

Web Design Features 115

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.

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.

Looping

Use the Loop settings to determine how many times the

animation plays.

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.

Click To

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.

Chapter 5116

Transparency

Using Fireworks, you can create web graphics with fine-

tuned transparencies. Transparency is supported in two

graphic formats: GIF and PNG.

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.

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.

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.

To include alpha transparency in an exported

PNG:

1Create an image in Fireworks using a transparent

canvas.

Images with feathered edges, anti-aliasing, or varied

opacity settings take advantage of alpha

transparency.

2Choose File > Export.

3Choose PNG from the Formats pop-up on the

Options panel of the Export Preview dialog box.

4Choose Alpha Channel from the Transparency

pop-up.

5Click Export.

6In the Export dialog box, type a name for the file

and select the destination.

Web Design Features 117

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:

1Draw 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.

2Choose File > Export.

3In the Format pop-up of the Export Preview

dialog box, choose either GIF Rollover or JPEG

Rollover.

4Make any other export settings.

To preview each rollover state, use the frame

controls at the bottom of the Export Preview

dialog box.

5Click Export.

6In 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.

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.

Button Presets effects Description

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.

Chapter 5118

Assigning URL links to rollovers

Use the URL Rectangle tool on the URLs toolbar to

assign a URL to a rollover.

Exported JavaScript code

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.

Pre-caching

The JavaScript generated by Fireworks performs pre-

caching 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.

Using Fireworks HTML

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.

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

◆Image maps

◆Sliced graphics

◆Status bar messages

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.

To 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.

Web Design Features 119

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:

<tag> affected text </tag>

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:

<font color=”blue”>Fireworks</font>

This tag would cause the word Fireworks to be

colored blue.

Common HTML tags

Most HTML documents contain the following tags:

<HTML></HTML>—Marks the beginning and

ending of the HTML document.

<TITLE></TITLE>—Sets the name of the document

that appears on the top of the browser window.

<HEAD></HEAD>—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.

<META></META>—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.

<SCRIPT></SCRIPT>—Marks the beginning of code

for a scripting language, such as JavaScript.

<BODY></BODY>—Text or links in this section go

into the main body of the document.

<IMG>—Displays an image on the web page.

For example:

This tag displays the image Picture.gif on the page.

<A></A>—Creates a link from text or an image to

another HTML document. For example:

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 <A> and </A>.

<MAP></MAP>—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 speciﬁc 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

<HTML> or <BODY> 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.

Chapter 5120

121

INDEX

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

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

Index

122

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

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

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

Index 123

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

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

124

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

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

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

Index 125

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

126

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

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

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

Index 127

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

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

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

128

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

JavaScript

exported with rollovers 118

JavaScript rollover

button states 117

Down state 117

tutorial 48

JavaScript rollover buttons

pre-caching 118

Join command 40

JPEG

as a Web export format 101

compared to other Web formats 102

compression 101

defined 101

progressive JPEGs 101

smoothing 101

keyboard shortcut

magnification 21

keyboard shortcuts 8–9

Knife (Eraser) tool 61, 62

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

Index 129

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

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

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

130

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

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

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

Index 131

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

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

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

132

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

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

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

Index 133

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

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

134

URLs toolbar

displaying 50

hiding 108

options 108

Show/Hide URLs button 51

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

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

xRes LRG export format 103

Xtras 65, 75

Blur Xtra 65, 75

Invert Xtra 65, 75

Sharpen Xtra 65, 75

zooming in 20

zooming out 20

00 FW1 UM.Book Macromedia Fireworks Manual

Navigation menu

Versions of this User Manual:

Views

Navigation