Introduction to Fireworks MX 2004

This tutorial was written for a two hour workshop that I will be conducting at the British Columbia Business Educators Conference in Vancouver Canada. The tutorial is brief and designed to give the participants an overview of Fireworks MX 2004.

Fireworks MX 2004 is a powerful and easy to use image editing program by Macromedia. Fireworks is designed to edit and create graphics for the web. Its tight integration with Dreamweaver makes it an ideal choice for people who use Dreamweaver to create their web pages and they want to create graphics for their sites.

Before you begin this tutorial, you should be working with a screen resolution of at least 1024 x 768. If you are working at a lower resolution some of the Fireworks tools will not be visible. Right click the Desktop and select Properties. Click the Settings tab and drag the slider to the right to at least 1024x768 and click OK.

Starting Fireworks

Click Start > All Programs > Macromedia > Macromedia Fireworks MX 2004.

When you initially open Fireworks you will see the Fireworks welcome screen which is used to open existing documents or create new documents. Notice there are panels around the outside edges of the Fireworks window that are currently grayed or unavailable. Once a document is opened these panels will be available for use.

Creating a New Fireworks Document

Click File > New

At the New Document dialog box you can set the dimensions of your document. On the web we typically work in pixels instead of inches. Macintosh machines display at 72 dots/pixels per inch and PCs display at 96 dpi. For this exercise we will begin with a 300 x 300 pixel image; this equates to roughly a 4 x 4 inch document.

In addition to setting the dimensions of the image, you can also set the background color of the image in the new document dialog box. If you are unsure of the background color (or pattern) of your web page it's a good idea to use a transparent background. Transparent backgrounds allow the color of the web page background to display as the image background color. After setting your dimensions and canvas color click OK.

The Fireworks Screen

A new blank document will appear. The document canvas looks like a checkerboard; the checkerboard indicates transparency and this is the area that you will draw on. Areas outside of the checkerboard canvas will not appear in your final image.

There are rulers at the top and left sides of a new document. These help with positioning and sizing of elements on the canvas. You can turn the rulers on and off by clicking View > Rulers. I would recommend that you leave them turned on.

Tools Panel

On the left-hand side of the Fireworks screen you should see a toolbar called the Tools panel. For this tutorial I have split the screen capture of the toolbar into two images. If the toolbar is not visible, click Window > Tools.

This Tools panel contains all of the frequently used Fireworks tools. The tools are broken into categories: Selection, bitmap editing, vector drawing, web, colors, and view options.

If you hold your mouse button over each tool for a couple of seconds, a bubble help will appear telling you the function of the tool and the shortcut key used to access the tool. Notice that some of the tools have small, upside down triangles in the lower, right-hand corner of the tool. If you hold down your left mouse button on the triangle a fly out menu will appear and you can choose additional, related tools.

It would be impossible to cover all of the tools available in Fireworks. Take some time to explore the different tools and Fireworks Help System and tutorials located in the Help menu.

 

Each of tools has its own settings or Properties that can be adjusted depending on the artist's needs. At the bottom of the Fireworks screen the Properties panel should be visible, if not click Window > Properties. As I'm sure you are starting to see, all of the toolbars and panels can be turned on and off via the Window menu.

Properties Panel

The Properties panel will change depending on the tool you have selected in the Tools panel. The Properties panel will also change depending on the object you have selected on the canvas. The screen below shows the "default" Properties panel.

Here you can make adjustments to the document. These are essentially the same settings that you established when you created a new document. Notice on the upper left-hand corner of the Properties panel there is a small, upside down triangle , this triangle is used to minimize Fireworks panels so you have more room to draw. You will see this triangle on the corner of each Fireworks panel with the exception of the Tools panel. You may also notice just to the left of the triangle a series of dots ; hold down your left mouse button on the dots and drag the panel to the desired location.

