Macromedia Fireworks - CS3 User Guide

USING FIREWORKS

Adobe® Fireworks® Using Fireworks®

If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.

The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.

Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.

Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.

Adobe, the Adobe logo, Adobe Bridge, Director, Dreamweaver, Flash, Flex Builder, FreeHand, GoLive, HomeSite, Illustrator, Photoshop, and XMP are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Apple and Macintosh are trademarks of Apple Inc., registered in the United States and other countries. Microsoft and Windows are either registered trademarks or trademarks of Microsoft C orporation in the United States and/or other countries. All other trademarks are the property of their respective owners.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users. The Software and Documentation are "Commercial Items," as that term is defined at 48 C.F.R. §2.101, consisting of "Commercial Computer Software" and "Commercial Computer Software Documentation," as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R.

§12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

90079063 (09/06)

Chapter 1: Getting Started

Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Adobe Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

What’s new in Fireworks CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Chapter 2: Fireworks Basics

About working in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

About vector and bitmap graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Creating a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Opening and importing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Saving Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

The Fireworks work environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Chapter 3: Selecting and Transforming Objects

Selecting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Selecting pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Editing selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Transforming and distorting selected objects and selections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Organizing objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

iii

Chapter 4: Working with Bitmaps

Working with bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Creating bitmap objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Accessing photo editing tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Drawing, painting, and editing bitmap objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Retouching bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Adjusting bitmap color and tone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Blurring and sharpening bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Adding noise to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Chapter 5: Working with Vector Objects

Drawing vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Editing paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Chapter 6: Working with Text

Entering text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Formatting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Applying strokes, fills, and filters to text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Attaching text to a path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Transforming text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Converting text to paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Importing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Chapter 7: Applying Color, Strokes, and Fills

Using the Colors section of the Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Organizing swatch groups and color models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Using color boxes and color pop-up windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135

Working with strokes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Working with fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Applying gradient and pattern fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Adding texture to strokes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Chapter 8: Using Live Filters

Applying Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Editing Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Chapter 9: Pages, Layers, Masking, and Blending

Working with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Working with layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Masking images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Blending and transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Chapter 10: Using Styles, Symbols, and URLs

Using styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Using symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Working with URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Chapter 11: Slices, Rollovers, and Hotspots

Creating and editing slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Making slices interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Working with hotspots and image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Chapter 12: Creating Buttons and Pop-up Menus

Creating button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Creating navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

Creating pop-up menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Chapter 13: Creating Animations

Building animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Working with animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Working with frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Previewing an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Exporting your animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Working with existing animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Using multiple files as one animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Chapter 14: Creating Slideshows

The Create Slideshow command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

Building or editing a slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

Slideshow properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

Creating a custom Fireworks album player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

Chapter 15: Optimizing and Exporting

About optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Using the Export Wizard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Optimizing in the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Exporting from Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Sending a Fireworks document as an e-mail attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

Using the File Management button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

Chapter 16: Using Fireworks with Other Applications

Working with Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Working with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Working with FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312

Working with Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Working with HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Working with Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

About working with Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

About working with GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

About working with HTML editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

About extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

About Adobe XMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

About Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Flex integration for rich Internet application layouts (MXML export) . . . . . . . . . . . . . . . . . . . . . . 329

Chapter 17: Automating Repetitive Tasks

Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Flash SWF movies used as Fireworks panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Chapter 18: Preferences and Keyboard Shortcuts

Setting preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

Changing keyboard shortcut sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Working with configuration files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

About reinstalling Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351

Viewing package contents (Macintosh only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

Chapter 1: Getting Started

Adobe® Fireworks® CS3, a unique hybrid vector and bitmap tool, delivers the most efficient design environment for rapidly prototyping websites and user interfaces, and creating and optimizing images for the web. Fireworks CS3 offers the flexibility to edit both vector and bitmap images, a common library of prebuilt assets, and time-saving integration with Adobe Photoshop® CS3, Adobe Illustrator® CS3, Adobe Dreamweaver® CS3, and Adobe Flash® CS3 Professional software. Rapidly prototype your web project and then leverage your work directly into Dreamweaver CS3.

Fireworks CS3 is an integral part of Adobe Creative Suite 3 Web Premium and Web Standard, which empower creative professionals and developers to experience an uninterrupted flow of energy and ideas from initial concept to polished final execution across print, video, web, and mobile devices. The end-to-end integration is the core of what makes Creative Suite uniquely powerful—creative professionals and developers remain focused on their vision and achieve the highest quality results in less time.

This chapter covers the following topics:

• “Installation” on page 1

• “A d ob e H el p ” o n p a ge 2

• “Resources” on page 4

• “What’s new in Fireworks CS3” on page 8

Installation

Requirements

To review complete system requirements and recommendations for your Adobe software, see the Read Me.html file on your installation DVD.

Install the software

1 Close any other Adobe programs open on your computer.

2 Insert the installation disc into your DVD drive, and follow the on-screen instructions.

Note: For more information, see the Read Me.html file on the installation DVD.

Activate the software

If you have a single-user retail license for your Adobe software, you will be asked to activate your software; this is a simple, anonymous process that you must complete within 30 days of starting the software.

For more information on product activation, see the Read Me file on your installation DVD, or visit the Adobe website at www.adobe.com/go/activation.

1 If the Activation dialog box isn’t already open, choose Help > Activate.

2 Follow the on-screen instructions.

ADOBE FIREWORKS CS3

User Guide

Note: If you want to install the software on a different computer, you must first deactivate it on your computer. Choose Help > Deactivate.

Register

❖ To register, follow the on-screen instructions in the Registration dialog box, which appears after you install and

activate the software.

If you postpone registration, you can register at any time by choosing Help > Online Registration.

Read me

The Read Me.html file for your product can be found on the installation DVD (and is also copied to the application folder during product installation). This file provides valuable information about the following:

• System requirements

• Installing and uninstalling

• Activation and registration

• Font installation

• Troubleshooting

• Customer support

• Legal notices

Viewing the files installed with Fireworks

At som e poi nt y ou m ay n ee d to view or ac cess the fi les in stal le d wi th Fi rew ork s. Dur ing i nsta ll ati on, Fire wor ks pl aces files in various locations on your system. It’s important to understand why these files reside where they do. For more information, see “Working with configuration files” on page 350.

Macintosh users should pay special attention to the format Fireworks uses to store the program and its default configuration files. For more information, see “Viewing package contents (Macintosh only)” on page 352.

Adobe Help

Adobe Help resources

Documentation for your Adobe software is available in a variety of formats.

In-product and LiveDocs Help

In-product Help provides access to all documentation and instructional content available at the time the product ships. It is available through the Help menu in your Adobe product.

LiveDocs Help includes all the content from in-product Help, plus updates and links to additional instructional content avail able on t he web. For s ome pro ducts, LiveDocs also let s you add comm ents . Fin d LiveDocs Help for your product in the Adobe Help Resource Center, at www.adobe.com/go/documentation.

ADOBE FIREWORKS CS3

User Guide

Most versions of in-product and LiveDocs Help let you search across the Help of multiple products. Topics also contain links to relevant content on the web or to topics in the Help of another product.

Think of Help, both in the product and on the web, as a hub for accessing additional content and communities of users. The most complete and up-to-date version of Help is always on the web.

Adobe PDF documentation

The i n-product Help is a lso avai lable as a Portable Doc ument Format (PDF) file that is optimiz ed for printing. Other documents, such as white papers, may also be provided as PDFs.

All PDF documentation is available through the Adobe Help Resource Center, at www.adobe.com/go/documen-

tation. PDF documentation included with your product can be found in the Documents folder on the installation or

content DVD.

Printed documentation

Printed editions of the complete in-product Help are available for purchase in the Adobe Store, at

www.adobe.com/go/store. You can also find books published by Adobe publishing partners in the Adobe Store.

A printed workflow guide is included with all Adobe Creative Suite 3 products, and individual Adobe products may include a printed getting started guide.

Using Help in the product

In-product Help is available through the Help menu. After you start the Adobe Help Viewer, click Browse to see Help for additional Adobe products installed on your computer.

To help you learn about multiple Adobe products, these features are available:

• You can search across Help for multiple products.

• Topics may contain links to topics in Help for other Adobe products or to additional content on the web.

• Some topics are shared across multiple products. If you see a Help topic with a Fireworks icon and a Dreamweaver

icon, you know that the topic either describes functionality that is similar in the two products or documents crossproduct workflows.

Note: If you search for a phrase, such as “shape tool,” enclose it in quotation marks to see only those topics that include all the words in the phrase.

Accessibility features

Adobe Help content is accessible to people with disabilities—such as mobility impairments, blindness, and low vision. In-product Help provides keyboard shortcuts for toolbar controls and navigation, and it supports standard accessibility features, including the following:

• Text size can be changed with standard context menu commands.

• Links are underlined for easy recognition.

• If link text doesn’t match the title of the destination, the title is referenced in the Title attribute of the Anchor tag.

For example, the Previous and Next links include the titles of the previous and next topics.

• Content supports high-contrast mode.

• Graphics without captions include alternate text.

• Each frame has a title to indicate its purpose.

• Standard HTML tags define content structure, for screen reading or text-to-speech tools.

• Style sheets control formatting, so there are no embedded fonts.

Windows keyboard shortcuts for toolbar controls

Each control in the toolbar for in-product Help has a keyboard equivalent:

Back button Alt+left arrow

Forward button Alt+right arrow

Print Ctrl+P

About button Ctrl+I

Browse menu Alt+down arrow or Alt+up arrow to view Help for another program

Search box (Windows) Ctrl+S to place cursor in Search box

Windows keyboard shortcuts for navigation

To navigate in Adobe Help Viewer and view topics, use the following keyboard combinations:

• To move between the navigation pane and the reading pane, press Ctrl+Tab and Shift+Ctrl+Tab.

• To move t h r o u g h li n k s wit h i n a p a n e , press Tab o r S h ift+ Ta b.

ADOBE FIREWORKS CS3

User Guide

• To activate a selected link, press Enter.

• To make text bigger, press Ctrl+equal.

• To make text smaller, press Ctrl+hyphen.

How to choose the right Help documents

A variety of resources are available for learning Fireworks, including Fireworks Help, PDF versions of the Fireworks documentation components, and several web-based information sources.

• Fireworks Help (called Using Fireworks), intended for all users, gives comprehensive information about all

Fireworks features. You can access it at any time in Fireworks help (Help > Using Fireworks). The manual is also available in PDF format on the Adobe website at www.adobe.com/go/fireworks_documentation.

• Extending Fireworks, which describes the Fireworks framework and the application programming interface (API),

is intended for advanced users who want to build extensions or customize the Fireworks interface. You can control every Fireworks command or setting using special JavaScript commands that Fireworks can interpret. The manual is available both in help and on the Adobe website as a downloadable PDF.

Resources

Adobe Video Workshop

Adobe Creative Suite 3 Video Workshop enables you to learn about your product. There are over 200 training videos for Adobe Creative Suite 3, covering a wide range of subjects for print, web, and video professionals.

You can use the Video Workshop to learn about any Creative Suite 3 product you’re interested in. Many videos show you how to use products together.

ADOBE FIREWORKS CS3

User Guide

When you start the Video Workshop, you choose exactly the products and topics you want to learn. You can see details about each video to help focus your learning path.

Community of presenters

With this release, we invited the Adobe community to share their expertise and insights. Adobe and Lynda.com present tutorials, tips, and tricks from leading designers and developers such as Michael Ninness, Katrin Eismann, and Chris Georgenes. You can see and hear Adobe experts such as Lynn Grillo, Greg Rewis, and Russell Brown. In all, over 30 product experts share their knowledge.

Tutorials and source files

The Video Workshop includes training for novices and experienced users. You’ll also find videos on new features and key techniques. Each video covers a single subject and typically runs about 3-5 minutes. Most videos come with an illustrated tutorial and source files, so you can print out detailed steps and try the tutorial on your own.

Using Adobe Video Workshop

You can access Adobe Video Workshop using the DVD included with your Creative Suite 3 product. It’s also available online at www.adobe.com/go/learn_videotutorials. Adobe will regularly add new videos to the online Video Workshop, so check in to see what’s new.

Fireworks CS3 videos

Adobe Video Workshop covers a wide range of subjects for Adobe Fireworks CS3, including:

• Using the Pages panel

• Rapid prototyping with rich symbols

• Understanding layers and layout

• Generating symbol property scripts

Videos also show you how to use Fireworks CS3 with other Adobe products, for example:

• Importing Photoshop files

• Understanding the Fireworks and Flash workflow

• Understanding the Photoshop, Illustrator, and Fireworks workflow

Extras

You have access to a wide variety of resources that will help you make the most of your Adobe software. Some of these resources are installed on your computer during the setup process; additional helpful samples and documents are included on the installation or content DVD. Unique extras are also offered online by the Adobe Exchange community, at www.adobe.com/go/exchange.

Installed resources

During software installation, a number of resources are placed in your application folder. To view those files, navigate to the specific application folder on your computer.

• Windows: [startup drive]/Program files/Adobe/Adobe Fireworks CS3

• Mac OS: [startup drive]/Applications/Adobe Fireworks CS3

Depending on your Adobe product, the application folder may contain the following:

ADOBE FIREWORKS CS3

User Guide

Plug-ins Plug-in modules are small software programs that extend or add features to your software. Once installed,

plug-in modules appear as options in the Import or Export menu; as file formats in the Open, Save As, and Export Original dialog boxes; or as filters in the Filter submenus.

Presets Presets comprise a wide variety of useful tools, preferences, effects, and images. Product presets include

brushes, swatches, color groups, symbols, custom shapes, graphic and layer styles, patterns, textures, actions, workspaces, and more. Preset content can be found throughout the interface. Some presets become available only when you select the corresponding tool. If you don’t want to create an effect or image from scratch, just peruse the preset libraries for inspiration.

Te mp l at es Template files can be opened and viewed from Adobe Bridge, opened from the Welcome Screen, or

opened directly from the File menu. Depending on the product, template files range from letterhead, newsletters and websites, to DVD menus and video buttons. Each template file is professionally constructed and represents a bestuse example of product features. Templates can be a valuable resource when you need to jump start a project.

Samples Sample files include more complicated designs and are a great way to see new features in action. These files

demonstrate the range of creative possibilities offered by your program.

Fonts Several OpenType® fonts and font families are included with your Creative Suite product. Fonts are copied to

your computer during installation:

• Windows: [startup drive]/Program Files/Common Files/Adobe/Fonts

• Mac OS X: [startup drive]/Library/Application Support/Adobe/Fonts

For information about installing fonts, see the Read Me.html file on the installation DVD.

DVD content

The installation or content DVD included with your product contains additional resources for use with your software. The Goodies folder contains product-specific files such as templates, images, presets, actions, plug-ins, and effects, along with subfolders for Fonts and Stock Photography. The Documentation folder contains a PDF version of the Help, technical information, and other documents such as specimen sheets, reference guides, and specialized feature information.

Adobe Exchange

For more free content, visit www.adobe.com/go/exchange, an online community where users download and share thousands of free actions, extensions, plug-ins, and other content for use with Adobe products.

Bridge Home

Bridge Home, a new destination in Adobe Bridge CS3, provides up-to-date information on all your Adobe Creative Suite 3 software in one convenient location. Start Adobe Bridge, then click the Bridge Home icon at the top of the favorites panel to access the latest tips, news, and resources for your Creative Suite tools.

Note: Bridge Home may not be available in all languages.

Adobe Design Center

Adobe Design Center offers articles, inspiration, and instruction from industry experts, top designers and Adobe publishing partners. New content is added monthly.

You can find hundreds of tutorials for design products and learn tips and techniques through videos, HTML tutorials, and sample book chapters.

New ideas are the heart of Think Tank, Dialog Box, and Gallery:

ADOBE FIREWORKS CS3

User Guide

• Think Tank articles describe how designers engage with technology and what their experiences mean for design,

design tools, and society.

• In Dialog Box, experts share new ideas in motion graphics and digital design.

• The Gallery showcases how artists communicate design in motion.

Visit Adobe Design Center at www.adobe.com/designcenter.

Adobe Developer Center

Adobe Developer Center provides samples, tutorials, articles, and community resources for developers who build rich Internet applications, websites, mobile content, and other projects using Adobe products. The Developer Center also contains resources for developers who develop plug-ins for Adobe products.

In addition to sample code and tutorials, you'll find RSS feeds, online seminars, SDKs, scripting guides, and other technical resources.

Visit Adobe Developer Center at www.adobe.com/go/developer.

Customer support

Visit the Adobe Support website, at www.adobe.com/support, to find troubleshooting information for your product and to learn about free and paid technical support options. Follow the Training link for access to Adobe Press books, a variety of training resources, Adobe software certification programs, and more.

Downloads

Visit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software. In addition, the Adobe Store (at www.adobe.com/go/store) provides access to thousands of plug-ins from third-party developers, helping you to automate tasks, customize workflows, create specialized professional effects, and more.

Adobe Labs

Adobe Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and products from Adobe.

At Adobe Labs, you have access to resources such as these:

• Prerelease software and technologies

• Code samples and best practices to help accelerate your learning curve

• Early versions of product and technical documentation

• Forums, wiki-based content, and other collaborative resources to help you interact with like-minded developers

Adobe Labs fosters a collaborative software development process. This environment allows customers to become productive with new products and technologies faster and the Adobe development teams to respond and react to early feedback in order to shape the software in a way that meets the needs and expectations of the community.

Visit Adobe Labs at www.adobe.com/go/labs.

ADOBE FIREWORKS CS3

User Guide

User communities

Features forums, blogs, and other avenues for users to share technologies, tools, and information; ask questions; and find out how others are getting the most out of their software. User-to-user forums are available in English, French, German, and Japanese; blogs are posted in a wide range of languages.

To participate in forums or blogs, visit www.adobe.com/communities.

What’s new in Fireworks CS3

Create rich symbols

This version of Fireworks introduces new and enhanced symbol features. Create graphic symbols that can be intelligently scaled and given specific attributes using a JavaScript (JSF) file. Quickly mock up a user interface by dragging these symbols on to the document and editing the parameters associated with them using the new Symbol Properties panel.

Rich symbols

Symbol Properties panel This new panel is a central location where you can control the properties for

Enhanced graphic symbol An enhancement to the graphic symbol allows the creation of customizable

Symbol librar y A pre-designed librar y of graphic symbols that utilize the new functionality has

Swap symbols A new “swap symbol” feature allows you to easily swap symbols as you are

intelligent graphic symbols.

symbol properties using JavaScript.

been included in this software release. These can be customized to accommodate the look and feel of a particular website or user interface.

designing your document.

For more information, see “Creating and using rich graphic symbols” on page 190.

Intelligent scaling for symbols

Traditionally, when you apply scale transformations to symbols, the entire object is transformed as a single unit. With certain kinds of objects, especially geometric shapes with styled corners, the result is a symbol that appears somewhat distorted.

Fireworks CS3 introduces a dynamic new feature called 9-slice scaling, which allows you to intelligently scale vector or bitmap symbols. By positioning a set of guides over your artwork, you can define exactly how each part of a symbol is scaled. Any of nine different regions can be specified to scale only horizontally, scale only vertically, scale both horizontally and vertically, or to not scale at all. The feature, which is on by default, can also be set to scale just three regions. When combined with the new Auto Shape library, 9-slice scaling makes it faster than ever before to prototype websites and applications.

Scaling without distortion

New 9-slice scaling tool Enable the 9-slice scaling feature to scale vector and bitmap symbols up or

down without distorting their geometry. The symbol can be scaled using 3 or 9 regions, based on the shape of the symbol.

For more information, see “Using 9-slice scaling” on page 188.

ADOBE FIREWORKS CS3

User Guide

Add multiple pages to a single document

In a never-ending effort to improve web-design workflows, Fireworks CS3 makes it easy to build complex multipage web prototypes using a single PNG file. Each page contains its own settings for canvas document, size, color, image resolution, and guides. These settings can be set on a per-page basis, or globally across all pages in the document.

Taking the multi-page concept one step further, Fireworks layers can apply to a single page or be shared across pages. Once shared, the layers are shaded yellow to differentiate them from unshared layers. For rapid prototyping, you can create workflows with hyperlinks and hotspot behaviors on multiple pages. You can also preview all of your pages in a browser or export them all at once as multiple HTML pages.

Prototype without complexity

New Pages panel A new Pages panel gives easy access to all of the pages in your PNG file.

Apply layers across pages Layers can apply to a single page, or can be shared across multiple pages. Once

Use a master page for common elements

shared, the layers are displayed in yellow to differentiate from unshared Layers.

An optional master page can be used to hold elements that are common to all pages.

For more information, see “Working with pages” on page 155.

Create Flash-based slideshows

Automatically create an image slideshow. The Create Slideshow command allows you to create a Flash slideshow without knowing how to use Flash. You simply select a folder with images, add slideshow options (such as slide transitions), select a Fireworks album player (a Flash template) for the final output, and automatically batch-process the required thumbnail and full-size images that are optimized for the web.

Create a Flash slideshow without learning Flash

Create Slideshow feature Choose Create Slideshow from the Commands menu to launch the new tool.

For more information, see “Creating Slideshows” on page 250.

Hierarchical layers

In Fireworks CS3 the structure of layers in a document can be as simple or as complex as required and all hierarchical layers are preserved. When creating a new file, all items are organized at the same level, in a non-hierarchical manner. You can create new sub layers as needed and move items into them, or move elements from one layer to another at any time. You can also create multiple sub layers and group them.

Use layers for greater design flexibility

Hierarchical layers Use the Layers panel to create and organize layers as you need them.

For more information, see “Working with layers” on page 159.

ADOBE FIREWORKS CS3

User Guide

Work with Photoshop files

With Fireworks CS3, you can directly import native files from Photoshop. Achieving a whole new level of functionality, Adobe is redefining the concept of what integration should be. Fireworks design comps and images can now be saved as native Photoshop files and opened in either Photoshop or Fireworks CS3 with layer information preserved.

Improved Photoshop compatibility

Photoshop layer effects Photoshop provides a variety of effects such as shadows, glows, bevels, over-

Photoshop blend modes Fireworks CS3 includes seven commonly used Photoshop blending modes

Retain hierarchical layers when opening PSD files

lays, and strokes that let the user change the appearance of a layer’s contents. Fireworks CS3 now preserves these editable Photoshop layer effects when importing or opening a PSD file. You can also now apply Photoshop layer effects directly to any object within Fireworks by selecting Photoshop Live Effects from the Live Filters tool in the Property inspector.

(dissolve, linear burn, linear dodge, vivid light, linear light, pin light, and hard mix).

Fireworks CS3 now supports a hierarchical layer structure, allowing you to preserve layer and sublayer information when importing files from Photoshop.

For more information, see “Working with Photoshop” on page 322.

Import Fireworks files into Adobe Flash

Now you can move content from Fireworks CS3 to Flash CS3 Professional quickly by copying and pasting or by directly importing a Fireworks PNG file. Important structure is maintained, including multiple pages, shared layers, hierarchical layers, frames, 9-slice scaling settings, and many effects. Prototyping in Fireworks and developing in Flash has never been easier.

For more information, see “Working with Flash” on page 305.

Flex integration for RIA layouts

As designers continue to push the technology envelope, better tools and integration become more important than ever. Fireworks CS3 can help in the development of next-generation rich internet applications—referred to as RIAs—by making it possible to export common library assets as known components for use in Adobe Flex™ Builder.™ Styling and absolute positioning are also maintained.

The best part is there’s no work necessary on your part, because Fireworks exports the necessary Flex code (MXML) for you. Now you can easily create a Flex application layout in Fireworks, leveraging Flex common library assets as MXML for loading into Flex Builder.

Work with Illustrator files

Open Illustrator files in Fireworks while preserving hierarchical layers, patterns, linked images, text attributes, transparency, and more. Fireworks also contains export options for exporting to Adobe Illustrator 8.0.

For more information, see “About working with Illustrator” on page 326.

For more information on the new features, see the Fireworks page on the Adobe website at

www.adobe.com/products/fireworks/.

ADOBE FIREWORKS CS3

User Guide

Adobe Bridge

Simplify file handling in Fireworks and within Adobe Creative Suite with Adobe Bridge, the next-generation file browser. Efficiently browse, tag, search, and process your images. Using Bridge and Fireworks together means you can take advantage of XMP metadata in your files. Adobe XMP (Extensible Metadata Platform) is a technology that assists the user in adding file information to files saved in PNG, GIF, JPEG, Photoshop, and TIFF formats, and facilitates the exchange of metadata between Adobe software and other systems that support the XMP metadata standard.

For more information, see “About Adobe Bridge” on page 328.

Chapter 2: Fireworks Basics

Fireworks CS3 is a software program for designing professional on-screen graphics. Its innovative solutions tackle the major problems facing graphic designers and webmasters. Using the wide range of tools in Fireworks, you can create and edit both vector and bitmap graphics within a single file.

The advent of Fireworks freed web designers from having to jump back and forth among as many as a dozen taskspecific applications. Its nondestructive Live Filters eliminate the frustration of having to re-create web graphics from scratch after any simple edit. Fireworks generates JavaScript, making rollovers easy to create. Efficient optimization features shrink the size of web graphic files without sacrificing quality.

If you are new to Fireworks, it would be helpful for you to understand general Fireworks concepts such as opening, importing, and saving files; finding your way around the Fireworks environment; and working within a file. After you create a new file or open an existing file, the Fireworks work environment is available to you.

This chapter contains the following topics:

• “About working in Fireworks” on page 12

• “About vector and bitmap graphics” on page 13

• “Creating a new document” on page 15

• “Opening and importing files” on page 16

• “Saving Fireworks files” on page 22

• “The Fireworks work environment” on page 24

About working in Fireworks

Fireworks is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector images, design web effects such as rollovers and pop-up menus, crop and optimize graphics to reduce their file size, and save time by automating repetitive tasks. When a document is complete, you can export or save it as a JPEG file, GIF file, or file of another format—along with HTML files containing HTML tables and JavaScript code—for use on the web. You also can export or save a type of file specific to another program, such as Adobe Photoshop or Adobe Flash, if you want to continue working in the other program.

Vector and bitmap objects

In the Fireworks Tools panel, you will find distinct sections containing tools for drawing and editing vectors and bitmaps. For more information on these two basic formats, see “About vector and bitmap graphics” on page 13

In Fireworks, the tool you select determines whether the object you create is a vector or a bitmap. For example, select the Pen tool from the Vector section of the Tools panel, and you can begin drawing vector paths by plotting points. Select the Brush tool, and you can drag to paint a bitmap object. Select the Text tool, and you can begin typing.

After drawing vector objects, bitmap objects, or text, you can use a wide array of tools, effects, commands, and techniques to enhance and complete your graphics. You can use the Fireworks tools in the Button Editor to create interactive navigation buttons.

ADOBE FIREWORKS CS3

User Guide

You can also use the Fireworks tools to edit imported graphics. You can import and edit files in JPEG, GIF, PNG, PSD, and many other file formats. After you import a graphic image, you can adjust its color and tone, as well as crop, retouch, and mask it.

Interactive graphics

Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into different sections to which you can apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. In addition, you can export the sections using different settings. On a web page, each slice appears in a table cell. Hotspots let you assign URL links and behaviors to all or part of a graphic. For more information, see “Slices, Rollovers, and Hotspots” on page 200.

Slices and hotspots have drag-and-drop rollover handles that let you quickly assign swap image and rollover behaviors to graphics directly in the workspace. The Button Editor and Pop-up Menu Editor are convenient Fireworks features that help you build special interactive graphics for navigating websites.

About optimizing and exporting graphics

Fireworks has powerful optimization features to help you find the balance between file size and acceptable visual quality as you prepare to export graphics. You can optimize web graphics in Fireworks to minimize their file size so that they load quickly into websites, while comparing the quality of the graphics in the Preview, 2-Up, or 4-Up views in the workspace.

You can slice an image into smaller parts and then optimize each part in the format that best suits the content. For added optimization flexibility, you can use selective JPEG compression to focus the most important part of a JPEG while reducing the quality of the background.

After you optimize your graphics, the next step is to export them for use on the web. From your Fireworks source PNG document, you can export files of a number of types, including JPEG, GIF, animated GIF, and HTML tables containing sliced images in multiple file types. For more information, see “Optimizing and Exporting” on page 257.

About vector and bitmap graphics

Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats helps you understand Fireworks, which contains both vector and bitmap tools and is capable of opening or importing both formats.

ADOBE FIREWORKS CS3

User Guide

About vector graphics

Vector graphics render images using lines and curves, called vectors, that include color and position information. For example, the image of a leaf may be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill)

