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.
Some tools are grouped with other tools and can be accessed by clicking the down arrow next to a tool.
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.
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.
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
vector stroke options
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:
There are three choices for canvas color in Dreamweaver:
Like the canvas size, the canvas color can also be edited in two ways:
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
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.
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.
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.
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.
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
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
An image placeholder with the name and dimension information is added to the Web page.
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.
Fireworks is launched with a canvas the size of the image placeholder open.
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
Fireworks Discussion Forum
Macromedia's Designer and Developer Center
Playing With Fire
Solar Dream Studios