Creating and Editing Graphics With Fireworks MX

What is Fireworks MX?

Macromedia Fireworks MX is a Web image design tool designed to integrate with the other Macromedia products, namely Dreamweaver MX, Flash MX, and Freehand MX. Web graphics created in Fireworks MX can be added to HTML documents in Dreamweaver and then edited using Fireworks MX while still in Dreamweaver. Of course it can be used with other programs too.

Work Area

Tools Panel

The Tools Panel is divided into six parts: select, bitmap, vector, web, colors, and view. Vector refers to resolution-independent objects made up of lines and curves, connected by points that form a path, while bitmap refers to resolution-dependent objects made up of pixels. Vector objects can be increased or decreased in size without any distortion of the image. Bitmaps tend to become out of focus and look pixelized when resized.

Some tools are grouped with other tools and can be accessed by clicking the down arrow next to a tool.

There are over 50 tools available for developing graphics.

Screen shot of Tools Panel

Select

Pointer tool - select objects by clicking or dragging selection area around objects
Select Behind tool - select an object behind or hidden by another object
Subselection tool - select, move, or change points on a path or an object in a group
Scale tool - increase or decrease object size, horizontally, vertically, or both
Skew tool - slant an object along it's horizontal or vertical axis, or both
Distort tool - alter an object's size and proportion
Export Area tool - export a selected area of a Fireworks document
Crop tool - remove unwanted part of document

Bitmap

Marquee tool - select pixels in the form of a rectangle
Oval Marquee tool - select pixels in the form of an ellipse
Lasso tool - select pixels in a freeform shape
Polygon Lasso tool - select pixels in a straight-edged freeform shape
Magic wand tool - select pixels of similar colors
Pencil tool - draw one-pixel straight lines, either
freehand or constrained
Brush tool - draw with the selected stroke color
Eraser tool - remove pixels
Blur tool - blur the focus of part of an image
Sharpen tool - bring an image or part of an image into better focus
Smudge tool - blend colors
Burn tool - make part of an image darker
Dodge tool - make part of an image lighter
Eyedropper tool - define a new stroke or fill color by sampling color from an image
Rubber Stamp tool - copy a part of an image to another.
Paint Bucket tool - fill an area with color
Gradient tool - use customizable patterns of color combinations to fill objects

Colors

Stroke color picker - select stroke color
Fill color picker - select fill color
Set Default Stroke/Fill Colors - select default colors for
the stroke and fill
No Stroke/Fill - specify no color for stroke or fill
Swap Stroke/Fill Colors - invert the stroke and fill colors
on the toolbar

Vector

Line tool - draw lines
Pen tool - plot points to draw straight lines and Bézier curves
Redraw Path tool - retain stroke, fill, and effect characteristics of a path while redrawing or extending a segment of it
Vector Path tool - use points to draw a path with a variety of brush strokes
Text tool - enter text
Rectangle tool - draw rectangles
Rounded Rectangle tool - draw rectangles with rounded corners
Ellipse tool - draw ovals and circles
Polygon tool - draw equilateral polygons
Knife tool - - slice paths
Freeform tool - bend and reshape vector objects
Reshape tool - - reshape selected paths
Path Scrubber tool - additive - add to a path based upon how quickly you draw or how hard you press (pressure sensitive drawing pads)
Path Scrubber tool - subtractive - subtract from a path based upon how quickly you draw or how hard you press (pressure sensitive drawing pads)

Web

Rectangle Hotspot tool - specify a URL for a rectangular area of interactivity
Circle Hotspot tool - specify a URL for a circular area of interactivity
Polygon Hotspot tool - specify a URL for an odd-shaped area of interactivity
Slice tool - cut an image into rectangular sections and assign URL, rollover effects, or animation to any part
Polygon slice tool - cut an image into odd-shaped sections and assign URL, rollover effects, or animation to any part
Show Slices & Hotspots - make slices and hotspots visible
Hide Slices & Hotspots - make slices and hotspots invisible.

View

Hand tool - pan around the document
Zoom tool - zoom in or out
Standard Screen mode - default view
Full Screen with Menus mode - maximized document window with a gray back ground
Full Screen mode - maximize document window with a black background and no menus, toolbars, or title bars

Property Inspector

When a tool is selected in the Tools Panel or an object selected from the Document Window, the tool options are displayed in the Property Inspector.

Property Inspector for Rectangle tool
Rectangle tool selected in the Tools Panel.

Property Inspector for path
Line (Path) selected from the Document Window.

Property Inspector for Text
Text selected from the Document Window.

The Property Inspector is divided into different areas, each dealing with a characteristic of the object. These areas may include fill, stroke, size, location, effects, justification, or transparency, among others.

Stroke

A stroke refers to the outline of an image. In the Property Inspector's Stroke section there may be pop-up menus and dialog boxes to set such things as the color, tip size, type of stroke (hard line, airbrush, calligraphy, crayon, etc.), edge, and texture, depending on whether the object is a vector or a bitmap. There are far less bitmap stroke options than vector stroke options.

vector stroke options

bitmap stroke options

Fill

A fill refers to the interior of an image. In the Property Inspector's Fill section there are various pop-up menus and dialog boxes used to control an object's fill, including color, type of fill (solid, gradient, pattern), edge, texture, and transparency. Use the Fill, Edge, and Texture pop-up menus and the Edit Fill dialog box to control fill variations, including color, texture and edge.

Fill options

Effects

Built-in filters and effects can be applied to and removed from objects in the Effects area of the Property Inspector. Use the plus sign to add effects and the minus sign to remove selected effects.

Effects applied as shown on Property Inspector

Height/Width and Position

View and adjust width, height, and x or y positioning.

