How Fireworks Works
Importing, Selecting, and Moving
Bitmap Editing and Basic drawing
Optimizing and Exporting



Bitmap Editing and Basic Drawing


Fireworks can be used as a Bitmap editor, much like PhotoShop. Youll notice that Fireworks makes use of many of the same tools that PhotoShop does, too. Because most of the bitmap editing tools work exactly the same way as they do in PhotoShop, were not going to spend too much time on them here, but there are a few things you have to know.

Were also going to work with Fireworks wonderful drawing tools. Youll be able to create great banners, buttons and backgrounds. Were going to learn some very basic Fireworks drawing techniques, now. Later in our web design course, after we learn about optimizing images, well come back to Fireworks drawing tools with a vengeance.


Bitmap Editing Mode

Bitmap image programs and vector image programs work in totally different ways. Their tools are not interchangeable. For example, if you tried to select the vector based square below with a pixel based tool like the lasso, it wouldnt work. Remember that a bitmap selection tool like to lasso or magic wand selects pixel by pixel. This is great if youre trying to select a tiny part of a photograph to change, but not so good if youre trying to select a vector based image, because vectors arent made of pixels!

Fireworks allows you to work with both bitmap and vector based images, though. To manage this incredible feat of computer genius, the software engineers at Macromedia set up Fireworks to function in two separate modes, one for editing bitmaps, one of editing vectors. This is all fine and good as long as you know what mode youre in and how to get out of it if you wish. Beginners often get trapped in the wrong mode. They try to resize vector images, but they cant, because theyre in bitmap mode!


Getting Into Bitmap Mode

Double clicking any bitmap based object with the will get you into bitmap mode. Youll be able to use all the bitmap tools like the lasso, the paintbrush, and the magic wand.


How to Know Youre in Bitmap Mode

There are some very visual signs that Fireworks shows you whenever youre in bitmap editing mode. Its important to recognize them, because if youre not in bitmap mode, you wont be able to edit with any of the bitmap tools. Conversely, while in bitmap mode, you wont be able to perform any vector-based tasks, like filling an object with a gradient, and you

You know you are in Bitmap Mode when:

�.       The image is surrounded by a blue and black "barber shop" type bar.

Bitmap Editing Mode


�.       In the lower left corner of the Fireworks window, there is a "stop sign"


Getting Out of Bitmap Mode

Clicking the Stop Sign takes you directly out of Bitmap Mode.

Clicking a vector shape with the black pointer will also take you out of Bitmap Editing Mode.


Using the Bitmap Editing Tools

The bitmap tools are pretty much the same as they are in PhotoShop. Youve got all of the selection tools, the Paintbrush, the Pencil, and other drawing tools. You should still use PhotoShop for any major bitmap editing. Fireworks does not allow for semi-opaque (transparent) painting, and doesnt have many of PhotoShops advanced color techniques. Fireworks does an okay job of copying and pasting, although you can only specify a feather before you make a selection.

Finding the Bitmap Editing Tools

�.       Fireworks uses the same bitmap editing tools as PhotoShop. You can use the Rectangular Marquee, Circular Marquee, Lasso, Polygon Lasso, Magic Wand, and the Crop Tool.

�.       The Pencil and the Paintbrush tool are right next to each other on the toolbox.


Tool Options

Each tool has options, just like in PhotoShop. The Options Palette can be brought up by double clicking the tool on the tool box, or by clicking:



The options are mostly the same as in PhotoShop. For example, for the selection tools you can set the feather or edge hardness:


Paintbrush Options

Instead of having a Brushes Palette, like PhotoShop, Fireworks allows you to change brush settings on the Stroke Palette. The term "stroke" comes from when people used to write with quill pens (and other primitive, non-digital tools). The harder you pushed, or stroked, the paper, the wider your line would be. Stroke is a line.

To Open the Stroke Palette:



You can set the paintbrush mode to act like any number of painting devices. Some of the brush tool modes are really neat. Play with them some.


The Stroke Palette:

The following stroke options are standard for most brush tool modes.


Basic Drawing Tools

The drawing tools in Fireworks allow you to draw shapes, and fill them in with colors, textures, gradients, and patterns. Were going to learn the basic drawing tools. Later, we will come back and explore the advanced options.

Lets get this one out of the way, right away Some beginners make the mistake of trying to draw with the selection tools. Below, the rectangular drawing tool is circled. Notice that its not the same as the rectangular selection tool

Each tool has options.


The Rectangle Tool

The Rectangle Tool draws Rectangles. To use the tool, select it from the tool bar, Then click and drag diagonally in your image. Hold SHIFT to draw a perfect square.


The Rounded Rectangle Tool

You can use the Rounded Rectangle Tool to draw rectangles with rounded edges. Rounded edges often provide a pleasing visual look.

After you draw it, you can adjust the rectangles corners on the OBJECT PALETTE (WINDOW-> OBJECT)


The Ellipse Tool

Draws circles. Hold SHIFT to draw a perfect circle.

The Ellipse tool is underneath the Rectangle tool.


The Polygon Tool

Depending what options you have set, the Polygon tool can draw multi-sided shapes, or stars!


Coloring Shapes

Of course youll have to color these shapes youre drawing. Luckily, coloring them is easy.

At the bottom of the tool Palette, youll see the coloring options.



You can choose between any of the 216 web-safe colors.

If you change color while an object is selected, that object will change. If you change colors when nothing is selected, the next object you draw will be in the selected color.


Continue to Optimizing and Exporting | Back to Courseware