Macromedia Fireworks - CS3 User Guide
USING FIREWORKS
© 2007 Adobe Systems Incorporated. All rights reserved.
Adobe® Fireworks® Using Fireworks®
If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or
copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the
content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.
The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.
Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such
material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.
Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.
Adobe, the Adobe logo, Adobe Bridge, Director, Dreamweaver, Flash, Flex Builder, FreeHand, GoLive, HomeSite, Illustrator, Photoshop, and XMP are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Apple and Macintosh are trademarks of Apple Inc., registered in the United States and other countries. Microsoft and Windows are either registered trademarks or trademarks
of Microsoft C orporation in the United States and/or other countries. All other trademarks are the property of their respective owners.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
Notice to U.S. Government End Users. The Software and Documentation are "Commercial Items," as that term is defined at 48 C.F.R. §2.101, consisting of "Commercial Computer
Software" and "Commercial Computer Software Documentation," as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R.
§12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being
licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions
herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S.
Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended,
Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations
at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
90079063 (09/06)
Contents
Chapter 1: Getting Started
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Adobe Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
What’s new in Fireworks CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Chapter 2: Fireworks Basics
About working in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
About vector and bitmap graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Creating a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Opening and importing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Saving Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
The Fireworks work environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Chapter 3: Selecting and Transforming Objects
Selecting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Selecting pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Editing selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Transforming and distorting selected objects and selections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Organizing objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
iii
Chapter 4: Working with Bitmaps
Working with bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Creating bitmap objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Accessing photo editing tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Drawing, painting, and editing bitmap objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Retouching bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Adjusting bitmap color and tone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Blurring and sharpening bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Adding noise to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Chapter 5: Working with Vector Objects
Drawing vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Editing paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Chapter 6: Working with Text
Entering text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Formatting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Applying strokes, fills, and filters to text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Attaching text to a path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Transforming text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Converting text to paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Importing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Chapter 7: Applying Color, Strokes, and Fills
Using the Colors section of the Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Organizing swatch groups and color models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Using color boxes and color pop-up windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135
Working with strokes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Working with fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Applying gradient and pattern fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Adding texture to strokes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Chapter 8: Using Live Filters
Applying Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Editing Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Chapter 9: Pages, Layers, Masking, and Blending
Working with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Working with layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Masking images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Blending and transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
iv
Chapter 10: Using Styles, Symbols, and URLs
Using styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Using symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Working with URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Chapter 11: Slices, Rollovers, and Hotspots
Creating and editing slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Making slices interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Working with hotspots and image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Chapter 12: Creating Buttons and Pop-up Menus
Creating button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Creating navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Creating pop-up menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Chapter 13: Creating Animations
Building animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Working with animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Working with frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Previewing an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Exporting your animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Working with existing animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Using multiple files as one animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Chapter 14: Creating Slideshows
The Create Slideshow command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Building or editing a slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Slideshow properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Creating a custom Fireworks album player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Chapter 15: Optimizing and Exporting
About optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Using the Export Wizard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Optimizing in the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Exporting from Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Sending a Fireworks document as an e-mail attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Using the File Management button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Chapter 16: Using Fireworks with Other Applications
Working with Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Working with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Working with FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Working with Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Working with HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Working with Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
About working with Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
About working with GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
About working with HTML editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
About extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
About Adobe XMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
About Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Flex integration for rich Internet application layouts (MXML export) . . . . . . . . . . . . . . . . . . . . . . 329
v
Chapter 17: Automating Repetitive Tasks
Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Flash SWF movies used as Fireworks panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Chapter 18: Preferences and Keyboard Shortcuts
Setting preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Changing keyboard shortcut sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Working with configuration files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
About reinstalling Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Viewing package contents (Macintosh only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Chapter 1: Getting Started
Adobe® Fireworks® CS3, a unique hybrid vector and bitmap tool, delivers the most efficient design environment for
rapidly prototyping websites and user interfaces, and creating and optimizing images for the web. Fireworks CS3
offers the flexibility to edit both vector and bitmap images, a common library of prebuilt assets, and time-saving
integration with Adobe Photoshop® CS3, Adobe Illustrator® CS3, Adobe Dreamweaver® CS3, and Adobe Flash® CS3
Professional software. Rapidly prototype your web project and then leverage your work directly into Dreamweaver
CS3.
Fireworks CS3 is an integral part of Adobe Creative Suite 3 Web Premium and Web Standard, which empower
creative professionals and developers to experience an uninterrupted flow of energy and ideas from initial concept
to polished final execution across print, video, web, and mobile devices. The end-to-end integration is the core of
what makes Creative Suite uniquely powerful—creative professionals and developers remain focused on their vision
and achieve the highest quality results in less time.
This chapter covers the following topics:
• “Installation” on page 1
• “A d ob e H el p ” o n p a ge 2
• “Resources” on page 4
1
• “What’s new in Fireworks CS3” on page 8
Installation
Requirements
To review complete system requirements and recommendations for your Adobe software, see the Read Me.html file
on your installation DVD.
Install the software
1 Close any other Adobe programs open on your computer.
2 Insert the installation disc into your DVD drive, and follow the on-screen instructions.
Note: For more information, see the Read Me.html file on the installation DVD.
Activate the software
If you have a single-user retail license for your Adobe software, you will be asked to activate your software; this is a
simple, anonymous process that you must complete within 30 days of starting the software.
For more information on product activation, see the Read Me file on your installation DVD, or visit the Adobe
website at www.adobe.com/go/activation.
1 If the Activation dialog box isn’t already open, choose Help > Activate.
2 Follow the on-screen instructions.
ADOBE FIREWORKS CS3
User Guide
Note: If you want to install the software on a different computer, you must first deactivate it on your computer. Choose
Help > Deactivate.
Register
Register your product to receive complimentary installation support, notifications of updates, and other services.
❖ To register, follow the on-screen instructions in the Registration dialog box, which appears after you install and
activate the software.
If you postpone registration, you can register at any time by choosing Help > Online Registration.
Read me
The Read Me.html file for your product can be found on the installation DVD (and is also copied to the application
folder during product installation). This file provides valuable information about the following:
• System requirements
• Installing and uninstalling
• Activation and registration
• Font installation
• Troubleshooting
2
• Customer support
• Legal notices
Viewing the files installed with Fireworks
At som e poi nt y ou m ay n ee d to view or ac cess the fi les in stal le d wi th Fi rew ork s. Dur ing i nsta ll ati on, Fire wor ks pl aces
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 350.
Macintosh users should pay special attention to the format Fireworks uses to store the program and its default
configuration files. For more information, see “Viewing package contents (Macintosh only)” on page 352.
Adobe Help
Adobe Help resources
Documentation for your Adobe software is available in a variety of formats.
In-product and LiveDocs Help
In-product Help provides access to all documentation and instructional content available at the time the product
ships. It is available through the Help menu in your Adobe product.
LiveDocs Help includes all the content from in-product Help, plus updates and links to additional instructional
content avail able on t he web. For s ome pro ducts, LiveDocs also let s you add comm ents . Fin d LiveDocs Help for your
product in the Adobe Help Resource Center, at www.adobe.com/go/documentation.
ADOBE FIREWORKS CS3
User Guide
Most versions of in-product and LiveDocs Help let you search across the Help of multiple products. Topics also
contain links to relevant content on the web or to topics in the Help of another product.
Think of Help, both in the product and on the web, as a hub for accessing additional content and communities of
users. The most complete and up-to-date version of Help is always on the web.
Adobe PDF documentation
The i n-product Help is a lso avai lable as a Portable Doc ument Format (PDF) file that is optimiz ed for printing. Other
documents, such as white papers, may also be provided as PDFs.
All PDF documentation is available through the Adobe Help Resource Center, at www.adobe.com/go/documen-
tation. PDF documentation included with your product can be found in the Documents folder on the installation or
content DVD.
Printed documentation
Printed editions of the complete in-product Help are available for purchase in the Adobe Store, at
www.adobe.com/go/store. You can also find books published by Adobe publishing partners in the Adobe Store.
A printed workflow guide is included with all Adobe Creative Suite 3 products, and individual Adobe products may
include a printed getting started guide.
3
Using Help in the product
In-product Help is available through the Help menu. After you start the Adobe Help Viewer, click Browse to see Help
for additional Adobe products installed on your computer.
To help you learn about multiple Adobe products, these features are available:
• You can search across Help for multiple products.
• Topics may contain links to topics in Help for other Adobe products or to additional content on the web.
• Some topics are shared across multiple products. If you see a Help topic with a Fireworks icon and a Dreamweaver
icon, you know that the topic either describes functionality that is similar in the two products or documents crossproduct workflows.
Note: If you search for a phrase, such as “shape tool,” enclose it in quotation marks to see only those topics that include
all the words in the phrase.
Accessibility features
Adobe Help content is accessible to people with disabilities—such as mobility impairments, blindness, and low
vision. In-product Help provides keyboard shortcuts for toolbar controls and navigation, and it supports standard
accessibility features, including the following:
• Text size can be changed with standard context menu commands.
• Links are underlined for easy recognition.
• If link text doesn’t match the title of the destination, the title is referenced in the Title attribute of the Anchor tag.
For example, the Previous and Next links include the titles of the previous and next topics.
• Content supports high-contrast mode.
• Graphics without captions include alternate text.
• Each frame has a title to indicate its purpose.
• Standard HTML tags define content structure, for screen reading or text-to-speech tools.
• Style sheets control formatting, so there are no embedded fonts.
Windows keyboard shortcuts for toolbar controls
Each control in the toolbar for in-product Help has a keyboard equivalent:
Back button Alt+left arrow
Forward button Alt+right arrow
Print Ctrl+P
About button Ctrl+I
Browse menu Alt+down arrow or Alt+up arrow to view Help for another program
Search box (Windows) Ctrl+S to place cursor in Search box
Windows keyboard shortcuts for navigation
To navigate in Adobe Help Viewer and view topics, use the following keyboard combinations:
• To move between the navigation pane and the reading pane, press Ctrl+Tab and Shift+Ctrl+Tab.
• To move t h r o u g h li n k s wit h i n a p a n e , press Tab o r S h ift+ Ta b.
ADOBE FIREWORKS CS3
User Guide
4
• To activate a selected link, press Enter.
• To make text bigger, press Ctrl+equal.
• To make text smaller, press Ctrl+hyphen.
How to choose the right Help documents
A variety of resources are available for learning Fireworks, including Fireworks Help, PDF versions of the Fireworks
documentation components, and several web-based information sources.
• Fireworks Help (called Using Fireworks), intended for all users, gives comprehensive information about all
Fireworks features. You can access it at any time in Fireworks help (Help > Using Fireworks). The manual is also
available in PDF format on the Adobe website at www.adobe.com/go/fireworks_documentation.
• Extending Fireworks, which describes the Fireworks framework and the application programming interface (API),
is intended for advanced users who want to build extensions or customize the Fireworks interface. 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 Adobe website as a downloadable PDF.
Resources
Adobe Video Workshop
Adobe Creative Suite 3 Video Workshop enables you to learn about your product. There are over 200 training videos
for Adobe Creative Suite 3, covering a wide range of subjects for print, web, and video professionals.
You can use the Video Workshop to learn about any Creative Suite 3 product you’re interested in. Many videos show
you how to use products together.
ADOBE FIREWORKS CS3
User Guide
When you start the Video Workshop, you choose exactly the products and topics you want to learn. You can see
details about each video to help focus your learning path.
Community of presenters
With this release, we invited the Adobe community to share their expertise and insights. Adobe and Lynda.com
present tutorials, tips, and tricks from leading designers and developers such as Michael Ninness, Katrin Eismann,
and Chris Georgenes. You can see and hear Adobe experts such as Lynn Grillo, Greg Rewis, and Russell Brown. In
all, over 30 product experts share their knowledge.
Tutorials and source files
The Video Workshop includes training for novices and experienced users. You’ll also find videos on new features
and key techniques. Each video covers a single subject and typically runs about 3-5 minutes. Most videos come with
an illustrated tutorial and source files, so you can print out detailed steps and try the tutorial on your own.
Using Adobe Video Workshop
You can access Adobe Video Workshop using the DVD included with your Creative Suite 3 product. It’s also available
online at www.adobe.com/go/learn_videotutorials. Adobe will regularly add new videos to the online Video
Workshop, so check in to see what’s new.
5
Fireworks CS3 videos
Adobe Video Workshop covers a wide range of subjects for Adobe Fireworks CS3, including:
• Using the Pages panel
• Rapid prototyping with rich symbols
• Understanding layers and layout
• Generating symbol property scripts
Videos also show you how to use Fireworks CS3 with other Adobe products, for example:
• Importing Photoshop files
• Understanding the Fireworks and Flash workflow
• Understanding the Photoshop, Illustrator, and Fireworks workflow
Extras
You have access to a wide variety of resources that will help you make the most of your Adobe software. Some of
these resources are installed on your computer during the setup process; additional helpful samples and documents
are included on the installation or content DVD. Unique extras are also offered online by the Adobe Exchange
community, at www.adobe.com/go/exchange.
Installed resources
During software installation, a number of resources are placed in your application folder. To view those files, navigate
to the specific application folder on your computer.
• Windows: [startup drive]/Program files/Adobe/Adobe Fireworks CS3
• Mac OS: [startup drive]/Applications/Adobe Fireworks CS3
Depending on your Adobe product, the application folder may contain the following:
ADOBE FIREWORKS CS3
User Guide
Plug-ins Plug-in modules are small software programs that extend or add features to your software. Once installed,
plug-in modules appear as options in the Import or Export menu; as file formats in the Open, Save As, and Export
Original dialog boxes; or as filters in the Filter submenus.
Presets Presets comprise a wide variety of useful tools, preferences, effects, and images. Product presets include
brushes, swatches, color groups, symbols, custom shapes, graphic and layer styles, patterns, textures, actions,
workspaces, and more. Preset content can be found throughout the interface. Some presets become available only
when you select the corresponding tool. If you don’t want to create an effect or image from scratch, just peruse the
preset libraries for inspiration.
Te mp l at es Template files can be opened and viewed from Adobe Bridge, opened from the Welcome Screen, or
opened directly from the File menu. Depending on the product, template files range from letterhead, newsletters and
websites, to DVD menus and video buttons. Each template file is professionally constructed and represents a bestuse example of product features. Templates can be a valuable resource when you need to jump start a project.
Samples Sample files include more complicated designs and are a great way to see new features in action. These files
demonstrate the range of creative possibilities offered by your program.
Fonts Several OpenType® fonts and font families are included with your Creative Suite product. Fonts are copied to
your computer during installation:
• Windows: [startup drive]/Program Files/Common Files/Adobe/Fonts
• Mac OS X: [startup drive]/Library/Application Support/Adobe/Fonts
6
For information about installing fonts, see the Read Me.html file on the installation DVD.
DVD content
The installation or content DVD included with your product contains additional resources for use with your
software. The Goodies folder contains product-specific files such as templates, images, presets, actions, plug-ins, and
effects, along with subfolders for Fonts and Stock Photography. The Documentation folder contains a PDF version
of the Help, technical information, and other documents such as specimen sheets, reference guides, and specialized
feature information.
Adobe Exchange
For more free content, visit www.adobe.com/go/exchange, an online community where users download and share
thousands of free actions, extensions, plug-ins, and other content for use with Adobe products.
Bridge Home
Bridge Home, a new destination in Adobe Bridge CS3, provides up-to-date information on all your Adobe Creative
Suite 3 software in one convenient location. Start Adobe Bridge, then click the Bridge Home icon at the top of the
favorites panel to access the latest tips, news, and resources for your Creative Suite tools.
Note: Bridge Home may not be available in all languages.
Adobe Design Center
Adobe Design Center offers articles, inspiration, and instruction from industry experts, top designers and Adobe
publishing partners. New content is added monthly.
You can find hundreds of tutorials for design products and learn tips and techniques through videos, HTML
tutorials, and sample book chapters.
New ideas are the heart of Think Tank, Dialog Box, and Gallery:
ADOBE FIREWORKS CS3
User Guide
• Think Tank articles describe how designers engage with technology and what their experiences mean for design,
design tools, and society.
• In Dialog Box, experts share new ideas in motion graphics and digital design.
• The Gallery showcases how artists communicate design in motion.
Visit Adobe Design Center at www.adobe.com/designcenter.
Adobe Developer Center
Adobe Developer Center provides samples, tutorials, articles, and community resources for developers who build
rich Internet applications, websites, mobile content, and other projects using Adobe products. The Developer Center
also contains resources for developers who develop plug-ins for Adobe products.
In addition to sample code and tutorials, you'll find RSS feeds, online seminars, SDKs, scripting guides, and other
technical resources.
Visit Adobe Developer Center at www.adobe.com/go/developer.
Customer support
Visit the Adobe Support website, at www.adobe.com/support, to find troubleshooting information for your product
and to learn about free and paid technical support options. Follow the Training link for access to Adobe Press books,
a variety of training resources, Adobe software certification programs, and more.
7
Downloads
Visit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software. In addition, the Adobe
Store (at www.adobe.com/go/store) provides access to thousands of plug-ins from third-party developers, helping
you to automate tasks, customize workflows, create specialized professional effects, and more.
Adobe Labs
Adobe Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and products from Adobe.
At Adobe Labs, you have access to resources such as these:
• Prerelease software and technologies
• Code samples and best practices to help accelerate your learning curve
• Early versions of product and technical documentation
• Forums, wiki-based content, and other collaborative resources to help you interact with like-minded developers
Adobe Labs fosters a collaborative software development process. This environment allows customers to become
productive with new products and technologies faster and the Adobe development teams to respond and react to
early feedback in order to shape the software in a way that meets the needs and expectations of the community.
Visit Adobe Labs at www.adobe.com/go/labs.
ADOBE FIREWORKS CS3
User Guide
User communities
Features forums, blogs, and other avenues for users to share technologies, tools, and information; ask questions; and
find out how others are getting the most out of their software. User-to-user forums are available in English, French,
German, and Japanese; blogs are posted in a wide range of languages.
To participate in forums or blogs, visit www.adobe.com/communities.
What’s new in Fireworks CS3
Create rich symbols
This version of Fireworks introduces new and enhanced symbol features. Create graphic symbols that can be intelligently scaled and given specific attributes using a JavaScript (JSF) file. Quickly mock up a user interface by dragging
these symbols on to the document and editing the parameters associated with them using the new Symbol Properties
panel.
Rich symbols
8
Symbol Properties panel This new panel is a central location where you can control the properties for
Enhanced graphic symbol An enhancement to the graphic symbol allows the creation of customizable
Symbol librar y A pre-designed librar y of graphic symbols that utilize the new functionality has
Swap symbols A new “swap symbol” feature allows you to easily swap symbols as you are
intelligent graphic symbols.
symbol properties using JavaScript.
been included in this software release. These can be customized to accommodate the look and feel of a particular website or user interface.
designing your document.
For more information, see “Creating and using rich graphic symbols” on page 190.
Intelligent scaling for symbols
Traditionally, when you apply scale transformations to symbols, the entire object is transformed as a single unit.
With certain kinds of objects, especially geometric shapes with styled corners, the result is a symbol that appears
somewhat distorted.
Fireworks CS3 introduces a dynamic new feature called 9-slice scaling, which allows you to intelligently scale vector
or bitmap symbols. By positioning a set of guides over your artwork, you can define exactly how each part of a
symbol is scaled. Any of nine different regions can be specified to scale only horizontally, scale only vertically, scale
both horizontally and vertically, or to not scale at all. The feature, which is on by default, can also be set to scale just
three regions. When combined with the new Auto Shape library, 9-slice scaling makes it faster than ever before to
prototype websites and applications.
Scaling without distortion
New 9-slice scaling tool Enable the 9-slice scaling feature to scale vector and bitmap symbols up or
down without distorting their geometry. The symbol can be scaled using 3 or
9 regions, based on the shape of the symbol.
For more information, see “Using 9-slice scaling” on page 188.
ADOBE FIREWORKS CS3
User Guide
Add multiple pages to a single document
In a never-ending effort to improve web-design workflows, Fireworks CS3 makes it easy to build complex multipage web prototypes using a single PNG file. Each page contains its own settings for canvas document, size, color,
image resolution, and guides. These settings can be set on a per-page basis, or globally across all pages in the
document.
Taking the multi-page concept one step further, Fireworks layers can apply to a single page or be shared across
pages. Once shared, the layers are shaded yellow to differentiate them from unshared layers. For rapid prototyping,
you can create workflows with hyperlinks and hotspot behaviors on multiple pages. You can also preview all of your
pages in a browser or export them all at once as multiple HTML pages.
Prototype without complexity
New Pages panel A new Pages panel gives easy access to all of the pages in your PNG file.
9
Apply layers across pages Layers can apply to a single page, or can be shared across multiple pages. Once
Use a master page for common
elements
shared, the layers are displayed in yellow to differentiate from unshared Layers.
An optional master page can be used to hold elements that are common to all
pages.
For more information, see “Working with pages” on page 155.
Create Flash-based slideshows
Automatically create an image slideshow. The Create Slideshow command allows you to create a Flash slideshow
without knowing how to use Flash. You simply select a folder with images, add slideshow options (such as slide
transitions), select a Fireworks album player (a Flash template) for the final output, and automatically batch-process
the required thumbnail and full-size images that are optimized for the web.
Create a Flash slideshow without learning Flash
Create Slideshow feature Choose Create Slideshow from the Commands menu to launch the new tool.
For more information, see “Creating Slideshows” on page 250.
Hierarchical layers
In Fireworks CS3 the structure of layers in a document can be as simple or as complex as required and all hierarchical layers are preserved. When creating a new file, all items are organized at the same level, in a non-hierarchical
manner. You can create new sub layers as needed and move items into them, or move elements from one layer to
another at any time. You can also create multiple sub layers and group them.
Use layers for greater design flexibility
Hierarchical layers Use the Layers panel to create and organize layers as you need them.
For more information, see “Working with layers” on page 159.
ADOBE FIREWORKS CS3
User Guide
Work with Photoshop files
With Fireworks CS3, you can directly import native files from Photoshop. Achieving a whole new level of functionality, Adobe is redefining the concept of what integration should be. Fireworks design comps and images can now
be saved as native Photoshop files and opened in either Photoshop or Fireworks CS3 with layer information
preserved.
Improved Photoshop compatibility
10
Photoshop layer effects Photoshop provides a variety of effects such as shadows, glows, bevels, over-
Photoshop blend modes Fireworks CS3 includes seven commonly used Photoshop blending modes
Retain hierarchical layers when
opening PSD files
lays, and strokes that let the user change the appearance of a layer’s contents.
Fireworks CS3 now preserves these editable Photoshop layer effects when
importing or opening a PSD file. You can also now apply Photoshop layer
effects directly to any object within Fireworks by selecting Photoshop Live
Effects from the Live Filters tool in the Property inspector.
(dissolve, linear burn, linear dodge, vivid light, linear light, pin light, and hard
mix).
Fireworks CS3 now supports a hierarchical layer structure, allowing you to
preserve layer and sublayer information when importing files from Photoshop.
For more information, see “Working with Photoshop” on page 322.
Import Fireworks files into Adobe Flash
Now you can move content from Fireworks CS3 to Flash CS3 Professional quickly by copying and pasting or by
directly importing a Fireworks PNG file. Important structure is maintained, including multiple pages, shared layers,
hierarchical layers, frames, 9-slice scaling settings, and many effects. Prototyping in Fireworks and developing in
Flash has never been easier.
For more information, see “Working with Flash” on page 305.
Flex integration for RIA layouts
As designers continue to push the technology envelope, better tools and integration become more important than
ever. Fireworks CS3 can help in the development of next-generation rich internet applications—referred to as
RIAs—by making it possible to export common library assets as known components for use in Adobe Flex™
Builder.™ Styling and absolute positioning are also maintained.
The best part is there’s no work necessary on your part, because Fireworks exports the necessary Flex code (MXML)
for you. Now you can easily create a Flex application layout in Fireworks, leveraging Flex common library assets as
MXML for loading into Flex Builder.
Work with Illustrator files
Open Illustrator files in Fireworks while preserving hierarchical layers, patterns, linked images, text attributes,
transparency, and more. Fireworks also contains export options for exporting to Adobe Illustrator 8.0.
For more information, see “About working with Illustrator” on page 326.
For more information on the new features, see the Fireworks page on the Adobe website at
www.adobe.com/products/fireworks/.
ADOBE FIREWORKS CS3
User Guide
Adobe Bridge
Simplify file handling in Fireworks and within Adobe Creative Suite with Adobe Bridge, the next-generation file
browser. Efficiently browse, tag, search, and process your images. Using Bridge and Fireworks together means you
can take advantage of XMP metadata in your files. Adobe XMP (Extensible Metadata Platform) is a technology that
assists the user in adding file information to files saved in PNG, GIF, JPEG, Photoshop, and TIFF formats, and facilitates the exchange of metadata between Adobe software and other systems that support the XMP metadata
standard.
For more information, see “About Adobe Bridge” on page 328.
11
Chapter 2: Fireworks Basics
Fireworks CS3 is a software program for designing professional on-screen graphics. 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 taskspecific 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” on page 12
• “About vector and bitmap graphics” on page 13
• “Creating a new document” on page 15
• “Opening and importing files” on page 16
12
• “Saving Fireworks files” on page 22
• “The Fireworks work environment” on page 24
About working in Fireworks
Fireworks is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both
bitmap and vector images, design web effects such as rollovers and pop-up 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 program, such as Adobe
Photoshop or Adobe Flash, if you want to continue working in the other program.
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 13
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.
ADOBE FIREWORKS CS3
User Guide
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 200.
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.
13
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 257.
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.
ADOBE FIREWORKS CS3
User Guide
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.
14
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 pixel is assigned a color. When viewed at the correct resolution, the dots fit together like tiles in a mosaic
to form the image.
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.
ADOBE FIREWORKS CS3
User Guide
Creating a new document
When you select File > New to create a new document in Fireworks, you create a Portable Network Graphic, or PNG
do cume nt. PN G is the nativ e fi le f orm at for Fi rewor ks. Aft er you cre ate graph ics in Fir ework s, you c an e xpo rt or sa ve
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, PSD, 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.
15
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.
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 19
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.
ADOBE FIREWORKS CS3
User Guide
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 Adobe 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.
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 16
• “Opening graphics created in other applications” on page 16
16
• “Creating Fireworks PNG files from HTML files” on page 17
• “Inserting objects into a Fireworks document” on page 18
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:
❖ 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, Adobe
FreeHand, Adobe 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, TIFF, SWF, AI, PSD, and PICT (Mac only).
ADOBE FIREWORKS CS3
User Guide
Note: Fireworks saves 16-bit TIFF 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.
• 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.
17
Resolution indicates the pixels per unit for the resolution.
Constrain Proportions opens the file in the same proportions as the original.
Anti-aliased smoothes 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.
PSD files
Fireworks CS3 can open PSD files created in Photoshop and preserve all or most of the PSD features, including
hierarchical layers, layer effects, and commonly used blend modes.
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.
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 280.
ADOBE FIREWORKS CS3
User Guide
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. For more
information on these file types, see “Exporting files with and without UTF-8 encoding” on page 286 and “Exporting
XHTML” on page 286.
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.
18
To import the first table of an HTML file into an open Fireworks document:
Select File > Import.
1
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.
Dragging images into Fireworks
You can drag vector objects, bitmap images, or text into Fireworks from any application that supports dragging.
These applications include the following:
• 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.
ADOBE FIREWORKS CS3
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.
User Guide
19
2 In Fireworks, paste the object or text into your document.
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 “Pages, Layers, Masking, and Blending” on page 155.
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.
ADOBE FIREWORKS CS3
2 Select Edit > Paste in Fireworks.
User Guide
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.
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 203. For more information about layers, see “Working with
layers” on page 159.
To import a PNG file into a Fireworks document layer:
In the Layers panel, select the layer into which you want to import the file.
1
2 Select File > Import to open the Import dialog box.
3 Navigate to the file to be imported and click Open.
20
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 350.
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.
ADOBE FIREWORKS CS3
User Guide
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 (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.
To import an image from a digital camera (Macintosh):
1 Connect the camera to your computer.
21
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 scanner (Windows):
Connect the scanner to your computer.
1
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.
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.
ADOBE FIREWORKS CS3
User Guide
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 23.
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
22
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:
Select File > Save As.
1
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.
To save a Fireworks CS3 PNG file for use in a previous version of Fireworks
Select File > Export.
1
2 Browse to the location where you want to save the file.
3 If the Fireworks CS3 file has more than one page, select Pages to Files in the Export pop-up menu.
ADOBE FIREWORKS CS3
User Guide
4 Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page will be
saved in the default file format. This file format can be set using the Optimize panel.
All objects on the top-level layers will be saved in the export, but any items on sub-layers will not be exported.
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
di ffe rent f ormat in w hic h to save your file . For m ost fil e ty pes, you can sel ect Sav e to save t he do cum ent in its o rig ina l
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 13). 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, TIFF,
SWF, AI, PSD, and PICT (Macintosh only). Fireworks saves 16-bit TIFF 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.
23
To save in an existing GIF, JPEG, TIFF, 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. Non-editable 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 257.
ADOBE FIREWORKS CS3
User Guide
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 program.
24
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.
To disable the Start page:
Run Fireworks without opening a document.
1
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.
ADOBE FIREWORKS CS3
User Guide
25
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 26.
To display tool options in the Property inspector for a tool that you are already using:
❖ Choose Select > Deselect to deselect all objects.
For information about specific tool options, see the sections that introduce the various tools throughout Using
Fireworks or Fireworks Help.
Loading...