Fireworks is a software program that allows users to create, edit, animate, and optimize images

in a professional environment. Fireworks integrates very easily with Dreamweaver MX allowing

web designers to increase their efficiency when creating web pages.

This section covers:

• Launching Fireworks MX
• Fireworks MX Environment
• Fireworks Tools
• Optimizing Graphics for the Web

*Prerequisite: Fireworks MX should already be installed onto your PC or Mac computer.

*Note: Most functions in Fireworks MX for both PC and Mac computers are very similar.
When there is a “right click” function on the PC, it means “control + click” on the Mac.

Launching Fireworks MX

1. Launch Fireworks MX:

PC: Start  All Programs  Macromedia  Dreamweaver Macromedia MX

(Shortcut: Double click icon on desktop if you already created a desktop shortcut)

Mac: Hard Drive  Applications  Macromedia Dreamweaver MX  Dreamweaver MX

(Shortcut: Click icon on desktop toolbar if you already created a desktop shortcut)

Launching Fireworks is one function

that is different in a PC and Macintosh
environment. I would recommend creating
a shortcut to the desktop if you have not
already done so.

Fireworks MX for both PC & Macintosh Computers 1

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
Fireworks Environment

Tools Panel Menu Bar Panel Groups

Properties Box

 Menu Bar – most Fireworks commands are available from the menu bar pull down
menus.

 Document Toolbar – contains a selection of different views (design view, HTML view,
and preview in Web browser).

 Panel Groups – set of related panels docked together under one heading. You can
expand and collapse these panels very easily. Most advanced features are available
within these panels.

 Properties Box – provides you with a tool to format font, text size, text alignment, links,
and much more. *Note: If the properties box is not showing, select Window 
Properties.

Options in the properties box will change as you select different tools within the
Tools Panel. It provides you with the most common properties for the selected tool.
For example, when you click on the paint bucket tool, the properties box will change to
fit your needs by giving you the option of changing the color, texture, opacity, etc.

Fireworks MX for both PC & Macintosh Computers 2

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
Fireworks Tools

Pointer Tool
Scale Tool Crop Tool

Marquee Tool Lasso Tool

Magic Wand Tool Brush Tool
Pencil Tool Eraser Tool

Eye Dropper Tool Paint Bucket Tool

Line
Toolucketnit
Rectangle Tool Text Tool
y, etc. the
properties
box will
change to fit
your needs
by giving
you the
option of
changing the Stroke Color
color, er. d
w Fill Color

Hand Tool Zoom Tool

The (small down arrow on the bottom right corner of

some tools) means there are other related tools available. Click
on the arrow and hold down for 2 seconds. You will see an
additional menu appear.

Fireworks MX for both PC & Macintosh Computers 3

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Object Selection Tools

Pointer Tool
Scale Tool Crop Tool

Pointer Tool – selects an entire object by clicking once on the object. To include
more than one object, click and drag mouse around objects to be included.

Notice that a light blue

line appears around the
selected object.

In the properties box, you can By clicking on the “+,” you

change the width and height can add effects of your choice
of your selected object. to the selected object.

Scale Tool – allows you to transform objects by scaling, stretching horizontally,

stretching vertically, or rotating at an angle.

Resizing an Image:

• Select your object and click on the Scale Tool . You should notice the
lines around your object changes from blue to black.
• Move your mouse over any corner of the selected object until you see a
double-sided arrow.
• Click and drag to resize your object.
Fireworks MX for both PC & Macintosh Computers 4
 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
Rotating an Image:

• Select your object and click on the Scale Tool . You should notice the
lines around your object changes from blue to black.
• Move your mouse over any corner of the selected object until you see a
curved arrow.
• Click and drag your mouse to rotate the object.

Crop Tool – selects an area of the image you wish to keep and trims anything outside
the selection.

• Click once on the Crop Tool . Your cursor should change to a crop tool
shape.
• Click and drag your mouse to select the area you would like to keep.
• Click Enter/Return on your keyboard to crop the image.

Once the area has been selected, you can adjust your
selection by clicking and dragging on the black square boxes.

Fireworks MX for both PC & Macintosh Computers 5

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Bitmap Object Creation Tools

Marquee Tool Lasso Tool

Magic Wand Tool Brush Tool
Pencil Tool Eraser Tool

Eye Dropper Tool Paint Bucket Tool

Marquee Tool – selects a rectangular area of an image you would like to edit.
Anything outside of the dashed area is not editable.

The Oval Marquee Tool

will select an oval area.

Lasso Tool – selects a freehand-sketched area of an

image you would like to edit. Anything outside the
dashed area is not editable.

Magic Wand Tool – selects areas of an image that has similar adjacent colors. This
tool is very useful if you are interested in deleting or changing solid color
backgrounds.

• Click once on the Magic Wand Tool .

• Click on an area with a solid color.
• Press Delete on your keyboard.
• You now have a transparent background.

To select more than one area, hold down the

Shift key while clicking additional areas.

Fireworks MX for both PC & Macintosh Computers 6

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Brush Tool – functions like a brush and allows you to draw using the basic brush,
crayon, calligraphy, felt tip, oil, water color, and much more.

