Macromedia Fireworks - CS6 User Guide

ADOBE® FIREWORKS

Help and tutorials

What’s new

What’s new in CS6

Extract CSS object properties Export slices as CSS sprite Creating jQuery mobile themes Performance improvements Set opacity separately for fill and stroke Color selection improvement Set the angle for gradient or pattern fills New fw.png filename extension Miscellaneous enhancements API enhancements

Extract CSS object properties

You can extract CSS object properties, such as rounded corners, gradients, drop shadows, and transformations.

1. Select the object.

2. Select Window > CSS Properties.

3. Click Copy All to copy the CSS properties of the selected object. Click Copy Selected to copy individual properties. For more information, see Extract CSS properties from design objects using Fireworks CS6 .

Export slices as CSS sprite

You can slice objects in a document and export them as a single CSS sprite image. Using a single CSS sprite image instead of multiple images improves the loading time of a website by reducing the number of server requests.

When you export slices as a CSS sprite image, with the image file, a CSS file that contains the displacement values is also generated.

1. Right-click the slice or group of slices.

2. Select Export CSS Sprite.

3. In the Export dialog box, click Export.

For more information, see Working with CSS sprites in Fireworks CS6.

Creating jQuery mobile themes

You can create jQuery mobile themes based on default sprites and swatches. You can also preview the jQuery mobile theme and export it as CSS and sprites.

To create a mobile theme, select Commands > jQuery Mobile Theme > Create New Theme. To preview mobile themes in a browser, select Commands > jQuery Mobile Theme > Preview Theme. To export a mobile theme as sprites and CSS, select Commands > jQuery Mobile Theme > Export Theme. To preview the theme, select Window > Extensions > jQuery Mobile Theme In-App Preview. To add an icon placeholder, select jQuery Mobile Theme > Insert Icon Placeholder.

For more information, see Create jQuery Mobile themes using Fireworks CS6.

To the top

Performance improvements

To address the not enough memory issue, the usage of GDI objects by Fireworks has been reduced. Memory usage limit increased on Windows 64-bit computers for better stability when opening and saving large files. On Mac OS, improved refresh rate of the Property Inspector when switching between objects.

Set opacity separately for fill and stroke

1. Select the object and select the Stroke or Fill color picker. Alternatively, select the Fill or Stroke color picker from the Tools

To the top

bar.

2. Click the Opacity slider.

3. Drag the slider to the desired value. On Mac OS, type the value in the text box.

Color selection improvement

Use buttons to specify fill type options such as no fill, solid, gradient, and patterns in the Property inspector and Tools bar. Previously, these options were handled through drop-down menus.

You can now specify Stroke position (inside, center, outside) using the Stroke dialog box.

Set the angle for gradient or pattern fills

1. Select the object.

2. In the Property Inspector, select the gradient or pattern fill.

3. In the Edit Gradient or Edit Pattern dialog box, specify the angle value.

New fw.png filename extension

When you save a file, it is saved with the fw.png extension by default. To change the default behavior, select Edit > Preferences. In the General tab of the Preferences dialog box, deselect Append .fw.png, and click

OK. You can also remove this extension in the Save As dialog box.

Miscellaneous enhancements

Enhancements to the Styles panel. Location node for color stop in the Gradient tool is highlighted. Using the Eyedropper tool, you can copy, fill, and stroke color.

Select the Eyedropper tool, right-click the object, and select the desired option. You can now locate the default Fireworks template and common library symbols in the Users directory.

If a common library symbol is deleted, a new copy of the symbol is created when you restart Fireworks. The selected object name and zoom level now do not appear in the document's title bar. This information is available in the

Layers panel and application bar. Updates to the path panel and swatches. On Mac OS, you can now preview the image files in Google Chrome. The Path option that gives quick access to many path-related commands is provided in the Window menu. The Group as Mask option is provided with the right-click context menu. The default optimization setting for a new file is PNG32. Deprecated features:

AIR export Create slide show Flex Skinning Device Central Share My Screen

You can now lock constraints for the Crop tool using the Property Inspector. Thumbnail icons for objects in the Layers panel. The following assets are now available in the common library: Gesture, Icons, iPhone, jQuery Bootstrap, Wireframe,

