Macromedia Fireworks - MX User Guide

Using Fireworks MX
®
Using Fireworks MX
macromedia
Trademarks
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words or phrases mentioned within this publication may be trademarks, servicemarks, or tradenames of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally.
This guide contains links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party Web site mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.
Apple Disclaimer APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED
COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE.
Copyright © 2002 Macromedia, Inc. All rights reserved. U.S. Patents 5,353,396, 5,361,333, 5,434,959, 5,467,443, 5,500,927, 5,594,855 and 5,623,593. Portions of the software licensed under U.S. Patent No. 4,558,302 and foreign counterparts. Other patents pending. Portions Copyright 1988, 2000 Aladdin Enterprises. All rights reserved. This software is based in part on the work of the Independent JPEG Group. Portions Copyright 1998 Soft Horizons. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of Macromedia, Inc. Part Number ZFW60M100
Acknowledgments
Writing: Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price Editing: Rosana Francescato Project management: Stuart Manning Production: Caroline Branch, John Francis, Patrice O’Neill Photography: Chris Basmajian Multimedia: Aaron Begley
First Edition: June 2002
Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

CONTENTS

INTRODUCTION
Getting Started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installing Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
What’s new in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
CHAPTER 1
Graphic Design Basics Tutorial
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
What you’ll learn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
What you should know . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Copy the Tutorials folder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
View the completed file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Create and save a new document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Explore the Fireworks work environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Create and edit vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Import a bitmap and select pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Add and edit Live Effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Work with layers and objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Create and edit a mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Create and edit text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Export the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Take the next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
CHAPTER 2
Web Design Basics Tutorial
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
What you’ll learn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
What you should know . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Copy the Tutorials folder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
View the completed web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Open the source file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Import a graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Slice the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Create a drag-and-drop rollover. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Create and edit buttons to make a navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Create and edit a pop-up menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Optimize the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Export HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Test the completed file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Take the next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
3
CHAPTER 3
Fireworks Basics
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
About vector and bitmap graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
About working in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Creating a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Opening and importing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Saving Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
The Fireworks work environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Changing the canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
CHAPTER 4
Selecting and Transforming Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Selecting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Selecting pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Editing selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Transforming and distorting selected objects and selections. . . . . . . . . . . . . . . . . . . . . 116
Organizing objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
CHAPTER 5
Working with Bitmaps
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Working with bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Creating bitmap objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Drawing, painting, and editing bitmap objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Retouching bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Adjusting bitmap color and tone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Blurring and sharpening bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
CHAPTER 6
Working with Vector Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Drawing vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Editing paths. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
CHAPTER 7
Using Text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Entering text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Editing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Applying strokes, fills, and effects to text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Attaching text to a path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Transforming text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Converting text to paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Importing text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Contents4
CHAPTER 8
Applying Color, Strokes, and Fills
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Using the Colors section of the Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Organizing swatch groups and color models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Using color boxes and color pop-up windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Working with strokes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Working with fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Applying gradient and pattern fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Adding texture to strokes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
CHAPTER 9
Using Live Effects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Applying Live Effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Editing Live Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
CHAPTER 10
Layers, Masking, and Blending
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Working with layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Masking images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Blending and transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
CHAPTER 11
Using Styles, Symbols, and URLs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Using styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Using symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Working with URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
CHAPTER 12
Slices, Rollovers, and Hotspots
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Creating and editing slices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Making slices interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Working with hotspots and image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
CHAPTER 13
Creating Buttons and Pop-up Menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Creating button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Creating navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Creating pop-up menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
CHAPTER 14
Creating Animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Building animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Working with animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Working with frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Tweening. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Previewing an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Exporting your animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Working with existing animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Using multiple files as one animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Contents 5
CHAPTER 15
Optimizing and Exporting
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
About optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Using the Export Wizard. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Optimizing in the workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Exporting from Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Using the Quick Export button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
CHAPTER 16
Using Fireworks with Other Applications
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Working with Macromedia Dreamweaver MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Working with Macromedia Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Working with Macromedia FreeHand. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Working with Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Working with Macromedia HomeSite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Working with Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Working with Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
About working with Adobe GoLive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
About working with HTML editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
CHAPTER 17
Automating Repetitive Tasks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Using the Project Log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
CHAPTER 18
Preferences and Keyboard Shortcuts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Setting preferences. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Changing keyboard shortcut sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Working with configuration files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
INDEX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Contents6
INTRODUCTION