• Click once on the Brush Tool .

• Select your settings in the properties box.
• Click and drag your mouse to draw.

Color Brush Size Brush Style

Pencil Tool – functions like a pencil and allows you to write freehand.

• Click once on the Pencil Tool .

• Select your settings in the properties box.
• Click and drag your mouse to draw.

Eraser Tool – functions like an eraser and allows you to erase anything on your
image.

• Click once on the Eraser Tool .

• Select your settings in the properties box.
• Click and drag your mouse to erase.

Brush Size Brush Shape

Fireworks MX for both PC & Macintosh Computers 7

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Eyedropper Tool – picks up a specific color from anywhere on the image. This tool
comes in handy when you would like to change your fill color to match a color from
the image.

• Click once on the Eyedropper Tool .

• Your cursor will change to an eyedropper
shape.
• Click on the color you would like to
replace your fill color with.

Fill color should match

the color you have
selected on your image.

Paint Bucket Tool – allows you to fill objects with the color selected in the Fill
Color area.

• Select area with appropriate tools (e.g. magic

wand tool, lasso tool, marquee tool)
• Click once on the Paint Bucket Tool .
• Your cursor will change to a paint bucket
shape.
• Select Fill Color (refer to fill color tool).
• Click on selected area to change the color.

The Gradient Tool operates similarly to the paint bucket tool. The only
difference is the filling of an object with a gradient color instead of a solid
color.

Refer to the directions

above. There are also
many other settings
available in the
properties box.

Fireworks MX for both PC & Macintosh Computers 8

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Vector Object Creation Tools

Line Text Tool

Toolucketnit
Rectangle Tool
y, etc. the
properties
box will
Line Tool – creates straight
change to fitlines at any degree angle.
your needs
by giving
you the
option of • Click once on the Line Tool .
changing•the Your cursor will change to a “+” shape.
color, er. •d Select your settings in the properties box.
w • Click and drag to create straight lines.

Stroke Color Tip Size Stroke Style

Rectangle Tool – creates a variety of shapes: rectangles, circles, polygons, etc.

• Click once on the Rectangle Tool .

• Your cursor will change to a “+” shape.
• Select your settings in the properties box.
• Click and drag to create shapes.

Fill Color Stroke Color Tip Size Stroke Style

The Rounded Rectangle Tool,

Ellipse Tool, and Polygon Tool
operate similarly to the rectangle
tool. The only difference is the shape.

Fireworks MX for both PC & Macintosh Computers 9

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Text Tool – creates text. The properties box will allow you to change font color,
type, style, and much more.

• Click once on the Text Tool .

• Your cursor will change to an “I” shape.
• Select your settings in the properties box.
• Click once on the document and begin typing.

Font Type Font Size Color Font Style

In order to edit text, you need to make sure you highlight the text first
(by clicking and dragging your mouse over the text).

Optional: Adding Effect to Text

• After you have typed in your text, click once

outside the text box.
• You should see an additional setting appear in
the properties box.
• Click on “+” to add an effect.
• Customize your effect settings.

Fireworks MX for both PC & Macintosh Computers 10

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Object Color Tools

Stroke Color
Fill Color

Fill Color Stroke Color

Selecting Stroke Color – To choose a stroke color, click and hold in place until
you see a color palette appear. Use the eyedropper to select a color from the
color palette or from the image.

Eyedropper

Selecting Fill Color – To choose a fill color, click and hold in place until you see
a color palette appear. Use the eyedropper to select a color from the color palette
or from the image.

Fireworks MX for both PC & Macintosh Computers 11

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
 Object View Tools

Hand Tool Zoom Tool

Hand Tool – enables you to move around the document window without having to
use scroll bars. Click and drag when using the hand tool.

Zoom Tool – zooms in to focus on an area. To zoom in, click anywhere on the
image. To zoom out, right click (PC) or control+click (Mac) and select Zoom Out
from the popup menu.

Optimizing Graphics for the Web

When we upload graphics on the Web, we need to realize that there are users on the viewing
end with different Internet speed connections. By optimizing (reducing) the file size of the
graphic with little or no loss of quality to the image, we ensure an enjoyable Web browsing
experience for everyone.

1. To optimize graphics for the Web:

a. Open image in Fireworks (File  Open).

b. Select File from the menu bar and click on Export Wizard.
c. Select JPEG – Better Quality from the pull down menu.
*Note: Use “jpeg” for photos and “gif” for clipart graphics.

c
b

Fireworks MX for both PC & Macintosh Computers 12

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department
d. Check to make sure the settings are appropriate for uploading to the Web. Click
Export when you are ready to optimize your image.

File Size

This is the
amount of time it
will take for a
user on 56k dial Preview windows
up modem to may show 1,
view the image. 2, or 4 different
optimization views.
d

e. Type in a file name and click on Save to save your optimized image. Now you are
ready to include the image in your web page.

Fireworks MX for both PC & Macintosh Computers 13

 2004, By Dorothy So for Kamehameha Schools Distance Learning Department