When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. Vector graphics are resolution-independent, which means you can move, resize, reshape, or change the color of a vector graphic, as well as display it on output devices of varying resolutions, without changing the quality of its appearance.

About bitmap graphics

Bitmap graphics are composed of dots, called pixels, arranged in a grid. Your computer screen is a large grid of pixels. In a bitmap version of the leaf, the image is determined by the location and color value of each pixel in the grid. Each pixel is assigned a color. When viewed at the correct resolution, the dots fit together like tiles in a mosaic to form the image.

When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, often making the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image’s quality.

ADOBE FIREWORKS CS3

User Guide

Creating a new document

When you select File > New to create a new document in Fireworks, you create a Portable Network Graphic, or PNG do cume nt. PN G is the nativ e fi le f orm at for Fi rewor ks. Aft er you cre ate graph ics in Fir ework s, you c an e xpo rt or sa ve them in other familiar web graphic formats, such as JPEG, GIF, and animated GIF. You can also export or save graphics in many of the popular formats used off the web, such as TIFF, PSD, and BMP. Whatever optimization and export settings you choose, the original Fireworks PNG file is preserved to allow easy editing later.

To create a web graphic in Fireworks, you must first set up a new document or open an existing one. You can adjust the setup options later in the Property inspector.

To create a new document: 1 Select File > New.

The New Document dialog box opens.

2 Enter the canvas width and height measurements in pixels, inches, or centimeters.

3 Enter a resolution in pixels per inch or pixels per centimeter.

4 Select white, transparent, or a custom color for the canvas.

Note: Use the Custom color box pop-up window to select a custom canvas color.

5 Click OK to create the new document.

To create a new document the same size as an object on the Clipboard: 1 Copy an object to the Clipboard from any of the following:

• Another Fireworks document

• A web browser

• Any of the applications listed in “Pasting into Fireworks” on page 19

2 Select File > New.

The New Document dialog box opens with the width and height dimensions of the object on the Clipboard.

3 Set the resolution and canvas color, and click OK.

4 Select Edit > Paste to paste the object from the Clipboard into the new document.

ADOBE FIREWORKS CS3

User Guide

Opening and importing files

In Fireworks, you can easily open, import, and edit both vector and bitmap images created in other graphics programs. In addition, you can import images from a digital camera or scanner.

Note: Fireworks preserves many, but not all JavaScript behaviors when you import a file from Adobe Dreamweaver. If Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver.

To open a Fireworks document: 1 Select File > Open.

The Open dialog box appears.

2 Select the file and click Open.

To open a file without overwriting the previous version, select Open as Untitled, and then save the file using a different name.

This section covers the following topics:

• “Opening recently closed documents” on page 16

• “Opening graphics created in other applications” on page 16

• “Creating Fireworks PNG files from HTML files” on page 17

• “Inserting objects into a Fireworks document” on page 18

Opening recently closed documents

The File menu lists up to 10 recently closed documents in the Open Recent submenu. The Start Page also lists recently closed documents.

To open a recently closed file: 1 Select File > Open Recent.

2 Select a file from the submenu.

To open a recently closed file when no files are open:

❖ Click the file name on the Start page.

Opening graphics created in other applications

With Fireworks, you can open files created in other applications or file formats, including Photoshop, Adobe FreeHand, Adobe Illustrator, uncompressed CorelDRAW, WBMP, EPS, JPEG, GIF, and animated GIF files.

When you open a file format other than PNG using File > Open, you create a new Fireworks PNG document based on the file you open. You can use all of the features of Fireworks to edit the image. You can then either select Save As to save your work as a new Fireworks PNG file or as another file format; or with some image types, you can select Save to save the document in its original format. Saving in the document’s original format flattens the image to a single layer and eliminates your ability to edit the Fireworks-specific features you added to the image.

Using Fireworks, you can save the following file formats directly: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac only).

ADOBE FIREWORKS CS3

User Guide

Note: Fireworks saves 16-bit TIFF images at 24-bit color depth.

Animated GIFs

You can bring animated GIF files into Fireworks in two ways:

• You can import an animated GIF as an animation symbol. You can edit and move all the elements of the animation

as a single unit and use the Library panel to create new instances of the symbol.

Note: When you import an animated GIF, the frame delay setting defaults to 0.07 seconds. If necessary, use the Frames panel to restore the original timing.

• You can open an animated GIF as you would open a normal GIF file. Each element of the GIF is placed as a

separate image in its own Fireworks frame. You can convert the graphic to an animation symbol in Fireworks.

EPS files

Fireworks opens most EPS files, such as Photoshop EPS files, as flattened bitmap images, in which all objects are combined on a single layer. Some EPS files exported from Illustrator, however, retain their vector information.

When you open or import most EPS files, the EPS File Options dialog box opens.

Image Size determines the image dimensions and the units in which the image is rendered. You can select from

pixels, percent, inches, and centimeters.

Resolution indicates the pixels per unit for the resolution.

Constrain Proportions opens the file in the same proportions as the original.

Anti-aliased smoothes jagged edges in the opened EPS file.

When you open or import Illustrator EPS files that contain vector information, the Vector File Options dialog box opens. This is the same dialog box that appears when you open or import FreeHand files.

PSD files

Fireworks CS3 can open PSD files created in Photoshop and preserve all or most of the PSD features, including hierarchical layers, layer effects, and commonly used blend modes.

WBMP files

Fireworks can open WBMP files, which are 1-bit (monochrome) files optimized for mobile computing devices. This format is for use on Wireless Application Protocol (WAP) pages. You can open a WBMP file directly using File > Open or import a WBMP file using File > Import.

Creating Fireworks PNG files from HTML files

Fireworks can open and import HTML content created in other applications. When you open or import an HTML file, Fireworks reconstructs the layout and behaviors defined by the HTML code, allowing you to re-create web pages that contain sliced graphics, JavaScript buttons, and other types of interactivity. This allows you to salvage inherited websites even if you don’t have the source PNG files. With this feature, you can quickly open or import a web page to update graphics, change document layout, or alter navigational links, buttons, and other interactive elements, all without having to rebuild the page from scratch or modify its scripting.

Because Fireworks exports HTML content in the form of an HTML table, it also determines the document layout for imported HTML based on HTML tables. An HTML file must contain at least one table for Fireworks to be able to reconstruct it. For more about HTML, see “Exporting HTML” on page 280.

ADOBE FIREWORKS CS3

User Guide

You can get HTML content into Fireworks in several ways:

• You can open all the HTML tables in an HTML file.

• You can open the first HTML table that Fireworks encounters in an HTML file.

• You can import the first HTML table that Fireworks encounters into an existing Fireworks document.

Note: Fireworks can also import documents that use UTF-8 encoding and those that are written in XHTML. For more information on these file types, see “Exporting files with and without UTF-8 encoding” on page 286 and “Exporting XHTML” on page 286.

To open all tables of an HTML file: 1 Select File > Reconstitute Table.

2 Select the HTML file that contains the tables you want to open, and click Open.

Each of the tables opens in its own document window.

To open only the first table of an HTML file: 1 Select File > Open.

2 Select the HTML file that contains the table you want to open, and click Open.

The first table in the HTML file opens in a new document window.

To import the first table of an HTML file into an open Fireworks document:

Select File > Import.

2 Select the HTML file you want to import from, and click Open.

3 Click to place the insertion point where you’d like the imported table to appear.

Inserting objects into a Fireworks document

You can import, drag, or copy and paste vector objects, bitmap images, or text created in other applications into a Fireworks document. You can also import images from a digital camera or scanner.

Dragging images into Fireworks

You can drag vector objects, bitmap images, or text into Fireworks from any application that supports dragging. These applications include the following:

• FreeHand 7 or later

• Flash 3 or later

• Photoshop 4 or later

• Illustrator 7 or later

• Microsoft Office 97 or later

• Microsoft Internet Explorer 3 or later

• Netscape Navigator 3 or later

• CorelDRAW 7 or later

To drag an image or text into Fireworks:

❖ From the other application, drag the object or text into Fireworks.

ADOBE FIREWORKS CS3

Pasting into Fireworks

Pasting an object copied from another application into Fireworks places the object in the center of the active document. You can copy and paste an object or text in any of these formats from the Clipboard:

• FreeHand 7 or later

• Illustrator

• PNG

• PICT (Macintosh)

• DIB (Windows)

• BMP (Windows)

• ASCII text

• EPS

• WBMP

• TXT

• RTF

To paste into Fireworks: 1 In the other application, copy the object or text that you wish to paste.

User Guide

2 In Fireworks, paste the object or text into your document.

Location of pasted objects

When you paste an object into Fireworks, the placement of the pasted object depends on what is selected:

• If at least one object on a single layer is selected, the pasted object is placed in front of—or stacked directly above—

the selected object on the same layer.

• If the layer itself is selected and either no objects or all objects are selected, the pasted object is placed in front of—

or stacked directly above—the topmost object on the same layer.

• If two or more objects on more than one layer are selected, the pasted object is placed in front of—or stacked

directly above—the topmost object in the topmost layer.

• If the Web Layer or an object on the Web Layer is selected, the pasted object is placed in front of—or stacked

above—all other objects on the bottommost layer.

Note: The Web Layer is a special layer that contains all web objects. It always remains at the top of the Layers panel. For more information about layers, see “Pages, Layers, Masking, and Blending” on page 155.

Resampling pasted objects

When you paste a bitmap with a resolution that differs from that of the destination Fireworks document, Fireworks asks whether you want the bitmap to be resampled.

Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as possible. Resampling a bitmap to a higher resolution typically causes little loss of quality. Resampling to a lower resolution, however, always causes data loss and usually a drop in quality.

To resample a bitmap object by pasting: 1 Copy the bitmap to the Clipboard in Fireworks or another program.

ADOBE FIREWORKS CS3

2 Select Edit > Paste in Fireworks.

User Guide

If the bitmap image on the Clipboard has a different resolution than the current document does, you see a dialog box asking whether or not to resample.

3 Select one of the following:

Resample •maintains the original width and height of the pasted bitmap, adding or subtracting pixels as necessary.

Don’t Resample •maintains all the original pixels, which may make the relative size of the pasted image larger or

smaller than expected.

Importing PNG files

You can import Fireworks PNG files into the current layer of the active Fireworks document. Any hotspot objects and slice objects are placed on the document’s Web Layer. For more information about slices and web objects, see “Viewing and displaying slices and slice guides” on page 203. For more information about layers, see “Working with layers” on page 159.

To import a PNG file into a Fireworks document layer:

In the Layers panel, select the layer into which you want to import the file.

2 Select File > Import to open the Import dialog box.

3 Navigate to the file to be imported and click Open.

4 On the canvas, position the import pointer where you want to place the upper left corner of the image.

5 Import the file:

• Click to import the full-size image.

• Drag the import pointer to resize the image as you import.

Fireworks retains the proportions of the image.

Importing from a digital camera or scanner

You can import images from a digital camera or scanner only if it is TWAIN compliant (Windows) or uses built-in OS X Image Capture capability (Macintosh). Images imported into Fireworks from a digital camera or scanner open as new documents.

Note: Fireworks cannot import from digital cameras or image scanners unless the appropriate software drivers, modules, and plug-ins have been installed. For specific instructions about installation, settings, and options, consult your camera or scanner documentation for the TWAIN module or Photoshop Acquire plug-in.

On the Macintosh, Fireworks automatically looks for the Photoshop Acquire plug-ins in the Plug-ins folder within the Fireworks application folder. If you do not want to put the plug-ins there, you must point Fireworks to an alternative location.

Note: The exact location of the Plug-ins folder varies depending on your operating system. For more information, see “Working with configuration files” on page 350.

To direct Fireworks to Photoshop Acquire plug-ins: 1 In Fireworks, select Edit > Preferences.

Note: On Mac OS X, select Fireworks > Preferences.

2 Click the Folders tab.

ADOBE FIREWORKS CS3

User Guide

3 Select Photoshop Plug-Ins.

4 Click Browse if the Select the Photoshop Plug-ins Folder (Windows) or Choose a Folder (Macintosh) dialog box

doesn’t automatically open.

5 Navigate to the folder containing the Photoshop plug-ins.