Wireframe-Ads, Wireframe-iPad, Wireframe-iPhone, and Wireframe Windows Phone 7. Styles library has been updated with the following categories: Button symbol styles, fill design patterns, stroke color dots, and

web button styles. Tool tips are now available for the File Import operation. While saving a symbol to the common library, it is retained on the canvas. More options are now available for patterns and textures. Inside the Gradient Fill dialog box, use CTRL+Left or CTRL+Right Arrow keys to navigate between the color stops or opacity

To the top

stops. On Mac, use Command+LEFT or Command+Right.

Libraries are updated with more patterns and textures.

API enhancements

New methods

fw.appTemplatesDir: Returns the path to the template directory. fw.commonLibraryDir: Returns the path to the common library directory. fw.activeTool: Ascertains whether the active tool is the specified tool.

For example, use if(fw.activeTool==Tools.pen) to discover whether the active tool is the Pen tool. This method does not depend on the tool name in the localized language.

fw.appPatternsDir: Returns the path to the Patterns directory. fw.appTexturesDir: Returns the path to the Textures directory. fw.reloadPatterns: Reloads the patterns from the Patterns directory. fw.reloadTextures: Reloads the texture from the Textures directory. dom.updateSymbol: Updates the symbol imported from the common library.

Updated methods

fw.browseForFileURL(browseType, title, previewArea, startFolder): A new optional parameter, startFolder, specifies the root directory for the Browse dialog box.

fw.setDocumentImageSize(boundingRectangle, resolution, currentPageOnly, interpolationMethod): A

new optional parameter, interpolationMethod, takes integer values from 1 to 4 specifying bicubic, bilinear, soft, and nearest neighbor, respectively.

fw.saveAs(doc, url, defaultFromOptions): Default value for the defaultFromOptions parameter is changed to false. If it is set to true, the file is saved with the current optimization settings.

To the top

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices | Online Privacy Policy

What’s new

Legal Notices | Online Privacy Policy

Fireworks basics

To learn more, view these recommended resources online.

Learn Fireworks CS6

video (May. 2, 2012)

Create Fireworks PNG files from HTML files

Open only the first table of an HTML file Import the first table of an HTML file into an open Fireworks document

Fireworks can open and import HTML content created in other applications that contain basic HTML table elements.

Open only the first table of an HTML file

1. Select File > Open.

2. Select the HTML file that contains the table you want to open, and click Open. The first table in the HTML file opens in a new document window.

Import the first table of an HTML file into an open Fireworks document

1. Select File > Import.

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

3. Click to place the insertion point where you want the imported table to appear.

Note: Fireworks can import documents that use UTF-8 encoding and those that are written in XHTML.

Legal Notices | Online Privacy Policy

To the top

Creating a new Fireworks document

Create a new document Set default dimensions for new document Create a new document the same size as an object on the Clipboard

New documents in Fireworks are saved as Portable Network Graphic (PNG) documents. PNG is the native file format for Fireworks. Graphics created in Fireworks can be exported to or saved in several web and graphic formats. Regardless of the optimization and export settings

you select, the original Fireworks PNG file is preserved to allow easy editing later.

Create a new document

1. Select File > New. The New Document dialog box opens.

2. Enter document settings and click OK.

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

Set default dimensions for new document

When you open Fireworks for the first time, the following values for dimensions appear in the New Document dialog as default:

660 x 440 (Windows)

500 x 500 (Mac) Settings in the New Document dialog are not changed when you change the canvas size in Fireworks. The default settings get changed when you copy an object. Dimensions of the copied object (on the clipboard) are automatically used for

dimensions in the New Document dialog. To clear object dimensions from the clipboard, do the following (Windows):

1. Create a document with the preferred dimensions.

2. Save the document, and close Fireworks.

3. Reopen Fireworks, and create a document. The dimensions of the previously saved document appear in the New Document dialog. For Mac OS, Fireworks retains the dimension of a previously copied object when creating a new document. This is because clipboard contents are

retained until you cut or copy other elements, such as text. If you copy elements unrelated to dimensions, and then select "New", the previouslysaved size appears as default.

To the top

Create a new document the same size as an object on the Clipboard

1. Copy an object to the Clipboard from another Fireworks document, a web browser, or from any application that is acceptable

