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 29

Select Group With > New Panel Group from the Options menu in the panel groups title bar. (The Group With commands 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 groups Options menu. (The Group With commands name changes depending on the name of the active panel.)
To rename a panel group: 1 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 30

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.

ADOBE FIREWORKS CS3 38

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 39

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: 1 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: 1 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.
To change guide colors: 1 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.

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 75

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 grids 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: 1 Open the Levels or Curves dialog box, and select a color channel from the Channel pop-up menu.

ADOBE FIREWORKS CS3 76

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

Converting text to paths

You can convert text to paths and then edit the shapes of the letters as you would any vector object. All vector-editing tools are available after you convert text to paths. However, you can no longer edit it as text.
To convert selected text to paths:
Select Text > Convert to Paths.
Text converted to paths retains all of its visual attributes, but you can edit it only as paths. You can edit the converted text as a group or edit the converted characters individually.
To edit converted text character paths individually, do one of the following:
Select the converted text with the Subselection tool. Select the converted text and select Modify > Ungroup.
You can edit the individual converted character paths using the vector-editing tools. For more information on editing paths, see Editing paths on page 100. You can create a composite path from a text object that was created by converting text to paths.
To create a composite path from a path group that was created by converting text to paths: 1 Select the path group. 2 Select Modify > Ungroup. 3 Select Modify > Combine Paths > Join.

Importing text

You can copy text from a source document and paste into the current Fireworks document, or you can drag it from the source to the current document. You can also open or import an entire text file in Fireworks. Fireworks can import RTF (rich text format) and ASCII (plain text) formats.
To open or import a text file: 1 Select File > Open or File > Import. 2 Navigate to the folder containing the file. 3 Select the file and click OK.

ADOBE FIREWORKS CS3 123

Photoshop text
You can open or import a Photoshop file containing text. You can also copy text from a Photoshop file and paste into the current Fireworks document or drag it from the Photoshop file to the current document. For more information, see Opening graphics created in other applications on page 16.

RTF files

When importing RTF text, Fireworks maintains these attributes:
Font, size, and style (bold, italic, underline) Alignment (left, right, center, justified) Leading Baseline shift Range kerning Horizontal scale Color of the first character

Hexadecimal

Grayscale
You can select alternative color models from the Color Mixer Options menu. The current colors component values change with each new color model.
To display the Color Mixer:
Select Window > Color Mixer.
To apply a color from the color bar to a selected vector object: 1 Click the icon next to the Stroke Color or Fill Color box in the Color Mixer. 2 Move the pointer over the color bar.
The pointer becomes the eyedropper pointer.

3 Click to pick a color.

The color is applied to the selected object and becomes the active stroke or fill color.

ADOBE FIREWORKS CS3 131

To pick a color from the Color Mixer: 1 Deselect all objects before mixing a color to prevent unwanted object editing as you mix colors. 2 Click either the Stroke Color or Fill Color box to make it the destination for the new color. 3 Select a color model from the Color Mixer Options menu. 4 Do any of the following to specify color component values:
Enter values in the color component text boxes. Use the pop-up sliders. Pick a color from the color bar.
You can add this color to the Swatches panel to reuse. For more information, see Customizing the Swatches panel on page 128.
To cycle the color bar through the color models:
Shift-click the color bar at the bottom of the Color Mixer.
Note: The options in the Color Mixer do not change.
Creating colors using the system color pickers
You can create colors using the Windows System or the Macintosh System dialog boxes, instead of using the Color Mixer and Swatches panel.
To pick a color from the system color picker: 1 Click any color box. 2 Select Windows OS or Mac OS from any color pop-up window Options menu.
The system color swatches are displayed in the pop-up window.
3 Select a color from the system color picker.
The color becomes the new stroke or fill color. For information on adding a color to the Swatches panel from the color picker, see Customizing the Swatches panel on page 128.

Viewing color values

In addition to the Color Mixer and color pop-up window, you can use the Info panel to identify color values.
To view the color value of any part of your document using the Info panel: 1 Click the Eyedropper tool in the Tools panel. 2 Select Window > Info to display the Info panel. 3 Move the pointer over the object containing the color you want to view (Windows only). To view the color value of the active stroke or fill color, do one of the following:

To export a palette: 1 Select the palette you want to export (either Palette 1 or Palette 2). 2 Click the Export as bitmap icon to export the palette as a bitmap file, or click the Export as color table icon to
export the palette as an ACT file.

ADOBE FIREWORKS CS3 135

To create a color gradation series using the Blender tab: 1 Select the Blender tab in the Color Palette panel.
2 Use the fill color boxes at the bottom of the panel to select beginning and ending colors for the series. 3 Use the Steps pop-up slider to select the number of steps in the series.
After you have created the gradation series, you can apply any of the colors within your document. You can also place your mouse pointer over any color swatch to see the hexidecimal value of the color.
Using color boxes and color pop-up windows
Throughout Fireworks you will find color boxesfrom the Colors section of the Tools panel to the Property inspector to the Color Mixer. Each displays the current color assigned to the associated object property.
Selecting colors from a color pop-up window
When you click any color box, a color pop-up window similar to the Swatches panel opens. You can choose to display the same swatches in a color pop-up window as those that are displayed in the Swatches panel, or you can display different swatches.
To select a color for a color box: 1 Click the color box.
The color pop-up window opens.
Click a swatch to apply it to the color box. Click the eyedropper pointer on a color anywhere on the screen to apply it to the color box. Click the Transparent button in the pop-up window to make the stroke or fill transparent.
To display the current Swatches panel swatch group in the color pop-up window:
Select Swatches Panel from the color pop-up window Options menu.

ADOBE FIREWORKS CS3 136

To display a different swatch group in the color pop-up window:
Select a swatch group from the color pop-up window Options menu. Selecting a swatch group here does not affect

To edit a pages canvas size, color, or image resolution: 1 Select a page from the Pages panel or the pages pop-up menu at the bottom of the document window. 2 Select Modify > Canvas > Image Size, Modify > Canvas > Canvas Color, or Modify > Canvas > Canvas Size. 3 Make the desired changes. These changes can also be made using the Properties panel when the canvas for a page is selected. 4 To apply the changes to only the selected page, leave the Current Page Only check box selected. To apply the changes to all pages, deselect the check box.

ADOBE FIREWORKS CS3 157

Using a master page
If you have some elements that you want to be common across all of your pages, you can use a master page. When you convert an ordinary page to a master page it moves to the top of the list in the Pages panel and it is colored gray. When a master page is created, a Master Page Layer is added at the bottom of the layer hierarchy for each page. This layer can be removed by selecting Remove Master Page Layer from the Options menu in the Layers panel. The visibility of the master page layer can be toggled by clicking on the eye icon to the left of the master page layer in the Layers panel. If you change the master visibility on one page, this change is reflected across all of the pages. For more information about controlling the visibility of layers see Protecting layers and objects on page 162.

To create a master page

In the Pages panel, select a page that you have already created and choose Set As Master Page from the Options
menu. A Master Page cannot have shared layers, so when you make a page into a Master Page, any shared layers are removed from it and changed to ordinary (non-shared) layers.
To link pages to the master page
After a master page is created, any additional pages that are created inherit the master page settings such as canvas color and size. Pages that already exist do not inherit these settings unless they are linked to the master page. In addition, if the master page settings are later changed, none of the other pages will inherit these changes unless they are linked to the master page. Do one of the following to permanently link a page to the master page:
Select the page in the Pages panel and choose Link to Master Page from the Options menu. Click in the column to the left of the page thumbnail in the Pages panel. A link icon displays to show that the page is linked to the master page.
Note: If you change a setting, such as canvas color, on a page that has been linked to the master page, the setting overrides the master page setting and the link to the master page is automatically broken.

Select Images Only from the Export pop-up menu, and choose whether to export the current page or all pages by selecting or deselecting the Current page only check box. The pages are exported to the default image format, which is set using the Optimize panel. Select Pages to Files in the Export pop-up menu, and select Images in the Export As pop-up menu. All of the pages are exported in the default image format, which is set using the Optimize panel. Select Pages to Files in the Export pop-up menu, and select Fireworks PNG in the Export As pop-up menu. Each page is exported as a separate file in the PNG format. Use this method to create PNG files that are backward compatible with Fireworks 8.

ADOBE FIREWORKS CS3 159

Working with layers
Each object in a document resides on a layer. You can either create layers before you draw or add layers as needed. The canvas is below all layers and is not itself a layer. For information on working with the canvas, see Changing the canvas on page 34.
You can view the stacking order of layers, sub-layers, and objects in the Layers panel. This is the order in which they appear in the document. Fireworks stacks layers based on the order in which you created them, placing the most recently created layer on the top of the stack. The stacking order determines how objects on one layer overlap objects on another. You can rearrange the order of layers and of objects within layers, and you can create sub-layers and move objects onto them. The Layers panel displays the current state of all layers in the current frame or page of a document. To view other frames or pages, you can use the Frames or Pages panel, or select an option from the Frame pop-up menu at the bottom of the Layers panel, or the Pages pop-up menu at the bottom of the document window. For more information, see Working with frames on page 242 and Working with pages on page 155. The name of the active layer is highlighted in the Layers panel. You can expand a layer to view a list of all the objects on it. By default, the objects are displayed in thumbnails. Masks are also shown in the Layers panel. Selecting the mask thumbnail allows you to edit the mask. You can also create new bitmap masks using the Layers panel. For more information about masking, see Masking images on page 164. Opacity and blend mode controls are at the top of the Layers panel. For more information, see Adjusting opacity and applying blends on page 181.

Setting the animation repetition
The Loop setting in the Frames panel determines how many times the animation repeats. This feature loops frames over and over so you can minimize the number of frames needed to build the animation.
To set the selected animation to repeat: 1 Select Window > Frames to display the Frames panel. 2
Click the GIF Animation Looping button at the bottom of the panel.
3 Select the number of times to repeat the animation after the first time.
If you select 4, for example, the animation plays five times in all. Forever repeats the animation continuously.

Setting transparency

As part of the optimization process, you can have one or more colors in an animated GIF be displayed as transparent in a web browser. This is useful when you want a web page background color or image to show through the animation.
To display a color as transparent in a web browser: 1 Select Window > Optimize if the Optimize panel is not visible.

ADOBE FIREWORKS CS3 248

2 From the Transparency pop-up menu in the Optimize panel, select either Index Transparency or Alpha Transparency. For a description of these options, see Making areas transparent on page 271. 3 Use the transparency tools in the Optimize panel to select colors for transparency.

Optimizing an animation

Optimization compresses your file into the smallest package for fast loading and exporting, making downloading time much quicker on your website.
To optimize an animation: 1 If you plan to export your animation as an animated GIF, select Animated GIF as the Export file format in the
Optimize panel. If the panel is not visible, select Window > Optimize.
2 Set the Palette, Dither, or Transparency options. For more information on optimizing options, see Optimizing GIF, PNG, TIFF, BMP, and PICT files on page 265. 3 In the Frames panel, set the frame delay. For more information, see Setting the frame delay on page 242.

Animation export formats

After you create and optimize an animation, it is ready to export. Animated GIFs give the best results for clip art and cartoon-like graphics. For information about exporting animated GIFs, see Exporting an animation on page 279. You can export the animation as a Flash SWF file, and then import it into Flash. Or you can skip the export step and import your Fireworks PNG source file directly into Flash. This option gives you the most control over how your animation is imported. You can import all layers and frames of your animation if desired, and then further edit them within Flash. For more information, see Working with Flash on page 305. You can also export frames or layers from your animations as multiple files. This can be useful when you have many symbols on different layers for the same object. For example, you can export a banner ad as multiple files if each letter of a company name is animated in a graphic. Each letter is separate from the others. For more information about exporting layers or frames to multiple files, see Exporting frames or layers on page 279.

The Create Slideshow output is built so that any Flash designer/developer can build a Fireworks Album Player in Flash that uses the generated XML output.
Building or editing a slideshow
The Create Slideshow command allows you to create a Flash-based (or non-Flash) slideshow by selecting a folder with images, adding slideshow options, and then generating a slideshow for use on the web. You can edit existing slideshows by adding or deleting images, or by adding multiple albums to a single slideshow.

ADOBE FIREWORKS CS3 251

If you are a Flash designer or developer, you can also build a custom album player in Flash to display the Fireworks Album Creators XML output. For more information, see Creating a custom Fireworks album player on page 254.
To create a slideshow: 1 Select Commands > Create Slideshow. 2 Click the Add an album button (the plus sign) next to Albums. 3 Choose the image files to include in the slideshow. Then click OK. 4 Fill in the AlbumBook Properties and the Album Properties for the slideshow. For more information about these properties, see AlbumBook Properties panel on page Select each of the panels on the right to configure the slideshow properties. For more information about the
available slideshow properties, see Slideshow properties on page 252.
6 Choose the location for the completed slideshow in the Export Options panel. 7 After configuring all of the slideshow settings, click Create. 8 When the slideshow has finished processing, you can select the Launch slideshow in browser check box and click Close to display the slideshow in your default browser. To open an existing slideshow: 1 Select Commands > Create Slideshow. 2 In the Create Slideshow window, select Albums > Open an existing AlbumBook. 3 Browse to the folder that contains the existing slideshow XML file and click Open.
Note: You can also open an existing slideshow by clicking the Browse button () next to Albums.

ADOBE FIREWORKS CS3 252

To delete an album: 1 Select Commands > Create Slideshow. 2 In the Create Slideshow window, select Albums > Open an existing AlbumBook. 3 Browse to the folder that contains the existing slideshow XML file and click Open. 4 Select the album in the Albums lists, and then click the Remove an album button (the minus sign). To add additional images to an album: 1 Select Commands > Create Slideshow. 2 In the Create Slideshow window, create a new album, or select Albums > Open an existing AlbumBook to open an existing album. 3 If you are opening an existing album, browse to the folder that contains the existing slideshow XML file and click Open. 4 Click on the album in the Albums list to select it. 5 Click the Add image(s) button (the plus sign) next to Images. 6 Click the Browse button () and select one or multiple images to add to the album, then click Done. The new

click OK.

2 Export your document using any of the methods available for exporting or copying HTML. For more information about the various ways you can export and copy HTML from Fireworks, see Exporting HTML on page 280.
Note: Fireworks uses UTF-8 encoding when exporting to XHTML. For more information about UTF-8 encoding, see Exporting files with and without UTF-8 encoding on page 286.
Exporting files with and without UTF-8 encoding
Historically, web browsers were not able to display different character sets in a single HTML document. For example, Chinese text and English text could not be displayed on the same page because web browsers werent capable of displaying different character sets in a single document. UTF-8, which stands for Universal Character Set Transformation Format-8, is a text-encoding method that allows web browsers to display different character sets on the same HTML page. Fireworks allows you to export HTML with UTF-8 encoding. Note: Fireworks can also import documents that use UTF-8 encoding. For more information, see Creating Fireworks PNG files from HTML files on page 17. In Fireworks, UTF-8 encoding is turned on by default so that any HTML document you export can display characters from multiple character sets. You can turn off UTF-8 encoding, if you prefer.
To export documents without UTF-8 encoding: 1 Select File > HTML Setup. 2 On the Document Specific tab, clear the UTF-8 encoding box and click OK.

ADOBE FIREWORKS CS3 287

Note: For more information on HTML setup options, see Setting HTML export options on page 287.
3 Export your document using any of the methods available for exporting or copying HTML. For information about the various ways you can export and copy HTML from Fireworks, see Exporting HTML on page 280. Setting HTML export options
The HTML Setup dialog box allows you to define how Fireworks exports HTML. These settings can be documentspecific or can be used as your default setting for all HTML exports. Changes made in the Document Specific tab affect the current document only, but you can use these settings as defaults for new documents if you click the Set Defaults button before closing the HTML Setup dialog box. General and Table settings are global preferences and affect all new documents.
To define how Fireworks exports HTML: 1 Select File > HTML Setup or click the Options button in the Export dialog box. 2 In the General tab, select from the following options:

To copy and paste or drag and drop graphics from Fireworks into a Flash document: 1 In Fireworks, select the object or objects to copy. 2 Select Edit > Copy or click the Quick Export button and choose Copy from the Flash pop-up menu. 3 In Flash, create a new document and choose Edit > Paste, or drag the file directly from Fireworks to Flash.
4 Select an option from Into pop-up menu:
Current frame as movie clip The contents being pasted are imported as a movie clip, which is placed in the active
frame and layer in the Flash file. The layer hierarchy and frames within the PNG file are preserved.
New layer The pasted content is imported as new layer. Frames are imported into the timeline as separate frames.
5 Select the way youd like vector objects imported:

ADOBE FIREWORKS CS3 308

6 Select the way youd like text imported:

7 Click OK.

The pasted content is imported into Flash using the import options you chose. Note: The selections in the Import Fireworks Document dialog box are saved and used as default settings the next time you copy and paste or drag and drop a PNG file into Flash.
About the Flash library structure
Fireworks objects are imported into a Fireworks Objects Folder in the Flash library. The structure within this folder is as follows: File 1 folder // Named with the Fireworks file name
Page 1 folder // Named with the page name (if more than one page)
Page 1 // Named with the page name Frame 1 folder // Named with the frame name (if more than one frame) Frame 1 // Named with the frame name Symbol 1 in Frame 1 // Named based on the symbol name Symbol 2 in Frame 1. Shared Layers folder // Shared layers across frames in Page 1 Shared Layer folder // Named with the name of the shared layer Shared Layer symbol

Page 2 folder

Page 2 Symbol 1 in Page 2 (For a page with no frames).

MasterPage folder

MasterPage Symbol 1 in MasterPage. Shared Layers folder // Shared layers across pages Shared Layer folder // Named with the name of the shared layer Shared Layer symbol

rotating 144 saving custom gradient 145 saving gradient 145 swapping stroke and fill colors 127 transforming gradient 144 transforming pattern 144 transparency illusion 132 web dither fill 132 filters Add Noise 83 Blur 79 Blur More 79 Brightness/Contrast 76 Find Edges 80 Gaussian Blur 79 Hue/Saturation 77 Invert 78 Motion Blur 79 Photoshop plug-ins 150 Radial Blur 80 Sharpen 81 Sharpen More 81 Unsharp Mask 82 Zoom Blur 80 Find and Replace panel 331, 332 Find Edges filter 80 Find panel 28 finding and replacing 331 batch processed files 338 colors 333 fonts 332 multiple files 332 non-websafe colors 333 selecting source for search 331 text 332 URLs 333 uses 330 Fireworks 327 Fireworks. See Adobe Fireworks Fit to Canvas 36 Flash exporting to 305, 310 importing Adobe Fireworks PNG to 305 Flash SWF movies 345 Flatten Selection command 62 Flex integration 329 flipping objects 56 floating pixel selections
creating 52 moving 52 font installation 2 fonts finding and replacing 332 handling missing 123 styles 112, 113 type sizes 112, 113 frame delay animations 242 frame delay, default setting 17 frames adding 243 custom viewing 246 deleting 244 disabling layer sharing 245 exporting 279 inserting 243 managing 242 moving objects to another frame 244 multiframe editing 246 names in animation 243 onion skinning 245 reordering 244 setting delay 242 sharing layers for animation 244 turning off onion skinning 246 turning on and off 243 viewing all 246 viewing current and adjacent 246 viewing next 246 Frames panel 27, 242 freeform paths 93 FreeHand exporting to 314 placing Adobe Fireworks graphics in 312 Full Screen with Menus mode 33 G Gaussian Blur filter 79 GIF file format choosing 265 choosing a color palette 266 swatches 128 GIF, saving 23 glow effects 150 GoLive 288, 327
gradient fills 64 adding new color 143 adjusting 144 adjusting color transition 143 applying 142 changing colors 143 converting images to transparency 81 Edit Gradient dialog box 143 editing 142 moving 144 removing colors from 143 rotating 144 saving custom 145 transforming 144 Grayscale color model 130 grid altering cell size 40 changing default color 39 showing/hiding 39 snapping objects to 39 grouping objects 58 guides 38 locking 39 snapping objects to 39 H halos, removing 275 handles, transform 54 Help 2 Hexadecimal color model 130 Hide All command 170 Hide Panels command 29 Hide Selection command 170 hiding edges 43 layers 162 objects on layers 162 panels 29 toolbars 31 highlights 72 Histogram 72 History panel 27, 40 changing the number of steps in 343 clearing all steps from 343 editing actions with 345 replaying steps 343 HomeSite I

Whats New

ADOBE FIREWORKS CS3 RAPIDLY PROTOTYPE AND DESIGN FOR THE WEB
With time-saving workflow enhancements that include impressive integration with Photoshop, Illustrator, Dreamweaver, and Flash, new Fireworks CS3 software delivers a fast and efficient design environment.
New 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. Available for Microsoft Windows and as a universal-binary application that runs natively on both PowerPC- and Intel-based Macs, Fireworks CS3 features custom prototyping tools as well as essential integration with Adobe Photoshop CS3, Adobe Illustrator CS3, Adobe Dreamweaver CS3, and Adobe Flash CS3 Professional software. 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 powerfulcreative professionals and developers remain focused on their vision and achieve the highest quality results in less time. With Adobe Fireworks CS3, you can: Design with easeAdobe Fireworks CS3 boasts support for new Photoshop blending modes, a new hierarchical organization structure, intelligent scaling, and a common library for symbols, making it easy to design bitmap and vector images and optimize for the web from within a single intuitive environment. Rapidly prototypeFireworks CS3 features the ability to quickly prototype websites, user interfaces, and rich internet applications (RIA) with a robust set of tools. Support for multiple pages enables a fast and efficient design workflowone that delivers the quality that users and clients demand. Integrate Adobe softwareThe unique prototyping toolset of Fireworks CS3 and its smooth integration with other powerful Adobe Creative Suite 3 component software enables you to design in an environment thats comfortable for you. Import native Photoshop and Illustrator files, and copy and paste with confidence between Fireworks and Dreamweaver and Flash.

Introduction

Adobe Fireworks CS3 is also available as a component of:
Adobe Creative Suite Web Premium Adobe Creative Suite Web Standard Adobe Creative Suite Master Collection
Adobe Fireworks CS3 Whats New

Top ten features

Essential integration with Adobe Photoshop CS3 (Page 2) Powerful integration with Adobe Illustrator (Page 2) New hierarchical organization structure (Page 3) Intelligent scaling (Page 3) Multiple pages (Page 4) Flex integration for RIA layouts (Page 4) Photoshop blending modes (Page 4) Common Library (Page 5) New Adobe Bridge CS3 (Page 5) Seamless integration with Dreamweaver CS3 and Flash CS3 Professional (Page 6)
A full new version, Adobe Fireworks CS3 is packed with powerful new features and functionality. In addition, numerous enhancements throughout the application make Fireworks easier to use and allow you to prototype faster than ever before. Following is a detailed overview of the top new features in Adobe Fireworks CS3.
Top new features of Adobe Fireworks CS3
Essential integration with Adobe Photoshop CS3
With Fireworks CS3, you can directly import native files from Photoshop, the professional standard in digital imaging. Achieving a whole new level of functionality, Adobe is redefining the concept of what integration should be. Fireworks CS3 now supports a hierarchical layer structure, allowing you to preserve layer and sublayer information when importing files from Photoshop. See New hierarchical organization structure on page 3 for more information. Photoshop provides a variety of effects such as shadows, glows, bevels, overlays, and strokes that let the user change the appearance of a layers 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. Fireworks CS3 includes seven commonly used Photoshop blending modes (dissolve, linear burn, linear dodge, vivid light, linear light, pin light, and hard mix). See Photoshop blending modes on page 4 for more information. 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.

Apply Photoshop layer effects to any Fireworks document by selecting Photoshop Effects from the Properties Inspector.
Powerful integration with Adobe Illustrator CS3
You can import native Illustrator files directly into Fireworks CS3 while retaining attributes including layers, groups, and colors. Preserving this document structure allows for easy grouping and scaling of design elements within Fireworks, and prototyping site designs and layouts has never been easier. Besides the ability to open and place native Illustrator CS3 files, Fireworks CS3 also preserves the fidelity of many Illustrator features, including: Support for importing and editing gradient fills Support for pattern strokes and pattern fills The appearance of RGB colors Support for opacity and transparency settings The number and position of Bzier anchor points on vector paths Import of hierarchical layers, groups, and clipping masks The ability to import and preserve linked images
New hierarchical organization structure
With Fireworks CS3, you can better manage and organize your designs with a new hierarchical structure for both web layers and pages. While previous versions of Fireworks were restricted to a single level of layers when designing pages, the layer structure in Fireworks CS3 can be as simple or as complex as required. When creating a new file, all items are organized at the same level, in a nonhierarchical manner. You can create new sublayers as needed and move items into them, or move elements from one layer to another at any time. You can also create and group multiple sublayers.
The Layers panel in Fireworks CS3 mimics that found in Photoshop, with the ability to maintain hierarchical structure using layers and sublayers.

Intelligent scaling

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.

Intelligent scaling ensures that your design elements are as flexible as your imagination. Up to nine different regions determine how button or graphic symbols appear when scaled, resulting in graphics that look perfect every timein no time.
Original graphic symbol (not scaled).
Graphic symbol scaled in Fireworks CS3. The corners match the original perfectly, and the text is not stretched or distorted.
Graphic symbol scaled in previous versions of Fireworks. Notice how the corners and the text appear distorted.

Multiple pages

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 multipage 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 controls on multiple pages. You can also export all of your pages at once as multiple HTML pages.
No more sifting through multiple documentsFireworks CS3 supports multiple pages in a single document. Master pages and shared layers make it easy to manage repeating elements throughout a site.
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 applicationsreferred to as RIAsby 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 theres 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.

Photoshop blending modes

Take your creativity to new heights with a variety of blending modes. Fireworks CS3 includes seven popular Photoshop blending modes (dissolve, linear burn, linear dodge, vivid light, linear light, pin light, and hard mix).

Blending mode

Dissolve

How it looks

What it does
Randomly chooses colors along the edges between the current and background layer to create the blending effect.

Linear Burn

Inspects each channel of the current and background layers and darkens the background color to reflect the blending color by decreasing the brightness. Inspects each channel of the current and background layers and lightens the background color to reflect the blending color by increasing the brightness. Increases contrast by combining the effects of the Color Burn and Color Dodge blending modes.

Linear Dodge

Vivid Light

Linear Light

Increases brightness by combining the effects of the Linear Burn and Linear Dodge blending modes.

Pin Light

Replaces the color, depending on the blending color. If the blending color is lighter than 50% gray, darker pixels are replaced, and lighter pixels do not change. If the blending color is darker than 50% gray, lighter pixels are replaced, and darker pixels do not change. Reduces the colors in an image to just 8 pure colors.

Hard Mix

I always knew Fireworks was a great tool for web design, but was too comfortable with other applications. With, the superb integration with Photoshop and Illustrator, Fireworks CS3 just became my new favorite web prototyping tool.
Mordy Golding, Founder, Design Responsibly

Common Library

With Fireworks CS3, you can jump-start your prototype with a library of common elements. Whether youre designing web applications, forms, interfaces, or sites, this library speeds up workflow and productivity. Once you have started a prototype with these elements, you can fine-tune it to fit the look and feel you want. The Common Library stores three different types of symbols: Customizable graphic symbols Button symbols Animation symbols Acting as an asset repository, the Common Library in Fireworks CS3 can be used to leverage content across multiple documents, and can also serve as an efficient way to manage shared assets on a server so that a workgroup of designers and developers can access them. New Symbol Properties panel In Fireworks CS3, you can easily create interface components as graphic symbols that can be intelligently scaled and given specific attributes using a simple JavaScript (JSF) file. Attributes like font, color, shape, and line weight can then be controlled by using the new Symbol Properties panel. This means that creating your own prototype is now as easy as simply dragging a few elements from the Common Library onto your page and editing the parameters of those shapes. The attribute changes that you specify in the Symbol Properties panel are made to the symbol instance, meaning that the source symbol remains intact and untouched. So theres no need to create multiple instances to adjust symbol attributes; you can now create multiple appearances leveraging one universal symbol.

Start by dragging a symbol from the Common Library right into your document. Then use the Symbol Properties panel to customize the appearance and behavior of the symbol.

New Adobe Bridge CS3

Adobe Bridge CS3 is the control center for Adobe Creative Suite 3. Use it for organizing, browsing, and locating the assets needed for creating content for print, web, and mobile devices. Assets can be dragged into layouts and projects as needed and previewed, and metadata can be added to each asset. Bridge is a standalone application, accessible from within Adobe Creative Suite 3 components like Photoshop, Illustrator, Flash, Dreamweaver, Adobe InDesign CS3, and now Fireworks CS3. Bridge allows for the cross-scripting of multiple Adobe Creative Suite components, and takes advantage of both Fireworks batch processing and command-level scripting from the unified Bridge interface. You can also use the Adobe Stock Photos service found within Bridge to import images into your Fireworks designs and layouts.
Adobe Bridge CS3 also introduces Bridge Home, a destination for up-to-date information about all your Creative Suite 3 software. Visit Bridge Home to watch the latest video tutorials on Fireworks, Photoshop, Dreamweaver, and others; listen to a podcast with a leading designer; or learn about upcoming training events in your community. Discover the tips and resources that will help you work faster and smarter, making the most of your Adobe products. Using Bridge and Fireworks together also 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.
Seamless integration with Dreamweaver CS3 and Flash CS3 Professional
Web designers and developers rely on Dreamweaver CS3 to efficiently design, develop, and maintain websites and applications. With Fireworks CS3, you can copy and paste any object into Dreamweaver HTML documents. In addition, you can leverage the improved CSS export functionality in Fireworks to import easily editable code into Dreamweavers advanced coding environment. Adobe Flash CS3 Professional delivers the most productive authoring environment for interactive content creation. 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 9-slice scaling guides for symbols. Prototyping in Fireworks and developing in Flash has never been easier. In the United States and Canada, Adobe Fireworks CS3 for Mac OS X version 10.4.2 on Intel-based or PowerPC-based systems and for Windows XP and Windows Vista is expected to ship in the second quarter of 2007. Adobe Fireworks CS3 will be available in North America starting in Qfor an estimated street price of US$299, directly from Adobe or through Adobe Authorized Resellers. To order directly from Adobe, visit the Adobe Store at www.adobe.com, or call 1-888-724-4507. Licensed owners of Fireworks 8, Fireworks MX 2004, or Fireworks MX can upgrade to Adobe Fireworks CS3 for US$149. Licensed owners of Fireworks 8, Fireworks MX 2004, or Fireworks MX are also eligible for special upgrade pricing to certain editions of Adobe Creative Suite 3. A complete description of upgrade eligibility and pricing is available in the Pricing Overview document. Estimated street prices do not include taxes, shipping, handling, or other related expenses. Information on pricing and support policies outside of North America and for Education customers will be available separately. Different pricing may apply for Education customers and in other geographical regions. Adobe revolutionizes how the world engages with ideas and informationanytime, anywhere and through any medium. For more information, visit www.adobe.com.

Availability and pricing

About Adobe Systems Incorporated
For more information, see the Whats New document for Adobe Creative Suite 3 Web Premium.

Better by Adobe.

Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.com
Adobe, the Adobe logo, Adobe Premiere Pro, Acrobat, After Effects, Creative Suite, Fireworks, Flash, Flex, Flex Builder, InDesign, Illustrator, Photoshop, and Better by Adobe are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac, Mac OS, and Macintosh are trademarks of Apple Computer, Inc., registered in the United States and other countries. QuickTime is a trademark used under license. Intel is a trademark or registered trademark of Intel Corporation or its subsidiaries in the United States and other countries. PowerPC is a trademark of International Business Machines Corporation in the United States, other countries, or both. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners. 2007 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 01/04/07 Fireworks CS3 Whats New Adobe