The Fireworks Main Page

Fireworks was built specifically for the Web, it is not a powerful as the industry standard PhotoShop, but it is one of the better tools you can find for the price. From within Fireworks you can create, edit and optimize files, and then you can add animation and JavaScript-enabled interactivity.
Fireworks use the three letter extension .PNG for all of its saved files. This feature allows Fireworks to save all the layers and formatting in one very large file. To make the file available for the Web, you should export the file as either a .JPG or .GIF at 72dpi.

The Fireworks Workspace: You’ll notice some similarity between the Fireworks workspace and the Dreamweaver workspace; of course there are differences too. Added to the workspace is the Tool bar on the left and the panels on the right side look a bit different but the layout is similar. This was done on purpose so you’d feel comfortable working between the different applications of the suite.

The large white area now is called the canvas where you will create and/or import elements to become a part of your graphic. All the panels and tool bars can be docked or float on the page, you get to choose how you like to work. I prefer that the panels all be docked, but I’ve seen others undock a panel to keep it close at hand.

To undock a panel and drag it to a new location, drag the gripper in the left side of the title bar and move the translucent panel copy into the work area. You can resize an undocked panel from the bottom right side of the panel. You can choose which panels you want opened at the same time, too many panels will take up the entire screen so be wise in your choices.

Every panel can be collapsed to just the Title bar and reopened when needed.Every panel has an Options menu at the right side of the Title bar, click to see the options associated with that panel.

The Layers Panel: In Fireworks, you use layers to position objects, which are the individual elements in your document. One function of the Layers panel is to arrange the elements in your document in a logical design order. Layers can have sub-layers that are a part of the whole layer. Other layers can be placed above or below other layers in a stack order. The layer on top, can hide the layer below, it depends upon what is in the layer and is it big enough to hide what is below it. The sub-layers all share the level in the stack; however the lower sub-layers will be hidden by the higher sub-layers. Sub-layers and regular layers can be merged or flattened into one layer.

Layers in the panel can be collapsed or expanded to show all or none of the objects it holds. Very complex documents could have many, many layers so being able to collapse them is a good thing.

You can customize the view of the Layers panel if you wish. For instance, you could change the size of the Thumbnail image size, or not display them at all. To make these changes you will click the Options menu on the right side of the Title bar for the layer.

Using the Text Editor: You can use the Text Editor to preview fonts and view and modify text that may be difficult to see in your document. To open the Text Editor, select a text block or a range of text, click Text on the menu bar, and then click Editor. You can also copy text from the Text Editor and paste it as text into other applications.

The Fireworks Tools: The Tools panel is separated into tool groups: Selection, Bitmap, Vector, Web, Color, and View. The Properties Inspector is context sensitive just like Dreamweaver and Flash, so expect to see it change according to what you are doing at the time. Fireworks is a very good Vector program as well as Bitmap program. Vectors are mathematically created instead of pixel created as in bitmaps. You will get a chance to work with both in the following exercises. The Web tools are designed for creating Image Maps, Slicing Images, and JavaScript Interactivity, and you’ll get to experience these tools as well.

Duplication Options: You can duplicate an object within a document by selecting the object on the canvas, pressing and holding the [Alt] key and then dragging the object to a new location. Interestingly enough, if you copy an object to the clipboard and then open a new document, Fireworks automatically sets the size of the new document to those dimensions.

VISIT FORMER & CURRENT EXERCISES

Fireworks MX (2002) |

Fireworks MX (2004) |

Fireworks Studio 8 & CS3 |

Prototyping in CS4|

Bitmap Graphic Image:A bitmap graphic represents a picture as a group of dots, or pixels, on a grid. One nice feature of bitmaps is that it allows your computer screen to realistically depict the pixel colors in a photographic image. Because a bitmap image is defined pixel by pixel, when you scale a bitmap graphic, you lose the sharpness of the original images.

Resolution refers to the number of pixels in an image; to print sharp graphics will require a greater resolution than the 72ppi or 96ppi (pixels per inch) allowed on the Web. Bitmap images are, therefore, resolution-dependent—resizing results in a loss of image quality. The most visible evidence is the jagged appearance in the edges of an image.

Bitmaps images can be worked with in Fireworks, but perhaps, not as effectively as in PhotoShop. But then again, the learning curve with PhotoShop is quite high compared to the speed bump Fireworks presents to you.

Using Text: The text features in Fireworks are quite typical of the best desktop publishing programs. Once you select the Text tool, a host of options appears in the Properties Inspector. You can expect to work with font faces, sizes, colors, weight, kerning, leading, alignment and anti-alias properties. Kerning adjusts the spacing between adjacent letters or a range of letters, while leading adjusts the amount of space between lines of text. Anti-alias refers to smoothing the jagged edges of curved text. Fireworks has several options to choose from with alias and anti-alias.
Once you create text, you can edit the text block as a whole, or edit just a range of text. When you create text, you can create auto-sizing or fixed-width text blocks. Auto-sizing means that the text block expands to accommodate the text you enter. If you delete text, the textblock contracts. You can spell check text at any time, including selecting multiple text blocks to check their spelling.

TOP