Introduction to Macromedia Fireworks / pp.1/12

Introduction to Macromedia FireworksFireworks is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both

bitmap and vector images, design web effects such as rollovers and pop-up menus, crop and optimize graphics to

reduce their file size, and save time by automating repetitive tasks. When a document is complete, you can export

or save it as a JPEG file, GIF file, or file of another format--along with HTML files containing HTML tables and

JavaScript code--for use on the web. You also can export or save a type of file specific to another program, such as

Adobe Photoshop or Adobe Flash, if you want to continue working in the other program.

Vector and bitmap objectsIn the Fireworks Tools panel, you will find distinct sections containing tools for drawing and editing vectors and

bitmaps. For more information on these two basic formats, see About vector and bitmap graphics

In Fireworks, the tool you select determines whether the object you create is a vector or a bitmap. For example,

select the Pen tool from the Vector section of the Tools panel, and you can begin drawing vector paths by plotting

points. Select the Brush tool, and you can drag to paint a bitmap object. Select the Text tool, and you can begin

typing.

After drawing vector objects, bitmap objects, or text, you can use a wide array of tools, effects, commands, and

techniques to enhance and complete your graphics. You can use the Fireworks tools in the Button Editor to create

interactive navigation buttons.

You can also use the Fireworks tools to edit imported graphics. You can import and edit files in JPEG, GIF, PNG, PSD,

and many other file formats. After you import a graphic image, you can adjust its color and tone, as well as crop,

retouch, and mask it.

About optimizing and exporting graphics Fireworks has powerful optimization features to help you find the balance between file size and acceptable visual

quality as you prepare to export graphics. You can optimize web graphics in Fireworks to minimize their file size so

that they load quickly into websites, while comparing the quality of the graphics in the Preview, 2-Up, or 4-Up views

in the workspace.

You can slice an image into smaller parts and then optimize each part in the format that best suits the content. For

added optimization flexibility, you can use selective JPEG compression to focus the most important part of a JPEG

while reducing the quality of the background.

Introduction to Macromedia Fireworks / pp.2/12

After you optimize your graphics, the next step is to export them for use on the web. From your Fireworks source

PNG document, you can export files of a number of types, including JPEG, GIF, animated GIF, and HTML tables

containing sliced images in multiple file types. For more information, see Optimizing and Exporting.

About vector graphics Vector graphics render images using lines and curves, called vectors, that include color and position information. For

example, the image of a leaf may be defined by a series of points that describe the outline of the leaf. The color of

the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the

fill)

When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. Vector

graphics are resolution-independent, which means you can move, resize, reshape, or change the color of a vector

graphic, as well as display it on output devices of varying resolutions, without changing the quality of its appearance.

About bitmap graphics Bitmap graphics are composed of dots, called pixels, arranged in a grid. Your computer screen is a large grid of

pixels. In a bitmap version of the leaf, the image is determined by the location and color value of each pixel in the

grid. Each pixel is assigned a color. When viewed at the correct resolution, the dots fit together like tiles in a mosaic

to form the image.

Introduction to Macromedia Fireworks / pp.3/12

When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are

resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size.

Enlarging a bitmap graphic redistributes the pixels in the grid, often making the edges of the image appear ragged.

Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the

image's quality.

Using Fireworks®

Creating a new document

When you select File > New to create a new document in Fireworks, you create a Portable Network Graphic, or PNG

document. PNG is the native file format for Fireworks. After you create graphics in Fireworks, you can export or save

them in other familiar web graphic formats, such as JPEG, GIF, and animated GIF. You can also export or save

graphics in many of the popular formats used off the web, such as TIFF, PSD, and BMP. Whatever optimization and

export settings you choose, the original Fireworks PNG file is preserved to allow easy editing later.

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

the setup options later in the Property inspector.

To create a new document:

1. Select File > New.

The New Document dialog box opens.

Introduction to Macromedia Fireworks / pp.4/12

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

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

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

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

5. Click OK to create the new document.

To create a new document the same size as an object on the Clipboard:

1. Copy an object to the Clipboard from any of the following:

• Another Fireworks document

• A web browser

• Any of the applications listed in Pasting into Fireworks

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.

Saving Fireworks PNG files

Introduction to Macromedia Fireworks / pp.5/12

When you create a new document or open an existing Fireworks PNG file, the document's filename has the extension

.png. The file displayed in the Fireworks document window is your source file, or working file.

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

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

for use on the web.

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