Getting Started

Macromedia Fireworks MX is the solution for professional web graphics design and production. It is the first production environment to address and solve the special challenges facing web graphics designers and developers.
You can use Fireworks to create, edit, and animate web graphics, add advanced interactivity, and optimize images in a professional environment. In Fireworks, you can create and edit both bitmap and vector graphics in a single application. Everything is editable, all the time. And you can automate the workflow to meet the demands of time-consuming updates and changes.
Fireworks integrates with other Macromedia products such as Dreamweaver, Flash, FreeHand, and Director, as well as your other favorite graphics applications and HTML editors, to provide a true integrated web solution. You can easily export Fireworks graphics with HTML and JavaScript code customized for the HTML editor you’re using.

System requirements

Before installing Fireworks, make sure your computer is equipped with the following hardware and software.

Microsoft Windows™

300MHz Intel
Windows 98 SE, ME, NT
64 MB of available RAM (128 MB recommended) plus 80 MB of available disk space
800-by-600-pixel resolution, 256-color display or better
Adobe Type Manager
CD-ROM drive
®
Pentium® II Processor
®
4 (Service Pack 6), 2000, or XP
®
Version 4 or later for use with Type 1 fonts
Macintosh
®
Power Macintosh G3 Processor, running OS 9.1 or later, or OS X version 10.1 or later
64 MB of available RAM (128 MB recommended) plus 80 MB of available disk space
800-by-600-pixel resolution, 256-color display or better
Adobe Type Manager Version 4 or later for use with Type 1 fonts (OS 9.x only)
CD-ROM drive
7

Installing Fireworks

Be sure to read the ReadMe document on the Fireworks CD-ROM for late-breaking information or instructions.
To install Fireworks:
1 Insert the Fireworks CD into your computer’s CD-ROM drive. 2 Do one of the following:
In Windows, the Fireworks installation program starts automatically. If it doesn’t start, choose
Start > Run. Click Browse and choose the Setup.exe file on the Fireworks CD. Click OK in the Run dialog box.
On the Macintosh, double-click the Fireworks Installer icon.
3 Follow the onscreen instructions.
The installation program prompts you to enter required information.
4 If prompted, restart your computer.

Running Fireworks on systems connected by a network

Macromedia uses network license detection to prevent copies of Fireworks with the same serial number from running on multiple systems that are connected by a local area network.
If you attempt to launch Fireworks and more than the allowed number of users defined by the license are also running Fireworks on the same network, you will be alerted of the license restriction.
If you believe you’ve received this message in error, or you would like to obtain additional licenses for the product, contact Macromedia Technical Support at http://www.macromedia.com/ support/email/.

Viewing the files installed with Fireworks

At some point you may need to view or access the files installed with Fireworks. During installation, Fireworks places files in various locations on your system. It’s important to understand where these files reside and why. For more information, see “Working with configuration files” on page 423.
Macintosh users should pay special attention to the new format Fireworks uses to store the application and its default configuration files. For more information, see “Viewing package contents (Macintosh only)” on page 427.

Learning Fireworks

A variety of resources are available for learning Fireworks, including a printed quick-start manual (Getting Started with Fireworks MX), a help system you can launch from the application, a PDF version of the complete Fireworks documentation, and several web-based information sources.
Fireworks Help is available whenever the Fireworks application is active, and contains the
complete Fireworks documentation. Choose Help > Using Fireworks to open Fireworks Help. Mac OS X users choose Help > Fireworks Help.
Introduction8
Fireworks tutorials
provide an interactive introduction to the key features in Fireworks that you can complete in about an hour each. They include common Fireworks tasks such as using the drawing and editing tools, optimizing images, and creating interactive elements such as rollovers and navigation bars.
The Answers panel is a central location where you can find tutorials, TechNotes, and the most
up-to-date information about Fireworks, all in one place. The Answers panel is dynamic; with just the click of a button you can get the latest updates and information about Fireworks directly from Macromedia.
The Fireworks application itself contains many dialog boxes and tooltips designed to assist you in
using the program. Tooltips appear when your pointer pauses over a user interface element.
Getting Started with Fireworks MX includes overview information about basic Fireworks features. The Using Fireworks MX PDF is a searchable, printable document containing the complete
Fireworks documentation. The PDF is available on the installation CD and on the Macromedia website at http://www.macromedia.com.
Macromedia’s website is updated regularly with the latest information on Fireworks in addition
to advice from expert users, advanced topics, examples, tips, and updates. Check Macromedia’s website for news on Fireworks and how to get the most out of the program at http:// www.macromedia.com/support/fireworks.
The Fireworks discussion group provides a lively exchange for Fireworks users, technical support
representatives, and the Fireworks development team. Use a newsgroup reader to go to news:// forums.macromedia.com/macromedia.fireworks.
Extending Fireworks MX includes information about writing JavaScript to automate Fireworks
tasks. Every command or setting in Fireworks can be controlled using special JavaScript commands that Fireworks can interpret. A PDF version of Extending Fireworks MX is available on the CD and on the Macromedia website at http://www.macromedia.com/support/fireworks/ extend.html.