for pasting.

2. Select File > New.

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

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. More Help topics

Legal Notices | Online Privacy Policy

Fireworks basics

Draw and edit vector and bitmap objects Add interactivity to graphics Optimize and export graphics Vector and bitmap graphics

Adobe® Fireworks® is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector images, design web effects such as rollovers and pop -up menus, crop and optimize graphics to reduce their file size, and save time by automating repetitive tasks. You can export or save a document as a JPEG file, GIF file, or file of another format. These files can be saved along with HTML files containing HTML tables and JavaScript code so you can use them on the web.

For a video tutorial that introduces Fireworks basics, see www.adobe.com/go/lrvid4032_fw.

Draw and edit vector and bitmap objects

The Fireworks Tools panel includes distinct sections containing tools for drawing and editing vectors and bitmaps. The tool you select determines whether the object you create is a vector or a bitmap. After drawing an object or text, you can use a wide array of tools, effects, commands, and techniques to enhance your graphics or to create interactive navigation buttons.

You can also import and edit graphics in JPEG, GIF, PNG, PSD, and many other file formats.

Add interactivity to graphics

Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into exportable sections to which you can apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. On a web page, each slice appears in a table cell.

Use the drag-and-drop rollover handles on slices and hotspots to quickly assign swap image and rollover behaviors to graphics. Use the Fireworks Button Editor and Pop-up Menu Editor to build special interactive graphics for navigating websites.

Optimize and export graphics

Use the powerful optimization features of Fireworks to achieve the right balance between file size and acceptable visual quality for exported graphics. The type of optimization you choose depends on the needs of your users and the content.

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

Vector and bitmap graphics

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

To the top

About vector graphics

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

Vector graphics are resolution-independent. That means the quality of a vector graphic's appearance won't change when you change its color;

move, resize, or reshape it; or when the resolution of the output device changes.

About bitmap graphics

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

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, which can make the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image's quality.

Insert objects into a Fireworks document

Drag an image or text into Fireworks Paste into Fireworks Location of pasted objects Resample pasted objects Import a PNG file into a Fireworks document layer Import from a digital camera or scanner

Drag an image or text into Fireworks

You can drag vector objects, bitmap images, or text from any application that supports dragging.

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

Paste into Fireworks

Pasting an object copied from another application into Fireworks places the object in the center of the active document. Text or objects in any of these formats can be pasted from the Clipboard:

Adobe FreeHand 7 or later Adobe Illustrator PNG PICT (Mac OS) DIB (Windows) BMP (Windows) ASCII text EPS WBMP TXT RTF

1. In the other application, copy the object or text that you want to paste.

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

To the top

Location of pasted objects

The placement of the pasted object depends on what is selected:

If at least one object on a single layer is selected, the pasted object is placed in front of (stacked directly above) the selected object on the same layer.

If the layer itself is selected and either no objects or all objects are selected, the pasted object is placed in front of (stacked directly above) the topmost object on the same layer.

If two or more objects on more than one layer are selected, the pasted object is placed in front of (stacked directly above) the topmost object in the topmost layer.

If the Web Layer or an object on the Web Layer is selected, the pasted object is placed in front of (stacked above) all other objects on the bottommost layer.

Note: The Web Layer is a special layer that contains all web objects. It always remains at the top of the Layers panel.

Resample pasted objects

To the top

Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as possible.

Resampling a bitmap to a higher resolution typically causes little loss of quality. Resampling to a lower resolution always causes data loss and usually results in a drop in quality.

Resample a bitmap object by pasting

1. Copy the bitmap to the Clipboard in Fireworks or another program.

2. Select Edit > Paste in Fireworks.

3. If the bitmap image on the Clipboard has a different resolution than the current document does, choose a resample option.

Resample Maintains the original width and height of the pasted bitmap, adding, or subtracting pixels as necessary. Don't Resample Maintains all the original pixels, which may make the relative size of the pasted image larger or smaller than

expected.

Import a PNG file into a Fireworks document layer

When you import Fireworks PNG files into the current layer of the active Fireworks document, hotspot objects and slice objects are placed on the document's Web Layer. Fireworks retains the proportions of the imported image.

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

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

3. Navigate to the file you want to import and click Open.

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