To import an image from a digital camera (Windows): 1 Connect the camera to your computer.

2 Install the software that accompanies the camera if you have not already done so.

3 In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.

4 In the Select Source dialog box, select a source, and then click OK.

5 In the Select Images dialog box, select the images you want to import, and then click OK.

The user interface for your camera software appears.

6 Follow the instructions to apply the desired settings.

The imported image is opened as a new Fireworks document.

To import an image from a digital camera (Macintosh): 1 Connect the camera to your computer.

2 Install the software that accompanies the camera if you have not already done so.

3 In Fireworks, select File > Acquire, and then select either Camera Acquire or Camera Select.

4 In the Select Camera dialog box, select a camera, and then click OK.

5 In the Select Images dialog box, select the images you want to import, and then click OK.

Note: The Select Images dialog box only displays file types that are supported by Fireworks.

6 Follow the instructions to apply the desired settings.

The imported image is opened as a new Fireworks document.

To import an image from a scanner (Windows):

Connect the scanner to your computer.

2 Install the software that accompanies the scanner if you have not already done so.

3 In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.

Note: For most TWAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options.

4 Follow the instructions to apply the desired settings.

The imported image is opened as a new Fireworks document.

To import an image from a scanner (Macintosh):

Connect the scanner to your computer.

2 Install the software that accompanies the scanner if you have not already done so.

3 In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select.

Note: For most T WAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options.

ADOBE FIREWORKS CS3

User Guide

4 Follow the instructions to apply the desired settings.

The imported image is opened as a new Fireworks document.

Saving Fireworks files

When you create a new document or open an existing Fireworks PNG file, the document’s filename has the extension .png. Files of other types, such as PSD and HTML, also open as PNG files, allowing you to use the Fireworks PNG document as your source file, or working file.

However, many files retain their original filename extensions and optimization settings when opened in Fireworks. For more information, see “Saving documents in other formats” on page 23.

The location to which Fireworks defaults when you save a document is determined by the following, in this order:

• The current file location

• The current export/save location, which is defined anytime you browse from the default location in a Save, Save

As, Save a Copy, or Export dialog box

• The default location where new documents or images are saved on your operating system

Saving Fireworks PNG files

When you create a new document or open an existing Fireworks PNG file, the document’s filename has the extension .png. The file displayed in the Fireworks document window is your source file, or working file.

Using a Fireworks PNG file as your source file has the following advantages:

• The source PNG file is always editable. You can go back and make additional changes even after you export the

file for use on the web.

• You can slice complex graphics into pieces in the PNG file and export them as multiple files with different file

formats and various optimization settings.

To save a new Fireworks document:

Select File > Save As.

The Save As dialog box opens.

2 Browse to the desired location and type the filename.

You do not need to enter an extension; Fireworks does that for you.

3 Click Save.

To save an existing document:

❖ Select File > Save.

To save a Fireworks CS3 PNG file for use in a previous version of Fireworks

Select File > Export.

2 Browse to the location where you want to save the file.

3 If the Fireworks CS3 file has more than one page, select Pages to Files in the Export pop-up menu.

ADOBE FIREWORKS CS3

User Guide

4 Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page will be

saved in the default file format. This file format can be set using the Optimize panel.

All objects on the top-level layers will be saved in the export, but any items on sub-layers will not be exported.

Saving documents in other formats

When you use File > Open to open a file of a format other than PNG, you can use all of the features of Fireworks to edit the image. You can then select Save As to save your work as a new Fireworks PNG file, or you can select a di ffe rent f ormat in w hic h to save your file . For m ost fil e ty pes, you can sel ect Sav e to save t he do cum ent in its o rig ina l format.

Note: If you save a PNG file as a bitmap file such as a GIF or JPEG, the graphic objects you manipulated in the PNG will no longer be available in the bitmap file (see “About vector and bitmap graphics” on page 13). If you need to revise the image, edit the source PNG file and then export it again.tt

You can save to the following file formats directly: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Macintosh only). Fireworks saves 16-bit TIFF images at 24-bit color depth.

Files of other types, such as PSD and HTML, open as PNG files, allowing you to use the Fireworks PNG document as your source file. Any edits you perform are applied to the PNG file and not the original.

To save in an existing GIF, JPEG, TIFF, BMP, or other file format listed above: 1 Select File > Save.

2 If you made modifications to the document that aren’t editable in the file’s original format, a notification appears

in the Save dialog box. Non-editable modifications include adding new objects, masks, and Live Filters, as well as adjusting opacity, applying blend modes, and saving pixel selections.

Note: If you don’t select the Save as a Copy option, the file format of the document you are working on will be changed to the format in which you save it.

To export a document to another format: 1 Select a file format in the Optimize panel.

2 Select File > Export to export the document.

For more information about exporting files, see “Optimizing and Exporting” on page 257.

ADOBE FIREWORKS CS3

User Guide

The Fireworks work environment

When you open a document in Fireworks for the first time, Fireworks activates the work environment, including the Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups. The Property inspector appears along the bottom of the document by default and initially displays document properties. It then changes to display properties for a newly selected tool or currently selected object as you work in the document. The panels are initially docked in groups along the right side of the screen. The document window appears in the center of the program.

Using the Start page

When you start Fireworks without opening a document, the Fireworks Start page appears in the work environment. The Start page gives you quick access to Fireworks tutorials, recent files, and Fireworks Exchange, where you can add new capabilities to some Fireworks features. Use the Start page much like a web page. Click any of the features you see to use them.

To disable the Start page:

Run Fireworks without opening a document.

The Start page is displayed.

2 Click Don’t Show Again.

Using the Tools panel

The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View.

ADOBE FIREWORKS CS3

User Guide

Changing tool options

When you select a tool, the Property inspector displays tool options. Some tool options remain displayed as you work with the tool. For other tools, such as the basic shape, Pen, and Line tools, the Property inspector displays the properties of selected objects. For more information about the Property inspector, see “Using the Property inspector” on page 26.

To display tool options in the Property inspector for a tool that you are already using:

❖ Choose Select > Deselect to deselect all objects.

For information about specific tool options, see the sections that introduce the various tools throughout Using Fireworks or Fireworks Help.

ADOBE FIREWORKS CS3

User Guide

Selecting 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. For example, the Rectangle tool is part of the basic shape tool group, which also includes the Rounded Rectangle, Ellipse, and Polygon basic tools, as well as all of the Auto Shape tools, which appear below the divider line.

To select an alternative tool from a tool group: 1 Click the tool icon and hold down the mouse button.

A pop-up menu appears with tool icons, tool names, and shortcut keys. The currently selected tool has a check mark to the left of the tool name.

2 Drag the pointer to highlight the tool you want, and release the mouse button.

The tool appears in the Tools panel, and the tool options appear in the Property inspector.

Using 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 Proper ty inspector can b e open at half hei ght, displ aying tw o rows o f properties, or at fu ll hei ght, displ aying four rows. You can also fully collapse the Property inspector while leaving it in the workspace.

Note: Most procedures in Using Fireworks assume that the Property inspector is displayed at full height.

To undock the Property inspector:

❖ Drag the gripper at the upper left corner to another part of the workspace.

To dock the Property inspector at the bottom of the workspace (Windows only):

❖ Drag the side bar on the Property inspector to the bottom of the screen.

To expand a half-height Property inspector to full height, revealing additional options, do one of the following:

• Click the expander arrow in the lower right corner of the Property inspector.

• Click the icon in the upper right of the Property inspector and select Full Height from the Property inspector

Options menu.

Note: In Windows, the Options menu is available only when the Property inspector is docked.

To reduce the Property inspector to half height, do one of the following:

• Click the expander arrow in the lower right corner of the Property inspector.

• Select Half Height from the Property inspector Options menu.

Note: In Windows, the Options menu is available only when the Property inspector is docked.

ADOBE FIREWORKS CS3

User Guide

To collapse the Property inspector when it is docked, do one of the following:

• Click the expander arrow or the title of the Property inspector.

• Select Collapse Panel Group from the docked Property inspector Options menu.

For more information about specific Property inspector options, see the appropriate sections throughout Using Fireworks or Fireworks Help.

Using panels

Panels are floating cont rols that help you edit aspects of a sel ecte d objec t or elements of the document. Panels let you work on frames, layers, symbols, color swatches, and more. Each panel is draggable, so you can group panels together in custom arrangements.

Some panels may be grouped together by default, while others are not. The following panels may contain other panels:

• Assets

• Colors

• Page, Layers, Frames and History

• Optimize and Align

Most of the panels are not typically grouped with other panels by default, but you can group them if you want. When you group panels together, all panel group names appear in the panel group title bar. You can, however, assign any name you like to panel groups.

The Optimize panel lets you manage the settings that control a file’s size and file type and work with the color palette

of the file or slice to be exported.

The Layers panel organizes a document’s structure and contains options for creating, deleting, and manipulating

layers.

The Common Library panel displays the contents of the Common Library folder, which contains symbols.

The Pages panel displays the pages in the current file and contains options for manipulating pages.

The Frames panel displays the frames in the current file and includes options for creating animations.

The 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. For more information, see “Using the History panel to undo and repeat multiple actions” on page 40.

The Auto Shapes panel contains Auto Shapes that are not displayed in the Tools panel.

The Styles panel lets you store and reuse combinations of object characteristics or select a stock style.

The Library panel contains graphic symbols, button symbols, and animation symbols. You can easily drag instances

of these symbols from the Library panel to your document. You can make global changes to all instances by modifying only the symbol. For more information, see “Using Styles, Symbols, and URLs” on page 183.

The URL panel lets you create libraries containing frequently used URLs.

ADOBE FIREWORKS CS3

User Guide

The Color Mixer panel lets you create new colors to add to the current document’s color palette or to apply to selected

objects.

The Swatches panel manages the current document’s color palette.

The Info panel provides information about the dimensions of selected objects and the exact coordinates of the

pointer as you move it across the canvas.

The Behaviors panel manages behaviors, which determine what hotspots and slices do in response to mouse

movement.

The Find panel lets you search for and replace elements such as text, URLs, fonts, and colors in a document or

multiple documents.

The Create Symbol Script panel automates the creation of JavaScript files for customizable graphic symbols.

The Align panel contains controls for aligning and distributing objects on the canvas.

The Auto Shape Properties panel lets you make changes to the properties of an Auto Shape after you insert one into

your document.

Color Palette panel (under Others) gives you the ability 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 (under Others) organizes common tools and options used for bitmap editing into one panel

Path panel (under Others) provides quick access to many path related commands

Special Characters (under Others) displays the special characters that can be used in text blocks

Symbol Properties manages the customizable properties of graphic symbols

Organizing panel groups and panels

By default, Fireworks panels are docked in groups in the docking area on the right side of the workspace. You can undock panel groups, add panels to a group, undock individual panels, rearrange the order of docked panel groups, and collapse and close panel groups. You can also open and close individual panels.

To undock or move a panel group:

❖ Drag the panel gripper on the upper left corner away from the panel docking area on the right side of the screen.

To dock a panel group:

❖ Drag the panel gripper onto the panel docking area.

As you drag a panel or panel group over the panel docking area, a placement preview line or rectangle shows where it would be placed among the groups.

To collapse or expand a panel group or panel, do one of the following:

• Click the title of the panel group or panel.

Note: The title bar is still visible when the panel group or panel is collapsed.

• Click the expander arrow in the upper left corner of the panel group or panel.

To undock a panel from a panel group, do one of the following:

• Click on the panel and drag the panel out of the panel group. Drop the panel in the desired new location.

ADOBE FIREWORKS CS3

User Guide

• Select Group With > New Panel Group from the Options menu in the panel group’s title bar. (The Group With

command’s name changes depending on the name of the active panel.) The panel appears in a new panel group of its own.

To dock a panel in a panel group, do one of the following:

• Make sure both the panel and the panel group are open. Click on the panel and drag it to the panel group.

• Select the name of a panel group from the Group With submenu of the panel group’s Options menu. (The Group

With command’s name changes depending on the name of the active panel.)

To rename a panel group:

Click the icon in the upper right of the panel group and select Rename Panel Group from the Options menu.

2 Enter the new name.

To return panels to their default positions for your screen resolution, do one of the following:

• Select Window > Workspace Layouts > 1024 x 768.

• Select Window > Workspace Layouts > 1280 x 1024.

To open a panel:

❖ Select the panel name from the Window menu.

A check mark next to a panel name in the Window menu indicates that the panel is open.

To close a panel, do one of the following:

• Select the panel name from the Window menu.

• Click the Close button in the panel title bar when the panel is undocked.

To hide all panels and the Property inspector:

❖ Select Window > Hide Panels. To view hidden panels, select Window > Hide Panels again.

Note: Panels that are hidden when you select Hide Panels remain hidden when you deselect this command.

To show or hide panels docked to the application window (Windows only), do one of the following:

• Drag the vertical bar to the left of the docked panel area to resize the panel area.

• Click the small arrow that separates the docked panel area from the rest of the application window.

A. Click to show or hide docked panel area

ADOBE FIREWORKS CS3

User Guide

Using the panel group or panel Options menu

Each panel group and panel has an Options menu listing a range of choices specific to the active panel or panel group. An Options menu also appears in the Property inspector (except in Windows when the Property inspector is undocked).

To select an option from a panel group or panel Options menu: 1 Click the Options menu icon in the upper right corner of the panel group or panel to open the menu.

2 Select a menu item.

Saving panel layouts

You can save the layout of panels by using the Commands menu. Then the next time you open Fireworks, the panels are arranged in the same position in the workspace.

To save a workspace layout: 1 Select Window > Workspace Layouts > Save Current.

2 Name the workspace layout and click OK.

To open a saved workspace layout:

❖ Select Window > Workspace Layouts and select a workspace layout from the submenu.

ADOBE FIREWORKS CS3

User Guide

About the Quick Export button

The Quick Export button lets you export your Fireworks files to a number of programs, including Dreamweaver, Flash, Photoshop, Illustrator, Adobe Director, Adobe GoLive®, and FreeHand. In addition, you can preview your files in the browser of your choice. For more information, see “Using the Quick Export button” on page 288.

Opening and moving toolbars (Windows only)

Fireworks for Windows includes two toolbars containing common Fireworks commands.

To show or hide a toolbar:

❖ Select Window > Toolbars and select a toolbar.

To undo ck a toolbar:

❖ Drag the toolbar away from its docked location.

Note: If a toolbar is undocked, you can click the close button at the upper right of the title bar to close it.

To dock a toolbar:

❖ Drag the toolbar onto a docking area at the top, bottom, left, or right of the application window until the placement

preview rectangle appears.

Navigating and viewing documents

You can control your document’s magnification, its number of views, and its display mode. In addition, you can easily pan the view of a document, which is helpful if you zoom in and can no longer see the entire canvas.

Using document tabs (Windows)

When your document is maximized, you can easily choose among multiple open documents using the document tabs that appear at the top of the document window. Each open document displays its filename on a tab that appears above the view buttons.

To select a different document when the current document is maximized:

❖ Click the document tab for the document you want to view.

Zooming and panning

Fireworks lets you zoom in or out at a preset or user-defined magnification percentage.

ADOBE FIREWORKS CS3

User Guide

A. Hand tool B. Zoom tool C. Zoom pop-up menu

To zoom in using preset increments, do one of the following:

• Select the Zoom tool and click to specify the new center point inside the document window. Each click magnifies

the image to the next preset magnification.

• Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window.

• Select Zoom In or a preset magnification from the View menu.

To zoom out using preset increments, do one of the following:

• Select the Zoom tool and Alt-click (Windows) or Option-click (Macintosh) inside the document window. Each

click reduces the view to the next preset percentage.

• Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window.

• Select Zoom Out or a preset magnification from the View menu.

To zoom in on a specific area without being constrained by preset zoom increments:

Select the Zoom tool.

2 Drag over the part of the image that you want to magnify.

The size of the zoom selection box determines the precise magnification percentage, which is displayed in the Set Magnification text box.

ADOBE FIREWORKS CS3

User Guide

Note: You cannot enter a magnification percentage in the Set Magnification text box.

To zoom out based on a specific area:

❖ Alt-drag (Windows) or Option-drag (Macintosh) a selection area with the Zoom tool.

To return to 100% magnification:

❖ Double-click the Zoom tool in the Tools panel.

To pan around the document:

Select the Hand tool.

2 Drag the hand pointer.

As you pan beyond the canvas edge, the view continues to pan so that you can work with pixels along the canvas edge.

To fit the document in the current view:

❖ Double-click the Hand tool.

Using view modes to manage the workspace

You use the view mode buttons in the View section of the Tools panel to control the layout of your workspace. You can select one of three view modes:

Standard Screen mode is the default document window view.

Full Screen with Menus mode is a maximized document window view set against a gray background with

menus, toolbars, scroll bars, and panels visible.

Full Screen mode is a maximized document window view set against a black background with no menus,

toolbars, or title bars visible.

To change view modes, do one of the following:

• To change to Full Screen with Menus mode, click the Full Screen with Menus Mode button in the Tools panel.

• To change to Full Screen Mode, click the Full Screen Mode button in the Tools panel.

• To return to Standard Screen mode, right-click (Windows) or Control-click (Macintosh) in the document window

and select Exit Full Screen Mode, or click the Standard Screen Mode button in the Tools panel.

Displaying multiple document views

You can use multiple views to see one document at different magnifications simultaneously. Changes you make in one view are automatically reflected in all other views of the same document. Generally, you’ll want to be sure that your document is not maximized in the workspace before creating multiple views. This lets you see multiple views of the document at one time.

To open an additional document view at a different zoom setting:

Select Window > Duplicate Window.

2 Select a zoom setting for the new window.

To tile document views:

❖ Select Window > Tile Horizontal or Window > Tile Vertical.

ADOBE FIREWORKS CS3

To close a document view window:

❖ Click the window’s Close button.

Controlling document redraw

Display modes affect a document’s onscreen representation, but not its object data or output quality.

To control document redraw:

❖ Select View > Full Display.

When Full Display is selected, Fireworks displays the document in all available colors with full detail. When Full Display is deselected, Fireworks displays paths as 1 pixel wide with no fill and displays images with an X through them.

Display and draft modes

User Guide

To display a document as it would appear on a different platform, do one of the following:

• In Windows, select View > Macintosh Gamma.

• On the Macintosh, select View > Windows Gamma.

You can now preview how the document would appear on the other computer platform. For example, if you are working on the Windows platform, you can use this command to preview how a document would appear on the Macintosh platform.

Changing the canvas

When you first create a new Fireworks document, you must specify document characteristics. You can modify the size and color of the canvas and change the image’s resolution anytime using the Modify menu or the Property inspector. As you work with the document, you can also rotate the canvas and trim unwanted parts.

Changing canvas size, color, and resolution

Fireworks makes it easy to change to the canvas size, canvas color, and image resolution.

To change the canvas size: 1 Do one of the following:

• Select Modify > Canvas > Canvas Size.

• Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, then

click the Canvas Size button.

2 Enter the new dimensions in the Width and Height text boxes.

3 Click an Anchor button to specify which sides of the canvas Fireworks will add to or delete from, and click OK.

Note: By default, the center anchor is selected, indicating that changes to the size of the canvas are made on all sides.

ADOBE FIREWORKS CS3

To change the canvas color from the Modify menu:

Select Modify > Canvas > Canvas Color.

2 Select White, Transparent, or Custom. If you select Custom, click a color in the Swatches pop-up window.

To select the canvas color from the Property inspector: 1 Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, then

User Guide

click the Canvas color box.

2 Pick a color from the Swatches pop-up window or click the eyedropper on a color anywhere onscreen. To select a

transparent canvas, click the None button in the Swatches pop-up window.

To resize a document and all of its contents: 1 Do one of the following:

• Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, then

click the Image Size button in the Property inspector.

• Select Modify > Canvas > Image Size.

The Image Size dialog box opens.

2 In the Pixel Dimensions text boxes, enter new horizontal and vertical dimensions.

You can change the units of measure. If Resample Image is deselected, you can change the resolution or print size but not pixel dimensions.

3 In the Print Size text boxes, enter horizontal and vertical dimensions for the printed image.

4 In the Resolution text box, enter a new resolution for the image.

You can select between pixels/inch and pixels/cm as the units, or select Resample Image. Changing the resolution also changes the pixel dimensions.

5 Do one of the following:

• To maintain the same ratio between the document’s horizontal and vertical dimensions, select Constrain Propor-

tions.

• Deselect Constrain Proportions to resize width and height independently.