Registering Fireworks

To get additional Macromedia support, it’s a good idea to register your copy of Macromedia Fireworks, electronically or by mail.
When you register, you will be put on the priority list to receive up-to-the-minute notices about upgrades and new Macromedia products. You will receive timely e-mail notices about product updates and new content appearing on both the www.macromedia.com and the www-euro.macromedia.com websites.
To register your copy of Fireworks, do one of the following:
Choose Help > Online Registration and fill out the electronic form.
Choose Help > Mail Registration, print the form, and mail it to the address shown on the form.
Getting Started 9

What’s new in Fireworks

New features in Fireworks MX make it an increasingly approachable application with enhanced power to create graphics and interactivity for websites. Fireworks MX maximizes productivity for seasoned veteran web designers, HTML developers who also work with graphics, and emerging web developers who need to develop graphics-rich, interactive web pages with little or no coding or JavaScript knowledge.
Fireworks MX has undergone a major refinement, with a streamlined user interface, more powerful button and pop-up menu capabilities, and intuitive bitmap and vector tools. Integration with other Macromedia applications—as well as third-party applications—makes it easy to bring various file formats into Fireworks and send them to other applications smoothly as you work. Also new to Fireworks is the ability to create JavaScript commands with Macromedia Flash that appear in Fireworks MX as panels or dialog boxes.

Ease-of-use features

A comfortable, intuitive work environment—including a Property inspector and tools that work the way professionals would expect—make Fireworks MX an easy application to learn and get to work quickly. Fireworks MX has a new look that is better organized and more consistent with other applications in the Macromedia MX Studio.
Panel management enhancements include the ability to place panels in groups, then collapse the
groups so that only the panel group title bar is visible until you need to use the panels. You can dock the panel groups in a panel docking area to organize your workspace or drag groups or individual panels anywhere in the workspace. For more information, see “Organizing panel groups and panels” on page 85.
The Property inspector is a dynamic panel full of options that change as you do your work. Open
a document, and the Property inspector displays document properties such as canvas color and size. Choose a tool from the Tools panel, and the Property inspector displays tool options. Select a vector object, and it displays stroke and fill information.
You can change these and other options—including Live Effects, blending modes, and opacity— directly from the Property inspector, instead of having to click to open or activate panel after panel. The Property inspector—familiar to Macromedia Dreamweaver and Flash users—reduces the number of panels in the workspace. For more information, see “Using the Property inspector” on page 83.
Modeless bitmap and vector editing eliminates the need to constantly keep up with vector and
bitmap modes. Choosing a tool or selecting an object type automatically determines whether you will be creating and editing bitmaps, vectors, or text.
Bitmap-editing enhancements give you intuitive capabilities to create bitmaps by cutting or
copying and pasting, to move marquee selections among bitmaps, and to fine-tune images with a new group of image-retouching tools. Also, common selection commands are organized in a new Selection menu.
Tools panel sections that separate the tools used for creating and editing bitmaps, vectors, and
web objects offer cues for intuitively choosing the proper tool and achieving predictable creative results. Other tools and tool features are separated into Select, Colors, and View categories. For more information, see “Using the Tools panel” on page 82.
The Quick Export button displays convenient options for exporting a variety of file formats or
HTML styles, or launching other Macromedia products from the document window, eliminating setup time and streamlining the workflow. For more information, see “Using the Quick Export button” on page 359.
Introduction10
Onscreen text
allows you to visually integrate text and graphics without having to use the Text Editor. Simply choose the Text tool, click on the canvas, and start typing. In the Property inspector, you can either set text attributes for the Text tool before you begin typing or highlight existing text and format it. Fireworks MX has a range of new text and paragraph controls to format text. For more information, see “Using Text” on page 171.
Variable zooming lets you drag the Magnify tool to determine the precise magnification amount.
After you drag to magnify your document, the magnification amount is displayed in the Set Magnification text box at the bottom of the document.
Windows XP and Macintosh OS X compatibility takes advantage of the latest operating systems.
Fireworks MX is fully carbonized to support all the OS X user-interface improvements.
XHTML exporting allows you to export, update, and roundtrip XHTML in all the same styles
Fireworks offers for HTML. You can roundtrip legacy documents that have been converted to XHTML in Dreamweaver MX.
The Answers panel, a new feature in Fireworks MX, Dreamweaver MX, and Flash MX, is an
updatable link to web content, conveniently located in the Fireworks workspace. When you are online, you can click the Update button and download fresh reference information from Macromedia, or search online databases for documentation such as TechNotes.
The spell-checker searches every text block in your document for misspelled words. When it
finds a word it doesn’t recognize, it offers suggestions for correcting it or allows you to add it to your dictionary.
Cross-platform font caching makes it easy to share files among work groups and clients without
worrying about cross-platform font issues. Fireworks maintains the appearance of all text in a document on systems that do not have the fonts in the document.

