Macromedia FIREWORKS 8 User Manual
Using Fireworks
Trademarks
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit,
Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in
the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases
mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and
may be registered in certain jurisdictions including internationally.
Third-Party Information
This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not
responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your
own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia
endorses or accepts any responsibility for the content on those third-party sites.
Copyright © 2005 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
translated, or converted to any electronic or machine-readable form in whole or in part without written approval from
Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which
this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole
purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be
printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation,
commercial purposes, such as selling copies of this documentation or providing paid-for support services.
Acknowledgments
Project Management: Charles Nadeau, Debi Robson
Writing: Rosanne Conroy
Editing: Melba Lancaster, Shawn Jackson, Lisa Stanziano
Production Management: Patrice O’Neill
Media Design and Production: Adam Barnett, Aaron Begley, John Francis, Paul Rangel, Arena Reed, Mario Reynoso
Localization Project Management: Luciano Arruda
Special thanks to Matt Hoffberg, Maureen Keating, David Spells, Marisa Bozza, Souvik Bose, Alan Musselman, Sheila McGinn,
Andrew Wilson, Rosana Francescato, Masayo Noda, Kashka Pregowska-Czerw, Kristin Conradi, Bonnie Loo, and the entire
Fireworks engineering and QA teams.
First Edition: August 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103
Contents
Chapter 1: Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installing Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
What’s new in Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Chapter 2: Fireworks Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
About working in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
About vector and bitmap graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Creating a new document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Opening and importing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Saving Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
The Fireworks work environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Chapter 3: Selecting and Transforming Objects. . . . . . . . . . . . . . 51
Selecting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Selecting pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Editing selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Transforming and distorting selected objects and selections . . . . . . 69
Organizing objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Chapter 4: Working with Bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . .79
Working with bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Creating bitmap objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Accessing common photo editing tools all in one place . . . . . . . . . . . 82
Drawing, painting, and editing bitmap objects . . . . . . . . . . . . . . . . . . . . 83
Retouching bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Adjusting bitmap color and tone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Blurring and sharpening bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104
Adding noise to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109
3
Chapter 5: Working with Vector Objects . . . . . . . . . . . . . . . . . . . . 111
Drawing vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Editing paths. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Chapter 6: Using Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Entering text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Editing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Applying strokes, fills, and filters to text . . . . . . . . . . . . . . . . . . . . . . . . . 157
Attaching text to a path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Transforming text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Converting text to paths. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161
Importing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161
Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Chapter 7: Applying Color, Strokes, and Fills . . . . . . . . . . . . . . . 167
Using the Colors section of the Tools panel . . . . . . . . . . . . . . . . . . . . . 168
Organizing swatch groups and color models . . . . . . . . . . . . . . . . . . . . 169
Using color boxes and color pop-up windows . . . . . . . . . . . . . . . . . . . 176
Working with strokes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Working with fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Applying gradient and pattern fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Adding texture to strokes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Chapter 8: Using Live Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Applying Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Editing Live Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Chapter 9: Layers, Masking, and Blending . . . . . . . . . . . . . . . . 203
Working with layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Masking images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Blending and transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Chapter 10: Using Styles, Symbols, and URLs . . . . . . . . . . . . . 235
Using styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236
Using symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Working with URLs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246
4Contents
Chapter 11: Slices, Rollovers, and Hotspots. . . . . . . . . . . . . . . . . 251
Creating and editing slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Making slices interactive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Working with hotspots and image maps. . . . . . . . . . . . . . . . . . . . . . . . 275
Chapter 12: Creating Buttons and Pop-up Menus . . . . . . . . . . . 281
Creating button symbols. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Creating navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Creating pop-up menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Chapter 13: Creating Animation . . . . . . . . . . . . . . . . . . . . . . . . . 307
Building animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Working with animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Working with frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313
Tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Previewing an animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319
Exporting your animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Working with existing animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Using multiple files as one animation . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Chapter 14: Optimizing and Exporting . . . . . . . . . . . . . . . . . . . . 325
About optimizing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Using the Export Wizard. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Optimizing in the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .331
Exporting from Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Sending a Fireworks document as an e-mail attachment . . . . . . . . . 370
Using the File Management button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Chapter 15: Using Fireworks with Other Applications . . . . . . . 373
Working with Macromedia Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 374
Working with Macromedia Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Working with Macromedia FreeHand MX . . . . . . . . . . . . . . . . . . . . . . 399
Working with Macromedia Director MX . . . . . . . . . . . . . . . . . . . . . . . . 405
Working with Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . .410
Working with Adobe Photoshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413
About working with Adobe GoLive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .419
About working with HTML editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
About extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Contents 5
Chapter 16: Automating Repetitive Tasks . . . . . . . . . . . . . . . . . . 421
Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .422
Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .426
Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437
Flash SWF movies used as Fireworks panels . . . . . . . . . . . . . . . . . . 443
Chapter 17: Preferences and Keyboard Shortcuts . . . . . . . . . . 445
Setting preferences. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
Changing keyboard shortcut sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Working with configuration files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
About reinstalling Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .453
Viewing package contents (Macintosh only). . . . . . . . . . . . . . . . . . . . .453
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
6Contents
CHAPTER 1
Introduction
Macromedia Fireworks 8 is the definitive solution for professional web graphics design and
production. It is the first production environment to address and solve the special challenges
facing web graphics designers and developers.
You can use Fireworks to create, edit, and animate web graphics, add advanced interactivity,
and optimize images in a professional environment. In Fireworks, you can create and edit
bitmap and vector graphics in a single application. Everything is editable, all the time. And
you can automate the workflow to meet the demands of time-consuming updates and
changes.
Fireworks integrates with other Macromedia products such as Dreamweaver, Flash,
FreeHand, and Director, as well as your other favorite graphics applications and HTML
editors, to provide a truly integrated web solution. You can easily export Fireworks graphics
with HTML and JavaScript code customized for the HTML editor you’re using.
This chapter covers the following topics:
System requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installing Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
What’s new in Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1
System requirements
Before installing Fireworks, make sure your computer meets the system requirements. For
more information, see the Macromedia website at www.macromedia.com/go/sysreqs.
7
Installing Fireworks
This section explains how to install Fireworks.
Be sure to read the release notes on the Macromedia website at www.macromedia.com/go/
fireworks_documentation for late-breaking information or instructions.
To install Fireworks:
1. Insert the Fireworks CD into your computer’s CD-ROM drive.
2. Do one of the following:
■ In Windows, the Fireworks installation program starts automatically.
■ On the Macintosh, double-click the Fireworks Installer icon.
3. Follow the onscreen instructions.
The installation program prompts you to enter the required information.
4. If prompted, restart your computer.
Registering Fireworks
It’s a good idea to register your copy of Macromedia Fireworks, electronically or by mail. You
can register electronically during the product activation process when you first launch
Fireworks.
By registering, you get on the priority list to receive up-to-the-minute notices about upgrades
and new Macromedia products. You will receive timely e-mail notices about product updates
and new content appearing on both the www.macromedia.com and
www-euro.macromedia.com websites.
To register your copy of Fireworks, do one of the following:
■ Select Help > Online Registration and fill out the electronic form.
■ Select Help > Print Registration, print the form, and mail it to the address shown on
the form.
Viewing the files installed with Fireworks
At some point you may need to view or access the files installed with Fireworks. During
installation, Fireworks places files in various locations on your system. It’s important to
understand why these files reside where they do. For more information, see “Working with
configuration files” on page 451.
8 Chapter 1: Introduction
Macintosh users should pay special attention to the format Fireworks uses to store the
application and its default configuration files. For more information, see “Viewing package
contents (Macintosh only)” on page 453.
What’s new in Fireworks 8
Create and optimize images for the web with precise control in an intuitive, customizable
environment. New support for ActionScript and CSS (Cascading Style Sheet) formats allow
Fireworks to work even more efficiently with Dreamweaver and Flash. New file formats
supported, new panels and dramatically streamlined workflow optimize both your time and
your images.
Optimization
Image Editing panel This new panel is a central location where you can access
commonly used image editing tools, filters, and menu
commands.
More import file formats Fireworks 8 now supports import of QuickTime Image,
MacPaint, SGI & JPEG 2000 file formats (QuickTime plug-in
required for QuickTime support).
Batch processing workflow
optimized
Streamlined file renaming, the ability to check file dimensions
when scaling during a batch process and the addition of a
status bar and log file are just a few of the optimizations to this
workflow. For more information on batch processing, see
“Batch processing” on page 426.
Take advantage of the integrated workflow in Fireworks to create and optimize images for
Dreamweaver 8 and Flash Professional 8 without losing information or time with roundtrip
editing. Use improved support for CSS and ActionScript, as well as feature alignment with the
other Studio products.
Integrated workflow
CSS (Cascading Style
Sheet) pop-up menus
Vector compatibility Vector attributes (fills, strokes, filters and blend modes) are
Fireworks 8 uses CSS (Cascading Style Sheet) format to
create interactive Pop-up Menus. The result is clean and easy
to customize code that integrates well with sites built in
Dreamweaver. For more information, see “About exporting
pop-up menus” on page 305.
preserved when moving objects between Flash and Fireworks.
What’s new in Fireworks 8 9
Integrated workflow
More slicing options Polygon slices are inserted automatically when a selected
object is a polygon path. See “Creating nonrectangular slices”
on page 255.
Recognize ActionScript
color values
Use the "Save as"
command to save bitmaps
into different file types
Evolved Open, Save and
Export logic
Less intrusive grids Like Flash, grids now use a dotted line and a lighter default grid
Fireworks recognizes ActionScript color values when copied
from Flash and pasted into Fireworks color value fields.
Choose single-file output formats such as gif, jpg, tiff, in the
"Save As" dialog. See “Saving documents in other formats”
on page 27.
The logic used to determine the default folders in the Open,
Save, Save As, Save a Copy, and Export dialogs is enhanced
by reducing the amount of navigation required.
color.
Use Fireworks for visual tools to create professional quality web graphics and animations such
as rollovers and pop-ups without the need to program. Exercise precise control over your
images with many new creative options.
Create without complexity
25 new blend modes 25 new choices to alter the look of your colors and objects.
Perspective shadow Add a perspective shadow to open paths and text objects.
Solid Shadow A new live filter that stamps the object it is applied to several
times.
Mobile interface
components
Sample buttons, animations
themes and bullets
Auto Shape Properties
panel
Live Marquee & Convert
Selections (Marquee to
Path and Path to Marquee)
Autoname text Layers are automatically named by the text you type in them.
Mock up your mobile interface quickly with bitmap interface
components.
Get started quickly with cool new assets like buttons,
animations, themes and bullets.
This new panel is used to modify the properties of auto shape
properties such as the Star Auto Shape, Arrow Auto Shape or
Smart Polygon Auto Shape.
Turn active selections into editable vector paths and the
reverse. Get instant feedback on filters and settings applied to
selections. See “Converting a marquee to a path” on page 63
and “Converting a path to a marquee selection” on page 138.
See “Naming a text object” on page 144.
10 Chapter 1: Introduction
Create without complexity
Special Characters panel Use this new panel to insert special characters directly into text
blocks.
Reshape text on a path Edit path points when text is attached. See “Editing paths and
text attached to paths” on page 158
.
Save time and effort with the many refinements made to common tasks.
Workflow Improvements
Recent Fonts &
Optimization remember last
settings used
Save multiple selections Save, restore, name and delete multiple marquee selections
Select objects that share an
edge in the Layers panel
Autosave preferences Fireworks 8 preferences are automatically saved more
Group consecutive nudges Consecutive nudges are treated as one move.
Improved tablet support Tablet support is improved for Path Scrubber tools and stroke
Lock objects Lock on a per-object basis in the Layers panel. See “Protecting
Recently used fonts now appear at the top of font menus.
Optimization now defaults to the last settings used. See
“Saving and reusing optimization settings” on page 351.
within PNG files. See “Saving marquee selections” on page 64.
Shift-click to select objects that share an edge or boundary in
the layers panel.
frequently.
pressure sensitivity.
layers and objects” on page 207.
For more information on the new features, see the Fireworks page on the Macromedia website
at www.macromedia.com/go/fireworks.
What’s new in Fireworks 8 11
Guide to instructional media
A variety of resources are available for learning Fireworks, including this manual, Fireworks
Help, PDF versions of the Fireworks documentation components, and several web-based
information sources.
■ Using Fireworks is the Fireworks user manual. You can access it at any time in Fireworks
help (Help > Using Fireworks). The manual is also available in PDF format on the
Macromedia website at www.macromedia.com/go/fireworks_documentation.
■ Getting Started with Fireworks provides an interactive introduction to the key features of
Fireworks. You can complete tutorials covering common Fireworks tasks, such as using the
drawing and editing tools, optimizing images, and creating rollovers, navigation bars, and
other interactive elements. You can access the guide at any time in Fireworks help (Help >
Getting Started with Fireworks). The guide is also available in PDF format on the
Macromedia website at www.macromedia.com/go/fireworks_documentation.
■ The Fireworks Support Center at www.macromedia.com/go/fireworks_support offers
support and problem-solving information.
■ The Fireworks Developer Center at www.macromedia.com/go/fireworks_devnet presents
information to help you improve your skills and learn new ones.
■ The Fireworks discussion group provides a lively exchange for Fireworks users, technical
support representatives, and the Fireworks development team. Use a newsgroup reader to
go to news://forums.macromedia.com/macromedia.fireworks.
■ Extending Fireworks includes information about writing JavaScript to automate Fireworks
tasks. You can control every Fireworks command or setting using special JavaScript
commands that Fireworks can interpret. The manual is available both in help and on the
Macromedia website as a downloadable PDF.
12 Chapter 1: Introduction
CHAPTER 2
Fireworks Basics
Macromedia Fireworks 8 is an application for designing graphics for use on the web. Its
innovative solutions tackle the major problems facing graphic designers and webmasters.
Using the wide range of tools in Fireworks, you can create and edit both vector and bitmap
graphics within a single file.
The advent of Fireworks freed web designers from having to jump back and forth among as
many as a dozen task-specific applications. Its nondestructive Live Filters eliminate the
frustration of having to re-create web graphics from scratch after any simple edit. Fireworks
generates JavaScript, making rollovers easy to create. Efficient optimization features shrink the
size of web graphic files without sacrificing quality.
If you are new to Fireworks, it would be helpful for you to understand general Fireworks
concepts such as opening, importing, and saving files; finding your way around the Fireworks
environment; and working within a file. After you create a new file or open an existing file,
the Fireworks work environment is available to you.
This chapter contains the following topics:
About working in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
About vector and bitmap graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Creating a new document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Opening and importing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Saving Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
The Fireworks work environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2
13
About working in Fireworks
Fireworks is a versatile application for creating, editing, and optimizing web graphics. You can
create and edit both bitmap and vector images, design web effects such as rollovers and popup menus, crop and optimize graphics to reduce their file size, and save time by automating
repetitive tasks. When a document is complete, you can export or save it as a JPEG file, GIF
file, or file of another format—along with HTML files containing HTML tables and
JavaScript code—for use on the web. You also can export or save a type of file specific to
another application, such as Photoshop or Macromedia Flash, if you want to continue
working in the other application.
Vector and bitmap objects
In the Fireworks Tools panel, you will find distinct sections containing tools for drawing and
editing vectors and bitmaps. For more information on these two basic formats, see “About
vector and bitmap graphics” on page 15
In Fireworks, the tool you select determines whether the object you create is a vector or a
bitmap. For example, select the Pen tool from the Vector section of the Tools panel, and you
can begin drawing vector paths by plotting points. Select the Brush tool, and you can drag to
paint a bitmap object. Select the Text tool, and you can begin typing.
After drawing vector objects, bitmap objects, or text, you can use a wide array of tools, effects,
commands, and techniques to enhance and complete your graphics. You can use the
Fireworks tools in the Button Editor to create interactive navigation buttons.
You can also use the Fireworks tools to edit imported graphics. You can import and edit files
in JPEG, GIF, PNG, PSD, and many other file formats. After you import a graphic image,
you can adjust its color and tone, as well as crop, retouch, and mask it.
Interactive graphics
Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an
image into different sections to which you can apply rollover behaviors, animation, and
Uniform Resource Locator (URL) links. In addition, you can export the sections using
different settings. On a web page, each slice appears in a table cell. Hotspots let you assign
URL links and behaviors to all or part of a graphic. For more information, see “Slices,
Rollovers, and Hotspots” on page 251.
14 Chapter 2: Fireworks Basics
Slices and hotspots have drag-and-drop rollover handles that let you quickly assign swap
image and rollover behaviors to graphics directly in the workspace. The Button Editor and
Pop-up Menu Editor are convenient Fireworks features that help you build special interactive
graphics for navigating websites.
About optimizing and exporting graphics
Fireworks has powerful optimization features to help you find the balance between file size
and acceptable visual quality as you prepare to export graphics. You can optimize web graphics
in Fireworks to minimize their file size so that they load quickly into websites, while
comparing the quality of the graphics in the Preview, 2-Up, or 4-Up views in the workspace.
You can slice an image into smaller parts and then optimize each part in the format that best
suits the content. For added optimization flexibility, you can use selective JPEG compression
to focus the most important part of a JPEG while reducing the quality of the background.
After you optimize your graphics, the next step is to export them for use on the web. From
your Fireworks source PNG document, you can export files of a number of types, including
JPEG, GIF, animated GIF, and HTML tables containing sliced images in multiple file types.
For more information, see “Optimizing and Exporting” on page 325.
About vector and bitmap graphics
Computers display graphics in either vector or bitmap format. Understanding the difference
between the two formats helps you understand Fireworks, which contains both vector and
bitmap tools and is capable of opening or importing both formats.
About vector and bitmap graphics 15
About vector graphics
Vector graphics render images using lines and curves, called vectors, that include color and
position information. For example, the image of a leaf may be defined by a series of points
that describe the outline of the leaf. The color of the leaf is determined by the color of its
outline (the stroke) and the color of the area enclosed by the outline (the fill)
When you edit a vector graphic, you modify the properties of the lines and curves that
describe its shape. Vector graphics are resolution-independent, which means you can move,
resize, reshape, or change the color of a vector graphic, as well as display it on output devices
of varying resolutions, without changing the quality of its appearance.
About bitmap graphics
Bitmap graphics are composed of dots, called pixels, arranged in a grid. Your computer screen
is a large grid of pixels. In a bitmap version of the leaf, the image is determined by the location
and color value of each pixel in the grid. Each dot is assigned a color. When viewed at the
correct resolution, the dots fit together like tiles in a mosaic to form the image.
16 Chapter 2: Fireworks Basics
When you edit a bitmap graphic, you modify pixels rather than lines and curves. These
bitmap graphics are resolution-dependent, which means that the data describing the image is
fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the
grid, often making the edges of the image appear ragged. Displaying a bitmap graphic on an
output device with a lower resolution than the image itself can also degrade the image’s
quality.
Creating a new document
When you select File > New to create a new document in Fireworks, you create a Portable
Network Graphic, or PNG document. PNG is the native file format for Fireworks. After you
create graphics in Fireworks, you can export or save them in other familiar web graphic
formats, such as JPEG, GIF, and animated GIF. You can also export or save graphics in many
of the popular formats used off the web, such as TIFF and BMP. Whatever optimization and
export settings you choose, the original Fireworks PNG file is preserved to allow easy editing
later.
To create a web graphic in Fireworks, you must first set up a new document or open an
existing one. You can adjust the setup options later in the Property inspector.
To create a new document:
1. Select File > New.
The New Document dialog box opens.
2. Enter the canvas width and height measurements in pixels, inches, or centimeters.
3. Enter a resolution in pixels per inch or pixels per centimeter.
Creating a new document 17
4. Select white, transparent, or a custom color for the canvas.
NOTE
Use the Custom color box pop-up window to select a custom canvas color.
5. Click OK to create the new document.
To create a new document the same size as an object on the Clipboard:
1. Copy an object to the Clipboard from any of the following:
■ Another Fireworks document
■ A web browser
■ Any of the applications listed in “Pasting into Fireworks” on page 22
2. Select File > New.
The New Document dialog box opens with the width and height dimensions of the object
on the Clipboard.
3. Set the resolution and canvas color, and click OK.
4. Select Edit > Paste to paste the object from the Clipboard into the new document.
Opening and importing files
In Fireworks, you can easily open, import, and edit both vector and bitmap images created in
other graphics programs. In addition, you can import images from a digital camera or scanner.
NOTE
Fireworks preserves many, but not all JavaScript behaviors when you import a file from
Macromedia Dreamweaver. If Fireworks supports a particular behavior, it recognizes
that behavior and maintains it when you move a file back to Dreamweaver.
To open a Fireworks document:
1. Select File > Open.
The Open dialog box appears.
2. Select the file and click Open.
TIP
To open a file without overwriting the previous version, select Open as Untitled, and
then save the file using a different name.
This section covers the following topics:
■ “Opening recently closed documents” on page 19
■ “Opening graphics created in other applications” on page 19
■ “Creating Fireworks PNG files from HTML files” on page 20
■ “Inserting objects into a Fireworks document” on page 21
18 Chapter 2: Fireworks Basics
Opening recently closed documents
The File menu lists up to 10 recently closed documents in the Open Recent submenu. The
Start Page also lists recently closed documents.
To open a recently closed file:
1. Select File > Open Recent.
2. Select a file from the submenu.
To open a recently closed file when no files are open:
1. Click the file name on the Start page.
Opening graphics created in other applications
With Fireworks, you can open files created in other applications or file formats, including
Photoshop, Macromedia FreeHand, Illustrator, uncompressed CorelDRAW, WBMP, EPS,
JPEG, GIF, and animated GIF files.
When you open a file format other than PNG using File > Open, you create a new Fireworks
PNG document based on the file you open. You can use all of the features of Fireworks to edit
the image. You can then either select Save As to save your work as a new Fireworks PNG file
or as another file format; or with some image types, you can select Save to save the document
in its original format. Saving in the document’s original format flattens the image to a single
layer and eliminates your ability to edit the Fireworks-specific features you added to the
image.
Using Fireworks, you can save the following file formats directly: Fireworks PNG, GIF,
animated GIF, JPEG, BMP, WBMP, TIF, SWF, AI, PSD, and PICT (Mac only).
NOTE
Fireworks saves 16-bit TIF images at 24-bit color depth.
Animated GIFs
You can bring animated GIF files into Fireworks in two ways:
■ You can import an animated GIF as an animation symbol. You can edit and move all the
elements of the animation as a single unit and use the Library panel to create new
instances of the symbol.
NOTE
When you import an animated GIF, the frame delay setting defaults to 0.07 seconds.
If necessary, use the Frames panel to restore the original timing.
Opening and importing files 19
■ You can open an animated GIF as you would open a normal GIF file. Each element of the
GIF is placed as a separate image in its own Fireworks frame. You can convert the graphic
to an animation symbol in Fireworks.
EPS files
Fireworks opens most EPS files, such as Photoshop EPS files, as flattened bitmap images, in
which all objects are combined on a single layer. Some EPS files exported from Illustrator,
however, retain their vector information.
When you open or import most EPS files, the EPS File Options dialog box opens.
Image Size determines the image dimensions and the units in which the image is rendered.
You can select from pixels, percent, inches, and centimeters.
Resolution indicates the pixels per unit for the resolution.
Constrain Proportions opens the file in the same proportions as the original.
Anti-aliased smooths jagged edges in the opened EPS file.
When you open or import Illustrator EPS files that contain vector information, the Vector
File Options dialog box opens. This is the same dialog box that appears when you open or
import FreeHand files.
WBMP files
Fireworks can open WBMP files, which are 1-bit (monochrome) files optimized for mobile
computing devices. This format is for use on Wireless Application Protocol (WAP) pages. You
can open a WBMP file directly using File > Open or import a WBMP file using File >
Import.
Creating Fireworks PNG files from HTML files
Fireworks can open and import HTML content created in other applications. When you
open or import an HTML file, Fireworks reconstructs the layout and behaviors defined by the
HTML code, allowing you to re-create web pages that contain sliced graphics, JavaScript
buttons, and other types of interactivity. This allows you to salvage inherited websites even if
you don’t have the source PNG files. With this feature, you can quickly open or import a web
page to update graphics, change document layout, or alter navigational links, buttons, and
other interactive elements, all without having to rebuild the page from scratch or modify its
scripting.
20 Chapter 2: Fireworks Basics
Because Fireworks exports HTML content in the form of an HTML table, it also determines
the document layout for imported HTML based on HTML tables. An HTML file must
contain at least one table for Fireworks to be able to reconstruct it. For more about HTML,
see “Exporting HTML” on page 357.
You can get HTML content into Fireworks in several ways:
■ You can open all the HTML tables in an HTML file.
■ You can open the first HTML table that Fireworks encounters in an HTML file.
■ You can import the first HTML table that Fireworks encounters into an existing
Fireworks document.
NOTE
Fireworks can also import documents that use UTF-8 encoding and those that are
written in XHTML. XHTML files usually have the extension .xhtm or .xhtml. For more
information on these file types, see “Exporting files with and without UTF-8 encoding”
on page 366 and “Exporting XHTML” on page 365.
To open all tables of an HTML file:
1. Select File > Reconstitute Table.
2. Select the HTML file that contains the tables you want to open, and click Open.
Each of the tables opens in its own document window.
To open only the first table of an HTML file:
1. Select File > Open.
2. Select the HTML file that contains the table you want to open, and click Open.
The first table in the HTML file opens in a new document window.
To import the first table of an HTML file into an open Fireworks document:
1. Select File > Import.
2. Select the HTML file you want to import from, and click Open.
3. Click to place the insertion point where you’d like the imported table to appear.
Inserting objects into a Fireworks document
You can import, drag, or copy and paste vector objects, bitmap images, or text created
in other applications into a Fireworks document. You can also import images from a digital
camera or scanner.
Opening and importing files 21
Dragging images into Fireworks
You can drag vector objects, bitmap images, or text into Fireworks from any application that
supports dragging:
■ FreeHand 7 or later
■ Flash 3 or later
■ Photoshop 4 or later
■ Illustrator 7 or later
■ Microsoft Office 97 or later
■ Microsoft Internet Explorer 3 or later
■ Netscape Navigator 3 or later
■ CorelDRAW 7 or later
To drag an image or text into Fireworks:
■ From the other application, drag the object or text into Fireworks.
Pasting into Fireworks
Pasting an object copied from another application into Fireworks places the object in the
center of the active document. You can copy and paste an object or text in any of these
formats from the Clipboard:
■ FreeHand 7 or later
■ Illustrator
■ PNG
■ PICT (Macintosh)
■ DIB (Windows)
■ BMP (Windows)
■ ASCII text
■ EPS
■ WBMP
■ TXT
■ RTF
To paste into Fireworks:
1. In the other application, copy the object or text that you wish to paste.
2. In Fireworks, paste the object or text into your document.
22 Chapter 2: Fireworks Basics
Location of pasted objects
When you paste an object into Fireworks, the placement of the pasted object depends on
what is selected:
■ If at least one object on a single layer is selected, the pasted object is placed in front of—or
stacked directly above—the selected object on the same layer.
■ If the layer itself is selected and either no objects or all objects are selected, the pasted
object is placed in front of—or stacked directly above—the topmost object on the same
layer.
■ If two or more objects on more than one layer are selected, the pasted object is placed in
front of—or stacked directly above—the topmost object in the topmost layer.
■ If the Web Layer or an object on the Web Layer is selected, the pasted object is placed in
front of—or stacked above—all other objects on the bottommost layer.
NOTE
The Web Layer is a special layer that contains all web objects. It always remains at the
top of the Layers panel. For more information about layers, see “Layers, Masking,
and Blending” on page 203.
Resampling pasted objects
When you paste a bitmap with a resolution that differs from that of the destination Fireworks
document, Fireworks asks whether you want the bitmap to be resampled.
Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance
of the original bitmap as closely as possible. Resampling a bitmap to a higher resolution
typically causes little loss of quality. Resampling to a lower resolution, however, always causes
data loss and usually a drop in quality.
To resample a bitmap object by pasting:
1. Copy the bitmap to the Clipboard in Fireworks or another program.
2. Select Edit > Paste in Fireworks.
If the bitmap image on the Clipboard has a different resolution than the current
document does, you see a dialog box asking whether or not to resample.
3. Select one of the following:
■ Resample maintains the original width and height of the pasted bitmap, adding or
subtracting pixels as necessary.
■ Don’t Resample maintains all the original pixels, which may make the relative size of
the pasted image larger or smaller than expected.
Opening and importing files 23
Importing PNG files
You can import Fireworks PNG files into the current layer of the active Fireworks document.
Any hotspot objects and slice objects are placed on the document’s Web Layer. For more
information about slices and web objects, see “Viewing and displaying slices and slice guides”
on page 256. For more information about layers, see “Working with layers” on page 204.
To import a PNG file into a Fireworks document layer:
1. In the Layers panel, select the layer into which you want to import the file.
2. Select File > Import to open the Import dialog box.
3. Navigate to the file to be imported and click Open.
4. On the canvas, position the import pointer where you want to place the upper left corner
of the image.
5. Import the file:
■ Click to import the full-size image.
■ Drag the import pointer to resize the image as you import.
Fireworks retains the proportions of the image.
Importing from a digital camera or scanner
You can import images from a digital camera or scanner only if it is TWAIN compliant
(Windows) or uses built-in OS X Image Capture capability (Macintosh). Images imported
into Fireworks from a digital camera or scanner open as new documents.
NOTE
Fireworks cannot import from digital cameras or image scanners unless the appropriate
software drivers, modules, and plug-ins have been installed. For specific instructions
about installation, settings, and options, consult your camera or scanner documentation
for the TWAIN module or Photoshop Acquire plug-in.
On the Macintosh, Fireworks automatically looks for the Photoshop Acquire plug-ins in the
Plug-ins folder within the Fireworks application folder. If you do not want to put the plug-ins
there, you must point Fireworks to an alternative location.
NOTE
The exact location of the Plug-ins folder varies depending on your operating system. For
more information, see “Working with configuration files” on page 451.
24 Chapter 2: Fireworks Basics
To direct Fireworks to Photoshop Acquire plug-ins:
1. In Fireworks, select Edit > Preferences.
NOTE
On Mac OS X, select Fireworks > Preferences.
2. Click the Folders tab.
3. Select Photoshop Plug-Ins.
4. Click Browse if the Select the Photoshop Plug-ins Folder (Windows) or Choose a Folder
(Macintosh) dialog box doesn’t automatically open.
5. Navigate to the folder containing the Photoshop plug-ins.
To import an image from a digital camera (Macintosh):
1. Connect the camera to your computer.
2. Install the software that accompanies the camera if you have not already done so.
3. In Fireworks, select File > Acquire, and then select either Camera Acquire or Camera
Select.
4. In the Select Camera dialog box, select a camera, and then click OK.
5. In the Select Images dialog box, select the images you want to import, and then click OK.
NOTE
The Select Images dialog box only displays file types that are supported by
Fireworks.
6. Follow the instructions to apply the desired settings.
The imported image is opened as a new Fireworks document.
To import an image from a digital camera (Windows):
1. Connect the camera to your computer.
2. Install the software that accompanies the camera if you have not already done so.
3. In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.
4. In the Select Source dialog box, select a source, and then click OK.
5. In the Select Images dialog box, select the images you want to import, and then click OK.
The user interface for your camera software appears.
6. Follow the instructions to apply the desired settings.
The imported image is opened as a new Fireworks document.
Opening and importing files 25
To import an image from a scanner (Macintosh):
1. Connect the scanner to your computer.
2. Install the software that accompanies the scanner if you have not already done so.
3. In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select.
NOTE
For most T WAIN modules or Photoshop Acquire plug-ins, additional dialog boxes
prompt you to set other options.
4. Follow the instructions to apply the desired settings.
The imported image is opened as a new Fireworks document.
To import an image from a scanner (Windows):
1. Connect the scanner to your computer.
2. Install the software that accompanies the scanner if you have not already done so.
3. In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.
NOTE
For most TWAIN modules or Photoshop Acquire plug-ins, additional dialog boxes
prompt you to set other options.
4. Follow the instructions to apply the desired settings.
The imported image is opened as a new Fireworks document.
Saving Fireworks files
When you create a new document or open an existing Fireworks PNG file, the document’s
filename has the extension .png. Files of other types, such as PSD and HTML, also open as
PNG files, allowing you to use the Fireworks PNG document as your source file, or working
file.
However, many files retain their original filename extensions and optimization settings when
opened in Fireworks. For more information, see “Saving documents in other formats”
on page 27.
The location to which Fireworks defaults when you save a document is determined by the
following, in this order:
■ The current file location
■ The current export/save location, which is defined anytime you browse from the default
location in a Save, Save As, Save a Copy, or Export dialog box
■ The default location where new documents or images are saved on your operating system
26 Chapter 2: Fireworks Basics
Saving Fireworks PNG files
When you create a new document or open an existing Fireworks PNG file, the document’s
filename has the extension .png. The file displayed in the Fireworks document window is your
source file, or working file.
Using a Fireworks PNG file as your source file has the following advantages:
■ The source PNG file is always editable. You can go back and make additional changes
even after you export the file for use on the web.
■ You can slice complex graphics into pieces in the PNG file and export them as multiple
files with different file formats and various optimization settings.
To save a new Fireworks document:
1. Select File > Save As.
The Save As dialog box opens.
2. Browse to the desired location and type the filename.
You do not need to enter an extension; Fireworks does that for you.
3. Click Save.
To save an existing document:
■ Select File > Save.
Saving documents in other formats
When you use File > Open to open a file of a format other than PNG, you can use all of the
features of Fireworks to edit the image. You can then select Save As to save your work as a new
Fireworks PNG file, or you can select a different format in which to save your file. For most
file types, you can select Save to save the document in its original format.
NOTE
If you save a PNG file as a bitmap file such as a GIF or JPEG, the graphic objects you
manipulated in the PNG will no longer be available in the bitmap file (see “About vector
and bitmap graphics” on page 15). If you need to revise the image, edit the source PNG
file and then export it again.tt
You can save to the following file formats directly: Fireworks PNG, GIF, animated GIF, JPEG,
BMP, WBMP, TIF, SWF, AI, PSD, and PICT (Macintosh only). Fireworks saves 16-bit TIF
images at 24-bit color depth.
Files of other types, such as PSD and HTML, open as PNG files, allowing you to use the
Fireworks PNG document as your source file. Any edits you perform are applied to the PNG
file and not the original.
Saving Fireworks files 27
To save in an existing GIF, JPEG, TIF, BMP, or other file format listed above:
1. Select File > Save.
2. If you made modifications to the document that aren’t editable in the file’s original format,
a notification appears in the Save dialog box. Noneditable modifications include adding
new objects, masks, and Live Filters, as well as adjusting opacity, applying blend modes,
and saving pixel selections.
NOTE
If you don’t select the Save as a Copy option, the file format of the document you are
working on will be changed to the format in which you save it.
To export a document to another format:
1. Select a file format in the Optimize panel.
2. Select File > Export to export the document.
For more information about exporting files, see “Optimizing and Exporting”
on page 325.
28 Chapter 2: Fireworks Basics
The Fireworks work environment
When you open a document in Fireworks for the first time, Fireworks activates the work
environment, including the Tools panel, Property inspector, menus, and other panels. The
Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector,
and web tool groups. The Property inspector appears along the bottom of the document by
default and initially displays document properties. It then changes to display properties for a
newly selected tool or currently selected object as you work in the document. The panels are
initially docked in groups along the right side of the screen. The document window appears in
the center of the application.
Using the Start page
When you start Fireworks without opening a document, the Fireworks Start page appears in
the work environment. The Start page gives you quick access to Fireworks tutorials, recent
files, and Fireworks Exchange, where you can add new capabilities to some Fireworks features.
Use the Start page much like a web page. Click any of the features you see to use them.
The Fireworks work environment 29
To disable the Start page:
1. Run Fireworks without opening a document.
The Start page is displayed.
2. Click Don’t Show Again.
Using the Tools panel
The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and
View.
Changing tool options
When you select a tool, the Property inspector displays tool options. Some tool options
remain displayed as you work with the tool. For other tools, such as the basic shape, Pen, and
Line tools, the Property inspector displays the properties of selected objects. For more
information about the Property inspector, see “Using the Property inspector” on page 31.
30 Chapter 2: Fireworks Basics
Loading...