Exploring the Tools

The top Menu Bar contains controls for common functions such as opening and saving files, as well as specific functions such as copying and pasting, calling up windows or palettes, and controlling the Fireworks MX® environment.. The icons allow you to use the most commonly accessed items.

The MAIN MENU BAR is across the top.

The MODIFY MENU is across the bottom.

The Document Window
The Document Window is the area where you place and edit your images. You can have multiple Document Windows open at one time.

Fireworks MX® has Two Editing Modes

BITMAP MODE Image Edit mode allows you to edit bitmap content on your screen. You’ll know which mode you’re in by looking at the horizontal bar across the bottom of the Document Window . If you see a EDITING A BITMAP you are in edit mode.Double clicking while on a bitmap will enable Image Edit mode.

VECTOR MODE allows you to create and edit vector content in your document window. You can switch from one mode to the other by clicking on the image itself. If your cursor is hovering over a vector object in the Document Window, double clicking will put you in edit mode.

Animation Controller
The controls at the bottom of the Document Window also allow you to modify the way you view your document, whether it be zooming in or out or providing you with information about the size and resolution of your document.

The Toolbox
The Toolbox contains a collection of tools for creating, selecting, and manipulating content in the Document Window . The icons for some of the tools may change depending on which editing mode you are in. In Object Mode the Eraser Tool icon will appear as a knife while in Image Edit Mode it will appear as a chalk board eraser.

The Toolbox allows you to select tools, and when appropriate, use the View tools to manipulate the Document Window and the Colors options to select colors for the objects you are editing. If you {Click} and hold down the mouse button on any of the Toolbox icons that contain a small black triangle in the bottom right hand corner a Pop Out menu will appear. These menus contain additional tools that relate to the function of whichever tool you have selected.

The Select Tool
Use this tool to select objects or elements on your canvas.

The Subselect Tool
Use this tool to edit nodes on your vector objects.

The marquee, Magic Wand, pencil tool, filter tool, color match, Lasso, paintbrush, eraser, rubber stamp and and fill tool the make up Firework’s selection tools. Selections are areas of an image you wish to isolate in order to modify it, such as changing the color of a fence. A marquee, a dotted line in constant motion, represents the shape of your selection. The mMarquee is also known as a selection path.

Line Tool
The Line Tool allows you to create single, straight-line segments by {Clicking} and dragging with your mouse. If you hold down the [SHIFT] key while you draw your segment Fireworks MX® will limit the angle of your line to increments of 45 degrees. Experiment clicking and dragging while holding down the [SHIFT] key to see how this function works.

The Line Tool utilizes the Stroke Panel ’s settings for the appearance of the line onscreen. We will be exploring the function of the Stroke Panel in a later chapter.

If you create a line while in Object Mode you can use your Pointer Tool to select the line segment and move it around inside the Document Window . With the Subselection tool you can select either end of the line segment and move it while the other end remains stationary.

The Line Tool has no options.

The Pen Tool

The Pen Tool expands on the capabilities of the Line Tool . With the Pen Tool you can create a series of connected line segments and, if you wish, a closed polygonal shape that can be filled with a color or pattern. Multiple line segments are connected by Points that can be modified and adjusted in a number of different ways.

Rectangle, Rounded Rectangle, Ellipse and Polygon Tool

The Shape Tools are used to create polygonal objects. Included in this group are a Rectangular Tool for square and rectangular Shapes, Ellipse Tool for circular and oval Selections , and the Polygon Tool for shapes with 3 or more sides. To create a shape you select the tool you need, place your cursor in the Document Window , {Click} and hold your mouse button, and drag. To constrain the shape of the rectangular and elliptical Shape Tools {Click}, drag and hold the [SHIFT] key as you make your object. Perfectly square and circular shapes result. If you hold down the [ALT] key while using one of the Shape Tools, the point of origin will be the center of your object. If you don’t hold down the [ALT] key, the top right corner of your object will be the point of its origin.

The Rounded Rectangle Tool has options that that can be accessed through the Object Panel . You can set the roundness of a rectangle’s corners by increasing or decreasing the number in the field in the panel or moving the slider beside the field. This can be a useful option if you want to create capsule shaped buttons for your website.

The Ellipse Tool has no options and allows you select specific circular areas of bitmaps.

The Polygon Tool options in the Object Panel allow you to choose between creating a regular Polygon or a Star-shaped object. If you choose Polygon from the drop down menu you can increase or decrease the number of your shape’s sides by moving the slider or typing a number in the field in the Object Panel. If you choose Star you can not only increase the number of sides but also increase or decrease the angle of their points. The lower the angle the “spikier” the star.

The Pencil Tool
The Pencil Tool allows you to draw editable, freehand paths in Object Mode and non-editable, 1 pixel-wide lines in Image Edit Mode . Use the Subselection tool to select a freehand path that you’ve drawn with your Pencil and you’ll find that it contains the same points that a line drawn with the Pen and Line tool contains. You can edit these points in the same way that you can line segments. Strokes and effects can be applied to any freehand path you create in Object Mode .