Power enhancement features

Fireworks MX has a series of powerful new creativity and automation features that emerging web designers will find easy to use and experienced developers will appreciate. These features make Fireworks an essential part of the web designer and developer process from concept to integration.
The Data-driven Graphics Wizard allows you to assign variables to text, images, hotspots, and
slices, and then generate multiple documents based on the original, each with unique information taken from a comma-delimited or XML database file.
The Nav Bar Builder on the Commands menu automates the process of quickly creating
navigation bars using convenient Fireworks MX button symbols. You can select an instance of a button symbol, and then choose the number of copies to make, choose vertical or horizontal orientation and spacing, and assign button labels and URLs in an integrated dialog box.
Pop-up Menu Editor enhancements have added creative control to the most popular new feature
in Fireworks 4. Now you can create a horizontal or vertical pop-up menu, and determine border characteristics, cell spacing, and cell size independently from text size. You can also set placement of menus relative to the trigger object as well as placement of submenus relative to the trigger menu item or main pop-up menu. Fireworks automatically generates JavaScript code for you; exported menus are fully compatible with Dreamweaver MX. For more information, see “Creating pop-up menus” on page 299.
Getting Started 11
Instance-level button symbol editing
lets you create a button symbol and then easily differentiate individual buttons with unique text, URLs, and targets using the Property inspector. Meanwhile, you can edit other graphical characteristics at the symbol level, and have the edits update across all button instances without affecting the instance-level properties. For more information, see “Creating button symbols” on page 289.

Open workflow features

You need not be confined by someone else’s workflow. Using Fireworks MX, you can integrate graphic production into your development process with an open, efficient workflow that recognizes and supports the file formats, applications, and standards you use.
JavaScript commands with SWF interface take JavaScript command creation to a higher level.
Developers can create and execute complex commands to extend and automate Fireworks MX by combining Fireworks JavaScript extensibility API with interfaces developed in Flash MX using components and ActionScript. For more information, see Extending Fireworks MX, available as a PDF on the installation CD and at http://www.macromedia.com/support/fireworks/extend.html.
Macromedia Exchange support means that users—even those who are not interested in creating
JavaScript commands—can download user-created commands from the Exchange. The commands appear in the Fireworks MX workspace as easy-to-use panels or dialog boxes. Fireworks MX ships with several user-created commands in the Commands menu, as well as a user-created Align panel in the Window menu.
Slice table layout controls let you define and optimize slice table layouts by dragging slice guides.
Fireworks automatically resizes attached slices, adding and deleting slices as needed. For more information, see “Moving slice guides to edit slices” on page 271.
The Reconstitute Tables feature instantly builds a new Fireworks PNG source file when you
point to any HTML file containing tables with image slices. Macromedia Fireworks and Dreamweaver behaviors such as image rollovers and pop-up menus are imported and attached to the appropriate slices.
This comes in handy when you are working on existing website projects and the only available files are the posted HTML pages. You can bring the HTML files into Fireworks and create PNG source files from them. For more information, see “Creating Fireworks PNG files from HTML files” on page 76.
Roundtrip Photoshop 6 text allows you to open a Photoshop 6 or 7 file with editable text intact,
so the graphic can be edited and then exported back to the Photoshop format, while maintaining the correct text appearance and editability. For more information, see “About importing text from Photoshop” on page 393.
Roundtrip with Microsoft FrontPage is available with a click of the Quick Export button. Launch
and Edit tables work on the original file in Fireworks; the tables are updated in FrontPage without losing code changes that have been made in FrontPage. For more information, see “Exporting Fireworks HTML to FrontPage” on page 390.
Macromedia Sitespring integration puts best practices in production and client management in
the Fireworks MX workspace. Simply choose Window > Sitespring to open the Sitespring window. For more information, consult the Sitespring documentation.
Introduction12
CHAPTER 1