On the right-hand side of the screen you will see additional panels including the Layers panel. Each object you draw in Fireworks will be on it's own layer (see image to the right). This makes selecting and editing objects in Fireworks very easy. You will find that you learn to rely on your Layers panel quite a bit when working with Fireworks or any other image editing program. In addition to the Tools, Properties, and Layers panels there are several other panels that we will explore later in this exercise. Again, all panels can be turned on and off from the Window menu.

You may find that the Layers and other panels to the right take up too much space as you are drawing. On the left-hand side of the panels, around the middle, you should see an arrow pointing to the right that can be used to collapse the panels and give more drawing space.

 

Basic Drawing - The Brush Tool

Click the Brush Tool in the Tools panel. The Brush properties will appear in the Properties panel at the bottom of the Fireworks screen. When you draw with the brush tool, you are drawing what is called a Stroke. In the brush properties you can change the stroke color, the width of the stroke, stroke category (type of stroke), the texture of the stroke, and the softness of the edge of the stroke.

To really learn each of these tools you should just "play" with the different settings and draw on the canvas. Change the color, width, and stroke type; move your brush over the canvas, hold down your left mouse button and draw! To the left you can see the results of my "playing". Ok, so I'm no artist.

Basic Shapes

Create a new document, 300 x 300, with a transparent background.

In addition to drawing freeform lines with the brush tool, you can also draw shapes. Click the Shape tool fly out arrow

There are many useful shapes to choose from. This tool makes creating, buttons, bullets, and logos very easy.

When you select a shape from the Shape tool the Properties panel will change.

The Shape properties will have even more options than the Brush. Shapes work differently than the brush, shapes contain both a fill and a stroke . The fill controls the interior color of the shape and the stroke controls the outline color and width of the shape.

Select the star shape . Leave the default options in the Properties panel. In the upper, left-hand corner of the canvas hold down your left mouse button and drag down and to the right. Hold down the Shift key on your keyboard as you drag to get a perfect star (the shift key works with any shape). When you are satisfied with your star, release your mouse button.

Notice the blue squares around the star; these are used to resize the shape. If you don't see the blue resize handles, click the Pointer Tool and click once on the star on the canvas. The Pointer tool allows you to select and move objects; try resizing and moving your star on the canvas now.

The Properties panel can be used to adjust existing objects on your canvas. Click once on the star to be sure that it is selected. Click the color swatch and change the star's color. Click the Fill Category arrow and select Gradient and try out each of the gradient options. Once you are done trying out the different gradients, click Patterns from the Fill Category and try out each of the available patterns. You will see that there are many different patterns to choose from.

You can also add texture to your shape. To the right I added a Hatch texture at 50% opacity to my shape. Hummm, that's kind of interesting.

Notice the two black lines with squares at each end. These are used to adjust the rotation and density of the pattern (they can be used with gradients also). Try dragging them around.

Again, the best way to learn the different options is to draw some shapes and play!

Adding Text

Text is added to an image with the Text tool . Once you select the Text tool you can change the various properties to suit your needs. The text properties are pretty straightforward; move your mouse over each item in the Text properties panel to see its function. You can either set the properties before you type the text or the properties can be changed on an existing text block.

After selecting the text tool, click once on the canvas where you want your text to begin and type your text. The text box will grow to accommodate the text that you type. If you want your text to be constrained to a certain area, draw out a box with the text tool. The text will be constrained inside the box that you draw.

You can add Effects (drop shadow, blur, bevel, emboss, etc.) to your text via the plus symbol next to Effects . Select the text, click the + next to Effects and apply the desired effect. In my star below I have added a simple drop shadow.

Cropping Images

You may find after you have created your image that you have some "dead" empty space around the actual image. You can use the Crop tool to remove any unwanted extra space. Click the Crop tool and drag a box around the area of your image that you want to preserve. Once the area is selected, double click in the center of the selected area to crop the image. If you are not happy with your crop, you can press CTRL+Z to undo.

Layers Panel

