Macromedia Fireworks - CS5 User Guide
Using
ADOBE® FIREWORKS® CS5
Legal notices
Legal notices
For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.
Last updated 5/2/2011
Contents
Chapter 1: What’s new
Improved performance, stability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Pixel Precision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Adobe Device Central integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Supported workflows with Flash Catalyst and Flash Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Extensibility improvements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Swatch sharing across the suite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Chapter 2: Fireworks basics
About working in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Vector and bitmap graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Creating a new Fireworks document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Opening and importing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Create Fireworks PNG files from HTML files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Insert objects into a Fireworks document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Saving Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
iii
Chapter 3: Workspace
Workspace basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Navigate and view documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Change the canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Preview in browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Undo and repeat multiple actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Chapter 4: Selecting and transforming objects
Select objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Modify a selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Select pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Edit selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
9-slice scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Organize multiple objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapter 5: Working with bitmaps
Creating bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Editing bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Retouching bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Adjust bitmap color and tone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Blurring and sharpening bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Add noise to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Chapter 6: Working with vector objects
Basic shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Auto Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Last updated 5/2/2011
USING FIREWORKS
Contents
Free-form shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Compound shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Special vector-editing techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Chapter 7: Working with text
Enter text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Selecting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Format and edit text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Chapter 8: Applying color, strokes, and fills
Applying colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Save swatches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Kuler panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Applying strokes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Chapter 9: Using Live Filters
Applying Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Edit and customize Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Chapter 10: Layers, masking, and blending
Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Blending and transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
iv
Chapter 11: Styles, symbols, and URLs
Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Chapter 12: Slices, rollovers, and hotspots
Creating and editing slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Interactive slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Hotspots and image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Chapter 13: Creating buttons and pop-up menus
Navigation basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Create button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Edit button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Pop-up menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Chapter 14: Prototyping websites and application interfaces
Prototyping workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Working with Fireworks pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Creating CSS-based layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Prototyping Flex applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Prototyping Adobe AIR applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Last updated 5/2/2011
USING FIREWORKS
Contents
Chapter 15: Creating animations
Animation basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Create animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Edit animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Manipulate states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
About onion skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Preview an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Optimize an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Work with existing animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Create twist and fade animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Chapter 16: Creating slide shows
Build and arrange a slide show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Customize a slide show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Create a custom Fireworks album player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Chapter 17: Optimizing and exporting
Use the Export Wizard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Use the Image Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Optimize in the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Optimize GIF, PNG, TIFF, BMP, and PICT files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Optimize JPEGs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Export from the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Send a Fireworks document as an e-mail attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
v
Chapter 18: Using Fireworks with other applications
Working with Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Working with HomeSite, GoLive, and other HTML editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Working with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Working with Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Working with Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Working with Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Share image metadata with Adobe XMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Previewing Fireworks documents in mobile emulators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Chapter 19: Automating tasks
Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Select the source for the search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Set options for finding and replacing in multiple files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Find and replace text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Find and replace fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Find and replace colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Find and replace URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Find and replace non-websafe colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Batch-processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Using commands for batch-processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Last updated 5/2/2011
USING FIREWORKS
Contents
Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Manage commands . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Chapter 20: Preferences and keyboard shortcuts
Set preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Select and customize keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Work with configuration files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
About reinstalling Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
View package contents (Mac OS only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
vi
Last updated 5/2/2011
Chapter 1: What’s new
Improved performance, stability
• Numerous improvements to most frequently used tools in Fireworks that help increase your work efficiency
• Faster overall performance
• Greater control over pixel placement of design elements
• Updated compound path tool
Pixel Precision
Enhanced pixel precision ensures that your designs look crisp and clean on any device. Quickly and easily correct
design elements that do not appear on a whole pixel.
1
Adobe Device Central integration
Using Adobe Device Central, you can select profiles for mobile or other devices, then start an automated workflow to
create a Fireworks project. The project has the screen size and resolution of the target device. After the design is
complete, you can preview the design under various conditions using the emulation capabilities of Device Central. You
can also create custom device profiles.
Improved mobile design workflows including emulation of interactive designs with integration with Adobe Device
Central.
Supported workflows with Flash Catalyst and Flash Builder
Create advanced user interfaces and interactive content using new workflows between Fireworks and Flash
Catalyst.Design in Fireworks and select objects, pages, or whole documents to export through FXG, a new XML-based
graphics format for the Adobe Flash Platform tools. Export your designs efficiently to Flash Professional, Flash
Catalyst and Flash Builder through a customizable extensible script.
Extensibility improvements
Experience greater control when working with other applications: Enhanced API supporting user-extensible export
scripts, batch processing, and advanced control over the FXG file format.
Last updated 5/2/2011
USING FIREWORKS
What’s new
Swatch sharing across the suite
Better control over color accuracy using the ability in Fireworks to conveniently share swatches across Creative Suite
applications. The ability to share the ASE file format encourages unified color exchange among designers including
those using Adobe Kuler.
2
Last updated 5/2/2011
Chapter 2: Fireworks basics
About working in Fireworks
Adobe® 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. You can export or save a document as a JPEG
file, GIF file, or file of another format. These files can be saved along with HTML files containing HTML tables and
JavaScript code so you can use them on the web.
For a video tutorial that introduces Fireworks basics, see www.adobe.com/go/lrvid4032_fw.
Draw and edit vector and bitmap objects
The Fireworks Tools panel includes distinct sections containing tools for drawing and editing vectors and bitmaps.
The tool you select determines whether the object you create is a vector or a bitmap. After drawing an object or text,
you can use a wide array of tools, effects, commands, and techniques to enhance your graphics or to create interactive
navigation buttons.
3
You can also import and edit graphics in JPEG, GIF, PNG, PSD, and many other file formats.
Add interactivity to graphics
Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into exportable
sections to which you can apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. On a web
page, each slice appears in a table cell.
Use the drag-and-drop rollover handles on slices and hotspots to quickly assign swap image and rollover behaviors to
graphics. Use the Fireworks Button Editor and Pop-up Menu Editor to build special interactive graphics for navigating
websites.
Optimize and export graphics
Use the powerful optimization features of Fireworks to achieve the right balance between file size and acceptable visual
quality for exported graphics. The type of optimization you choose depends on the needs of your users and the content.
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.
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.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
About vector graphics
Vector graphics render images using lines and curves (vectors) that include color and position information. For
example, the image of a leaf can 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).
Vector graphics are resolution-independent. That means the quality of a vector graphic's appearance won't change
when you change its color; move, resize, or reshape it; or when the resolution of the output device changes.
About bitmap graphics
Bitmap graphics are composed of dots (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.
4
When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolutiondependent, 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, which can make 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 Fireworks document
New documents in Fireworks are saved as Portable Network Graphic (PNG) documents. PNG is the native file format
for Fireworks.
Graphics created in Fireworks can be exported to or saved in several web and graphic formats. Regardless of the
optimization and export settings you select, the original Fireworks PNG file is preserved to allow easy editing later.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
Create a new document
1 Select File > New.
The New Document dialog box opens.
2 Enter document settings and click OK.
Note: Use the Custom color box pop-up window to select a custom canvas color.
5
Set default dimensions for new document
When you open Fireworks for the first time, the following values for dimensions appear in the New Document dialog
as default:
• 660 x 440 (Windows)
• 500 x 500 (Mac)
Settings in the New Document dialog are not changed when you change the canvas size in Fireworks.
The default settings get changed when you copy an object. Dimensions of the copied object (on the clipboard) are
automatically used for dimensions in the New Document dialog.
To clear object dimensions from the clipboard, do the following (Windows):
1 Create a document with the preferred dimensions.
2 Save the document, and close Fireworks.
3 Reopen Fireworks, and create a document.
The dimensions of the previously saved document appear in the New Document dialog.
For Mac OS, Fireworks retains the dimension of a previously copied object when creating a new document. This is
because clipboard contents are retained until you cut or copy other elements, such as text. If you copy elements
unrelated to dimensions, and then select "New", the previously-saved size appears as default.
Create a new document the same size as an object on the Clipboard
1 Copy an object to the Clipboard from another Fireworks document, a web browser, or from any application that is
acceptable for pasting.
2 Select File > New.
The New Document dialog box opens with the width and height dimensions of the object on the Clipboard.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
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.
Templates
Save a Fireworks file as a template, and create new files using the template. The template is saved in the Fireworks PNG
format. Fireworks provides a list of pre-built custom templates for mobile, prototypes, websites, and web frames that
you can customize.
Create template
1 Create a file. You can add placeholders for design and content to help standardize the appearance of documents
created using this template.
2 Select File > Save As Template to save the file as a template Fireworks PNG file.
Create file from template
1 Select File > New From Template.
2 Select the template that you want to use to create your file, and click Open.
Note: Fireworks specific data like pages, layers, and vector information is stored in the template.
6
Opening and importing files
Note: When you import a file from Adobe Dreamweaver®, Fireworks preserves many, but not all JavaScript behaviors. If
Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to
Dreamweaver.
Open a Fireworks document
❖ Select File > Open and select the file.
To open a file without overwriting the previous version, select Open As Untitled, and then save the file using a different
name.
Open a recently closed file
1 Select File > Open Recent.
2 Select a file from the submenu.
Open a recently closed file when no files are open
❖ Click the file name on the Start page.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
Open graphics created in other applications
You can open files created in other applications or file formats, including Photoshop®, Adobe Illustrator®, 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.
In some cases, you can save the file in its original format. If you do this, the image flattens to a single layer, and you
will be unable to edit the Fireworks-specific features you added to the image.
The following file formats can be saved directly from Fireworks: Fireworks PNG, GIF, animated GIF, JPEG, BMP,
WBMP, TIFF, SWF, AI, PSD, and PICT (Mac only).
Note: Fireworks saves 16-bit TIFF images at 24-bit color depth.
Animated GIFs
• Import an animated GIF as an animation symbol and then edit and move all the elements of the animation as a
single unit. Use the Document Library panel to create new instances of the symbol.
Note: When you import an animated GIF, the state delay setting defaults to 0.07 seconds. If necessary, use the States
panel to restore the original timing.
7
• 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 state. You can convert the graphic to an animation symbol in Fireworks.
EPS files
Fireworks opens most EPS files as flattened bitmap images in which all objects are combined on a single layer. Some
EPS files exported from Adobe Illustrator retain their vector information.
PSD files
Fireworks can open PSD files created in Photoshop and preserve most PSD features, including hierarchical layers,
layer effects, and commonly used blend modes. Use the various options for Photoshop Import/Open in the
Preferences dialog box to customize PSD import.
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 use the Import Multiple Files extension to import multiple selected files into new pages of a Fireworks PNG
file. This utility helps you aggregate your project files created in earlier versions of Fireworks. You can also import
flattened PNG file, PSD, AI, BMP, Freehand, GIF, animated GIF, JPEG, PICT, and TIFF formats. You can download this
extension from
http://www.adobe.com/go/learn_fw_multiplepages_en.
Create Fireworks PNG files from HTML files
Fireworks can open and import HTML content created in other applications that contain basic HTML table elements.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
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.
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 want the imported table to appear.
Note: Fireworks can import documents that use UTF-8 encoding and those that are written in XHTML.
Insert objects into a Fireworks document
Drag an image or text into Fireworks
You can drag vector objects, bitmap images, or text from any application that supports dragging.
8
❖ From the other application, drag the object or text into Fireworks.
Paste into Fireworks
Pasting an object copied from another application into Fireworks places the object in the center of the active
document.
Text or objects in any of these formats can be pasted from the Clipboard:
• Adobe FreeHand 7 or later
• Adobe Illustrator
• PNG
• PICT (Mac OS)
• DIB (Windows)
• BMP (Windows)
• ASCII text
• EPS
• WBMP
• TXT
• RTF
1 In the other application, copy the object or text that you want to paste.
2 In Fireworks, paste the object or text into your document.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
Location of pasted objects
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 (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
(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 (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 (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.
Resample pasted objects
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 always causes data loss and usually results in a drop in quality.
9
Resample a bitmap object by pasting
1 Copy the bitmap to the Clipboard in Fireworks or another program.
2 Select Edit > Paste in Fireworks.
3 If the bitmap image on the Clipboard has a different resolution than the current document does, choose a resample
option.
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.
Import a PNG file into a Fireworks document layer
When you import Fireworks PNG files into the current layer of the active Fireworks document, hotspot objects and
slice objects are placed on the document's Web Layer. Fireworks retains the proportions of the imported image.
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 you want to import and click Open.
4 On the canvas, position the import pointer where you want to place the upper left corner of the image.
5 Do one of the following:
• Click to import the full-size image.
• Drag the import pointer to resize the image as you import.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
Import 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
Image Capture capability (Mac OS). Images imported into Fireworks from a digital camera or scanner open as new
documents.
Before you try to import images into Fireworks, install all required software drivers, modules, and plug-ins for the
camera or scanner.
The Plug-ins folder is located inside the Fireworks application folder. In Mac OS, Fireworks automatically looks for
Photoshop Acquire plug-ins in that folder.
Direct Fireworks to Photoshop Acquire plug-ins
1 In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS).
2 Click the Plug-ins category.
3 Select Photoshop Plug-Ins and navigate to the folder containing the plug-ins.
If the Select The Photoshop Plug-ins Folder (Windows) or Choose A Folder (Mac OS) dialog box doesn't open
automatically, browse to the folder.
Import an image from a digital camera (Windows)
1 Connect the camera to your computer.
2 In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.
3 Select the source for the images and the images you want to import.
The user interface for your camera software appears.
10
4 Follow the instructions to apply settings.
Import an image from a digital camera (Mac OS)
1 Connect the camera to your computer.
2 In Fireworks, select File > Acquire, and then select either Camera Acquire or Camera Select.
3 Select the camera and the images you want to import.
4 Follow the instructions to apply settings.
Import an image from a scanner
1 Connect the scanner to your computer.
2 Install the software that accompanies the scanner if you have not already done so.
3 Do one of the following:
• (Windows) In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.
• (Mac OS) In Fireworks, select File > Acquire, 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 settings.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
Saving Fireworks files
When you create a document or open files in formats like PSD or HTML, the File > Save command creates a Fireworks
PNG file. Fireworks PNG files have 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.
If Fireworks takes time to save a complex document, you can edit other open documents while the save operation
completes.
Save a Fireworks PNG file for use in an earlier version
1 Select File > Export.
2 Browse to the location where you want to save the file.
3 If the Fireworks file has more than one page, select Pages To Files in the Export pop-up menu.
4 Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page is saved in
the default file format. This file format can be set using the Optimize panel. For more information see
and exporting” on page 217.
All objects on the top-level layers are saved in the export. Items on sublayers are not exported.
“Optimizing
11
Save all open documents
You can save all open documents even while continuing to work on them and specify filenames for any unnamed
documents. Documents that have changed since the last save appear with an asterisk (*) against the filename on the
document tab.
❖ Select Commands > Save All.
Note: You can use the Fireworks Auto Backup utility to automatically back up all open Fireworks documents. Download
the utility from Adobe AIR Marketplace at
http://www.adobe.com/go/learn_fw_autobackuputility_en.
Save documents in other formats
If you use File > Open to open a file in a format other than PNG, you can later select File > Save As to save your work
as a new Fireworks PNG file, or you can select a different format.
For the following file types, you can choose File > Save to save the document in its original format: Fireworks PNG,
GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac OS only). Fireworks saves 16-bit TIFF
images at 24-bit color depth.
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 are
no longer available in the bitmap file. To revise the image, edit the source PNG file and then export it again.
Add a picture frame
1 Select Commands > Creative > Add Picture Frame.
2 Select a pattern and set the frame size.
3 Click OK.
Last updated 5/2/2011
USING FIREWORKS
Fireworks basics
Reset warning messages
If you have disabled warning messages from reappearing, you can re-enable the messages.
❖ Select Commands > Reset Warning Dialogs.
Take screenshot (Windows only)
1 Select Commands > Take Screenshot.
2 Switch to the window you want to take a screenshot of.
3 Click OK and then drag to select the area of the window.
4 Paste the clipboard contents on to the canvas or any image editing application.
12
Last updated 5/2/2011
Chapter 3: Workspace
Workspace basics
Fireworks workspace overview
When you open a document in Adobe® Fireworks® for the first time, the workspace includes 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.
13
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. To disable the start page, click Don't Show Again when the Start page
opens.
About Fireworks panels
Panels are floating controls that help you edit aspects of a selected object or elements of the document. Panels let you
work on states, layers, symbols, color swatches, and more. Each panel is draggable, so you can group panels in custom
arrangements.
Optimize panel Lets you manage the settings that control size and type of a file and work with the color palette of the
file or slice.
Last updated 5/2/2011
USING FIREWORKS
Workspace
Layers panel Organizes the structure of a document and contains options for creating, deleting, and manipulating
layers.
Common Library panel Displays the contents of the Common Library folder, which contains symbols. You can easily
drag instances of these symbols from the Document Library panel to your document.
Pages panel Displays the pages in the current file and contains options for manipulating pages.
States panel Displays the states in the current file and includes options for creating animations.
History panel Lists commands you have recently used so that you can quickly undo and redo them. In addition, you
can select multiple actions, and then save and reuse them as commands.
Auto Shapes panel Contains Auto Shapes that are not displayed in the Tools panel.
Styles panel Lets you store and reuse combinations of object characteristics or select a stock style.
Document Library panel Contains graphic symbols, button symbols, and animation symbols that are already in the
current Fireworks document. You can easily drag instances of these symbols from the Document Library panel to your
document. You can make global changes to all instances by modifying only the symbol.
URL panel Lets you create libraries containing frequently used URLs.
Color Mixer panel Lets you create new colors to add to the color palette of the current document or to apply to selected
objects.
14
Swatches panel Manages the color palette of the current document.
Info panel Provides information about the dimensions of selected objects and the exact coordinates of the pointer as
you move it across the canvas.
Behaviors panel Manages behaviors, which determine what hotspots and slices do in response to mouse movement.
Find panel Lets you search for and replace elements such as text, URLs, fonts, and colors in a document or multiple
documents.
Align panel Contains controls for aligning and distributing objects on the canvas.
Auto Shape Properties panel Lets you change the properties of an Auto Shape after you insert one into your
document.
Color Palette panel (Window > Others) Enables you to create and swap color palettes, export custom ACT color
swatches, explore various color schemes and access commonly used controls for choosing colors.
Image Editing (Window > Others) Organizes common tools and options used for bitmap editing into one panel.
Path panel (Window > Others) Provides quick access to many path-related commands.
Special Characters (Window > Others) Displays the special characters that can be used in text blocks.
Symbol Properties Manages the customizable properties of graphic symbols.
Workspace overview
You create and manipulate your documents and files using various elements, such as panels, bars, and windows. Any
arrangement of these elements is called a workspace. The workspaces of the different applications in Adobe® Creative
Suite® 5 share the same appearance so that you can move between the applications easily. You can also adapt each
application to the way you work by selecting from several preset workspaces or by creating one of your own.
Although the default workspace layout varies in different products, you manipulate the elements much the same way
in all of them.
Last updated 5/2/2011
USING FIREWORKS
Workspace
15
A
E
F
B DC
G
H
Default Illustrator workspace
A. Tabbed Document windows B. Application bar C. Workspace switcher D. Panel title bar E. Control panel F. Tools panel G. Collapse To
Icons button H. Four panel groups in vertical dock
• The Application bar across the top contains a workspace switcher, menus (Windows only), and other application
controls. On the Mac for certain products, you can show or hide it using the Window menu.
• The Tools panel contains tools for creating and editing images, artwork, page elements, and so on. Related tools are
grouped.
• The Control panel displays options for the currently selected tool. In Illustrator, the Control panel displays options
for the currently selected object. (In Adobe Photoshop® this is known as the Options bar. In Adobe Flash®, Adobe
Dreamweaver®, and Adobe Fireworks® this is known as the Property Inspector and includes properties of the
currently selected element.)
• The Document window displays the file you’re working on. Document windows can be tabbed and, in certain cases,
grouped and docked.
• Panels help you monitor and modify your work. Examples include the Timeline in Flash, the Brush panel in
Illustrator, the Layers panel in Adobe Photoshop®, and the CSS Styles panel in Dreamweaver. Panels can be
grouped, stacked, or docked.
• The Application frame groups all the workspace elements in a single, integrated window that lets you treat the
application as a single unit. When you move or resize the Application frame or any of its elements, all the elements
within it respond to each other so none overlap. Panels don’t disappear when you switch applications or when you
accidentally click out of the application. If you work with two or more applications, you can position each
application side by side on the screen or on multiple monitors.
Last updated 5/2/2011
USING FIREWORKS
Workspace
If you are using a Mac and prefer the traditional, free-form user interface, you can turn off the Application frame.
In Adobe Illustrator®, for example, select Window > Application Frame to toggle it on or off. (In Flash, the
Application frame is on permanently for Mac, and Dreamweaver for Mac does not use an Application frame.)
Hide or show all panels
• (Illustrator, Adobe InCopy®, Adobe InDesign®, Photoshop, Fireworks)To hide or show all panels, including the
Tools panel and Control panel, press
Tab.
• (Illustrator, InCopy, InDesign, Photoshop) To hide or show all panels except the Tools panel and Control panel,
press Shift+Tab.
You can temporarily display hidden panels if Auto-Show Hidden Panels is selected in Interface preferences. It’s
always on in Illustrator. Move the pointer to the edge of the application window (Windows®) or to the edge of the
monitor (Mac
OS®) and hover over the strip that appears.
• (Flash, Dreamweaver, Fireworks) To hide or show all panels, press F4.
Display panel options
❖ Click the panel menu icon in the upper-right corner of the panel.
You can open a panel menu even when the panel is minimized.
16
In Photoshop, you can change the font size of the text in panels and tool tips. In the Interface preferences, choose a
size from the UI Font Size menu.
(Illustrator) Adjust panel brightness
❖ In User Interface preferences, move the Brightness slider. This control affects all panels, including the Control
panel.
Reconfigure the Tools panel
You can display the tools in the Tools panel in a single column, or side by side in two columns. (This feature is not
available in the Tools panel in Fireworks and Flash.)
In InDesign and InCopy, you also can switch from single-column to double-column (or single-row) display by setting
an option in Interface preferences.
❖ Click the double arrow at the top of the Tools panel.
Manage windows and panels
You can create a custom workspace by moving and manipulating Document windows and panels. You can also save
workspaces and switch among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior.
Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the
products.
Rearrange, dock, or float document windows
When you open more than one file, the Document windows are tabbed.
• To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.
• To undock (float or untab) a Document window from a group of windows, drag the window’s tab out of the group.
Last updated 5/2/2011
USING FIREWORKS
Workspace
Note: In Photoshop you can also choose Window > Arrange > Float in Window to float a single Document window,
or Window > Arrange > Float All In Windows to float all of the Document windows at once. See tech note
kb405298
for more information.
Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s
Minimize button to create floating windows (Windows), or choose Window > Tile Vertically to create side-by-side
Document windows. Search “Tile Vertically” in Dreamweaver Help for more information on this topic. The workflow
is slightly different for Macintosh users.
• To dock a Document window to a separate group of Document windows, drag the window into the group.
• To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or
sides of another window. You can also select a layout for the group by using the Layout button on the Application bar.
Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands
in the Window menu to help you lay out your documents.
• To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s
tab for a moment.
Note: Some products do not support this functionality.
Dock and undock panels
A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and
undock panels by moving them into and out of a dock.
17
• To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.
• To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.
• To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock
or make it free-floating.
Navigator panel being dragged out to new dock, indicated by blue vertical highlight
Last updated 5/2/2011
USING FIREWORKS
Workspace
Navigator panel now in its own dock
You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets
the edge of the workspace.
Move panels
As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can
move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you
drag to an area that is not a drop zone, the panel floats freely in the workspace.
18
Note: The position of the mouse (rather than the position of the panel), activates the drop zone, so if you can’t see the drop
zone, try dragging the mouse to the place where the drop zone should be.
• To move a panel, drag it by its tab.
• To move a panel group, drag the title bar.
A
B
C
Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group.
A. Title bar B. Tab C. Drop zone
Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while
moving the panel to cancel the operation.
Add and remove panels
If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge
of the workspace until a drop zone appears.
• To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from
the Window menu.
• To add a panel, select it from the Window menu and dock it wherever you want.
Last updated 5/2/2011
USING FIREWORKS
Workspace
Manipulate panel groups
• To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.
Adding a panel to a panel group
• To rearrange panels in a group, drag a panel’s tab to a new location in the group.
• To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.
• To move a group, drag the title bar (the area above the tabs).
Stack floating panels
When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you
to position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unit
when you drag the topmost title bar.
19
Free-floating stacked panels
• To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.
• To change the stacking order, drag a panel up or down by its tab.
Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.
• To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.
Resize panels
• To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also double-click the
tab area (the empty space next to the tabs).
• To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized
by dragging.
Collapse and expand panel icons
You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the
default workspace.
Last updated 5/2/2011
USING FIREWORKS
Workspace
Panels collapsed to icons
20
Panels expanded from icons
• To collapse or expand all panel icons in a column, click the double arrow at the top of the dock.
• To expand a single panel icon, click it.
• To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text
disappears. To display the icon text again, make the dock wider.
• To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.
In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences,
an expanded panel icon collapses automatically when you click away from it.
• To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically
collapsed to icons when added to an icon dock.)
• To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into
other docks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating
icons).
Working with ConnectNow
Adobe® ConnectNow provides you with a secure, personal online meeting room where you can meet and collaborate
with others via the web in real time. With ConnectNow, you can share and annotate your computer screen, send chat
messages, and communicate using integrated audio. You can also broadcast live video, share files, capture meeting
notes, and control an attendee's computer.
You can access ConnectNow directly from the application interface.
1 Choose File > Share My Screen.
2 In the Sign In to Adobe CS Live dialog box, enter your email address and password, and click Sign In. If you don’t
have an Adobe ID, click the Create Adobe ID button.
Last updated 5/2/2011
USING FIREWORKS
Workspace
3 To share your screen, click the Share My Computer Screen button at the center of the ConnectNow application
window.
For complete instructions on using ConnectNow, see Adobe ConnectNow Help.
For a video tutorial about using ConnectNow, see Using ConnectNow to share your screen (7:12). (This
demonstration is in Dreamweaver.)
Save and switch workspaces
By saving the current size and position of panels as a named workspace, you can restore that workspace even if you
move or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar.
Save a custom workspace
1 With the workspace in the configuration you want to save, do one of the following:
• (Illustrator) Choose Window > Workspace > Save Workspace.
• (Photoshop, InDesign, InCopy) Choose Window > Workspace > New Workspace.
• (Dreamweaver) Choose Window > Workspace Layout > New Workspace.
• (Flash) Choose New Workspace from the workspace switcher in the Application bar.
• (Fireworks) Choose Save Current from the workspace switcher in the Application bar.
2 Type a name for the workspace.
3 (Photoshop, InDesign) Under Capture, select one or more options:
Panel Locations Saves the current panel locations (InDesign only).
21
Keyboard shortcuts Saves the current set of keyboard shortcuts (Photoshop only).
Menus or Menu Customization Saves the current set of menus.
Display or switch workspaces
❖ Select a workspace from the workspace switcher in the Application bar.
In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly.
Delete a custom workspace
• Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then
click Delete. (The option is not available in Fireworks.)
• (Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher.
• (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete icon.
• (Photoshop, InDesign) Choose Window > Workspace > Delete Workspace, select the workspace, and then click
Delete.
Restore the default workspace
1 Select the Default or Essentials workspace from the workspace switcher in the application bar. For Fireworks, see
the article
Note: In Dreamweaver, Designer is the default workspace.
http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.
Last updated 5/2/2011
USING FIREWORKS
Workspace
2 For Fireworks (Windows), delete these folders:
Windows Vista \\Users\<username>\AppData\Roaming\Adobe\Fireworks CS4\
Windows XP \\Documents and Settings\<username>\Application Data\Adobe\Fireworks CS4
3 (Photoshop, InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name].
(Photoshop) Restore a saved workspace arrangement
In Photoshop, workspaces automatically appear as you last arranged them, but you can restore the original, saved
arrangement of panels.
• To restore an individual workspace, choose Window > Workspace > Reset Workspace Name.
• To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface
preferences.
To rearrange the order of workspaces in the application bar, drag them.
The Tools panel
The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View. When you select a
tool, the Property inspector displays tool options.
22
Last updated 5/2/2011
USING FIREWORKS
Workspace
Display tool options in the Property inspector
❖ With a tool selected, choose Select > Deselect to deselect all objects on the canvas.
Select a tool from a tool group
A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a tool group.
1 Click the tool icon and hold down the mouse button.
2 Drag the pointer to highlight the tool you want, and release the mouse button.
To quickly select a hidden tool, repeatedly press the group keyboard shortcut until the tool you want appears.
(Shortcuts are displayed in parentheses next to tool names.)
23
The Property inspector
The Property inspector is a context-sensitive panel that displays current selection properties, current tool options, or
document properties. By default, the Property inspector is docked at the bottom of the workspace.
The Property inspector can be open at half height, displaying two rows of properties, or at full height, displaying four
rows. You can also fully collapse the Property inspector while leaving it in the workspace.
Note: In Windows, the Options menu is available only when the Property inspector is docked.
Undock the Property inspector
❖ Drag the panel tab to another part of the workspace.
Dock the Property inspector at the bottom of the workspace
❖ Drag the panel tab to the bottom of the screen.
Expand or collapse the Property inspector
❖ Do one of the following:
• Double-click the panel tab.
Last updated 5/2/2011
USING FIREWORKS
Workspace
• Click the arrow in the upper-left corner of the panel.
Display and move toolbars (Windows only)
Show or hide a toolbar
❖ Choose Window > Toolbars, and select either of the following:
Main Displays a toolbar above the document window with buttons for common file commands such as Open, Save,
Print, and Copy.
Modify Displays a toolbar below the document window with buttons for object grouping, arrangement, alignment,
and rotation commands.
Undock a toolbar
❖ Drag the toolbar away from its docked location.
Dock a toolbar (Windows only)
❖ Drag the toolbar onto a docking area at the top of the application window until the placement preview rectangle
appears.
24
Lock editing during save operation
Editing a document during a save operation causes Fireworks to stop responding. When you set AsynchronousSave
to true in the
however, continue to work on other open Fireworks documents.
Objects that get updated during the save operation do not get updated in the AsynchronousSave mode. Set
AsynchronousSave=false in the
Save Time Stamp is not updated when AsynchronousSave=True.
By default, the asynchronous option is set to true for Windows, and false for Mac.
1 Locate preferences.txt file. In Windows, the file is present in \\<user name>\Application
Data\Adobe\Fireworks CS5\English\Fireworks CS5 Preferences. In Mac OS, the file is present in /<user
name>/Library/Preferences/Adobe Fireworks CS5/en/Fireworks CS5 Preferences.
2 Set AsynchronousSave = true in the file.
3 Save the file.
preferences.txt file, Fireworks locks the file for editing until the save operation completes. You can
preferences.txt file when working with such objects. For example, the autoshape
Last updated 5/2/2011
Loading...