formats and various optimization settings.

To save a new Fireworks document:

1. Select File > Save As.

The Save As dialog box opens.

2. Browse to the desired location and type the filename.

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

3. Click Save.

To save an existing document:

• Select File > Save.

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

1. Select File > Export.

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

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

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

saved in the default file format. This file format can be set using the Optimize panel. For more information see

Optimizing and Exporting.

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

The Fireworks work environment

Introduction to Macromedia Fireworks / pp.6/12

When you open a document in Fireworks for the first time, Fireworks activates the work environment, including the

Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled

categories, including bitmap, vector, and web tool groups. The Property inspector appears along the bottom of the

document by default and initially displays document properties. It then changes to display properties for a newly

selected tool or currently selected object as you work in the document. The panels are initially docked in groups

along the right side of the screen. The document window appears in the center of the program.

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

Introduction to Macromedia Fireworks / pp.7/12

Using Fireworks®

Fireworks Basics / The Fireworks work environment / Using the Tools panel

Changing tool options When you select a tool, the Property inspector displays tool options. Some tool options remain displayed as you work

with the tool. For other tools, such as the basic shape, Pen, and Line tools, the Property inspector displays the

properties of selected objects. For more information about the Property inspector, see Using the Property inspector.

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

• Choose Select > Deselect to deselect all objects.

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

Fireworks or Fireworks Help.

Introduction to Macromedia Fireworks / pp.8/12

Using Fireworks®

Fireworks Basics / The Fireworks work environment

Using the Property inspector The Property inspector is a context-sensitive panel that displays current selection properties, current tool options, or

document properties. By default, the Property inspector is docked at the bottom of the workspace.

The Property inspector can be open at half height, displaying two rows of properties, or at full height, displaying four

rows. You can also fully collapse the Property inspector while leaving it in the workspace.

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

To undock the Property inspector:

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

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

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

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

following:

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

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

Options menu.

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

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

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

Introduction to Macromedia Fireworks / pp.9/12

• Select Half Height from the Property inspector Options menu.

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

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

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

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

For more information about specific Property inspector options, see the appropriate sections throughout Using

Fireworks or Fireworks Help.

Selecting objects Before you can do anything with any object on the canvas, you must select it. This applies to a vector object, path,

or points; a text block, word, or letter; a slice or hotspot; an instance; or a bitmap object.

You can use any of the following to select objects:

The Layers panel

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

expanded. For more information, see Pages, Layers, Masking, and Blending.

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

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

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

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

Selecting pixels

Introduction to Macromedia Fireworks / pp.10/12

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

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

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

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

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

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

The pixel selection tools draw selection marquees that define the area of selected pixels. After you draw the

selection marquee, you can manipulate it by moving it, adding to it, or basing another selection on it. You can edit

the pixels inside the selection, apply filters to the pixels, or erase pixels without affecting the pixels beyond the

selection. You can also create a floating selection of pixels that you can edit, move, cut, or copy.

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.

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

Introduction to Macromedia Fireworks / pp.11/12

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 and Working with pages.

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.

Opacity and blend mode controls are at the top of the Layers panel. For more information, see Adjusting opacity and

applying blends.

A. Expand/Collapse Layer B. Lock/Unlock Layer C. Show/Hide Layer D. Active Layer E. Delete Layer F.

New/Duplicate Layer G. New Sub Layer H. Add Mask I. New Bitmap Image

Using styles You can save and reapply a set of predefined fill, stroke, filter, and text attributes by creating a style. When you

apply a style to an object, that object takes on the style's characteristics.

Fireworks has many predefined styles. You can add, change, and remove styles. The Fireworks DVD and the Adobe

website have many more predefined styles that you can import into Fireworks. You can also export styles and share

them with other Fireworks users or import styles from other Fireworks documents.

Note: You cannot apply styles to bitmap objects.

Introduction to Macromedia Fireworks / pp.12/12

Applying a style You can use the Styles panel to create, store, and apply styles to objects or text.

Styles panel

When you apply a style to an object, you can later update the style without affecting the original object. Fireworks

does not keep track of which style you applied to an object. If you delete a custom style, you cannot recover it;

however, any object currently using the style retains its attributes. If you delete a style supplied in Fireworks, you

can recover it and all other deleted styles using the Reset Styles command in the Styles panel Options menu.

However, resetting styles also deletes your custom styles.

To apply a style to a selected object or text block:

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

2. Click a style in the Styles panel.