5. Do one of the following:

Click to import the full-size image. Drag the import pointer to resize the image as you import.

Import from a digital camera or scanner

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

Before you try to import images into Fireworks, install all required software drivers, modules, and plug-ins for the camera or scanner. The Plug-ins folder is located inside the Fireworks application folder. In Mac OS, Fireworks automatically looks for Photoshop Acquire plug-ins in

that folder.

To the top

Direct Fireworks to Photoshop Acquire plug-ins

1. In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS).

2. Click the Plug-ins category.

3. Select Photoshop Plug -Ins and navigate to the folder containing the plug-ins.

If the Select The Photoshop Plug-ins Folder (Windows) or Choose A Folder (Mac OS) dialog box doesn't open automatically, browse to the folder.

Import an image from a digital camera (Windows)

1. Connect the camera to your computer.

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

3. Select the source for the images and the images you want to import.

The user interface for your camera software appears.

4. Follow the instructions to apply settings.

Import an image from a digital camera (Mac OS)

1. Connect the camera to your computer.

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

3. Select the camera and the images you want to import.

4. Follow the instructions to apply settings.

Import an image from a scanner

1. Connect the scanner to your computer.

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

3. Do one of the following:

(Windows) In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select. (Mac OS) In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select.

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

4. Follow the instructions to apply settings. More Help topics

Legal Notices | Online Privacy Policy

Opening and importing files

Open a Fireworks document Open a recently closed file Open a recently closed file when no files are open Open graphics created in other applications

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

Open a Fireworks document

Select File > Open and select the file.

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

Open a recently closed file

1. Select File > Open Recent.

2. Select a file from the submenu.

Open a recently closed file when no files are open

Click the file name on the Start page.

Open graphics created in other applications

You can open files created in other applications or file formats, including Photoshop®, Adobe Illustrator®, WBMP, EPS, JPEG, GIF, and animated GIF files.

When you open a file format other than PNG using File > Open, you create a new Fireworks PNG document based on the file you open. You can use all of the features of Fireworks to edit the image. You can then either select Save As to save your work as a new Fireworks PNG file or as another file format.

In some cases, you can save the file in its original format. If you do this, the image flattens to a single layer, and you will be unable to edit the Fireworks-specific features you added to the image.

The following file formats can be saved directly from Fireworks: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac only).

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

To the top

Animated GIFs

Import an animated GIF as an animation symbol and then edit and move all the elements of the animation as a single unit. Use the Document Library panel to create new instances of the symbol.

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

Open an animated GIF as you would open a normal GIF file. Each element of the GIF is placed as a separate image in its own Fireworks state. You can convert the graphic to an animation symbol in Fireworks.

EPS files

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

PSD files

Fireworks can open PSD files created in Photoshop and preserve most PSD features, including hierarchical layers, layer effects, and commonly used blend modes. Use the various options for Photoshop Import/Open in the Preferences dialog box to customize PSD import.

WBMP files

Fireworks can open WBMP files, which are 1-bit (monochrome) files optimized for mobile computing devices. This format is for use on Wireless Application Protocol (WAP) pages.

You can use the Import Multiple Files extension to import multiple selected files into new pages of a Fireworks PNG file. This utility helps you aggregate your project files created in earlier versions of Fireworks. You can also import flattened PNG file, PSD, AI, BMP, Freehand, GIF, animated GIF, JPEG, PICT, and TIFF formats. You can download this extension from http://www.adobe.com/go/learn_fw_multiplepages_en.

Saving Fireworks files

Save a Fireworks PNG file for use in an earlier version Save all open documents Save documents in other formats Add a picture frame Reset warning messages Take screenshot (Windows only)

When you create a document or open files in formats like PSD or HTML, the File > Save command creates a Fireworks PNG file. Fireworks PNG files have the following advantages:

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

You can slice complex graphics into pieces in the PNG file and export them as multiple files with different file formats and various optimization settings.

If Fireworks takes time to save a complex document, you can edit other open documents while the save operation completes.

Save a Fireworks PNG file for use in an earlier version

1. Select File > Export.

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

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

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

file format. This file format can be set using the Optimize panel. For more information see Optimizing and exporting. All objects on the top-level layers are saved in the export. Items on sublayers are not exported.

