Fireworks Tutorial

[beginning session]

Getting to Know Fireworks:

Bitmaps: a set of pixels, each one a different color, combining into the patterns that make up the image.
Vectors: a vector graphic is a series of commands that might dictate a line's direction, thickness, and color, which gets rendered on the screen later. The files are very small (each pixel need not be accounted for), they can be resized to any proportion, and they are eminently flexible because they can simply be re-rendered at any point.
Fireworks is a vector-based program that uses the vectors to create bitmap effects and images.

The Interface:

There are a couple of main windows that you will use.

Toolbox: [seen here on the left]

This is the main window you will use. It has the drawing tools that will allow you to draw, reshape, crop, move, add text, color, erase, etc. The little triangle on the bottom right of some of the tool selectors indicates that there are more tools available.

Color Table:

This window allows you to play with the colors and color scales of your project.

Optimize/Object/Stroke/Fill/Effect:

The Optimize window will allow you to play with the color-palette settings and file type of your work. The Object, Stroke, Fill, and Effect windows allow you to play with different effects and drawing styles.

Layers/Frames/History/Info:

These allow you to work with more advanced options like layers and frames. The History window is helpful when trying to figure out what you just did to create a certain effect or when undoing actions.

Creating a New Document:

Canvas Size: select width and height in pixels, inches, or centimeters
Canvas Color: select either white, transparent, or a custom color
Resolution: select the resolution of the graphic in either pixels/inch or pixels/cm
The checkerboard pattern indicates where the image or canvas is transparent.

Saving/Exporting Your Work:

File>Save As/Save: Fireworks saves the file in .png format, which is a working version of the file that allows you to come back and edit text, drawing, and other aspects of your file.
When you are done editing your image and want to get your file into a different format, you need to export it. File>Export Wizard is a good place to start b/c it helps you choose the right file format for your purposes.

Drawing:

The Toolbox window holds the drawing tools
The Object/Stroke/Fill/Effect windows let you manipulate the tools by increasing the brush size, adding effects, and changing colors.
Selecting areas: tools to select parts of your image (magic wand, marquee, lasso)
To deselect an area: Edit>Deselect
Select Inverse: Edit>Select Inverse
Feathering: Edit>Feather...choose the amount of pixels you want to feather by
Cropping: Cropping Tool in the Toolbox...or Edit>Crop Selected Image

Text:

To enter use the text tool on the toolbar…(the one with the A on it)
Select the Apply option in the text editor to see text in the document as you type it into the text editor
Once you’ve entered your text and closed the text editor, you can reopen by just double-clicking on the text
Font: choose the font you want from the drop-down menu in the text editor
Font size: choose the size you want from the drop-down menu in the text editor
Styles; bold, italic, underline
Orientation (horizontally or vertically), Alignment(left, centered, right, full, or horizontally text streched), and Direction (left to right or right to left):
Color: choose the color you want from the color pop-up window or by entering the hexadecimal value of the color
Kerning increases or decreases the spacing between certain pairs of letters to improve their appearance. Positive values move letters father apart, and negative values move letters closer together. If you select Auto-Kern, Fireworks will use a font’s kerning information when displaying text.
Baseline Shift determines how closely text sits above, below, or on its natural baseline. You can use this to create superscript and subscript characters.
Leading determines the distance between adjacent lines in a paragraph. It’s the percentage of the point size that lines are separated baseline to baseline.
The Strectch percentages stretches or squishes the text depending on the percentage…the higher the percentage the more stretched out the text will be.
Anti-Alias: (none, crisp, smooth, or strong) This smooths out a text edge and makes it blend with the background so the text is clearer and more readable when its large
Attaching Text to a Path: draw a path and enter the text you want…then holding down the shift key, select both the text and the path….go to the Text menu > select Attach to Path

Images:

Modify>Image Size...allows you to change the size of the image
Modify>Canvas Color and Canvas Size...allows you to change the size and color of the canvas
Modify>Transform...after selecting the image, you can transform it by choosing to rotating the image, flipping it horizontally or vertically, and scewing, distorting, and scaling the image
Xtras> can Adjust Color, Sharpen, Blur, and use Eye Candy to alter your image

Further Resources:

Fireworks information for Photoshop Users:
http://www.macromedia.com/software/fireworks/productinfo/photoshop/