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 be created, edited, and output from one file and much of the HTML and JavaScript 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.

Color

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 percentages.
• 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 Web.
• 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 Panel.

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.

Drawing

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.

The different sections of a path are defined by "anchor points" which can be selected and dragged in order 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.

Editing

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 these:

• 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 paths.
• 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.

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 axis.
• Scaling - This reduces an object horizontally and/or vertically.
• Distorting - The side or corners are moved in the direction in which they are dragged.

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 raised appearance.

Text

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 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 colors.

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.

Web Tools

With Fireworks, you have the ability to create JavaScript rollovers, which 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.

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.

System Requirements

Macintosh

Windows