6 Select Resample Image to add or remove pixels when resizing the image to approximate the same appearance at a

different size.

ADOBE FIREWORKS CS3

User Guide

7 Select Current Page Only to apply the canvas size change to the current page. If this box is unchecked, the canvas

size change applies to all pages in the active document, as well as any new pages that are created.

8 Click OK.

About resampling

Fireworks resamples images differently than most image-editing applications do. Fireworks contains pixel-based bitmap image objects and path-based vector objects.

• When a bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller.

• When a vector object is resampled, little quality loss occurs because the path is redrawn mathematically at a larger

or smaller size.

Because the attributes of vector objects in Fireworks are visible as pixels, some strokes or fills may appear slightly different after resampling because the pixels that compose the stroke or fill must be redrawn.

Note: Guides, hotspot objects, and slice objects are resized when the document’s image size is changed.

Resizing bitmap objects always presents a unique problem—do you add or remove pixels to resize the image, or do you change the number of pixels per inch or centimeter?

You can alter the size of a bitmap image by adjusting the resolution or by resampling the image. When adjusting the resolution, you change the size of the pixels in the image so that more or fewer pixels fit in a given space. Adjusting the resolution without resampling does not result in data loss.

Resampling up, or adding pixels to make the image larger, may result in quality loss because the pixels being added

do not always correspond to the original image.

Downsampling, or removing pixels to make the image smaller, always causes quality loss because pixels are

discarded to resize the image. Data loss in the image is another side effect of downsampling.

Rotating the canvas

Rotating the canvas is helpful when an image is imported upside down or sideways. You can rotate the canvas 180°, 90° clockwise, or 90° counterclockwise.

When you rotate the canvas, all objects in the document rotate.

To rotate the canvas, do one of the following:

• Select Modify > Canvas > Rotate 180°.

• Select Modify > Canvas > Rotate 90° CW.

• Select Modify > Canvas > Rotate 90° CCW.

Trimming or fitting the canvas

If your document contains extra space around the contents of the canvas, you can trim the canvas. You can also modify the canvas by expanding it to fit objects that extend beyond its boundary.

ADOBE FIREWORKS CS3

User Guide

Original; trimmed canvas

To trim or fit the canvas to the document contents: 1 Choose Select > Deselect to view the document properties in the Property inspector.

2 Click Fit Canvas in the Property inspector.

The canvas expands or contracts to the size of the contents of the canvas.

Cropping a document

By cropping, you can delete unwanted portions of a document. The canvas is resized to fit an area that you define.

By default, cropping deletes objects that extend beyond the canvas boundaries. You can retain objects outside the canvas by changing a preference before cropping.

To crop a document:

1 Select the Crop tool from the Tools panel or select Edit > Crop Document.

2 Drag a bounding box on the canvas. Adjust the crop handles until the bounding box surrounds the area of the

document that you want to keep.

3 Double-click inside the bounding box or press Enter to crop the document.

Fireworks resizes the canvas to the area you define and deletes objects beyond the edges of the canvas.

You can retain objects outside the canvas by deselecting Delete Objects when Cropping on the Editing tab of the Preferences dialog box before cropping. For more information about preferences, see “Setting preferences” on

page 346.

Using context menus

Context menus let you quickly access commands that are relevant to the current selection.

To display a context menu:

❖ Right-click (Windows) or Control-click (Macintosh) a selected item in the document window.

ADOBE FIREWORKS CS3

User Guide

Using rulers, guides, and the grid

You can use rulers and guides to lay out objects as precisely as possible and to help you draw. You can place guides in the document and snap objects to those guides or turn on the Fireworks grid and snap objects to the grid.

Using rulers

Rulers help you to measure, organize, and plan the layout of your work. Because Fireworks images are intended for the web, where graphics are measured in pixels, the rulers in Fireworks always measure in pixels, regardless of the unit of measurement you used when creating the document.

To show and hide rulers:

❖ Select View > Rulers.

Vertical and horizontal rulers appear along the margins of the document window.

Using guides

Guides are lines that you drag onto the document canvas from the rulers. They serve as drawing aids to help you place and align objects. You can use guides to mark important parts of your document, such as the margins, the document center point, and areas where you want to work precisely.

To help you align objects, Fireworks lets you snap objects to guides. You can lock guides to prevent them from being accidentally moved.

Note: Guides do not reside on a layer, nor are they exported with a document. They are merely design tools.

ADOBE FIREWORKS CS3

Fireworks also has slice guides that allow you to slice a document for use on the web. Regular image guides are different from slice guides, however. For information on slice guides, see “Moving slice guides to edit slices” on page 204.

To create a horizontal or vertical guide:

Click and then drag from the corresponding ruler.

2 Position the guide on the canvas and release the mouse button.

Note: You can reposition the guide by dragging it again.

To move a guide to a specific position:

Double-click the guide.

2 Enter the new position in the Move Guide dialog box, and click OK.

To show or hide guides:

❖ Select View > Guides > Show Guides.

To snap objects to guides:

❖ Select View > Guides > Snap to Guides.

User Guide

To change guide colors:

Select View > Guides > Edit Guides.

2 Select the new guide color from the color box pop-up window, and click OK.

To lock or unlock all guides:

❖ Select View > Guides > Lock Guides.

To remove a guide:

❖ Drag the guide off the canvas.

Note: In addition to these editing guides, the symbol editor also contains 9-slice scaling guides that are used for scaling shapes without distortion. For more information, see “Using 9-slice scaling” on page 188.

Using the grid

The Fireworks grid displays a system of horizontal and vertical lines on the canvas. The grid is useful for placing objects precisely. In addition, you can view, edit, resize, and change the color of the grid.

Note: The grid does not reside on a layer, nor is it exported with a document. It is merely a design tool.

To show and hide the grid:

❖ Select View > Grid > Show Grid.

To snap objects to the grid:

❖ Select View > Grid > Snap to Grid.

To change the grid color: 1 Select View > Grid > Edit Grid.

2 Select the new grid color from the color box pop-up window, and click OK.

To change the size of the grid’s cells:

Select View > Grid > Edit Grid.

2 Enter the appropriate values in the horizontal and vertical spacing text boxes, and click OK.

ADOBE FIREWORKS CS3

User Guide

Using the History panel to undo and repeat multiple actions

With the History panel, you can view, modify, and repeat the actions taken to create the document. The History panel lists the most recent actions you have performed in Fireworks, up to the number specified in the Undo Steps field in the Fireworks Preferences dialog box.

With the History panel, you can do any of the following:

• Quickly undo and redo recent actions.

• Select recently performed actions from the History panel and repeat them.

• Copy selected commands to the Clipboard as the JavaScript text equivalent.

• Save a group of recently performed actions as a custom command, and then select it from the Command menu to

reuse as a single command. For more information about creating commands using the History panel, see “Scripting with the History panel” on page 342.

To undo and redo actions: 1 Select Window > History to open the History panel.

2 Drag the Undo marker up or down.

To re peat actions:

Perform the actions.

2 Do one of the following to highlight the actions to be repeated in the History panel:

• Click an action to highlight it.

• Control-click (Windows) or Command-click (Macintosh) to highlight multiple individual actions.

• Shift-click to highlight a continuous range of actions.

3 Click the Replay button at the bottom of the History panel.

To save actions for reuse:

Highlight the actions to be saved in the History panel.

2 Click the Save button at the bottom of the panel.

3 Enter a command name and click OK.

To use the saved custom command:

❖ Select the command name from the Commands menu.

Chapter 3: Selecting and Transforming Objects

As you work in Fireworks CS3, you manipulate vector and bitmap objects, text blocks, slices and hotspots, and areas of pixels. Using the selection and transformation tools, you can move, copy, delete, rotate, scale, or skew objects. In documents that have multiple objects, you can organize the objects by stacking, grouping, and aligning them.

This chapter contains the following topics:

• “Selecting objects” on page 41

• “Selecting pixels” on page 44

• “Editing selected objects” on page 53

• “Transforming and distorting selected objects and selections” on page 54

• “Organizing objects” on page 58

Selecting objects

Before you can do anything with any object on the canvas, you must select it. This applies to a vector object, path, or points; a text block, word, or letter; a slice or hotspot; an instance; or a bitmap object.

You can use any of the following to select objects:

The Layers panel displays each object. You can click an object in the Layers panel to it select when the panel is open

and layers are expanded. For more information, see “Pages, Layers, Masking, and Blending” on page 155.

The Pointer tool selects objects when you click the objects or drag a selection area around them.

The Subselection tool selects an individual object in a group or the points of a vector object.

The Select Behind tool selects an object that is behind another object.

The Export Area tool selects an area to be exported as a separate file.

For information about selecting specific areas of pixels in a bitmap image, see “Selecting pixels” on page 44.

Using the Pointer tool

The Pointer tool selects objects when you click them or when you drag a selection area around all or part of the objects.

To select an object by clicking, do one of the following:

• Move the Pointer tool over the object’s path or bounding box and click.

• Click the object’s stroke or fill.

ADOBE FIREWORKS CS3

User Guide

• Select the object in the Layers panel.

To preview what you would select if you were to click on an object beneath the pointer on the canvas, select the Mouse Highlight option in the Editing tab of the Preferences dialog box. For more about preferences, see “Setting

preferences” on page 346.

To select objects by dragging: 1 Drag the Pointer tool to include one or more objects in the selection area.

Using the Subselection tool

You use the Subselection tool to select, move, or modify points on a vector path or an object that is part of a group.

To move or modify objects with the Subselection tool: 1 Select the Subselection tool.

2 Make a selection.

Selection handles appear.

3 Do one of the following:

• To modify an object, drag one of its points or selection handles.

• To move the entire object, drag anywhere in the object except a point or selection handle.

Using the Select Behind tool

When working with graphics that contain multiple objects, you can use the Select Behind tool to select an object that is hidden or obscured by other objects.

To select an object that is behind other objects:

❖ Click the Select Behind tool repeatedly over the stacked objects, progressing through the objects top to bottom in

stacking order until you select the object you want.

Note: You also can select a hard-to-reach object by clicking it in the Layers panel when the layers are expanded.

Selection information in the Property inspector

Whenever you select an object, the Property inspector identifies the selection. The upper left area of the Property inspector contains the following information about the selection:

• A description of the item being inspected

• A text box to enter a name for that item

ADOBE FIREWORKS CS3

User Guide

Note: The name appears in the title bar of the document whenever you select this item. For slices and buttons, the name is the filename when exported.

• The number of objects when more than one object is selected

Note: If the status bar is turned on (Windows only), selected objects are also identified in the status bar at the bottom of the document window.

The Property inspector also displays information and settings for the object type selected. For example, when you select a vector path, the Property inspector displays vector path properties, such as stroke width and color.

Modifying a selection

After you select a single object, you can add objects to the selection and deselect objects that are selected. Using a single command, you can select or deselect everything on every layer in a document. You can also hide the selection path so that you can edit a selected object while viewing it as it will appear on the web or in print.

To add to a selection:

❖ Hold down Shift while clicking additional objects with the Pointer, Subselection, or Select Behind tool.

To deselect an object while leaving other objects selected:

❖ Hold down Shift while clicking the selected object.

To select everything on every layer in the document:

❖ Choose Select > Select All.

Note: Select All does not select hidden objects.

To deselect all selected objects:

❖ Choose Select > Deselect.

Note: You must deselect the Single Layer Editing preference to select all visible objects on all layers in a document. When you select the Single Layer Editing preference, only objects on the current layer are selected. For more information, see “Organizing layers” on page 161.

To hide the path selection feedback of a selected object:

❖ Select View > Hide Edges.

Note: You can use the Layers panel or the Property inspector to identify the selected object when the outline and points are hidden.

To hide selected objects:

❖ Select View > Hide Selection.

Note: Hidden objects are not exported. (This does not apply to slice and hotspot web objects on the Web Layer.)

ADOBE FIREWORKS CS3

User Guide

To show all objects:

❖ Select View > Show All.

Note: To hide objects whether they are selected or not, you can click or drag along the Eye column in the Layers panel.

Selecting pixels

You can edit pixels over an entire canvas or select one of the selection tools to constrain your editing to a particular area of an image:

The Marquee tool selects a rectangular area of pixels in an image.

The Oval Marquee tool selects an elliptical area of pixels in an image.

The Lasso tool selects a freeform area of pixels in an image.

The Polygon Lasso tool selects a straight-edged freeform area of pixels in an image.

The Magic Wand tool selects an area of similarly colored pixels in an image.

The pixel selection tools draw selection marquees that define the area of selected pixels. After you draw the selection marquee, you can manipulate it by moving it, adding to it, or basing another selection on it. You can edit the pixels inside the selection, apply filters to the pixels, or erase pixels without affecting the pixels beyond the selection. You can also create a floating selection of pixels that you can edit, move, cut, or copy.

Bitmap selection tool options

When you select the Marquee, Oval Marquee, Lasso, Polygon Lasso, or Magic Wand tool, the Property inspector displays the options for that tool.

Selecting the Live marquee box allows you to change Edge settings and the amount of feather (if Feather is specified as the Edge setting) for your bitmap selection while you’re using the Marquee, Oval Marquee, Lasso, Polygon Lasso, and Magic Wand tool.

The Property inspector also displays three Edge options for these tools:

Hard creates a marquee selection with a defined edge.

Anti-alias prevents jagged edges in the marquee selection.

Feather lets you soften the edge of the pixel selection.

When using a selection tool, you can set the Feather option before creating a selection, or you can feather existing selections by selecting the Live marquee box. You can also feather existing selections using the Feather command in the Select menu. For more information, see “Feathering a pixel selection” on page 49.

When you select the Marquee or Oval Marquee, the Property inspector also displays three style options:

Normal lets you create a marquee in which the height and width are independent of each other.

Fixed Ratio constrains the height and width to defined ratios.

Fixed Size sets the height and width to a defined dimension.

ADOBE FIREWORKS CS3

User Guide

Note: The Magic Wand tool also has a Tolerance setting. For more information, see “Selecting areas of similar color” on page 46.

Creating pixel selection marquees

The Marquee, Oval Marquee, and Lasso tools in the Bitmap section of the Tools panel allow you to select specific pixel areas of a bitmap image by drawing a marquee around them.

Note: If you want to be able to change the settings for your selection while using one of these tools, be sure that you selected the Live marquee box before making your selection.

To select a rectangular or elliptical area of pixels:

Select the Marquee or Oval Marquee tool.

2 Set the Style and Edge options in the Property inspector. For more information, see “Bitmap selection tool

options” on page 44.

3 Drag to draw a selection marquee, which defines the pixel selection.

To draw additional square or circular marquees, hold down Shift as you drag the Marquee or Oval Marquee tool. If Live marquee is turned on while you make a series of selections, the Live marquee feature only affects the last selection in the series.

To draw a marquee from a center point, deselect any other active marquees, and then hold down Alt (Windows) or Option (Macintosh) as you draw.

To select a freeform area of pixels:

Select the Lasso tool.

2 Select an Edge option in the Property inspector. For more information, see “Bitmap selection tool options” on

page 44.

3 Drag the pointer around the pixels you want to select.

Plotting points to create a marquee selection

The Polygon Lasso tool allows you to select specific pixels in a bitmap image by clicking repeatedly around the perimeter of the pixel area you want to select.

To select a polygonal area of pixels:

Select the Polygon Lasso tool.

2 Select an Edge option in the Property inspector. For more information, see “Bitmap selection tool options” on

page 44.

3 Click to plot points around the perimeter of the object or area to outline the selection.

Hold down Shift to constrain Polygon Lasso marquee segments to 45° increments.

4 Do one of the following to close the polygon:

• Click the starting point.

• Double-click in the workspace.

ADOBE FIREWORKS CS3

User Guide

Selecting areas of similar color

The Magic Wand tool allows you to select areas of pixels that are similar in color. By adjusting the Magic Wand’s Tolerance and Edge options in the Property inspector, you can control how the Magic Wand selects pixels.

To select an area of pixels of similar color range: 1 Select the Magic Wand tool.

2 Select an Edge option in the Property inspector. For more information, see “Bitmap selection tool options” on

page 44.

3 Set the tolerance level by dragging the tolerance slider in the Property inspector.

Tolerance represents the tonal range of colors that are selected when you click a pixel with the Magic Wand. If you enter 0 and click a pixel, only adjacent pixels of exactly the same tone are selected. If you enter 65, a wider range of tones is selected.

4 Click the area of color you want to select.

A marquee appears around the selected range of pixels.

Pixels selected with a lower tolerance (above), then a higher tolerance (below)

To select similar colors throughout the document:

Select an area of color with a marquee or lasso tool, or with the Magic Wand tool.

2 Choose Select > Select Similar.

One or more marquees show all areas containing the selected range of pixels, according to the current Tolerance setting in the Property inspector for the Magic Wand tool.

Note: To adjust the tolerance for the Select Similar command, select the Magic Wand tool and then change the Tolerance setting in the Property inspector before using the command. You can also select the Live marquee box so that you can change the Tolerance setting while using the Magic Wand tool.

ADOBE FIREWORKS CS3

User Guide

Removing a selection marquee

You can remove a selection marquee without affecting the document.

To remove a marquee, do one of the following:

• Draw another marquee.

• Click outside the current selection with a marquee or lasso tool.

• Press Escape.

• Choose Select > Deselect.

Adjusting selection marquees

After selecting pixels with a marquee or lasso tool, you can edit or move the marquee border without affecting the pixels beneath it. You can manually add pixels to or delete pixels from a marquee border using modifier keys.

In addition, you c an exp and or contra ct the marquee borde r by a spe cified am ount, sele ct an a dditional area of pixels around the existing marquee, or smooth the border of the marquee.

Moving or adjusting a marquee

You can move a marquee to place it over a different area of pixels or reposition a marquee as you draw it by pressing the Spacebar while drawing.

To move the marquee, do one of the following:

• Drag the marquee with a marquee or lasso tool or the Magic Wand tool.

• Use the arrow keys to nudge the marquee in 1-pixel increments.

• Press Shift and use the arrow keys to move the marquee in 10-pixel increments.

To reposition a selection with the Spacebar: 1 Begin dragging to draw the selection.

2 Without releasing the mouse button, hold down the Spacebar.

3 Drag the marquee to another location on the canvas.

4 While still holding down the mouse button, release the Spacebar.

5 Continue dragging to draw the selection.

Adding or subtracting pixels

After drawing a selection marquee with any bitmap selection tool, you can add to the selection with the same tool or another bitmap selection tool.

To add to an existing pixel selection:

Select any bitmap selection tool.

2 Hold down Shift and draw additional selection marquees.

3 Repeat steps 1 and 2 with any bitmap selection tool to continue adding to the selection.

Overlapping marquees join to form a contiguous marquee.

ADOBE FIREWORKS CS3

To subtract pixels from a selection:

❖ Hold down Alt (Windows) or Option (Macintosh) and use a bitmap selection tool to select the pixel area to be

punched out.

Creating a marquee from intersecting marquees

You can select pixels in an existing marquee by drawing a marquee that overlaps the original.

To select a pixel area defined by the intersection of two marquees: 1 Hold down Alt+Shift (Windows) or Option+Shift (Macintosh) while creating a new marquee selection that

overlaps the original marquee.

2 Release the mouse button.

Only the pixels in the intersection area of the two marquees are selected.

Using thumbnails and modifier keys to modify pixel selections

With a bitmap selected, you can create a pixel selection on that bitmap using the opacity of any object or mask in the Layers panel. For more information about the Layers panel, see “Working with layers” on page 159.

To create or replace a pixel selection on a selected bitmap using the opacity of an object: 1 In the Layers panel, position the pointer over the thumbnail of the object you want to use to create the pixel

selection.

User Guide

2 Hold down Alt (Windows) or Command (Macintosh).

The pointer changes to indicate you are about to select the alpha channel, or the opaque area, of the object.

3 Click the thumbnail.

A new pixel selection is created on the selected bitmap.

To add to the current pixel selection:

• Alt-Shift-click (Windows) or Command-Shift-click (Macintosh) the thumbnail of an object in the Layers

panel to add the shape of its opaque area to the current pixel selection.

When you position the pointer over the thumbnail and hold down the specified modifier keys, the pointer indicates that you are about to add to the pixel selection.

To subtract from the current pixel selection:

• Control-Alt-click (Windows) or Command-Option-click (Macintosh) the thumbnail of an object in the

Layers panel to subtract the shape of its opaque area from the current pixel selection.