If you are using your Pencil in Image Editing Mode you have 3 options in the Object Panel . You can select “Anti-Aliased” and make your lines relatively smooth, “Auto Erase” if you want to draw the fill color over a stroke , or “Preserve Transparency ” if you want to draw only on areas that contain pixel information.

The Brush Tool
Use the Brush Tool to create lines and paths that utilize the settings in your Stroke Panel . The major difference between this tool and the pencil tool is the way it works in Image Editing Mode . The Pencil Tool is limited to a one pixel-wide line whereas the Brush Tool utilizes your Stroke settings.

Transform Tool
This tool can only be applied to vector shapes. Select it from the Toolbox and then select a vector shape on your screen. A transformation bounding box will appear around the object which can be used to modify the shape. You can use this tool to Scale, Skew, and Distort an object. Select one of the points and drag to affect a transformation. Alternately you can select Modify/Transform from the Menu and perform many of the same transformations by inputting information numerically. Press [CTRL] + [SHIFT] + T if you prefer keyboard shortcuts.

Freeform Tool
Another vector tool. Select it from the toolbox and drag it over a selected vector object in your Document Window . The tool will affect the path in interesting and unusual ways. The way the Freeform Tool works depends on whether or not your cursor is inside or outside your object when you click and drag. The Area Tool’s ability to change your path is dependent on how big you’ve made its brush. Use the options panel to modify brush sizes for both the Freeform and Area Tools. Draw a vector shape in your Document Window and experiment with these tools.

Paint Bucket Tool
The Paint Bucket tool allows you to fill areas of solid or similar color with the color of your choice. You can expand the range of color that will be filled by increasing the Tolerance figure in the Options Panel .

You can adjust the edge of the fill that your Paint Bucket Tool creates by selecting an option from the Edge drop down menu and moving the associated slider. Below you will see examples of the Paint Bucket at work. Experiment with this tool on the bitmap image of you choice.

Eraser
The Eraser is really just a slight variation on a paint brush. In Image Editing Mode , this tool will remove pixel information from your bitmap image and replace it with transparency or color depending on your settings. Check the options for this tool in the Options Panel .

The Panel will allow you to adjust the eraser’s shape, size and edge. You can also choose how you want the eraser to erase. You can have it use your stroke color, your fill color, background color, or erase to transparent.

The Eraser Tool also operates in Object Mode as a knife. Use it to draw a straight line across a selected vector object. Deselect the shape, select the Subselection Tool and reselect the shape again. You’ll find that the object has been cut in two along the line that you drew with the tool.

Type Tool
The Type Tool is used to create text for yourdocuments.

Hand Tool
The Hand Tool is used to move areas of a magnified image around. For instance, Fireworks MX® allows you to zoom in on specific areas of an image. However, when you do that, other areas of the image are no longer visible. By using the Hand Tool, you can grab and shift the image to bring other sections under the magnified area.

Zoom Tool
The Zoom Tool is used to get closer to or magnify particular areas of the image , useful for precise image editing and manipulation. Web Tools

Web Tools

Hotspot Tools
The Hotspot Tools allow you to create Rectangular, Circular, and Polygonal Image Maps for the graphics that you create. Fireworks MX® will generate all of the requisite HTML code and save it with your graphic when you export it.

Slice Tool's
The Slice Tool s allow you to cut your image up into slices and, if so desired, adjust the optimization settings for each slice. Fireworks MX® will place the individual slices into an HTML table when you export your document and it will display in a browser exactly the way that you created it.

Stroke/Fill Tools

The currently selected Stroke color, or color of any line segment you create, is displayed in the Stroke Color box. By default, the Stroke Color is black.

The currently selected Fill color is displayed in the Fill color box. By default, the Fill color is white. {Click} the Default Colors icon to restore or return the Stroke and Fill colors to default black and white and the No Color button to prevent color application. To switch the Stroke and Fill colors {Click} the Switch Arrow.

Stroke Color

Default Colors, No Color, and Switch Icon

Fill an object
You can control the fill and stroke color of an object in the Toolbox with the drop-down selectors as shown at the right. In this sample, the stroke color is black and the fill color is green.

However, if you wish to adjust the width and appearance of the stroke or the appearance of the fill, you must move to the Stroke or Fill panel. The Fill panel is shown at the left of the canvas. Note that the color well is showing the color as displayed in the Toolbox.

When you draw an object, it will be filled and stroked with the current fill and stroke as shown in the Toolbox. To change the fill, make sure the object is selected with the Pointer tool, and click on the color well in the Toolbox, or in the Fill panel. Select a new color and the object will change to the new color.

As an alternative, you can select the paint bucket tool and click on the object. The object will be filled with the current fill.

That is all there is adding a solid fill in Fireworks MX®. You cannot add texture or a pattern from the Toolbox.