Opacity

The opacity of an object can be adjusted in the Property Inspector with the opacity pop-up slider. A value of 100% will render an object fully opaque while 0% makes it completely transparent. The opacity of objects and layers can also be set in the Layers Panel.

Illustration of Opacity pop-up slider location

Layers Panel

Layers

Layers refer to the division of a document in Fireworks into planes, as if each object resided on a separate sheet of paper. There can be numerous layers in a document as well as many objects in a layer. Layers can be collapsed and expanded by clicking the minus sign (-) to collapse or the plus sign (+) to expand a layer.

Illustration of Layers Panel showing 3 layers Illustration of Layers Panel with 3 layes collapsed

Stacking Order

Objects are placed on the canvas in the order they are created, with the most recent on top.This is referred to as stacking order and can be seen in the Layers Panel. The following three illustrations show two objects on a transparent canvas. The first shows the objects as they appear in Fireworks. The second demonstrates the stacking order of the objects. Note: the canvas is not a layer and is below all objects and layers. The last shows the objects as they appear in the Layers Panel.

Illustration of one image overlapping another

Illustration of stacking order of objects

Changes are made to the stacking order when rearranging objects, adding layers, placing objects in layers, or moving objects between layers.

Creating a New Image

New images are created by clicking File>New and then choosing the desired canvas size, resolution, and color for the project.

Canvas Size and Resolution

The canvas width and height can be set in pixels, inches, or centimeters. The resolution may be set in either pixels/inch or pixels/cm. Once the resolution is set, it can't be edited, however, the canvas size can be edited at any time in two ways:

From the Property Inspector - when no tools or objects are specified.
By clicking Modify>Canvas>Canvas Size.

Canvas Color

There are three choices for canvas color in Dreamweaver:

white
transparent
custom color - select a color from a pop-up menu.

Like the canvas size, the canvas color can also be edited in two ways:

From the Property Inspector - when no tools or objects are specified.
By clicking Modify>Canvas>Canvas Color.

Trimming and Fitting Canvas

Use the Trim Canvas command (Modify>Canvas>Trim Canvas) to remove any extra space around an image being created. The Fit Canvas command (Modify>Canvas>Fit Canvas) increases the canvas size to include any objects which extend past it's edges.

Saving, Optimizing, and Exporting

Saving

When a file is saved in Fireworks using the File>Save command, it is with the extension of .png. The .png file is always editable, even once exported.

Optimizing

Before exporting a file from Fireworks, first optimize it using the Optimize Panel. Optimizing a graphic means to adjust the compression and quality to get the smallest possible file size that still looks good. It is in the Optimize Panel that such settings as the export file format, indexed palette, maximum number of colors allowed, dithering %, and transparency are set.

Exporting

The large size of a.png file makes it a poor choice for use on Web pages, therefore, an image must be exported using either the File>Export or the File>Export Preview command using the file type chosen during optimization.

Export Preview

When Export Preview is chosen, suggested optimization and export options are displayed. In addition, a preview area shows the image as it will look once exported. Estimates of file size and download time are also provided.

Export Wizard

The Export Wizard doesn't actually export an image, but rather provides suggestions about optimization and exporting, and is a good alternative to the optimization panel for those new to the process. It features a preview area showing comparison views of up to four different file types, allowing the best image to be selected while taking into account such things as image size, quality, and estimated download time.

Quick Export Button

Use the Quick Export button, found in the upper right corner of the document window, to export Fireworks graphics as HTML files to be used in Macromedia programs such as Dreamweaver, Flash, FreeHand, or Director, or to other programs such as Adobe Photoshop, Adobe Illustrator, Microsoft GoLive or FrontPage.

Illustration of Quick Export Button

Creating Images From Dreamweaver Placeholders

In Dreamweaver, image placeholders can be used to reserve a spot for future images in a Web page. Doing so allows for experimentation with page layout before deciding upon the final images.

When ready to create an image to replace the image placeholder, roundtrip editing allows the launching of Fireworks from within Dreamweaver where the new image can be designed, saved, and exported. If a name was specified when the image placeholder was created, this name will automatically be used when the image is saved and exported. Once the file is exported, Dreamweaver opens with the new image in place.

Adding an Image Placeholder

Add an image placeholder to a saved Web page in Dreamweaver by first clicking the Image Placeholder icon from the Insert Bar or clicking the Insert>Image Placeholder.

In the Image Placeholder dialog box, enter a name, width, alternate text, and color (if desired), into the dialog box that appears, clicking OK when finished.

An image placeholder with the name and dimension information is added to the Web page.

Handles for adjusting height and width are available when the placeholder is selected. Adjustments to height and width can also be made in the Property Inspector.

Creating an Image to Replace a Placeholder

To launch Fireworks and create an image to replace the image placeholder, with the image placeholder selected, click the Create button from the Property Inspector.

Illustration of Create button on Property Inspector

Fireworks is launched with a canvas the size of the image placeholder open.

Illustration of Fireworks editable canvas

Create a graphic, then click the Done button. Doing so prompts two dialog boxes, the first to save the source file and the second to export the file in an acceptable Web format. Enter a name and location to save the PNG source file before clicking Save and doing the same to export the image. The graphic is now inserted into the Dreamweaver page where the image placeholder once was.

Resources and Tutorials

Macromedia
http://www.macromedia.com

Fireworks Discussion Forum
http://webforums.macromedia.com/fireworks/

Macromedia's Designer and Developer Center
http://www.macromedia.com/desdev/

Playing With Fire
http://www.playingwithfire.com

Solar Dream Studios
http://www.solardreamstudios.com/

Ultraweaver
http://www.ultraweaver.com

Phireworx
http://www.phireworx.com