Macromedia designed Fireworks to enable you to prepare graphics specifically
for use on the Web. With Fireworks, you don't have to use a second program
to convert all of your print graphics into Web formats. Your graphics can
is generated for you. Fireworks allows you to work with both
vector graphics and bitmap
images without having to switch tools. With a technique called "rasterizing",
Fireworks is able to convert vector graphics into bitmap images with a resolution
of 72 dots per inch so that they can be used on the Web. Fireworks is available
for both Macintosh and Windows operating systems.
Setting Up a Project
When you start a new project in Fireworks by clicking "File", then
"New", the "New Document Dialog Box" will appear. With
this dialog box you can set the size of your project in pixels, centimeters,
or inches. You can set the color of the "canvas" or background layer
to white, transparent, or you can choose a custom color. You are also able
to set the resolution for your project which would be 72 pixels per inch if
it is for the Web and higher resolutions for print publishing.
Other things you can do to set up the work area are to set rulers on the
top and left, position guides, and add a grid to the entire area. All of these
will make it easier to accurately position objects on your project. You can
also magnify the work area up to 6400% so that it is easier to work on specific
areas that may be difficult to work on at a normal viewing setting.
Fireworks utilizes layers to help organize your project. These layers can
be locked so that changes cannot happen by mistake and objects can be hidden
on the layers. It becomes even more important to use layers when you have
a project with many objects or you have a project in which some graphics and
information are shared with other projects. You may be working on a project
such as labels for several products. The labels may be similar except for
a few differences. It would be easier to have all of the like elements on
a separate layer so that they are consistently used.
The following color models are available in Fireworks:
- HSB - Hue, Saturation, and Brightness. This color model best describes
the human perception of color. Hue refers to the name of the color and is
expressed as a degree, 0° to 360°, which specifies its location
on the color wheel. Saturation is the strength of the color, or the amount
of gray that is present in relation to the color. Brightness is the lightness
or darkness of a color. Both saturation and brightness are expressed as
- RGB - Red, Green, and Blue, or additive
color, for use on the Web.
- Hexadecimal - Red, green, and blue are each expressed as a hexadecimal
value between 00 to FF.
- CMYK - Cyan, Magenta, Yellow, and Black. The CMY are the basis
of the subtractive color
process and the addition of Black (K) allows for accurate color reproduction
for printed media. You should use this color model if you plan to output
your project to a printing device and your project will not be used on the
- Grayscale - This represents shades of gray from white to black
and is expressed as a percentage.
In order to create and use color on your projects, you need to use the "Color
Mixer" and the "Swatches Panel". With the Color Mixer you can
choose a color in the following ways:
- Drag the slider button for each color component to select the color intensity
that you want. The sliders appear when you click the arrows on the right
side of each of the color components.
- Enter a value for each of the color components.
- Click onto a color from the color bar located at the bottom of the Color
Mixer to choose a color directly from the color blend.
Use the Swatches Panel to apply color to objects. When you click on a color
in the Swatch Panel, it will be applied to the object or objects that you
have selected. You can choose color for a brush, fill, or effect. The default
color palette on the Swatches Panel is the 216 safe
color palette, but you can choose other color palettes or choose a
color that you have created in the Color Mixer and stored in the Swatches
Another way to choose color is with the "Eyedropper" tool in the
toolbox. With the Eyedropper, you can take a sample of color from any part
of an object and apply that color to a brush or fill.
The Fireworks drawing tools allow you to form lines, curves, and shapes called
paths. Drawing paths is the basis for creating objects in Fireworks. The objects
created with paths are known as vector
graphics, which are graphics defined by mathematical formulas. This
differs from bitmap images
which are represented by colored pixels. Vector graphics are easier to work
with, but they still must be converted to bitmap images to work on the Web.
Closed Path - This is any path in which the beginning point and the
ending point are the same.
Open Path - This would be a path like a line that has beginning and
ending points and these points do not connect. The anchor point at
the beginning and the one at the end are called endpoints.
The different sections of a path are defined by "anchor points"
which can be selected and dragged in order to change the shape.
The illustration above shows anchor
points which define the points that make up the various path segments.
This illustration shows how an anchor
point has been selected and dragged to change the shape of the object.
Use the Subselection tool to select
a point and drag the point handle to change the shape.
There are several path tools included in Fireworks:
- Rectangle Tool - This tool allows you to create rectangles and squares
with either squared off or rounded corners.
- Ellipse Tool - You can create circles and ovals with this.
- Polygon Tool - This is for the creation of polygons, triangles, and stars.
- Pen Tool - This allows you to draw accurate lines and curves.
- Line Tool - This creates straight line segments.
- Brush Tool - This creates lines and curves as brush strokes.
- Pencil Tool - With this tool, you can give your lines and curves a freehand
look, without the use of anchor points.
After you have drawn paths and objects, you will want to edit and refine
them. You may want to reshape them or increase the size. You may also want
to add color, gradients, textures, and other effects. There are a number of
tools in Fireworks that allow you to edit objects. Listed below are some of
- Freeform Tool - This allows you to bend a path without modifying its points.
- Reshape Area Tool - Use this to distort paths.
- Knife Tool - You can use this tool to slice a path into two or more separate
- Redraw Path Tool - With this tool, you can redraw a path segment of an
object without affecting the fill or stroke properties of the object.
Use the Redraw Path tool to reshape
If you want to change the color of the outline of
an object, you would first select the stroke color well, then choose
a color from the Swatches Panel, then select the object that you want
to apply the color to. If you want to fill the object with a color,
you would follow the same procedure except that you would use the
fill color well. When you apply colors to a stroke and/or fill, they
are active for the next object you draw or select.
There are several other things you can do to strokes and fills other than
filling them with a solid color. You can change the look of a stroke by adding
a texture. You can add a texture to any stroke, but the textures look better
on strokes that are wider. You can also create your own custom strokes by
changing the stroke properties. If you would like to fill objects with something
other than a solid color, you can add different types of gradient fills, textures,
and patterns. Listed below are some additional ways to edit objects:
- Rotating - Rotate an object by pivoting it on its center point.
- Flipping - An object can be flipped across its vertical or horizontal
- Scaling - This reduces an object horizontally and/or vertically.
- Distorting - The side or corners are moved in the direction in which they
With Fireworks, you are able to add special Web effects to objects. Add bevels
to objects like Web buttons so that they have a raised appearance. If you
add an embossing effect to an object, it can look like it is raised up from
the background or inset into the background. You can add drop shadows and
glowing effects to objects such as beveled buttons, to give them an even more
To enter text using Fireworks, you need to use the Text tool from the toolbox.
Simply choose the Text tool and then click on your document in the place where
you want to insert the text. This will open the Text Editor box, where you
not only type your text, but choose the font style, the size of the type,
italics, spacing, and more. When you are finished typing and applying properties,
click the Apply button, then click OK. The text you have typed plus the characteristics
you have applied to it will be displayed in a text block on your active project.
Other things you can do with text are listed below:
- Fireworks allows you to set the text direction from left to right and
right to left.
- Text orientation can be set horizontally or vertically.
- Text can be aligned left or right or it can be centered. You can also
stretch text to fit the width of a text block.
- You can apply colored strokes and fills to text as well as other effects,
the same as you would for any object.
- Draw a path and attach text to it a shown below.
- Transform text by scaling, flipping, skewing, or rotating.
- Import text from other files by the drag and drop method or copy and paste.
You can import an entire text file if it is in Rich Text Format (RTF) or
Plain Text (ASCII).
Pixel Based Images
In order to work with pixel based (bitmap) images
in Fireworks, you need to switch from the object mode (vector graphics)
to the image editing mode (bitmap graphics). In order to switch to
the image editing mode, use the Pointer tool to double click on the
image. Another way to switch modes is to select the image and then
choose modify on the menu bar and then Image Object from the drop
down menu. You can also click on the image with the Marquee, Ellipse
Marquee, Lasso, Polygon Lasso, Rubber Stamp, Eraser, or Magic Wand
tools. A striped border will appear around the image to indicate you
are in the image editing mode.
The striped border around the image
indicates that it is in the image editing mode.
In order to edit pixels on an image, the area of the image that you want
to edit must be selected. You can do this with the following tools:
- Marquee Tool - This allows you to select a rectangular area of pixels
on an image.
- Ellipse Marquee Tool - This is the same as the Marquee tool except that
it selects an elliptical area of pixels.
- Lasso Tool - This allows you to drag the pointer around any pixels in
a freeform shape to select an area.
- Polygon Lasso Tool - This is the same as the Lasso Tool except that the
pixels are selected in a polygonal shape.
- Magic Wand Tool - With this tool you can select pixels that are of similar
Once you have selected an area of pixels, you are able to edit them using
the following tools:
- Pencil Tool or Brush Tool - With either of these tools you are able to
edit one or more pixels at once.
- Paint Bucket Tool - Change the color of the pixels you have selected with
the Paint Bucket.
- Rubber Stamp Tool - This allows you to clone or copy areas of a bitmap
image to duplicate elsewhere on the bitmap. For example, there may be imperfections
in an area of an image that you can cover over with similar colors from
a different area.
- Eraser Tool - This removes pixels from an area or you can color over them.
- Crop Tool - Use this tool to select an area of an image that you want
to use and eliminate the rest of the image surrounding the selected area.
Fireworks utilizes an "Xtras" menu found
on the top menu bar to provide additional options for editing bitmap
images. Some of the things you can do with the Xtras filters are:
adjust the color and saturation of an image; change the brightness
and contrast; apply different degrees of blurring and sharpening;
shadows, midtones, and highlights can be edited; change an image into
its inverse or negative colors; or convert the color transitions of
a bitmap image into lines.
Change the brightness and contrast
of an image.
Use the Blur filter to apply varying
of blur to a bitmap image.
The transitions of color on a bitmap
can be converted into lines.
are graphics that change their appearance when you pass the mouse over them
or click on them while in a Web browser. An example of this would be a button
used to go from one page to another on a Web site. You may want to create
a button that glows when the mouse pointer passes over it, or you could create
one that looks like it is being depressed when it is clicked. Listed below
are the rollover states and their definitions:
- Up State - This is the name of the state the button is in when the mouse
pointer has not passed over it. This is the default or rest state.
- Over State - This is how the button looks when the mouse pointer passed
over it, such as glowing or changing color.
- Down State - This is how the button looks after it has been clicked. This
state is seen on the page the button links to.
- Over While Down State - This is how the button looks when the mouse pointer
is moved over it after the button has been put into the down state.
The illustration on the left shows
how a button may look in the "Up" state and the illustration
on the right shows how it may look in the "Over" state.
Fireworks makes it possible to incorporate animation into a Web design. Using
the "Frames Panel", you can create separate still images that are
then shown in quick succession to create the illusion of motion. One of the
things you can do with animation is to apply a text block on all of the still
images so that it will remain visible throughout the animation. Fireworks
lets you change the properties of one frame and then apply those properties
to all of the other frames. This saves time having to edit each frame separately.
There are controls for the timing of each frame of the animation. You can
determine how each frame blends between the other frames and the background.
You can set the number of times that the animation plays. The player controls
allow you to view the animation within Fireworks to check its correctness
before you export it.
Fireworks allows you to create image maps, which are graphics that are divided
into sections. When you pass over the area with your mouse the pointer turns
into a hand. Click on this area and you go to another page or another Web
site. The area of the graphic in which the hand appears is known as the hotspot.
URLs (Uniform Resource Locator) can be assigned to the hotspots in order to
link to other pages.
With Fireworks, you can split up a multiple layered Web page into sections
and then use the file formats and compression that are best suited for each
section. This is known as image slicing and can make the file size smaller.
As a result, the page will load faster when viewed on the Web.
Mac OS 8.1 or later
64 MB of application RAM.
60 MB of available hard disk space.
100 MB disk space.
Color monitor with 256 colors.
24-bit color recommended.
Adobe Type Manager 4 or later for using Type 1 fonts.
Intel Pentium 120 processor or faster.
Pentium III processor recommended.
Windows 95, Windows 98, Windows NT 4.0 with Service
pack 3, or later.
64 MB of RAM installed.
60 MB of available hard disk space.
100 MB hard disk space.
Monitor with 256 colors.
24-bit color recommended.
Back to Top