When you position the pointer over the thumbnail and hold down the specified modifier keys, the pointer indicates that you are about to subtract from the pixel selection.

To create a pixel selection on a selected bitmap from the intersection of overlapping objects:

Control-click (Windows) or Command-click (Macintosh) an object’s thumbnail to select its alpha channel, or

opaque area.

The pointer changes to indicate you are about to select the alpha channel, or the opaque area, of the object.

2 Control-Shift-Alt-click (Windows) or Command-Shift-Option-click (Macintosh) another object.

ADOBE FIREWORKS CS3

User Guide

A pixel selection is created on the selected bitmap from the intersection of the opaque areas of the two overlapping objects.

When you position the pointer over the thumbnail and hold down the specified modifier keys, the pointer indicates that you are about to create a pixel selection from the intersection of the opaque areas of two overlapping

objects.

Creating an inverse pixel selection

Starting with a current pixel selection, you can create another pixel selection that selects all the pixels that are not currently selected. You can use this method to select and then erase all pixels surrounding the original selection, for example.

To create an inverse pixel selection: 1 Make a pixel selection using any bitmap selection tool.

2 Choose Select > Select Inverse.

All pixels that were not in the original selection are now selected.

Feathering a pixel selection

Feathering creates a see-through effect for the selected pixels. When using the Feather command, you can try out various feather amounts and view the results before deselecting the pixels. You can also feather a selection by setting a feather amount in the Property inspector before or during your use of a bitmap selection tool. For more information, see “Bitmap selection tool options” on page 44.

To feather a pixel selection: 1 Choose Select > Feather.

2 Enter a Feather amount in the Feather dialog box.

The selection marquee changes size to reflect the feather amount.

3 If necessary, change the number in the Feather dialog box to adjust the feather amount.

4 Click OK.

To view the appearance of the feathered selection without the surrounding pixels, select Select > Select Inverse, and then press Delete. You can then use the History panel or Edit > Undo to try again.

Expanding or contracting a marquee

After you draw a marquee to select pixels, you can expand or contract its border.

To expand the border of a marquee:

After drawing the marquee, select Select > Expand Marquee.

2 Enter the number of pixels by which you want to expand the border of the marquee, and click OK.

To contract the border of a marquee:

After drawing the marquee, select Select > Contract Marquee.

2 Enter the number of pixels by which you want to contract the border of the marquee, and click OK.

ADOBE FIREWORKS CS3

User Guide

Selecting an area around an existing marquee

You can create an additional marquee to frame an existing marquee at a specified width. This lets you create special graphics effects, such as feathering the edges of a pixel selection.

To select an area around an existing marquee: 1 After drawing a marquee, select Select > Border Marquee.

2 Enter the width of the marquee that you want to place around the existing marquee, and click OK.

Smoothing the border of a marquee

You can eliminate excess pixels along the edges of a pixel selection. This is useful if excess pixels appear along the border of a pixel selection or marquee after you use the Magic Wand tool.

A pixel selection before and after smoothing

To smooth the border of a marquee: 1 Choose Select > Smooth Marquee.

2 Enter a sample radius to specify the desired degree of smoothing, and click OK.

Converting a marquee to a path

Using Fireworks, you can convert a bitmap selection to a vector object by drawing a marquee around the part of the bitmap that you want to convert. This process is useful if you want to start creating an animation by tracing a selection from a bitmap, for example.

To convert a marquee to a path

❖ After drawing a marquee, select Select > Convert Marquee to Path.

The document’s current stroke and fill attributes are applied to the new path.

Transferring a marquee selection

You can transfer a marquee selection from one bitmap to another bitmap object on the same layer or one on a different layer. You can also transfer the marquee selection to a mask.

To transfer a marquee selection to another bitmap object:

Make a selection by drawing the marquee.

2 In the Layers panel, select a different bitmap object on the same layer or an object on a different layer.

The marquee is transferred to that object.

Note: Fireworks treats masks and masked objects as separate objects. For more information on masks, see “Masking images” on page 164.

ADOBE FIREWORKS CS3

User Guide

Saving marquee selections

You can save the size, shape, and location of a selection to reapply later. You can also save multiple marquee selections.

To save a marquee selection: 1 Choose Select > Save Bitmap Selection to open the Save Selection dialog box.

2 The Document box displays the name of the active document in which your marquee selection will be saved. You

can either leave that name as is, or select another one from the pop-up menu if you would rather save your marquee selection to another open document.

3 The Selection box displays the name of the active selection in the active document. If this is a new selection, the

word New appears by default. You can leave that as is, or if you want to replace a previously saved selection with the new selection, select another saved selection from the pop-up menu.

4 The Name box, which displays the word Default, is only enabled if the Selection box displays the word New. If this

is the case, select the word Default and type a name for your new selection.

5 If the Selection box displays the word New, the New selection will be enabled in the Operation section of the Save

Selection dialog box. If a previously saved selection is selected in the Selection box, then all of the following options will be enabled in the Operation section.

• “Replace selection” replaces the active selection in the active document with the one specified in the Selection box.

• “Add to selection” adds the active selection to the one specified in the Document and Selection boxes.

• “Subtract from selection” subtracts the active selection from the one specified in the Document and Selection

boxes.

• “Intersect with selection” intersects the active selection with the one specified in the Document and Selection

boxes.

6 Select an option in the Operation section, and then click OK.

Repeat this process for each of the marquee selections that you want to save.

Restoring marquee selections

You can restore a marquee selection that you have previously named and saved.

To restore a marquee selection:

Choose Select > Restore Bitmap Selection to open the Restore Selection dialog box.

2 The Document box displays the name of the active document in which a marquee selection has been saved. You

can either leave that name as is, or select another one from the pop-up menu if you would rather restore a marquee selection from another open document.

3 The Selection box displays the name of the selection that will be restored. If you want to restore a different

selection, select it from the pop-up menu.

4 If you want to invert the restored selection, select the Invert box.

5 If there is no active marquee selection in the current document, then New selection will be enabled in the

Operation section of the Restore Selection dialog box. If there is an active marquee selection in the current document, then all of the following options will be enabled in the Operation section.

• “Replace selection” replaces the active selection in the active document with the one specified in the Selection box.

• “Add to selection” adds the active selection to the one specified in the Document and Selection boxes.

ADOBE FIREWORKS CS3

User Guide

• “Subtract from selection” subtracts the active selection from the one specified in the Document and Selection

boxes.

• “Intersect with selection” intersects the active selection with the one specified in the Document and Selection

boxes.

6 Select an option in the Operation section, and then click OK

Repeat this process for each of the marquee selections that you want to restore.

Deleting marquee selections

You can delete a marquee selection that you have previously named and saved.

Note: This feature is enabled only if an open document contains at least one saved selection.

To delete a marquee selection: 1 Choose Select > Delete Bitmap Selection to open the Delete Selection dialog box.

2 The Document box displays the name of the active document containing a marquee selection. You can either leave

that name as is, or select another one from the pop-up menu if you want to delete a marquee selection from a different document.

3 The Selection box displays the name of the active selection in the active document. You can leave that as is, or if

you want to delete a different selection from the document that appears in the Document box, select another selection from the pop-up menu.

4 To delete the selection that appears in the Selection box, click OK. To close the dialog box without deleting any

selections, click Cancel.

Creating and moving a floating pixel selection

When you drag a marquee to a new location, the marquee itself moves. If you want to move, edit, cut, or copy a selection of pixels, you must first make the pixels a floating selection.

To create a floating pixel selection: 1 Make a pixel selection with a bitmap selection tool.

2 Do one of the following:

• Hold down Control (Windows) or Command (Macintosh) and drag the selection using any tool from the Bitmap

section of the Tools panel.

• Select the Pointer tool and drag the selection.

To move a floating selection, do one of the following:

• Drag the floating selection with the Pointer tool or any bitmap selection tool.

• If a non-selection bitmap tool is active, hold down Control (Windows) or Command (Macintosh) and drag the

floating selection.

• Use the arrow keys or Shift+arrow keys.

When you deselect the floating pixel selection or select any vector or web tool, the floating selection becomes part of the current bitmap object.

ADOBE FIREWORKS CS3

User Guide

Inserting a new bitmap by cutting or copying

You can insert a new bitmap based on a pixel selection into the current layer of a document by cutting or copying the selected pixels.

To insert a new bitmap by cutting and pasting a pixel selection:

Select an area of pixels using a pixel selection tool.

2 Select Edit > Insert > Bitmap via Cut.

A new bitmap object based on the pixel selection is created in the current layer, and the selected pixels are removed from the original bitmap object. In the Layers panel, a thumbnail of the new bitmap appears in the current layer, above the object from which it was cut.

To insert a new bitmap by copying and pasting a pixel selection: 1 Select an area of pixels using a pixel selection tool.

2 Select Edit > Insert > Bitmap via Copy.

A new bitmap object based on the pixel selection is created in the current layer, and the selected pixels remain in the original bitmap object. In the Layers panel, a thumbnail of the new bitmap appears in the current layer, above the object from which it was copied.

Editing selected objects

Fireworks gives you a number of ways to edit selected objects: you can move objects on the canvas or from application to application, you can replicate objects with the Clone and Duplicate commands, or you can remove objects from the workspace altogether.

To move a selection, do one of the following:

• Drag it with the Pointer, Subselection, or Select Behind tool.

• Press any arrow key to move the selection in 1-pixel increments.

• Hold down Shift while pressing any arrow key to move the selection in 10-pixel increments.

• In the Property inspector, enter the X and Y coordinates for the location of the top left corner of the selection.

• Enter the object’s x and y coordinates in the Info panel. If the X and Y boxes aren’t visible, drag the bottom edge

of the panel.

To move or copy selected objects by pasting:

Select an object or multiple objects.

2 Select Edit > Cut or Edit > Copy.

3 Select Edit > Paste.

To duplicate one or more selected objects:

❖ Select Edit > Duplicate.

As you repeat the command, duplicates of the selected object appear in a cascading arrangement from the original, 10 pixels lower and 10 pixels to the right of the previous duplicate. The most recently duplicated object becomes the selected object.

ADOBE FIREWORKS CS3

User Guide

Note: You cannot use the Duplicate or Clone commands with bitmap selections. Use the Subselection tool or Rubber Stamp tool to duplicate parts of a bitmap image. For more information about using the Subselection tool, see the following procedures. For more information about using the Rubber Stamp tool, see “Retouching bitmaps” on page 66.

To duplicate a pixel selection, do one of the following:

• Drag the pixel selection using the Subselection tool.

• Alt-drag (Windows) or Option-drag (Macintosh) the object using the Pointer tool.

To clone a selection:

❖ Select Edit > Clone.

The clone of the selection is stacked precisely in front of the original and becomes the selected object.

Note: To move a selected clone away from the original with pixel-by-pixel precision, use the arrow keys or Shift+arrow keys. This is a convenient way to maintain a specific distance between clones or maintain the vertical or horizontal alignment of the clones.

To delete selected objects, do one of the following:

• Press Delete or Backspace.

• Select Edit > Clear.

• Select Edit > Cut.

• Right-click (Windows) or Control-click (Macintosh) the object and select Edit > Cut from the context menu.

To cancel or deselect a selection, do one of the following:

• Choose Select > Deselect.

• Click anywhere in the image outside of the selected area if you are using the Marquee, Oval Marquee, or Lasso tool.

• Press Escape.

Transforming and distorting selected objects and selections

You can transform a selected object or group, or a pixel selection, using the Scale, Skew, and Distort tools and menu commands:

Scale enlarges or reduces an object.

Skew slants an object along a specified axis.

Distort moves the sides or corners of an object in the direction you drag a selection handle while the tool is active. This is helpful in creating a 3D look.

When you select any transformation tool or Transform menu command, Fireworks displays transform handles around selected objects.

ADOBE FIREWORKS CS3

User Guide

A. Center point B. Transf orm h and les

Object rotated, scaled, skewed, distorted, and flipped vertically and horizontally

To transform selected objects using the transform handles: 1 Select a transformation tool.

As you move the pointer on or near the selection handles, the pointer changes to indicate the current transformation.

2 Do one of the following to transform the objects:

• Place the pointer near a corner point and then drag to rotate.

• Drag a transform handle to transform according to the active transformation tool.

3 Double-click inside the window or press Enter to apply your changes.

Resizing (scaling) objects

Scaling an object enlarges or reduces it horizontally, vertically, or in both directions.

To scale a selected object: 1 Do one of the following to display the transform handles:

• Select the Scale tool.

• Select Modify > Transform > Scale.

2 Drag the transform handles:

• To scale the object both horizontally and vertically, drag a corner handle. Proportions are constrained if you press

the Shift key as you scale.

• To scale the object horizontally or vertically, drag a side handle.

• To scale the object from the center, press Alt while dragging any handle.

Note: You can also resize selected objects by entering dimensions in the Property inspector. For more information, see “Transforming objects numerically” on page 57.

Rotating objects

When rotated, an object pivots on its center point. You rotate an object by selecting a preset angle or by placing the pointer outside an object’s transform handles to display the rotation pointer before you drag.

ADOBE FIREWORKS CS3

Note: You can also rotate the document canvas. For more information, see “Rotating the canvas” on page 36.

To rotate a selected object 90° or 180°:

❖ Select Modify > Transform and select a Rotate command from the submenu.

To rotate a selected object by dragging:

Select any transformation tool.

2 Move the pointer outside the object until the rotation pointer appears.

3 Drag to rotate the object.

To constrain rotation to 15° increments relative to the horizon, Shift-drag the pointer.

User Guide

4 Double-click inside the window or press Enter to apply your changes.

To relocate the axis of rotation:

❖ Drag the center point away from the center.

To reset the axis of rotation to the center of the selection, do one of the following:

• Double-click the center point

• Press Escape to deselect the object, then select it again.

Flipping objects

You can flip an object across its vertical or horizontal axis without moving its relative position on the canvas.

To flip a selected object:

❖ Select Modify > Transform > Flip Horizontal or Flip Vertical.

Skewing objects

Skewing an object transforms it by slanting it along the horizontal or vertical axis, or both axes.

To skew a selected object:

Do one of the following to display the transform handles:

• Select the Skew tool.

• Select Modify > Transform > Skew.

2 Drag a handle to skew the object.

3 Double-click inside the window or press Enter to remove the transform handles.

ADOBE FIREWORKS CS3

To achieve the illusion of perspective:

❖ Drag a corner point.

Distorting objects

You change the size and proportions of an object by dragging a selection handle with the Distort tool.

To distort a selected object: 1 Do one of the following to display the transform handles:

• Select the Distort tool.

• Select Modify > Transform > Distort.

2 Drag a handle to distort the object.

3 Double-click inside the window or press Enter to apply your changes.

Transforming objects numerically

Instead of dragging an object to scale, resize, or rotate it, you can transform it by entering specific values.

To resize selected objects using the Property inspector or Info panel:

❖ Enter new width (W) or height (H) measurements.

User Guide

Note: If the W and H boxes aren’t visible in the Property inspector, click the expander arrow to see all properties.

To scale or rotate selected objects using Numeric Transform: 1 Select Modify > Transform > Numeric Transform.

The Numeric Transform dialog box opens.

2 From the pop-up menu, select the type of transformation to perform on the current selection: Scale, Resize, or

Rotate.

3 Select Constrain Proportions to maintain horizontal and vertical proportions when scaling or resizing a selection.

4 Select Scale Attributes to transform the fill, stroke, and effects of the object along with the object itself.

5 Deselect Scale Attributes to transform the path only.

6 Type numeric values to transform the selection, then click OK.

Viewing transformation information in the Info panel

The Info panel lets you view numerical transformation information for the currently selected object. The information updates as you edit the object.

• For scaling and free transformations, the Info panel shows the width (W) and height (H) of the original object

before transformation and the percentage of increase or decrease in width and height during the transformation.

• For skewing and distorting, the Info panel shows the skew angle in one-degree increments and the X and Y pointer

coordinates during the transformation.

To view transformation information as you transform a selection:

❖ Select Window > Info.

ADOBE FIREWORKS CS3

User Guide

Organizing objects

When working with multiple objects in a single document, you can use several techniques to organize the document:

• You can group individual objects to treat them as one or protect each object’s relationship to the others in the

group.

• You can arrange objects behind or in front of other objects. The way objects are arranged is called the stacking

order.

• You can align selected objects to an area of the canvas or to a vertical or horizontal axis.

Grouping objects

You can group individual selected objects and then manipulate them as if they were a single object. For example, after drawing the petals of a flower as individual objects, you can group them to select and move the entire flower as a single object.

You can edit groups without ungrouping them. You can select an individual object in a group for editing without ungrouping the objects. You can also ungroup the objects at any time.

To group two or more selected objects:

❖ Select Modify > Group.

To ungroup selected objects:

❖ Select Modify > Ungroup.

Selecting objects within groups

To work with individual objects within a group, you can either ungroup the objects or use the Subselection tool to select individual objects while leaving the group intact.

Subselection tool

Modifying the attributes of a subselected object changes only the subselected object, not the entire group. Moving a subselected object to another layer removes the object from the group.

Subselecting an object within a group

To select an object that is part of a group:

❖ Select the Subselection tool and click the object or drag a selection area around it. To add objects to or remove

them from the selection, hold down Shift as you click or drag.

ADOBE FIREWORKS CS3

User Guide

To select the group that contains a subselected object, do one of the following:

• Right-click (Windows) or Control-click (Macintosh) anywhere in the group and choose Select > Superselect from

the context menu.

• Choose Select > Superselect.

To select all objects within a selected group, do one of the following:

• Right-click (Windows) or Control-click (Macintosh) anywhere on the group and choose Select > Subselect from

the context menu.

• Choose Select > Subselect.

Stacking objects

Within a layer, Fireworks stacks objects based on the order in which they were created, placing the most recently created object on the top of the stack. The stacking order of objects determines how they appear when they overlap.

Layers also affect the stacking order. For example, suppose a document has two layers named Layer 1 and Layer 2. If Layer 1 is listed below Layer 2 on t he Layers panel, then everything on Layer 2 appears in front of everything on Layer

1. You can change the order of layers by dragging the layer in the Layers panel to a new position. For more information, see “Organizing layers” on page 161.

To change the stacking order of a selected object or group within a layer:

• Select Modify > Arrange > Bring to Front or Send to Back to move the object or group to the top or bottom of the

stacking order.

• Select Modify > Arrange > Bring Forward or Send Backward to move the object or group up or down one position

in the stacking order.

If more than one object or group is selected, the objects move in front of or behind all unselected objects while maintaining their order relative to one another.

Aligning objects

The Align commands in the Modify menu or the options on the Align panel give you a wide range of arrangement options, allowing you to do any of the following:

• Align objects along a horizontal or vertical axis.

• Align selected objects vertically along their right edge, center, or left edge, or horizontally along their top edge,

center, or bottom edge.

Note: Edges are determined by the bounding boxes enclosing each selected object.

• Distribute selected objects so that their centers or edges are evenly spaced.

You can apply one or more Align commands to selected objects.

To align selected objects, do one of the following:

• Select Modify > Align > Left to align the objects to the leftmost selected object.

• Select Modify > Align > Center Vertical to align the center points of the objects along a vertical axis.

• Select Modify > Align > Right to align the objects to the rightmost selected object.

• Select Modify > Align > Top to align the objects to the topmost selected object.

ADOBE FIREWORKS CS3

User Guide

• Select Modify > Align > Center Horizontal to align the center points of the objects along a horizontal axis.

• Select Modify > Align > Bottom to align the objects to the bottommost selected object.

To evenly distribute the widths or heights of three or more selected objects:

❖ Select Modify > Align > Distribute Widths or Modify > Align > Distribute Heights.

About arranging objects among layers

The Layers panel offers another dimension of organizational control. You can move selected objects from one layer to another by dragging the object thumbnail or the blue selection indicator in the Layers panel to another layer. For more information, see “Organizing layers” on page 161.

Chapter 4: Working with Bitmaps

Bitmaps are graphics composed of small colored squares called pixels, which combine like the tiles of a mosaic to cr ea te a n i ma ge. Ex amp le s of bi tm ap g ra phi cs in clu de phot og rap hs , s can ne d image s, and g ra phic s c reat ed from pa int programs. They are sometimes referred to as raster images.

Fireworks CS3 combines the functionality of photo-editing, vector-drawing, and painting applications. You can create bitmap images by drawing and painting with bitmap tools, by converting vector objects to bitmap images, or by opening or importing images.