Graphic Design Basics Tutorial

This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX. You’ll get hands-on experience using the industry’s leading web graphics application and learn basic graphic design concepts along the way.
If you are already familiar with designing graphics in Fireworks, you may want to proceed to the “Web Design Basics Tutorial” on page 41, where you’ll learn about designing web pages with Fireworks.

What you’ll learn

By taking this tutorial, in less than an hour you’ll accomplish the tasks required to create an ad for classic rental cars using Fireworks. You will learn to do the following:
Copy the Tutorials folder
View the completed file
Create and save a new document
Explore the Fireworks work environment
Create and edit vector objects
Import a bitmap and select pixels
Add and edit Live Effects
Work with layers and objects
Create and edit a mask
Create and edit text
Export the document

What you should know

Although this tutorial is designed for beginning Fireworks users, it covers many new features in Fireworks, so experienced Fireworks users can benefit from it too. You don’t need to be a graphic designer to perform this tutorial, but you should possess basic computer skills and be able to use common desktop applications. This includes knowing how to browse for files and folders on your hard disk.
13

Copy the Tutorials folder

Before you begin, you’ll make a copy of the Tutorials folder, so that you can save the results of your work while allowing you or another user to complete the tutorial at a later time using the original files.
1 Navigate to the Fireworks application folder on your hard disk.
Note: If you are unable to view your Fireworks application folder, you may have limited access to files on your system. You can download the files you need for this tutorial from the Fireworks Support Center on the web at http://www.macromedia.com/support/fireworks/.
2 Drag a copy of the Tutorials folder to your desktop.

View the completed file

View the completed tutorial file to see what your finished project will look like.
1 Launch your web browser. 2 On your hard disk, navigate to the Tutorials folder you copied to your desktop, and browse to
Tutorial1/Complete.
Note: Some versions of Microsoft Windows hide extensions for known file types by default. If you have not changed this setting, the files in the Complete folder won’t display extensions. When dealing with web graphics, it’s best to be able to see file extensions. See Windows Help for information about how to turn file extensions back on.
3 Select the final.jpg file and drag it to the open browser window.
For this tutorial, you will use Fireworks to design and export a copy of this ad for classic rental cars.
Note: The Complete folder also includes the Fireworks document from which this JPEG file was generated. To view the document, double-click final.png.

Create and save a new document

Now that you’ve viewed the final.jpg file, you’re ready to begin your project.
1 In Fireworks, choose File > New.
The New Document dialog box opens.
Chapter 114
2 Enter 480 for the width and 214 for the height. Ensure that both measurements are in pixels
and that the canvas color is white, and click OK. A document window opens, with a title bar that reads Untitled-1.png (Windows) or
Untitled-1 (Macintosh).
3 If the document window isn’t maximized, that is, if it doesn’t fill the center of the screen,
maximize it by clicking the maximize button (Windows) or the zoom box (Macintosh) at the top of the document window. This will give you plenty of room to work.
4 Choose File > Save As.
The Save As (Windows) or Save (Macintosh) dialog box opens.
5 Browse to the Tutorials/Tutorial1 folder on your desktop. 6 Name the file vintage. 7 Choose the Add Filename Extension option if it’s not already selected (Macintosh only). 8 Click Save.
The title bar displays the new filename with a PNG extension. PNG is the native file format for Fireworks. The PNG file is your source file; it is where you’ll do all of your work in Fireworks. At the end of this tutorial, you’ll learn how to export your document to another format for use on the web.
As you complete the tutorial, remember to save your work frequently by choosing File > Save.
Note: While completing the tutorial, you may find it useful to undo a change you’ve made. Fireworks can undo several of your recent changes, depending on the number of undo steps you have set in Preferences. To undo the most recent change, choose Edit > Undo.
Graphic Design Basics Tutorial 15

Explore the Fireworks work environment