Save all open documents

You can save all open documents even while continuing to work on them and specify filenames for any unnamed documents. Documents that have changed since the last save appear with an asterisk (*) against the filename on the document tab.

Select Commands > Save All.

Note: You can use the Fireworks Auto Backup utility to automatically back up all open Fireworks documents. Download the utility from Adobe AIR Marketplace at http://www.adobe.com/go/learn_fw_autobackuputility_en.

Save documents in other formats

If you use File > Open to open a file in a format other than PNG, you can later select File > Save As to save your work as a new Fireworks PNG file, or you can select a different format.

For the following file types, you can choose File > Save to save the document in its original format: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac OS only). Fireworks saves 16-bit TIFF images at 24-bit color depth.

Note: If you save a PNG file as a bitmap file such as a GIF or JPEG, the graphic objects you manipulated in the PNG are no longer available in the bitmap file. To revise the image, edit the source PNG file and then export it again.

To the top

Add a picture frame

1. Select Commands > Creative > Add Picture Frame.

2. Select a pattern and set the frame size.

3. Click OK.

Reset warning messages

If you have disabled warning messages from reappearing, you can re-enable the messages.

To the top

Select Commands > Reset Warning Dialogs.

Take screenshot (Windows only)

1. Select Commands > Take Screenshot.

2. Switch to the window you want to take a screenshot of.

3. Click OK and then drag to select the area of the window.

4. Paste the clipboard contents on to the canvas or any image editing application. More Help topics

Legal Notices | Online Privacy Policy

To the top

Workspace

Change the canvas

To maintain the same ratio between the document's horizontal and vertical dimensions, select Constrain Proportions.

Change the canvas size Change the canvas color Resize a document and its contents About resampling Rotate the canvas Trim or fit the canvas Crop a document Use rulers, guides, and the grid Smart Guides

You can adjust the canvas at any time.

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, and 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 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.

Change the canvas color

Do one of the following:

Select Modify > Canvas > Canvas Color, and select a color option. For a Custom color, click a color in the Swatches pop-up window.

From the Property inspector, choose Select > Deselect, click the Pointer tool to display the document properties, and click the Canvas color box. Pick a color from the Swatches pop-up window or click the eyedropper on a color. To select a transparent canvas, click the Transparent button in the Swatches pop- up window.

To change the default canvas color, click the Custom swatch in the New Document dialog box. (See Creating a new Fireworks document.)

To the top

Resize a document and its contents

1. Do one of the following:

Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, and 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.

(Optional) 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 box, enter a new resolution for the image.

Changing the resolution changes the pixel dimensions.

5. Do one of the following:

To the top

To resize width and height independently, deselect Constrain Proportions.

6. To add or remove pixels when resizing so the image retains approximately the same appearance at a different size, select

Resample Image.

7. Select Current Page Only to apply the canvas size change only to the current page.

About resampling

Fireworks resamples (resizes) images differently than most image-editing applications do.

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. This occurs 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.

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. When resampling, you either add or remove pixels: Resampling up Adds pixels to make the image larger. This approach can result in quality loss because the pixels being added

do not always correspond to the original image. Downsampling Removes pixels to make the image smaller and results in data loss in the image. This approach always

causes quality loss because pixels are discarded to resize the image.

Rotate the canvas

Rotate the canvas 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.

Select Modify > Canvas > and choose a rotation option

To the top

Trim or fit the canvas

Expand or trim the size of the canvas to fit the objects it contains.

Original canvas (left); trimmed canvas (right)

1. Choose Select > Deselect to view the document properties in the Property inspector.

2. Click Fit Canvas in the Property inspector.

Crop a document

Cropping deletes 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

To the top

preference before cropping.

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 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.

To retain objects outside the canvas, deselect Delete Objects When Cropping on the Edit tab of the Preferences dialog box before cropping.

Use rulers, guides, and the grid

Rulers, guides, and the grid are drawing aids that help you to place and align objects. Guides are lines that you drag onto the document canvas from the rulers. You can use guides to mark important parts of your document, such as the margins and the document center point. The grid displays a system of horizontal and vertical lines on the canvas for precise placement. Guides and grids do not reside on a layer and are not exported with a document.