Each time you switch tools and draw on your canvas a new layer will be created. Layers make image editing much easier. In the image to the right there are two bitmap layers, text and the shape. If I wanted to delete just the text I could drag the text layer to the trash icon at the bottom of the panel. If I wanted to apply a special effect to the shape, I could select the shape and apply the effect to only that layer. When you start to create complicated images you will learn to rely on the layer panel. Without layers, image editing becomes much more difficult.

At the bottom of the Layer panel you will see four icons: Create New/Duplicate Layer, Layer Mask, New Bitmap Image, and Delete Layer. These tools are used for manipulating layers. You can use the Create New/Duplicate Layer icon to create a new layer or duplicate a layer. Clicking this icon will create the Layer1, Layer2, Layer3, Layer4 layers that you see to the right. These layers are really used to organize content and they contain what I call sublayers or bitmap layers. The Rectangle, Bitmap, and Text layers are "bitmap" layers.

As you draw or add objects typically a new "bitmap" layer is created, but sometimes you may need to create your own bitmap layer. For example, if you look at the image to the right you should see the layer called Bitmap with some wavy lines. Even though the lines are different colors, Fireworks put them all on one bitmap layer. So essentially, these lines are now joined together; you cannot delete or manipulate the pink line without deleting or manipulating the blue line.

It is important to pay attention to the layers panel as you are creating your image, as I said earlier, it's the key to image editing.

You can rename a layer by double clicking the layer name , typing a new name, and pressing enter.

Saving Documents

Saving is pretty straightforward, click File > Save. Give the document a name and keep the Save As Type at PNG (only choice). In order to retain layers in any image, the image must be saved in the program's native file format. Fireworks native file format is PNG. When an image is saved as a Gif or a JPEG, the layers are lost. Be sure to always save your documents in PNG format before exporting.

Exporting Your Images for the Web

Fireworks native file format is PNG and while PNG images will work on the web they are not supported by all browsers. For the time being, until there is full support for the PNG file format, export your images as either a gif or a jpeg file.

As a rule of thumb, graphics created with lines, shapes, and text are typically saved as gif. Graphics that include photos, are very detailed, and/or contain complex gradients are saved as jpeg. Gif files can handle 256 colors or less and jpegs files can handle up to 16 million colors. Of course there are exceptions to this rule, but it's an easy way to remember the differences. For more information on image file formats, read What Application Do I Use?

Fireworks is pretty smart, it will usually automatically figure out what type of image your document should be exported as. Click Window > Optimize and the Optimize panel will appear.

Since the image we are working with is a series of lines, shapes, and text I would say that gif would be an appropriate choice, but if you're ever unsure you can test the settings before you make your final choice.

Just above the ruler you will see the following buttons:

Click 2-Up - this will split your screen in two. The left image is the original and the right image is the optimized image.

Notice at the bottom of the screen there is information about the file size and the amount of time it will take to download the image. This is really important, the larger the file, the longer it takes to download.

In the Optimize panel, change the Export format (where it says GIF) to JPEG. First, you lost your transparency (notice the background of the image is now white), JPEG images cannot be transparent. The file size also increased and so did the download time. Gif is the correct choice in for this image. You can use this simple process to test any image that you export.

Now the question is, can we make the file size smaller without a loss of quality? In the Optimize panel, click the colors drop down arrow and select 2. Notice that your image now looks terrible, this is because we have reduced the number of colors used in the image to just two color...pink and white. The file size is now only a little over 1k, but we have sacraficed too much quality. Increase the colors to 4, 8, 16, 32, 64 and so on; check the results after each change. The goal is to get the smallest file size with out sacraficing too much image quality. Once you are happy with the optimized image, select File > Export, give the file a name and click Save.

Closing Notes

You can create some great graphics easily with Fireworks. Now that you know some of the basics of the program I would recommend that you take a look at the tutorials over at Solar Dream Studios to learn some more advanced effects.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.

Visit Robin's Blog for more web design and development resources.
©Copyright 2001-2006 - Robin Wood - Send Questions or comments to robin at tinkertech dot net.
Last Updated: December 19, 2006