Before you continue, examine the elements that make up the Fireworks work environment:
In the center of the screen is the document window. In the center of the document window is
the canvas. This is where the Fireworks document and any graphics you create are displayed.
At the top of the screen is a menu bar. Most Fireworks commands are accessible from the
menu bar.
On the left side of the screen is the Tools panel. If the Tools panel isn’t visible, choose Window
> Tools. The Tools panel is where you’ll find tools for selecting, creating, and editing a variety of graphic items and web objects.
At the bottom of the screen is the Property inspector. If the Property inspector isn’t visible,
choose Window > Properties. The Property inspector displays properties for a selected object or tool. You can change these properties. If no objects or tools are selected, the Property inspector displays document properties.
The Property inspector displays either two or four rows of properties. If the Property inspector is at half height, that is, displaying only two rows, you can click the expander arrow in the lower right corner to see all properties.
Expander arrow at half height state
Chapter 116
On the right side of the screen are a variety of panels, such as the Layers panel and Optimize
panel. You can open these and other panels from the Window menu.
Move your pointer over the various interface elements. If you hold the pointer over an item on
the interface long enough, a tooltip appears. Tooltips identify tools, menus, buttons, and other interface features throughout Fireworks. Tooltips disappear when you move the pointer away from the interface elements they identify.
You’ll learn more about each of these elements as you progress through the tutorial.

Create and edit vector objects

With Fireworks, you can create and edit two kinds of graphics: vector objects and bitmap images. A vector object is a mathematical description of a geometric form. Vector paths are defined by
points. Vector paths do not show a degradation in quality when you zoom in on them or scale them larger or smaller. The leaf in the illustration below is a collection of vector objects. Notice how smooth the leaf’s edges appear even when you zoom in.
In contrast, a bitmap image is made up of a grid of colored pixels. Images with complex color variations, such as photographs, are most often bitmap images.
While many applications offer tools to edit either vector shapes or bitmap images, Fireworks lets you work with both types of graphics. You will work with vector graphics in this section.
Graphic Design Basics Tutorial 17

Create vector objects

Now you’ll create two of the graphical elements for your document. First you’ll create a blue rectangle that will be positioned at the bottom of the document. Then you will create a rectangle that will act as a border for the contents of the canvas.
1 Choose the Rectangle tool in the Vector section of the Tools panel.
2 In the Property inspector, click the Fill Color box.
The Fill Color pop-up window opens.
3 Ty p e 333366 in the text box at the top of the window, then press Enter.
The Fill Color box changes to a dark blue color to reflect your color choice.
4 In the document window, position the cross-hair pointer over the canvas, and drag downward
and to the right to create a rectangle. You can draw the rectangle anywhere on the canvas. You’ll resize and position it later in this procedure.
5 When you release the mouse button, a dark blue rectangle appears, selected, in the area
you defined. You can tell when an object is selected because it displays blue corner points. Most objects also
have a blue highlight around their outer edges, but rectangles are an exception.
Chapter 118
6 In the lower left corner of the Property inspector, enter 480 in the width box and 15 in the
height box, then press Enter. The rectangle is resized to fit the specified dimensions.
7 Choose the Pointer tool in the Select section of the Tools panel. 8 Drag the rectangle so that it is positioned at the bottom of the canvas, as shown below. Use the
arrow keys for exact placement.
9 Choose the Rectangle tool again, and draw a second rectangle. Draw it anywhere on the canvas,
and make it any size you want. You’ll change its properties and position in the next section.

Set object properties

Here, you’ll edit the second rectangle you created by changing its size, position, and color in the Property inspector.
1 With the rectangle still selected, click the Stroke Color box in the Property inspector and enter
CCCCCC as the color value. Press Enter to apply the change.
2 Set the Tip Size to 1 by dragging the pop-up slider or typing in the text box.
3 Click the Fill Color box in the Property inspector and click the Transparent button.
Graphic Design Basics Tutorial 19
4 In the Property inspector, enter the following values in the width, height, and coordinate
boxes. Then click outside the Property inspector to apply your changes.
Width: 480
Height: 215
X: 0
Y: 0
The rectangle becomes a gray border around the edge of the canvas.
If your system uses gray as the color for the window background, it may be difficult for you to see the rectangle at this point. But don’t worry, it’s still there.
5 Choose the Pointer tool and click anywhere away from the rectangle to deselect it.
The properties change in the Property inspector. Because no objects are selected, you now see document properties instead of object properties.

Import a bitmap and select pixels