Fireworks has a powerful set of Live Filters for tone and color adjustment, as well as a number of ways to retouch your bitmap images, including cropping, feathering, and duplicating or cloning images. In addition, Fireworks has a set of image-retouching tools—Blur, Sharpen, Dodge, Burn, and Smudge.

For information on methods for selecting and transforming images and pixel areas, see “Selecting and Transforming Objects” on page 41.

This chapter contains the following topics:

• “Working with bitmaps” on page 61

• “Creating bitmap objects” on page 61

• “Accessing photo editing tools” on page 63

• “Drawing, painting, and editing bitmap objects” on page 63

• “Retouching bitmaps” on page 66

• “Adjusting bitmap color and tone” on page 71

• “Blurring and sharpening bitmaps” on page 79

• “Adding noise to an image” on page 83

Working with bitmaps

The Bitmap section of the Tools panel contains bitmap selection and editing tools. To edit the pixels of a bitmap in your document, you can select a tool from the Bitmap section. Unlike in previous versions of Fireworks, you do not need to deliberately switch between bitmap mode and vector mode, but you can still work with bitmaps, vector objects, and text. Switching to the appropriate mode is as simple as selecting a vector or bitmap tool from the Tools panel.

Creating bitmap objects

You can create bitmap graphics by using the Fireworks bitmap drawing and painting tools, by cutting or copying and pasting pixel selections, or by converting a vector image into a bitmap object. Another way to create a bitmap object is to insert an empty bitmap image in your document and then draw, paint, or fill it.

ADOBE FIREWORKS CS3

User Guide

When you create a new bitmap object, it is added to the current layer. In the Layers panel with layers expanded, you can see a thumbnail and name for each bitmap object under the layer on which it resides. Although some bitmap applications consider each bitmap object a layer, Fireworks organizes bitmap objects, vector objects, and text as separate objects that reside on layers. For more information, see “Working with layers” on page 159.

To create a new bitmap object: 1 Select the Brush or Pencil tool from the Bitmap section of the Tools panel.

2 Paint or draw with the Brush or Pencil tool to create bitmap objects on the canvas.

A new bitmap object is added to the current layer in the Layers panel. For more information on using the Pencil or Brush tools, see “Drawing, painting, and editing bitmap objects” on page 63.

You can create a new empty bitmap, and then draw or paint pixels in the empty bitmap.

To create an empty bitmap object, do one of the following:

• Click the New Bitmap Image button in the Layers panel.

• Select Edit > Insert > Empty Bitmap.

• Draw a selection marquee, starting in a blank area of the canvas, and fill it. For more information, see “Creating

pixel selection marquees” on page 45.

An empt y bit map i s adde d to the current layer i n the L ayers panel. If t he empty bitm ap is desel ected bef ore any pixe ls have been drawn, imported, or otherwise placed on it, the empty bitmap object automatically disappears from the Layers panel and the document.

To cut or copy pixels and paste them as a new bitmap object: 1 Make a pixel selection using the Marquee tool, Lasso tool, or Magic Wand tool.

For more information, see “Selecting pixels” on page 44.

2 Do one of the following:

• Select Edit > Cut, then Edit > Paste.

• Select Edit > Copy, then Edit > Paste.

• Select Edit > Insert > Bitmap via Copy to copy the current selection into a new bitmap.

• Select Edit > Insert > Bitmap via Cut to cut the current selection for placement into a new bitmap.

The selection appears in the Layers panel as an object on the current layer.

Note: You can also Right-click (Windows) or Control-click (Macintosh) a pixel marquee selection and select a cut or copy option from the context menu. For more information about the Bitmap via Cut and Bitmap via Copy options, see “Inserting a new bitmap by cutting or copying” on page 53.

To convert selected vector objects to a bitmap image, do one of the following:

• Select Modify > Flatten Selection.

• Select Flatten Selection from the Layers panel Options menu.

A vector-to-bitmap conversion is irreversible, except when Edit > Undo or undoing actions in the History panel is still an option. Bitmap images cannot be converted to vector objects.

ADOBE FIREWORKS CS3

User Guide

Accessing photo editing tools

To make it easy for you to get started editing photos as quickly as possible, Fireworks has assembled the most commonly used tools for photo editing all in one place. The Image Editing panel contains the following tools: Redeye Removal, Crop, Rotate, Blur, Sharpen, Dodge, and Burn.

The Image Editing panel also contains:

• Transform Tools: Scale, Skew, Distort, Free Rotate

• Transform Commands: Numeric Transform, Rotate options, Flip Horizontal, Flip Vertical, Remove Transforma-

tions

• Adjust Color: Auto Levels, Brightness/Contrast, Curves, Hue/Saturation, Invert, Levels, Convert to Grayscale,

Convert to Sepia Tone

• Filters: Blur, Blur More, Sharpen, Sharpen More, Unsharp Mask, Add Noise, Convert to Alpha, Find Edges

• View Options: Show/Hide Rulers, Show/Hide Grid, Snap/Don’t Snap to Grid, Edit Grid, Show/Hide Guides,

Snap/Don’t Snap to Guides, Lock/Unlock Guides, Edit Guides

The tools contained in the Image Editing panel are the same tools you’ll find in other places in Fireworks (such as in the toolbox and on the Modify > Transform menu). The Image Editing panel, which you can open by selecting Window > Image Editing, simply presents some of the most commonly used tools all in one panel for your convenience.

For detailed information on how to use these tools and options, please see “Retouching bitmaps” on page 66, “Adjusting bitmap color and tone” on page 71, “Blurring and sharpening bitmaps” on page 79, and “Adding noise to an image” on page 83.

Drawing, painting, and editing bitmap objects

The Bitmap section of the Tools panel contains tools for selecting, drawing, painting, and editing pixels in a bitmap image.

Drawing bitmap objects

You can use the Pencil tool to draw 1-pixel lines, either freehand lines or constrained, straight lines, much as you use a real pencil, with or without a ruler, to draw hard-edged lines. You can also zoom in on a bitmap and use the Pencil tool to edit individual pixels.

To draw an object with the Pencil tool:

Select the Pencil tool.

2 Set tool options in the Property inspector:

Anti-aliased smoothes the edges of the lines you draw.

Auto Erase uses the fill color when the Pencil tool is clicked over the stroke color.

Preserve Transparency restricts the Pencil tool to drawing only in existing pixels, not in transparent areas of a

graphic.

3 Drag to draw. Shift-drag to constrain the path to a horizontal, vertical, or diagonal line.

ADOBE FIREWORKS CS3

User Guide

Painting bitmap objects

You can use the Brush tool to paint a brush stroke using the color in the Stroke Color box, or you can use the Paint Bucket tool to change the color of selected pixels to the color in the Fill Color box. With the Gradient tool, you can fill bitmap or vector objects with a combination of colors in adjustable patterns.

To paint an object with the Brush tool:

Select the Brush tool.

2 Set the stroke attributes in the Property inspector.

3 Drag to paint.

For more information about setting Brush tool options, see “Working with strokes” on page 136.

To change the color of pixels to the color in the Fill Color box:

1 Select the Paint Bucket tool.

2 Select a color in the Fill Color box.

3 Set the tolerance value in the Property inspector.

Note: The tolerance determines how similar in color pixels must be to be filled. A low tolerance value fills pixels with color values similar to the pixel you click. A high tolerance fills pixels with a broader range of color values.

4 Click the image.

All pixels within the tolerance range change to the fill color.

To apply a gradient fill to a pixel selection: 1 Make the selection.

2 Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop-up menu.

3 Set the fill attributes in the Property inspector.

4 Click the pixel selection to apply the fill.

The Paint Bucket and Gradient tools can also fill selected vector objects. For more information about creating, applying, and editing gradient fills, see “Working with fills” on page 140.

Sampling a color to use as a stroke or fill color

With the Eyedropper tool, you can sample color from an image to designate a new stroke or fill color. You can sample the color of a single pixel, an average of color values within a 3-by-3-pixel area, or an average of color values within a 5-by-5-pixel area.

To sample a stroke or fill color:

If the correct attribute is not already active, do one of the following:

• Click the stroke icon next to the Stroke Color box in the Tools panel to make it the active attribute.

• Click the fill icon next to the Fill Color box in the Tools panel to make it the active attribute.

Note: Do not click the color box itself. If you do, the eyedropper pointer that appears is not the Eyedropper tool. For information on the color box eyedropper pointer, see “Sampling colors from a color pop-up window” on page 136.

ADOBE FIREWORKS CS3

User Guide

2 Open a Fireworks document or any file that Fireworks can open. For more information, see “Slices, Rollovers,

and Hotspots” on page 200.

3 Select the Eyedropper tool from the Colors section of the Tools panel. Set the Color Averaging Sample setting

in the Property inspector:

1-pixel creates a stroke or fill color from a single pixel.

3x3 pixels creates a stroke or fill color from the average of color values in a 3-by-3-pixel area.

5x5 pixels creates a stroke or fill color from the average of color values in a 5-by-5-pixel area.

4 Click the Eyedropper tool anywhere in the document.

The sampled color appears in all Stroke Color or Fill Color boxes throughout Fireworks.

Erasing bitmap objects

You can use the Eraser tool to remove pixels. By default, the Eraser tool pointer represents the size of the current eraser, but you can change the size and appearance of the pointer in the Preferences dialog box. For more information, see “Editing preferences” on page 347.

Eraser tool

To erase pixels in a selected bitmap object or pixel selection:

Select the Eraser tool.

2 In the Property inspector, select the round or square eraser shape.

3 Drag the Edge slider to set the softness of the eraser’s edge.

4 Drag the Size slider to set the size of the eraser.

5 Drag the Eraser Opacity slider to set the degree of opacity.

6 Drag the Eraser tool over the pixels you want to erase.

Feathering pixel selections

Feathering blurs the edges of a pixel selection and helps the selected area blend with the surrounding pixels. Feathering is useful when you copy a selection and paste it onto another background.

To feather the edges of a pixel selection as you make a pixel selection:

Select a bitmap selection tool from the Tools panel.

2 Select Feather from the Edge pop-up menu in the Property inspector.

3 Drag the slider to set the number of pixels you want to blur along the edge of the selection.

4 Make a selection.

To feather the edges of a pixel selection from the menu bar:

Choose Select > Feather.

2 Type a value in the Feather Selection dialog box to set the feather radius, and click OK.

ADOBE FIREWORKS CS3

User Guide

The radius value determines the number of pixels that are feathered on each side of the selection border.

Retouching bitmaps

Fireworks provides a wide range of tools to help you retouch your images. You can alter an image’s size, reduce or sharpen its focus, or copy and “stamp” a part of it to another area.

The Rubber Stamp tool lets you copy or clone one area of an image to another.

The Blur tool decreases the focus of selected areas in an image.

The Smudge tool picks up color and pushes it in the direction that you drag in an image.

The Sharpen tool sharpens areas in an image.

The Dodge tool lightens parts of an image.

The Burn tool darkens parts of an image.

The Red-eye Removal tool reduces the appearance of red-eye in photos

The Replace Color tool paints over one color with another color

Cloning pixels

The Rubber Stamp tool clones an area of a bitmap image so that you can stamp it elsewhere in the image. Cloning pixels is useful when you want to fix a scratched photograph or remove dust from an image; you can copy a pixel area of a photo and replace the scratch or dust spot with the cloned area.

To clone portions of a bitmap image:

Select the Rubber Stamp tool.

2 Click an area to designate it as the source, or the area you want to clone.

The sampling pointer becomes a cross-hair pointer.

Note: To designate a different area of pixels to clone, you can Alt-click (Windows) or Option-click (Macintosh) another area of pixels to designate it as the source.

ADOBE FIREWORKS CS3

3 Move to a different part of the image and drag the pointer.

User Guide

You will see two pointers. The first one, the source of the cloning, is in the shape of a cross hair. For more information, see “Editing preferences” on page 347.

Depending upon the brush preferences you’ve selected, the second pointer is a rubber stamp, a cross hair, or a blue circle. As you drag the second pointer, pixels beneath the first pointer are copied and applied to the area beneath the second.

To set Rubber Stamp tool options:

Select the Rubber Stamp tool.

2 Select from among the following options in the Property inspector:

Size determines the size of the stamp.

Edge determines the softness of the stroke (100% is hard; 0% is soft).

Source Aligned affects the sampling operation. When Source Aligned is selected, the sampling pointer moves verti-

cally and horizontally in alignment with the second. When Source Aligned is deselected, the sample area is fixed, regardless of where you move and click the second pointer.

Use Entire Document samples from all objects on all layers. When this option is deselected, the Rubber Stamp tool

samples from the active object only.

Opacity determines how much of the background can be seen through the stroke.

Blend Mode affects how the cloned image affects the background.

To duplicate a pixel selection, do one of the following:

• Drag the pixel selection with the Subselection tool.

• Alt-drag (Windows) or Option-drag (Macintosh) the pixel selection using the Pointer tool.

Blurring, sharpening, and smudging pixels

The Blur and Sharpen tools affect the focus of pixels. The Blur tool lets you emphasize or de-emphasize parts of an image by selectively blurring the focus of elements, much as a photographer controls depth of field. The Sharpen tool can be useful for repairing scanning problems or out-of-focus photographs. The Smudge tool lets you gently blend colors, as when creating a reflection of an image.

To blur or sharpen an image:

Select the Blur or Sharpen tool.

2 Set brush options in the Property inspector:

Size sets the size of the brush tip.

Edge specifies the softness of the brush tip.

Shape sets a round or square brush tip shape.

Intensity sets the amount of blurring or sharpening.

3 Drag the tool over the pixels to be sharpened or blurred.

Hold down Alt (Windows) or Option (Macintosh) to change from one tool behavior to the other.

ADOBE FIREWORKS CS3

To smudge colors in an image:

Select the Smudge tool.

2 Set the tool options in the Property inspector:

Size specifies the size of the brush tip.

Shape sets a round or square brush tip shape.

Edge specifies the softness of the brush tip.

Pressure sets the intensity of the stroke.

Smudge Color allows you to smudge using a specified color at the beginning of each stroke. If this option is

User Guide

deselected, the tool uses the color under the tool pointer.

Use Entire Document smudges using color data from all objects on all layers. If this option is deselected, the Smudge

tool uses colors from the active object only.

3 Drag the tool over the pixels to be smudged.

Lightening and darkening pixels

You use the Dodge or Burn tool to lighten or darken parts of an image, respectively. This is similar to the darkroom technique of increasing or decreasing light exposure as the photograph is developed.

To lighten or darken parts of an image: 1 Select the Dodge tool to lighten parts of an image or the Burn tool to darken parts of an image.

2 Set the brush options in the Property inspector:

Size sets the size of the brush tip.

Shape sets a round or square brush tip shape.

Edge sets the softness of the brush tip.

3 Set the exposure in the Property inspector.

The exposure ranges from 0% to 100%. For a lessened effect, specify a lower percentage value; for a stronger effect, specify a higher value.

4 Set the range in the Property inspector:

Shadows changes mainly the dark portions of the image.

Highlights changes mainly the light portions of the image.

Midtones changes mainly the middle range per channel in the image.

5 Drag over the part of the image you want to lighten or darken.

Hold down Alt (Windows) or Option (Macintosh) as you drag the tool to temporarily switch from the Dodge tool to the Burn tool or from the Burn tool to the Dodge tool.

Removing red-eye from photos

In some photographs, the subjects’ pupils are an unnatural shade of red. You can use the Red-eye Removal tool to correct this red-eye effect. The Red-eye Removal tool quickly paints red areas of a photograph only, replacing reddish colors with grays and blacks.

ADOBE FIREWORKS CS3

Original photograph; after using the Red-eye Removal tool

To correct the red-eye effect in a photograph:

1 Select the Red-eye Removal tool from its pop-up menu.

2 Set the attributes in the Property inspector:

To le ra n ce determines the range of hues to replace (0 replaces only red; 100 replaces all hues that contain red).

User Guide

Strength sets the darkness of the grays used to replace reddish colors.

3 Click and drag the cross-hair pointer over the red pupils in the photograph.

Replacing colors

The Replace Color tool lets you select a color and paint over that color with a different color.

Original photograph; after using the Replace Color tool

Fireworks provides two different ways to replace one color with another. You can replace a color that you’ve specified in the color swatch, or you can replace a color by using the Replace Color tool directly on the image.

To replace one color with another using the color swatch:

Select the Replace Color tool from its pop-up menu.

2 In the From box in the Property inspector, click Swatch.

ADOBE FIREWORKS CS3

User Guide

3 Click the From color box to select the color probe, and select a color from the pop-up menu to specify the color

you want to replace.

4 Click the To color box in the Property inspector and select a color from the pop-up menu.

5 Set the other stroke attributes in the Property inspector:

Size sets the size of the brush tip.

Shape sets a round or square brush tip shape.

To le ra n ce determines the range of colors to replace (0 replaces only the To color; 255 replaces all colors similar to

the To color).

Strength determines how much of the Change color is replaced.

Colorize replaces the Change color with the To color. Deselect Colorize to tint the Change color with the To color,

leaving some of the Change color intact.

6 Drag the tool over the color you want to replace.

To replace one color with another by selecting a color on the image:

Select the Replace Color tool from its pop-up menu.

2 In the From box in the Property inspector, click Image.

3 Click the To color box in the Property inspector to select the color probe, then select a color from the pop-up

menu.

4 Set the other stroke attributes in the Property inspector:

Size sets the size of the brush tip.

Shape sets a round or square brush tip shape.

To le ra n ce determines the range of colors to replace (0 replaces only the To color; 255 replaces all colors similar to

the To color).

Strength determines how much of the Change color is replaced.

Colorize replaces the From color with the To color. Deselect Colorize to tint the From color with the To color, leaving

some of the From color intact.

5 Using the tool, click down on a section of the bitmap image that contains the color you want to replace. Without

lifting the tool, continue to brush across the image with it. The color that you clicked down on when you initiated the brushing action will be replaced by the color you’ve specified in the To color box.

Cropping a selected bitmap

You can isolate a single bitmap object in a Fireworks document and crop only that bitmap object, leaving other objects on the canvas intact.

To crop a bitmap image without affecting other objects in the document:

Select a bitmap o bject by cl icking the o bject on the canv as or by cli cking it s thu mbna il in t he Layer s panel, or draw

a selection marquee using a bitmap selection tool.

2 Select Edit > Crop Selected Bitmap.

ADOBE FIREWORKS CS3

User Guide

The crop handles appear around the entire selected bitmap or around the selection marquee, if you drew one in step

3 Adjust the crop handles until the bounding box surrounds the area of the bitmap image that you want to keep.

Note: To cancel a crop selection, press Escape.

Bounding box

4 Double-click inside the bounding box or press Enter to crop the selection.

Every pixel in the selected bitmap outside the bounding box is removed, but other objects in the document remain.

Adjusting bitmap color and tone

Fireworks has color- and tone-adjustment filters to help you improve and enhance the colors in your bitmap images. You can adjust the contrast and brightness, the tonal range, and the hue and color saturation of your images.

Applying filters as Live Filters from the Property inspector is nondestructive. Live Filters do not permanently alter the pixels; you can remove or edit them anytime.

If you prefer to apply filters in an irreversible, permanent way, you can select them from the Filters menu. However, Adobe recommends that you use filters as Live Filters whenever possible.

You can apply filters from the Filters menu to pixel selections, but not Live Filters. You can, however, define an area of a bitmap and create a separate bitmap from it, and then apply a Live Filter to it.

If you apply a filter to a selected vector object using the Filters menu, Fireworks converts the selection to a bitmap.

To apply a Live Filter to an area defined by a bitmap selection marquee: 1 Select a bitmap selection tool and draw a selection marquee.

2 Select Edit > Cut.

3 Select Edit > Paste.

Fireworks pastes the selection exactly where the pixels were originally located, but the selection is now a separate bitmap object.

4 Click the thumbnail of the new bitmap object in the Layers panel to select the bitmap object.

5 Apply a Live Filter from the Property inspector.

ADOBE FIREWORKS CS3

User Guide

Fireworks applies the Live Filter only to the new bitmap object, simulating the application of a filter to a pixel selection.

Note: Although Live Filters are more flexible, large numbers of Live Filters in a document can slow down Fireworks performance. For more information, see “Controlling document redraw” on page 34.

Adjusting tonal range