You can use the following Fireworks extensions to work easily with guides: Guides Panel extension When you install this extension, a Guides panel appears in your workspace, which allows you to manipulate the guides within the document or export and import guides from a previously saved set of guides. This extension is available at

http://www.adobe.com/go/learn_fw_usingguidespanel_en.

Copy-Paste Guides extension This extension allows you to copy guides from one page and past them to another within the same document. Use this extension if your Fireworks document has multiple pages that need similar guides across pages. This extension is available at

http://www.adobe.com/go/learn_fw_copypasteguides_en.

Inherit Guides extension This extension allows you to copy guides from the master page or the current page and apply to all pages in the document. This extension is available at http://www.adobe.com/go/learn_fw_inheritguides_en.

To change grid size or guide and grid color, see Guides and Grids preferences.

To the top

Show and hide rulers

Select View > Rulers.Vertical and horizontal rulers appear along the margins of the document window. Rulers measure in pixels.

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.

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.

Show or hide guides or the grid

Select View > Guides > Show Guides or View > Grid > Show Grid.

The selection is applied across all documents open in Fireworks.

Snap objects to guides or to the grid

Select View > Guides > Snap To Guides or View > Grid > Snap To Grid.

The selection is applied across all documents open in Fireworks.

Lock or unlock all guides

Select View > Guides > Lock Guides.

The selection is applied across all documents open in Fireworks.

Remove a guide

Drag the guide off the canvas.

Display distance between guides

Press Shift when the pointer is placed between the guides.

Press Shift while dragging guides into the canvas to display the distance between guides.

Smart Guides

Smart Guides are temporary snap-to guides that help you create, align, edit, and transform objects relative to other objects. To activate and snap to Smart Guides, choose View > Smart Guides, and then select Show Smart Guides and Snap To Smart Guides.

You can use Smart Guides in the following ways:

When you create an object, use Smart Guides to position it relative to existing objects. The line, rectangle, ellipse, polygon, and autoshape tools display Smart Guides, as do the rectangular and circular slice tools.

When you move an object, use Smart Guides to align it with other objects. When you transform an object, Smart Guides automatically appear to assist the transformation.

To change when and how Smart Guides appear, set Smart Guide preferences. (See Guides and Grids preferences.)

Legal Notices | Online Privacy Policy

To the top

Navigate, view, and preview documents

Use document tabs to select documents Zoom and pan in and out Use view modes to manage the workspace Display multiple views of a document View documents as they appear on different platforms Preview in browser

Use document tabs to select documents

When your document is maximized, use the document tabs that appear at the top of the document window to move among multiple open documents. The filename of each open document appears on a tab located above the view buttons. When you move the mouse over the tab, the location of the file is displayed as a tooltip.

Zoom and pan in and out

To the top

Zoom in, using preset increments

A. Hand tool B. Zoom tool C. Set magnification pop-up

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.

Zoom out, using preset increments

Do one of the following:

Select the Zoom tool and Alt-click (Windows) or Option -click (Mac OS) 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.

Zoom in on a specific area

1. 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 box.

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

Zoom out of a specific area

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

Return to 100% magnification

Double-click the Zoom tool in the Tools panel.

Pan around the document

1. 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.

Fit the document in the current view

Double-click the Hand tool in the Tools panel.

Use view modes to manage the workspace

In the Tools panel, select from one of three view modes to control the layout of your workspace.

Standard Screen mode The default document window view.

Full Screen with Menus mode A maximized document window view set against a gray background. Menus, toolbars, scroll bars, and panels

are visible.

Full Screen mode A maximized document window view set against a black background. No menus, toolbars, or title bars are visible.

For more information, see the article on the Fireworkszone website.

Display multiple views of a document

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.

1. Select Window > Duplicate Window.

2. Select a zoom setting for the new window.

To the top

View documents as they appear on different platforms

To the top

Windows and Mac OSX Snow Leopard version 10.6 use a display gamma of 2.2, by default, for their monitors. Macintosh (pre-Snow Leopard)

uses a gamma value of 1.8.

Do one of the following:

In Windows, select View > Gamma 1.8 to view the document as displayed on a Macintosh (pre-Snow Leopard). On the Macintosh®, select View > Gamma 1.8 to view the document as displayed in Mac (pre-Snow Leopard).