Next you will import a bitmap image and create a floating selection from its pixels.

Import an image

You will modify an image of a classic automobile. First you need to import the image.
1 Choose File > Import and navigate to the Tutorials folder on your desktop. Browse to the
Tutorial1/Assets folder.
2 Select car.jpg and click Open.
Chapter 120
3 Align the insertion pointer with the upper left corner of the canvas and click, as shown in the
following illustration.
The image appears, selected, on the canvas.
4 Click anywhere outside the selected image to deselect it.

Create a pixel selection

Next you’ll select the pixels that make up the car in the image you imported, and copy and paste the pixels as a new object.
1 Choose the Zoom tool in the View section of the Tools panel.
Zoom tool
2 Click once on the image.
The view is magnified to 150%. Zooming in allows you to better see what you are selecting and gives you finer control over your selection.
3 Click and hold down the mouse button on the Lasso tool in the Bitmap section of the Tools
panel. Choose the Polygon Lasso tool from the pop-up menu that appears.
The Polygon Lasso tool allows you to draw a selection around pixels using a series of straight lines. You’ll use the Polygon Lasso tool to select the pixels that make up the car image.
4 In the Property inspector, set the Edge option to Anti-alias.
Graphic Design Basics Tutorial 21
5 Click with the Polygon Lasso tool pointer on the top edge of the car, then click repeatedly
around the edge of the car to continue the selection.
6 Complete the selection by moving the pointer over the spot where you started the selection. A
small gray square appears beside the Polygon Lasso pointer to indicate you are about to complete the selection. Click to complete the selection.
A marquee border appears around the pixels you selected.
7 Choose Edit > Copy.
The selection is copied to the Clipboard.
8 Choose Edit > Paste.
The car image is pasted into the document as a new bitmap object.
9 Choose the Pointer tool and double-click anywhere outside the bitmap to deselect it. 10 Click the Set Magnification pop-up menu at the bottom of the document window and return
the view to 100%.
Chapter 122

Add and edit Live Effects

Next you’ll apply Live Effects to the original bitmap image. You’ll change the image’s hue and saturation and apply a blur.
1 Click anywhere on the desert image. (Be careful not to click on the car, however.)
2 In the Property inspector, click the Add Effects button (the button with the plus (+) sign).
Delete Effects button
Add Effects button
3 Choose Adjust Color > Hue/Saturation from the Effects pop-up menu.
The Hue/Saturation dialog box opens.
Graphic Design Basics Tutorial 23
4 Choose the Colorize option and click OK.
The image becomes colorized on the canvas, and the effect is added to the Live Effects list in the Property inspector. Live Effects are editable; you can always add to this list, delete the effect, or edit the effect.
5 Double-click the Hue/Saturation effect to edit it.
Tip: Alternatively, you can click the info button beside the effect.
The Hue/Saturation dialog box opens again.
6 Change the Hue to 25 and the Saturation to 20, and click OK.
The image’s hue and saturation levels change to display a sepia appearance, as in an old photograph.
7 Click the Add Effects button again to add another Live Effect. 8 Choose Blur > Blur More from the Effects pop-up menu.
The pixels of the selected bitmap become blurred, and the new effect is added to the Live Effects list in the Property inspector.

Work with layers and objects

Layers divide a Fireworks document into discrete planes. A document can be made up of many layers, and each layer can contain many objects. In Fireworks, the Layers panel lists layers and the objects contained in each layer.
Using the Layers panel, you can name, hide, show, and change the stacking order of layers and objects, as well as merge bitmaps and apply bitmap masks. You can also add and delete layers using the Layers panel.
In this part of the tutorial, you’ll use the Layers panel to merge the two bitmap images. Then you’ll name the objects in your document. You’ll also use the Layers panel to change the stacking order of objects.
Later in the tutorial you’ll use the Layers panel to apply a mask to the merged image.
Chapter 124

Merge bitmaps

Now that you’ve applied Live Effects to the background image, you will merge it with the grayscale car image to create a single bitmap.
1 If the Layers panel is minimized or isn’t visible, click its expander arrow or choose
Window > Layers.
Expander arrow
2 Click the thumbnail of the grayscale car image in the Layers panel. 3 With the car image selected, click the Options pop-up menu icon at the upper right of the
Layers panel.
Options pop-up menu icon
Graphic Design Basics Tutorial 25
4 Choose Merge Down.
In the Layers panel, the two bitmap objects merge into one bitmap. In the Property inspector there are no longer any effects in the Live Effects list. This is because
merging down combines the pixels of each bitmap and renders them uneditable as separate images. The Live Effects you apply to an object or bitmap are no longer editable after you perform a merge down with another bitmap.