You can use the Levels and Curves features to adjust a bitmap’s tonal range. With Levels, you can correct bitmaps that contain a high concentration of pixels in the highlights, midtones, or shadows. Or you can use Auto Levels and let Fireworks adjust the tonal range for you. If you want more precise control over a bitmap’s tonal range, you can use the Curves feature, which lets you adjust any color along the tonal range without affecting other colors.

Evening out highlights, midtones, and shadows

A bitmap with a full tonal range should have an even number of pixels in all areas. The Levels feature corrects bitmaps with a high concentration of pixels in the highlights, midtones, or shadows.

Highlights corrects an excess of light pixels, which makes the image look washed out.

Midtones corrects an excess of pixels in the midtones, which makes the image bland.

Shadows corrects an excess of dark pixels, which hides much of the detail.

The Levels feature sets the darkest pixels as black and the lightest pixels as white, then redistributes the midtones proportionally. This produces an image with the sharpest detail in all of its pixels.

Original with pixels concentrated in the highlights; after adjusting with Levels

You can use the Histogram in the Levels dialog box to view the pixel distribution of a bitmap. The Histogram is a graphical representation of the distribution of pixels in the highlights, midtones, and shadows.

The Histogram helps you determine the best method of correcting an image’s tonal range. A high concentration of pixels in the shadows or highlights indicates that you could improve the image by applying the Levels or Curves feature.

The horizontal axis represents color values from darkest (0) to brightest (255). Read the horizontal axis from left to right: the darker pixels are on the left, the midtone pixels are in the center, and the brighter pixels are on the right.

The vertical axis represents the number of pixels at each brightness level. Typically, you should adjust the highlights and shadows first. Adjusting the midtones second lets you improve their brightness value without affecting the highlights and shadows.

To adjust highlights, midtones, and shadows:

Select the bitmap image.

2 Do one of the following to open the Levels dialog box:

ADOBE FIREWORKS CS3

User Guide

• In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Levels from the Filters

pop-up menu.

• Select Filters > Adjust Color > Levels.

Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it as a Live Filter, as described in the first bulleted option in this step. For more information, see “Using Live Filters” on page 147.

Levels dialog box

To view your changes in the workspace, select Preview in the dialog box. As you make changes, the image updates automatically.

3 In the Channel pop-up menu, select whether you want to apply changes to individual color channels (Red, Blue,

or Green) or to all color channels (RGB).

4 Drag the Input Levels sliders under the Histogram to adjust the highlights, midtones, and shadows:

• The right slider adjusts the highlights using values from 255 to 0.

• The center slider adjusts the midtones using values from 10 to 0.

• The left slider adjusts the shadows using values from 0 to 255.

As you move the sliders, the values are automatically entered in the Input Levels boxes.

Note: The shadow value cannot be higher than the highlight value; the highlight value cannot be lower than the shadow value; and the midtones must fall between the shadow and highlight settings.

5 Drag the Output Levels sliders to adjust the contrast values in the image:

• The right slider adjusts the highlights using values from 255 to 0.

• The left slider adjusts the shadows using values from 0 to 255.

As you move the sliders, the values are automatically entered in the Output Levels boxes.

Adjusting tonal ranges automatically

You can use Auto Levels to have Fireworks make tonal range adjustments for you.

To adjust highlights, midtones, and shadows automatically:

Select the image.

2 Do one of the following to select Auto Levels:

ADOBE FIREWORKS CS3

User Guide

• In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Auto Levels from the

Filters pop-up menu.

• Select Filters > Adjust Color > Auto Levels.

You can also adjust highlights, midtones, and shadows automatically by clicking the Auto button in the Levels or Curves dialog box.

Correcting colors using Curves

The Curves feature is similar to the Levels feature but it provides more precise control over the tonal range. Whereas Levels uses highlights, shadows, and midtones to correct the tonal range, Curves lets you adjust any color along the tonal range, instead of only three variables, without affecting other colors. For example, you can use Curves to correct for a color cast caused by lighting conditions.

The grid in the Curves dialog box illustrates two brightness values:

The horizontal axis represents the original brightness of the pixels, shown in the Input box.

The vertical axis represents the new brightness values, shown in the Output box.

When you first open the Curves dialog box, the diagonal line indicates that no changes have been made, so the input and output values are the same for all pixels.

To adjust a specific point in the tonal range: 1 Select the image.

2 Do one of the following to open the Curves dialog box:

• In the Property inspector, click the Plus (+) button beside the Filters label, and then select Adjust Color > Curves

from the Filters pop-up menu.

Note: If the Property inspector is partially minimized, click the Add Filters button instead of the Plus button.

• Select Filters > Adjust Color > Curves.

ADOBE FIREWORKS CS3

User Guide

Curves dialog box

3 In the Channel pop-up menu, select whether you want to apply changes to individual color channels or to all

colors.

4 Click a point on the grid’s diagonal line and drag it to a new position to adjust the curve.

• Each point on the curve has its own Input and Output values. When you drag a point, the Input and Output values

update automatically.

• The curve displays brightness values of 0 to 255, with 0 representing the shadows.

Curve after dragging a point to adjust

You can also adjust highlights, midtones, and shadows automatically by clicking the Auto button in the Curves dialog box.

To delete a point along the curve:

❖ Drag the point off the grid.

Note: You cannot delete the end points of the curve.

Correcting the tonal range using tonal eyedroppers

You can adjust the highlights, shadows, and midtones using the Shadow, Highlight, or Midtone eyedropper in the Levels or Curves dialog box.

To adjust the tonal balance manually using the tonal eyedroppers:

Open the Levels or Curves dialog box, and select a color channel from the Channel pop-up menu.

ADOBE FIREWORKS CS3

User Guide

2 Select the appropriate eyedropper to reset the tonal values in the image:

• Click the lightest pixel in the image with the Highlight eyedropper to reset the highlight value.

• Click a pixel of neutral color in the image with the Midtone eyedropper to reset the midtone value.

• Click the darkest pixel in the image with the Shadow eyedropper to reset the shadow value.

3 Click OK.

Adjusting brightness and contrast

The Brightness/Contrast feature modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too light.

Original; after adjusting brightness

To adjust the brightness or contrast: 1 Select the image.

2 Do one of the following to open the Brightness/Contrast dialog box:

• In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Brightness/Contrast

from the Filters pop-up menu.

• Select Filters > Adjust Color > Brightness/Contrast.

3 Drag the Brightness and Contrast sliders to adjust the settings.

Values range from –100 to 100.

4 Click OK.

Changing object colors

You can use the Color Fill Live Filter to change the color of objects quickly, either by replacing the pixels entirely with a given color or by blending a color into an existing object. When you blend colors, the color is added on top of the object. Blending a color into an existing object is much like using Hue/Saturation; however, blending lets you apply a specific color from a color swatch panel quickly.

ADOBE FIREWORKS CS3

To add a Color Fill Live Filter to a selected object:

In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Color Fill from the

User Guide

Filters pop-up menu.

2 Select a blending mode.

The default mode is Normal. For information about each blending mode, see “About blending modes” on page 179.

3 Select a fill color from the color box pop-up menu.

4 Select a percentage of opacity for the fill color and press Enter.

Adjusting hue and saturation

You can use the Hue/Saturation feature to adjust the shade of a color, its hue; the intensity of a color, its saturation; or the lightness of a color in an image.

Original; after adjusting the saturation

To adjust the hue or saturation:

Select the image.

2 Do one of the following to open the Hue/Saturation dialog box:

• In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Hue/Saturation from

the Filters pop-up menu.

• Select Filters > Adjust Color > Hue/Saturation.

3 Drag the Hue slider to adjust the color of the image.

Values range from –180 to 180.

4 Drag the Saturation slider to adjust the purity of the colors.

Values range from –100 to 100.

5 Drag the Lightness slider to adjust the lightness of the colors.

Values range from –100 to 100.

6 Click OK.

ADOBE FIREWORKS CS3

User Guide

To change an RGB image to a two-tone image or to add color to a grayscale image:

❖ Select Colorize in the Hue/Saturation dialog box.

Note: When you select Colorize, the value range of the Hue and Saturation sliders changes. Hue changes to 0 to 360. Saturation changes to 0 to 100.

Inverting an image’s color values

You can use Invert to change each color in an image to its inverse on the color wheel. For example, applying the filter to a red object (R=255, G=0, B=0) changes the color to light blue (R=0, G=255, B=255).

A monochrome image; after inverting

A color image; after inverting

To invert colors:

Select the image.

2 Do one of the following:

• In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Invert from the Filters

pop-up menu.

• Select Filters > Adjust Color > Invert.

ADOBE FIREWORKS CS3

User Guide

Blurring and sharpening bitmaps

Fireworks has a set of blurring and sharpening options that you can apply as Live Filters or as irreversible, permanent filters.

Blurring an image

Blurring softens the look of a bitmap image. Fireworks has six blurring options:

Blur softens the focus of selected pixels.

Blur More blurs about three times as much as Blur.

Gaussian Blur applies a weighted average of blur to each pixel to produce a hazy effect.

Motion Blur creates the appearance that the image is moving.

Radial Blur creates the appearance that the image is spinning.

Zoom Blur creates the appearance that the image is moving toward or away from the viewer.

Note: Applying filters from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove a filter, apply it as a Live Filter, as described in the first bulleted option in each of the following procedures. For more information, see “Using Live Filters” on page 147.

To blur an image: 1 Select the image.

2 Do one of the following:

• In the Property inspector, click the Add Live Filters button, and then select Blur > Blur or Blur More from the

Filters pop-up menu.

• Select Filters > Blur > Blur or Blur More.

To blur an image using Gaussian Blur:

Select the image.

2 Do one of the following to open the Gaussian Blur dialog box:

• In the Property inspector, click the Add Live Filters button, and then select Blur > Gaussian Blur from the Filters

pop-up menu.

• Select Filters > Blur > Gaussian Blur.

3 Drag the Blur Radius slider to set the strength of the blur effect.

Values range from 0.1 to 250. An increase in radius results in a stronger blur effect.

4 Click OK.

To blur an image using Motion Blur:

Select the image.

2 Do one of the following to open the Motion Blur dialog box:

• In the Property inspector, click the Add Live Filters button, and select Blur > Motion Blur from the Filters pop-up

menu.

• Select Filters > Blur > Motion Blur.

ADOBE FIREWORKS CS3

User Guide

3 Drag the Angle dial to set the direction of the blur effect.

4 Drag the Distance slider to set the strength of the blur effect.

Values range from 1 to 100. An increase in distance results in a stronger blur effect.

5 Click OK.

To blur an image using Radial Blur: 1 Select the image.

2 Do one of the following to open the Radial Blur dialog box:

• In the Property inspector, click the Add Live Filters button, and select Blur > Radial Blur from the Filters pop-up

menu.

• Select Filters > Blur > Radial Blur.

3 Drag the Amount slider to set the strength of the blur effect.

Values range from 1 to 100. An increase in amount results in a stronger blur effect.

4 Drag the Quality slider to set the smoothness of the blur effect.

Values range from 1 to 100. An increase in quality results in a blur effect with fewer repetitions of the original image.

5 Click OK.

To blur an image using Zoom Blur: 1 Select the image.

2 Do one of the following to open the Zoom Blur dialog box:

• In the Property inspector, click the Add Live Filters button, and select Blur > Zoom Blur from the Filters pop-up

menu.

• Select Filters > Blur > Zoom Blur.

3 Drag the Amount slider to set the strength of the blur effect.

Values range from 1 to 100. An increase in amount results in a stronger blur effect.

4 Drag the Quality slider to set the smoothness of the blur effect.

Values range from 1 to 100. An increase in quality results in a blur effect with fewer repetitions of the original image.

5 Click OK.

Changing a bitmap into a line drawing

The Find Edges filter changes your bitmaps to look like line drawings by identifying the color transitions in the images and changing them to lines.

ADOBE FIREWORKS CS3

User Guide

Original; after applying Find Edges

To apply the Find Edges filter to a selected area, do one of the following:

• In the Property inspector, click the Add Live Filters button, and then select Other > Find Edges from the Filters

pop-up menu.

• Select Filters > Other > Find Edges.

Converting an image to a transparency

You can use the Convert to Alpha filter to convert an object or text into a transparency based upon the transparency of the image.

To apply the Convert to Alpha filter to a selected area, do one of the following:

• In the Property inspector, click the Add Live Filters button, and then select Other > Convert to Alpha from the

Filters pop-up menu.

• Select Filters > Other > Convert to Alpha.

Sharpening an image

You can use the Sharpen feature to correct images that are blurry. Fireworks has three Sharpen options:

Sharpen adjusts the focus of a blurred image by increasing the contrast of adjacent pixels.

Sharpen More increases the contrast of adjacent pixels about three times as much as Sharpen.

Unsharp Mask sharpens an image by adjusting the contrast of the pixel edges. This option offers the most control,

so it is usually the best option for sharpening an image.

Original; after sharpening

To sharpen an image using a sharpen option:

Select the image.

2 Do one of the following to select a sharpen option:

ADOBE FIREWORKS CS3

User Guide

• In the Property inspector, click the Add Live Filters button, and then select Sharpen > Sharpen or Sharpen More

from the Filters pop-up menu.

• Select Filters > Sharpen > Sharpen or Sharpen More.

To sharpen an image using Unsharp Mask: 1 Select the image.

2 Do one of the following to open the Unsharp Mask dialog box:

• In the Property inspector, click the Add Live Filters button, and then select Sharpen > Unsharp Mask from the

Filters pop-up menu.

• Select Filters > Sharpen > Unsharp Mask.

3 Drag the Sharpen Amount slider to select the amount of sharpening effect from 1% to 500%.

4 Drag the Pixel Radius slider to select a radius from 0.1 to 250.

An increase in radius results in a greater area of sharp contrast surrounding each pixel edge.

5 Drag the Threshold slider to select a threshold of 0 to 255.

Values between 2 and 25 are most commonly used. An increase in threshold sharpens only those pixels of a higher contrast in the image. A decrease in threshold includes pixels of lower contrast. A threshold of 0 sharpens all pixels in the image.

6 Click OK.

ADOBE FIREWORKS CS3

User Guide

Adding noise to an image

When viewed at high magnification levels, most images obtained from digital cameras and scanners do not have perfectly uniform colors. Instead, the colors you see consist of pixels of many different colors. In image editing, “noise” refers to these random color variations in the pixels that make up an image.

Sometimes, such as when you are pasting part of one image into another, the difference in the amount of random color variation in the two images can stand out, preventing the images from blending together smoothly. In such a case, you can add noise to one or both images to create the illusion that both images come from the same source. You can also add noise to an image for artistic reasons, for instance, to simulate an old photograph or static on a television screen.

Original photograph; after adding noise

To add noise to an image: 1 Select the image.

2 Do one of the following to open the Add Noise dialog box:

• In the Property inspector, click the Add Live Filters button, and select Noise > Add Noise from the Filters pop-

up menu.

• Select Filters > Noise > Add Noise.

3 Drag the Amount slider to set the amount of noise.

Values range from 1 to 400. An increase in amount results in an image with more randomly placed pixels.

4 Select the Color check box to apply color noise. Leave the check box unchecked to apply monochrome noise only.

5 Click OK.

Chapter 5: Working with Vector Objects

A vector object is a computer graphic whose shape is defined by a path. The shape of a vector path is determined by points that are plotted along the path. A vector object’s stroke color follows the path. Its fill occupies the area inside the path. The stroke and fill typically determine how the graphic looks when published in print or on the web.

Fireworks CS3 has many tools for drawing and editing vector objects using a variety of techniques. With the basic shape tools, you can quickly draw straight lines, circles and ellipses, squares and rectangles, stars, and any equilateral polygon with 3 to 360 sides.

You can draw freeform vector paths with the Vector Path and Pen tools. Using the Pen tool, you can draw complex shapes with smooth curves and straight lines by plotting points one by one.

Fireworks offers several methods for editing the vector objects you have drawn. You can change an object’s shape by moving, adding, or deleting points. You can use point handles to change the shape of adjacent path segments. Freeform tools let you alter the shape of objects by editing paths directly. You can also edit Auto Shapes using their predefined editing methods.

Commands on the Modify menu give you more options for editing objects, including combining objects to create a single object, creating an object from the intersection of several objects, and expanding the stroke of an object. You can also import graphics and manipulate them using these commands.

This chapter contains the following topics:

• “Drawing vector objects” on page 84

• “Editing paths” on page 100

Drawing vector objects

Fireworks has many tools for drawing vector objects. With these you can draw basic shapes, freeform paths, and complex shapes by plotting points one by one. You can also draw Auto Shapes, which are vector object groups that have special controls for adjusting their attributes.

Drawing basic lines, rectangles, and ellipses

You can use the Line, Rectangle, or Ellipse tool to draw basic shapes quickly. The Rectangle tool draws rectangles as grouped objects. To move a rectangle corner point independently, you must ungroup the rectangle or use the Subselection tool. To draw a basic rectangle with beveled, chamfered, or rounded corners, see the following procedure. To draw a Auto Shape rectangle with rounded corners, see “Adjusting beveled, chamfered, and rounded rectangle Auto Shapes” on page 89.

To draw a line, rectangle, or ellipse:

Select the Line, Rectangle, or Ellipse tool from the Tools panel.

2 If desired, set the stroke and fill attributes in the Property inspector. See “Applying Color, Strokes, and Fills” on

page 126.

3 Drag on the canvas to draw the shape.

For the Line tool, Shift-drag to constrain lines to 45° increments.

ADOBE FIREWORKS CS3

User Guide

For the Rectangle or Ellipse tool, Shift-drag to constrain shapes to squares or circles.

To constrain a shape and draw from the center point:

❖ Position the pointer at the intended center point and Shift-Alt-drag (Windows) or Shift-Option-drag

(Macintosh) the drawing tool.

To adjust the position of a basic shape as you draw it:

❖ While holding down the mouse button, press and hold the Spacebar, then drag the object to another location on

the canvas. Release the Spacebar to continue drawing the object.

Note: An exception is the Line tool. Pressing the Spacebar while using the Line tool does not change a line’s position on the canvas.

To resize a selected line, rectangle, or ellipse, do one of the following:

• Enter new width (W) or height (H) values in the Property inspector or the Info panel.

• In the Select section of the Tools panel, select the Scale tool and drag a corner transform handle. This resizes the

object proportionally.

Note: You can also resize an object proportionally by selecting Modify > Transform > Scale and dragging a corner transform handle, or by selecting Modify > Transform > Numeric Transform and entering new dimensions. For more information on resizing and scaling objects, see “Transforming and distorting selected objects and selections” on page 54.

• Drag a corner point on a rectangle.

Note: Scaling a vector object does not change its stroke width.

Drawing basic rounded rectangles

You can draw rectangles with rounded corners by using the Rounded Rectangle tool, or by using the Roundness option in the Property inspector to adjust the roundness of the corners of a selected rectangle. The Rounded Rectangle tool draws rectangles as grouped objects. To move rounded rectangle points independently, you must ungroup the rectangle or use the Subselection tool.

To draw a rectangle with rounded corners: 1 From the Rectangle tool pop-up menu, select the Rounded Rectangle tool.

2 Drag the canvas to draw the rectangle.

You can adjust the roundness of the corners as you draw by pressing any of the arrow keys or the 1 or 2 number keys repeatedly.

To round the corners of a selected rectangle:

❖ In the Property inspector, enter a value from 0 to 100 in the Roundness box and press Enter, or drag the pop-up

slider.

Note: If the Property inspector is at half height, click the expander arrow in the lower right corner to expand it to full height.

Drawing basic polygons and stars

With the Polygon tool, you can draw any equilateral polygon or star, from a triangle to a polygon or star with 360 sides.

ADOBE FIREWORKS CS3

To dra w a polyg on:

In the Vector section of the Tools panel, select the Polygon tool, which is one of the basic shape drawing tools.

2 In the Property inspector, do one of the following to specify the number of sides for the polygon:

User Guide

• Use the Sides pop-up slider to select 3 to 25 sides.

• Enter a number from 3 to 360 in the Sides text box.

3 Drag to draw the polygon.

To constrain a polygon’s orientation to increments of 45°, hold down Shift as you draw. The Polygon tool always draws from a center point.

To draw a star:

Select the Polygon tool.

2 In the Property inspector, select Star from the Shape pop-up menu.

3 In the Sides text box, enter the number of points for the star.

4 In the Angle text box, select Automatic or enter a value. Values closer to 0 result in long, thin points; values closer

to 100 result in short, stubby points.

5 Drag the canvas to draw the star.