Preview in browser

Select File > Preview In Browser, and choose one of the options. Preview All Pages In <primary browser> Ctrl+F12/Cmd+Shift+F12 You can preview interaction among all pages if they are linked to each

other. Preview In <primary browser> F12 Previews the active Fireworks document in your primary browser. If you have only one browser installed on

your computer, Fireworks uses it as the primary browser. If you have more than one browser installed, you can select a primary browser for displaying Fireworks documents using File > Preview in Browser > Set Primary Browser.

Preview In Shift/Cmd+F12 Previews the active Fireworks document in your secondary browser. Before using this option, set your secondary browser using File > Preview In Browser > Set Secondary Browser. Navigate to and select the EXE/app file of your secondary browser.

Legal Notices | Online Privacy Policy

To the top

Undo and repeat multiple actions

Undo and redo actions Repeat actions Save actions for reuse Use the saved custom command Recovering unsaved files (Mac only)

The History panel lists the most recent actions you performed in Fireworks. You can specify the number of steps in the Undo Steps field in the Fireworks Preferences dialog box.

Undo and redo actions

1. Select Window > History to open the History panel.

2. Drag the Undo marker up or down.

Repeat actions

1. Perform the actions.

2. Do one of the following to highlight the actions you want to repeat in the History panel:

Click an action to highlight it. Control- click (Windows) or Command-click (Mac OS) 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.

Save actions for reuse

1. Highlight the actions you want to save in the History panel.

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

3. Enter a command name.

To the top

Use the saved custom command

Select the command name from the Commands menu.

Recovering unsaved files (Mac only)

Unsaved files are saved on the desktop when a Fireworks session terminates abnormally. When you relaunch Fireworks, a message appears informing you of the folder on the desktop containing the unsaved files. The files are saved by default at Desktop\Fireworks Recovered\<date-time stamp>.

Unsaved files that have not been named are saved using the naming convention untitled, untitled (1), untitled (2), and so on. The filenames correspond to the default names generated by Fireworks when creating the files. Unsaved files that have been named are saved with the same name.

Recovery files are not generated in the following cases:

The Save operation resulted in the crash. Insufficient memory to recover unsaved files. DisableSaveOnCrash in the Adobe Fireworks CS5 Preferences file is set to True. The open file was not edited when the crash occurred.

To the top

Disable recovery file generation

1. Open the file Fireworks CS5 Preferences.txt from \Users\<username>\Library\Preferences\Adobe Fireworks CS5\<locale>\.

2. Set DisableSaveOnCrash to True.

Change default location for recovered files

1. Open the file Fireworks CS5 Preferences.txt.The file can be located at \Users\<username>\Library\Preferences\Adobe

Fireworks CS5\<locale>\.

2. Set the location using SaveOnCrashRecoveredFolderPath. You can use absolute path or relative path to define the location.

Legal Notices | Online Privacy Policy

Workspace basics

The Fireworks workspace The Start page About Fireworks panels Workspace overview Manage windows and panels Working with ConnectNow Save and switch workspaces The Tools panel The Property inspector Display and move toolbars (Windows only) Lock editing during save operation

The Fireworks workspace

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

To the top

The Start page

When you start Fireworks without opening a document, the Fireworks Start page appears in the work environment. The Start page gives you quick access to Fireworks tutorials, recent files, and Fireworks Exchange, where you can add new capabilities to some Fireworks features. To disable the start page, click Don't Show Again when the Start page opens.

About Fireworks panels

Panels are floating controls that help you edit aspects of a selected object or elements of the document. Panels let you work on states, layers, symbols, color swatches, and more. Each panel is draggable, so you can group panels in custom arrangements.

Optimize panel Lets you manage the settings that control size and type of a file and work with the color palette of the file or slice. Layers panel Organizes the structure of a document and contains options for creating, deleting, and manipulating layers. Common Library panel Displays the contents of the Common Library folder, which contains symbols. You can easily drag instances of these

symbols from the Document Library panel to your document.

Pages panel Displays the pages in the current file and contains options for manipulating pages. States panel Displays the states in the current file and includes options for creating animations.

To the top

+ 265 hidden pages