Name objects

It’s always a good idea to name your objects so you can easily identify them later. When a document gets large and contains many objects, it can be difficult to manage if your objects don’t have unique names.
Here you’ll name the objects in your document using both the Layers panel and the Property inspector.
1 Double-click the word Bitmap beside the image thumbnail in the Layers panel.
A text box appears.
2 Ty p e Classic Car in the text box and press Enter.
The new name is applied to the bitmap object.
3 In the document window, select the gray rectangle that borders the document. If it’s too hard
to see on the canvas, select it in the Layers panel. This time you’ll name an object using the Property inspector.
4 Ty pe Border in the Object Name box of the Property inspector, and press Enter.
The name you enter is also displayed beside the object thumbnail in the Layers panel.
Chapter 126
5 Enter a name for the remaining rectangle object using either the Layers panel or the Property
inspector. Use any name you like, but be sure to choose a name that is meaningful so you can easily identify and manage objects in the document later.

Change the object stacking order

The merged bitmap image overlaps the border object and the blue rectangle. The border and blue rectangle need to rest on top, so you’ll use the Layers panel to change the stacking order of objects in the document.
1 Click the thumbnail of the blue rectangle in the Layers panel to select it. 2 Drag it to the top of Layer 1, above the Classic Car thumbnail.
Note: The topmost layer in the Layers panel is always the Web Layer. You’ll learn more about the Web Layer in “Web Design Basics Tutorial” on page 41.
As you drag, the pointer changes to reflect that you are dragging an object (Windows only). A dark line in the Layers panel indicates where the object will be dropped if you release the mouse button at that time.
3 Release the mouse button.
The blue rectangle is dropped just above the bitmap object in the Layers panel. The stacking order of objects also changes on the canvas. The blue rectangle now overlaps the bitmap object and the border object.
4 You want the border object to be the topmost object, so select its thumbnail and drag it to the
top of the Layers panel, above the blue rectangle.
Graphic Design Basics Tutorial 27

Create and edit a mask

Now that you’ve made various modifications to the classic car image, you’ll perform one last procedure to give it the appearance of becoming gradually transparent.
In Fireworks you can apply two kinds of masks: vector masks and bitmap masks. For this tutorial, you’ll apply a simple bitmap mask to the car image. You’ll then modify it by giving it a gradient fill. The pixels in the mask will either display or hide the car image, depending on their grayscale value.

Apply a mask

First you will apply an empty, white bitmap mask to the car image. A white mask shows a selected object or image, whereas black pixels in a mask hide a selected object or image.
You’ll also paint on the mask to make the car image appear to be fading into the background.
1 With the Pointer tool, select the bitmap image. 2 Click the Add Mask button at the bottom of the Layers panel.
An empty, transparent mask is added to the selected image. You can see the mask has been added by looking at the mask thumbnail in the Layers panel. The yellow highlight around the mask thumbnail indicates it is selected.
Mask thumbnail
Mask object

Edit the mask

Now you will give the bitmap image a transparent appearance by adding a gradient fill to the mask.
1 With the mask thumbnail selected in the Layers panel, click and hold down the mouse button
on the Paint Bucket tool in the Bitmap section of the Tools panel. Choose the Gradient tool from the pop-up menu that appears.
2 Click the Fill Color box in the Property inspector.
The Edit Gradient pop-up window opens.
Chapter 128
3 Choose White, Black from the bottom of the Preset pop-up menu.
The color ramp and swatches change to reflect the new setting. The color swatches located just beneath the color ramp allow you to modify the colors in the gradient.
Color ramp Color swatches
4 Drag the left (white) color swatch about 1/4 of the way to the right to adjust the gradient. 5 Click outside the Edit Gradient pop-up window to close it. 6 On the canvas, drag the Gradient pointer across the bitmap image, as shown in the following
illustration. Visual feedback appears onscreen as you drag, allowing you to define the angle and distance in which the gradient will be applied.
7 Release the mouse button.
The mask is modified with the gradient fill you created. The mask affects the car image by giving it a gradiated transparent appearance.The mask thumbnail in the Layers panel displays the gradient fill you applied.
Graphic Design Basics Tutorial 29
Loading...
+ 417 hidden pages