To constrain a star’s orientation to increments of 45°, hold down Shift as you drag. The Polygon tool always draws from a center point.

Drawing Auto Shapes

Auto Shapes are intelligent vector object groups that adhere to specialized rules to simplify the creation and editing of common visual elements. Auto Shape tools draw object groups. Unlike other object groups, selected Auto Shapes have diamond-shaped control points in addition to the object group handles. Each control point is associated with a particular visual property of the shape. Dragging a control point alters only the associated visual property. Most Auto Shape control points have tool tips that describe how they affect the Auto Shape. Move the pointer over a control point to see a tool tip that describes the property governed by that control point.

Auto Shape tools create shapes in preset orientations. For example, the Arrow tool draws arrows horizontally. You can transform Auto Shapes to change their orientation. For more information, see “Transforming and distorting selected objects and selections” on page 54.

Although each Auto Shape tool in the Tools panel uses the same easy drawing method, the editable attributes for each Auto Shape are different.

Arrow draws object groups that appear as simple arrows of any proportions. Using control points, you can adjust the

arrowhead flare, the tail length and width, and the tip length.

Beveled Rectangle dra ws o bjec t g roups th at app ear a s re ct ang les w ith b evel ed co rner s. Usin g contro l po int s, yo u ca n

edit the amount of bevel for all corners together, or change the bevel of individual corners.

ADOBE FIREWORKS CS3

User Guide

Chamfer Rectangle draws object groups that appear as rectangles with chamfers, corners that are rounded to the

inside of the rectangle. You can edit the chamfer radius of all corners together, or change the chamfer radius of individual corners.

Connector Line draws object groups that appear as three-segment co nnector lines, s uch as those use d to conn ect the

elements of a flowchart or organizational chart. Using control points, you can edit the end points for the first and third sections of the connector line, as well as the location of the second section, which connects the first and last sections.

Doughnut draws object groups that appear as filled rings. Using control points, you can adjust the inner perimeter

or split the shape into pieces.

L-Shape d raws o bje ct g roups that app ear as r igh t-ang led cor ner shape s. Us ing cont rol point s, you can edit t he l eng th

and width of the horizontal and vertical sections, as well as the curvature of the corner.

Pie draws object groups that appear as pie charts. Using control points, you can split the shape into pieces.

Rounded Rectangle draws object groups that appear as rectangles with rounded corners. Using control points, you

can edit the roundness of all corners together, or change the roundness of individual corners.

Smart Polygon draws object groups that appear as equilateral polygons with 3 to 25 sides. Using control points, you

can resize and rotate, add or remove segments, increase or decrease the number of sides, or add an inner polygon to the shape.

Spiral draws object groups that appear as open spirals. Using control points, you can edit the number of spiral

rotations, and you can determine whether the spiral is open or closed.

Star draws object groups that appear as stars with any number of points from 3 to 25. Using control points, you can

add or remove points, and you can adjust the inner and outer angles of the points.

Add Shadow adds a shadow beneath the selected object based on the dimensions of that object. The shadow is

actually an Auto Shape and, like all Auto Shapes, contains control points that you can use to manipulate its appearance. For example, you can Shift-drag the Direction control point to constrain its movement to a 45-degree angle. Clicking the Direction control point resets the shadow to the original shape.

Note: The Add Shadow command will automatically send the new shadow shape back by one level. Unless you apply this command to only one object at the top of the current layer, the shadow may appear above the selected object.

To draw an Auto Shape by using the Tools panel: 1 In the Vector section of the Tools panel, select an Auto Shape tool from the pop-up menu.

2 Do one of the following:

• Drag the canvas to draw the shape.

• Click on the canvas to place the shape at its default size.

To create the Add Shadow Auto Shape:

Select an object on the canvas.

2 Select Commands > Creative > Add Shadow.

A shadow is added to the selected object.

3 If you want to make changes to the shadow, you can do any of the following:

• Drag the Direction control point to constrain its movement on a 45-degree angle.

• Click the Direction control point to reset the shadow (its size will be identical to the original shape).

ADOBE FIREWORKS CS3

User Guide

• Control+Command-click the Direction control point to reset the x-axis only.

• Double-click the Perspective control point to reset the width of the shadow only.

For information about how to change the properties of an Auto Shape, see “Changing the properties of Auto Shapes” on page 88.

Changing the properties of Auto Shapes

The Auto Shape Properties panel gives you precise numeric control over your Auto Shapes. After inserting an Auto Shape, you can use this panel to make changes to its properties.

The specific properties that you can change will vary with each Auto Shape you select. For example, if you’ve inserted the Arrow shape, you can change its width, height, thickness, and more. If you’ve inserted the Star shape, you can change its number of points, radius, and more.

You can also insert another Auto Shape into your document directly from the Auto Shape Properties panel.

Note: This panel only supports Auto Shapes that appear in the Tools panel. It does not support third-party Auto Shapes or those in the Shapes panel (Window > Auto Shapes).

To change properties for your Auto Shape:

Insert an Auto Shape into your document.

2 Select Window > Auto Shape Properties.

The Auto Shape Properties panel appears, displaying the properties for the selected Auto Shape.

3 Adjust the properties in the Auto Shape Properties panel.

For Rectangle shapes, you can choose to lock the shape corners so that changes to one corner will affect all four. You can also change the properties for each corner individually.

4 To apply the changes, press Tab or Enter.

The selected Auto Shape is updated with the changes you made to its properties. If you want to make further changes, you can also adjust the Auto Shape on the canvas by using its control points, and the corresponding values in the Auto Shape Properties panel will be updated dynamically.

5 If you want to insert another Auto Shape, you can select one from the Insert New Auto Shape pop-up menu at

the bottom of the panel.

The new shape appears in the upper-left corner of the document.

Adjusting arrow Auto Shapes

Arrows have five control points. There are control points for adjusting the flare of the arrowhead, the length of the arrow tail, the length of the arrowhead tip, and the width of the arrow tail.

To adjust the flare of an arrowhead:

❖ Drag the flare control point of a selected arrow.

To increase or decrease the sharpness of an arrowhead:

❖ Drag the tip control point of a selected arrow.

To lengthen or shorten an arrow tail:

❖ Drag the body length control point of a selected arrow.

ADOBE FIREWORKS CS3

User Guide

To adjust the width of an arrow tail:

❖ Drag the body width control point of a selected arrow.

Adjusting bent arrow Auto Shapes

Bent arrows have five control points. There are control points for adjusting the flare of the arrowhead, the length of the arrowhead tip, the length of the arrow tail, the width of the arrow tail, and the roundness of the arrow’s bend.

To adjust the flare of the arrowhead of a bent arrow:

❖ Drag the arrowhead control point of a selected bent arrow.

To increase or decrease the sharpness of the arrowhead of a bent arrow:

❖ Drag the tip control point of a selected bent arrow.

To lengthen or shorten a bent arrow tail:

❖ Drag the handle length control point of a selected bent arrow.

To adjust the width of a bent arrow tail:

❖ Drag the handle width control point of a selected bent arrow.

To adjust the corner roundness of a bent arrow tail:

❖ Drag the corner radius control point of a selected arrow.

Adjusting beveled, chamfered, and rounded rectangle Auto Shapes

Beveled, chamfered, and rounded rectangles have five control points. The control point on each corner adjusts all corners together. You can also Alt-drag (Windows) or Option-drag (Macintosh) to edit a single corner. The remaining control point resizes the rectangle without changing the roundness of the corner.

Note: To edit the corner radius of rectangles drawn with the Rectangle tool, use the Rectangle Roundness setting in the Property inspector.

To adjust the corners of a beveled, chamfered, or rounded rectangle Auto Shape:

❖ Drag a corner control point of a selected shape.

To adjust a single corner of a beveled, chamfered, or rounded rectangle Auto Shape:

❖ Alt-drag (Windows) or Option-drag (Macintosh) a corner control point of a selected shape.

To resize a beveled, chamfered, or rounded rectangle Auto Shape without affecting the corners:

❖ Drag the drag-to-resize control point.

To convert the corners of a rectangle to a different type:

❖ Alt-click (Windows) or Option-click (Macintosh) any corner control point.

To convert a single corner to a different type:

❖ Shift-Alt-click (Windows) or Shift-Option-click (Macintosh) any corner control point.

ADOBE FIREWORKS CS3

User Guide

Adjusting connector line Auto Shapes

Connector lines have five control points. There are control points for placing the start and end points, for adjusting the position of the cross bar (the line that connects the start and end line segments), and for adjusting the roundness of the corners.

To move the start or end point of a connector line:

❖ Drag the control point at the start or end of the connector line.

To reposition the cross bar of a connector line:

❖ Drag the horizontal position control point.

To adjust all corners of a selected connector line:

❖ Drag a corner control point.

To adjust a single corner of a selected connector line:

❖ Alt-drag (Windows) or Option-drag (Macintosh) a corner control point.

Adjusting doughnut Auto Shapes

Doughnut Auto Shapes initially have three control points. There are control points for adjusting the inner perimeter, for setting the inner perimeter to zero, and for dividing the shape into slices to resemble a pie chart. You can add as many sections as you want using control points. For each new section, Fireworks adds a control point for resizing or splitting the new section.

To add sections to a selected doughnut:

❖ Alt-drag (Windows) or Option-drag (Macintosh) an add/divide sector control point on the outer perimeter of the

shape.

To remove a section from a selected doughnut:

❖ Drag the add/divide sector control point on the outer perimeter of the shape to define the portion of the shape

that you want to remain on the canvas.

To resize the inner radius of a selected doughnut:

❖ Drag the inner radius control point.

To set the inner radius of a selected doughnut to zero:

❖ Click the reset radius control point.

Adjusting pie Auto Shapes

Pie Auto Shapes initially have three control points. There are control points for dividing the shape into slices, adjusting slice size, and for resetting the pie to one slice. You can add as many sections as you want using control points. For each new section, Fireworks adds a control point for resizing or splitting the new section.

To add sections to a selected pie:

❖ Alt-drag (Windows) or Option-drag (Macintosh) a drag-to-segment control point on the outer perimeter of the

shape.

ADOBE FIREWORKS CS3

User Guide

To resize a slice of a selected pie:

❖ Drag a drag-to-segment control point on the outer perimeter of the shape.

To reset the a selected pie to one slice:

❖ Click the Reset control point.

Adjusting L-shaped Auto Shapes

L-shapes have four control points. There are control points for adjusting the length and width of each section of the L-shape, and for adjusting the roundness of the L-shape’s bend.

To change the length or width of a selected L-shape’s section:

❖ Drag one of the two length/width control points.

To adjust the roundness of the corners of a selected L-shape:

❖ Drag the corner radius control point.

Adjusting smart polygon Auto Shapes

Smart Polygons initially appear as pentagons with four control points. There are control points for resizing and rotating, adding or removing polygon segments, increasing or decreasing the number of polygon sides, and adding an inner polygon to the shape to create a ring.

To resize or rotate a selected smart polygon, do one of the following:

• Drag the scale/rotate control point.

• Alt-drag (Windows) or Option-drag (Macintosh) the scale/rotate control point to rotate only.

To add or remove sections from a selected smart polygon:

❖ Drag the sections control point.

To change the number of sides on a selected smart polygon:

❖ Drag the sides control point.

To split a selected smart polygon into segments.

❖ Alt-drag (Windows) or Option-drag (Macintosh) the sides control point.

To resize the inner polygon of a smart polygon, do one of the following:

• If the polygon has an inner polygon, drag the inner polygon control point.

• If the polygon has no inner polygon, drag the reset inner polygon control point.

To reset the inner polygon of a selected smart polygon:

❖ Click the reset inner polygon control point.

Adjusting spiral Auto Shapes

Spirals have two control points. There are control points for adjusting the number of turns in the spiral, and for making the spiral open or closed.

ADOBE FIREWORKS CS3

User Guide

To adjust the number of turns in a selected spiral:

❖ Drag the spirals control point.

To open or close a selected spiral:

❖ Click the open/close spiral control point.

Adjusting star Auto Shapes

Stars initially have five control points. There are control points for adding or removing points, for adjusting the inner and outer angles of the points, and for adjusting the roundness of the peaks and valleys.

To change the number of sides on a selected star:

❖ Drag the Points control point.

To adjust the valleys of a selected star:

❖ Drag the valley control point.

To adjust the points of a selected star:

❖ Drag the peak control point.

To adjust the roundness of a selected star’s peaks or valleys:

❖ Drag a Roundness control point.

Adding Auto Shapes to drawings

The Assets panel contains a Shapes tab where you can find additional Auto Shapes. These Auto Shapes are generally more complex than those that appear in the Tools panel. Instead of drawing these Auto Shapes directly on the canvas, you place these Auto Shapes into your drawing by dragging them from the Assets panel to the canvas.

To create an Auto Shape using the Assets panel:

Select Window > Auto Shapes to display the Shapes tab, if it is not already visible.

2 Drag a Auto Shape preview from the Assets panel to the canvas.

3 If desired, edit the Auto Shape by dragging any of its control points.

Adding new Auto Shapes to Fireworks

You can add new Auto Shapes to Fireworks using the Fireworks Exchange website. Some new Auto Shapes will appear in the Shapes tab in the Assets panel, and others will appear in the Tools menu, grouped with the other Auto Shapes.

You c an al so add new Aut o Sha pes t o Fi rewo rks by wr iting the J ava Scri pt c od e fo r the Auto S hap es you rse lf. F or m ore information, see Extending Fireworks.

To add new Auto Shapes to Fireworks:

Select Window > Auto Shapes to display the Shapes panel, if it’s not already visible.

2 From the Shapes panel’s Options menu, select Get More Auto Shapes.

Fireworks connects to the web and navigates to the Fireworks Exchange website.

3 Follow the onscreen instructions to select new Auto Shapes and add them to Fireworks.

ADOBE FIREWORKS CS3

User Guide

Drawing freeform paths

You can draw freeform vector paths with the Vector Path tool, much as you draw using a felt-tip marker or crayon. The Vector Path tool is located in the Pen tool pop-up menu.

You can change the stroke and fill attributes of paths drawn with the Vector Path tool. See “Applying Color, Strokes, and Fills” on page 126.

Using the Vector Path tool

The Vector Path tool has a wide variety of brush stroke categories, including Air Brush, Calligraphy, Charcoal, Crayon, and Unnatural. Each category typically has a choice of strokes, such as Light Marker and Dark Marker, Splattered Oil, Bamboo, Ribbon, Confetti, 3D, Toothpaste, and Viscous Alien Paint.

Although the strokes may look like paint or ink, each has the points and paths of a vector object. That means that you can change the shape of the stroke using any of several vector-editing techniques. After you reshape the path, the stroke is redrawn.

For more precise path smoothing, you can change the number of points that appear on the path in the Precision box in the Property inspector before you draw the path.

A painting edited by moving vector points

You can also modify existing brush strokes and add fills to selected objects you have drawn with the Vector Path tool. The new stroke and fill settings are retained for subsequent use of the Vector Path tool in the current document.

To draw a freeform vector path:

1 From the Pen tool pop-up menu, select the Vector Path tool.

2 If desired, set stroke attributes and Vector Path tool options in the Property inspector. See “Applying Color,

Strokes, and Fills” on page 126.

3 If desired, change the precision level of the path by selecting a number from the Precision pop-up menu in the

Property inspector for the vector path tool. The higher the number you select, the greater the number of points that appear on the path you draw.

4 Drag to draw. To constrain the path to a horizontal or vertical line, hold down Shift while dragging.

5 Release the mouse button to end the path. To close the path, release the mouse button when you return the pointer

to the point at the beginning of the path.

ADOBE FIREWORKS CS3

User Guide

Drawing paths by plotting points

One way to draw and edit vector objects in Fireworks is to plot points as if drawing a connect-the-dots picture. When you click each point with the Pen tool, Fireworks automatically draws the path of the vector object from the last point you clicked.

In addition to connecting the points with only straight segments, the Pen tool can draw smooth, mathematically derived curve segments known as Bezier curves. Each point’s type—corner point or curve point—determines whether the adjacent curves are straight lines or curves.

You can modify straight and curved path segments by dragging their points. You can further modify curved path segments by dragging their point handles. You can also convert straight path segments to curved (and vice versa) by converting their points.

Drawing straight path segments

Drawing straight line segments with the Pen tool is a simple matter of clicking to place the points. Each click with the Pen tool plots a corner point.

To draw a path with straight line segments:

Select the Pen tool in the Tools panel.

2 If desired, select Edit > Preferences and enable any of the following options on the Editing tab of the Preferences

dialog box, then click OK:

Show Pen Preview previews the line segment that would result from the next click.

Show Solid Points shows solid points while you draw.

Note: On Mac OS X, select Fireworks > Preferences to open the Preferences dialog box.

3 Click on the canvas to place the first corner point.

4 Move the pointer and click to place the next point. A straight line segment joins the two points.

5 Continue plotting points. Straight segments bridge each gap between points.

6 Do one of the following to end the path, either open or closed:

• Double-click the last point to end the path as an open path.

• Select another tool to end the path as an open path.

Note: When you select any selection tool or vector tool other than the Text tool and then return to the Pen tool, Fireworks resumes drawing the object at your next click.

ADOBE FIREWORKS CS3

User Guide

• To close the path, click the first point you plotted. The beginning and end points of a closed path are the same.

Note: Loops formed by a path overlapping itself are not closed paths. Only paths that begin and end on the same point are closed paths.

Drawing curved path segments

To draw curved path segments, you click and drag as you plot points. As you draw, the current point shows point handles. Whether drawn with the Pen tool or with another Fireworks drawing tool, all points on all vector objects have point handles. These handles are visible only on curve points, however.

To draw an object with curved segments: 1 Select the Pen tool in the Tools panel.

2 Click to place the first corner point.

3 Move to the location of the next point, then click and drag to produce a curve point. Each time you click and drag,

Fireworks extends the line segment to the new point.

4 Continue plotting points. If you click and drag a new point, you produce a curve point; if you just click, you

produce a corner point.

You can temporarily switch to the Subselection tool to change the location of points and the shape of curves as you draw. Press Control (Windows) or Command (Macintosh) while dragging a point or point handle with the

Pen tool.

5 Do one of the following to end the path, either open or closed:

• Double-click the last point to end the path as an open path.

• Select another tool to end the path as an open path. When you select certain tools and then return to the Pen tool,

Fireworks resumes drawing the object at your next click.

• To close a path, click the first point you plotted. The beginning and end points of a closed path are the same.

Adjusting the shape of a straight path segment

You can lengthen, shorten, or change the position of a straight path segment by moving its points.

To change a straight path segment:

Select the path with the Pointer or Subselection tool.

Macromedia Fireworks - CS3 User Guide

Specifications and Main Features

Frequently Asked Questions

User Manual

Contents

Chapter 1: Getting Started

Installation

Requirements

Install the software

Activate the software

Register

Read me

Viewing the files installed with Fireworks

Adobe Help

Adobe Help resources

Using Help in the product

How to choose the right Help documents

Resources

Adobe Video Workshop

Fireworks CS3 videos

Extras

Bridge Home

Adobe Design Center

Adobe Developer Center

Customer support

Downloads

Adobe Labs

User communities

What’s new in Fireworks CS3

Chapter 2: Fireworks Basics

About working in Fireworks

Vector and bitmap objects

Interactive graphics

About optimizing and exporting graphics

About vector and bitmap graphics

About vector graphics

About bitmap graphics

Creating a new document

Opening and importing files

Opening recently closed documents

Opening graphics created in other applications

Animated GIFs

EPS files

PSD files

WBMP files

Creating Fireworks PNG files from HTML files

Inserting objects into a Fireworks document

Dragging images into Fireworks

Pasting into Fireworks

Location of pasted objects

Resampling pasted objects

Importing PNG files

Importing from a digital camera or scanner

Saving Fireworks files

Saving Fireworks PNG files

Saving documents in other formats

The Fireworks work environment

Using the Start page

Using the Tools panel

Changing tool options

Selecting a tool from a tool group

Using the Property inspector

Using panels

Organizing panel groups and panels

Using the panel group or panel Options menu

Saving panel layouts

About the Quick Export button

Opening and moving toolbars (Windows only)

Navigating and viewing documents

Using document tabs (Windows)

Zooming and panning

Using view modes to manage the workspace

Displaying multiple document views

Controlling document redraw

Changing the canvas

Changing canvas size, color, and resolution

About resampling

Rotating the canvas

Trimming or fitting the canvas

Cropping a document