If you haven’t already started Fireworks, start it now. Creating a new image involves a few key decisions: Image Width, Height, Resolution and Canvas Color. To create a new image, select "File/New" by {Clicking}on "File" on the Menu bar and selecting "New". The New Document dialog box pops up.

(Figure 3.1)

Specify the width (horizontal size) and height (vertical size) in pixels. To ensure that you are working in pixels select "Pixels" from the drop-down menu. Recall the basic unit of your screen’s display is the pixel and because web pages are screen based it is essential to work in pixels rather than inches or centimeters.  Create an image with a width of 300 pixels and a height of 100 pixels (300x100).  Recall that most web sites are developed with a maximum horizontal size of 640 pixels.  Because of scroll bars and other screen-space or "real-estate" taken up by the browser a maximum horizontal size of 600 pixels is recommended.  There are exceptions to this rule, such as the horizontal size of background images.  Appropriate width and height settings are covered later.

Set resolution to 72 ppi for images designed for the Internet.  Again, recall that your screen can display a density of no more than 72 ppi (some monitors have a slightly larger range) making higher resolutions, which create larger file sizes, wasteful.  You may choose to design and edit in a higher ppi if you are developing images to fulfill multiple objectives, such as print, video, and Internet.  Appropriate ppi settings can be determined by consulting your service bureau.  For now, select a resolution of 72 ppi.

Canvas Color determines the initial background color of your image. Options include "White," "Transparent," and "Custom." Selecting "White" creates an image with a white background. Selecting "Transparent" creates a background without any color, similar to glass or acetate. Fireworks, by default, represents transparency by a gray and white-checkered pattern. 

Selecting "Custom" allows you to select a color of your own choice for your background. You will find a number of different options for color selection if you click on the arrow beside the color swatch in the dialog box. You can use the eyedropper to select colors from any area of the Fireworks workspace, the color picker to pick any color from the range of your color space and the text field to input hexadecimal color information.

(Figure 3.2)

Select "Transparent" and {Click} OK in the "New Document" dialog box. An Image Window should appear in the Fireworks workspace. Why select a transparent background? You’ll find out as we progress through the manual. Note that the checkered pattern in the image is only an indicator of transparency, it is not image data.

(Figure 3.3)

At the top left hand corner of the Document Window you will find the name of your document. Until you save your document for the first time it will be named "Untitled" by default. Standard controls for minimizing, maximizing, and closing the document appear at the top right corner.

Just below the Title bar you will find 4 tabs labeled Original, Preview, 2-Up and 4-Up. {Clicking} these tabs allow you to compare the web-optimized version of your image with the original version and check the quality of your final output. 2-Up and 4-Up allow you to do side-by-side comparisons of your original and optimized graphic before you commit to saving it. We will be discussing Optimization settings later in the manual. For the time being, make sure the Original tab is selected.

You can {Click} and drag the top of the Document Window to move it anywhere within the workspace. The Toolbox and the Panels always sit on top of it so they can be easily accessed.

To resize the Document Window {Click} and drag the top, bottom, left, or right sides to increase or decrease the size in any of these directions. 

At this point, we won’t begin editing your new image. For the time being, save it to your hard drive by {Clicking}on "File" and selecting "Save As." Name the image "firstimage." Accept the default file type extension ".png" which is Firework’s native file type extension. We recommend you save your image in the exercise folder for this unit. You can do this by transferring the Fireworks exercise folders from the manual CD onto your harddrive. After you’ve done this, navigate your way to the "unit003" folder. We will be placing files in and opening files from the "fireworks3xfiles" directory as we progress through the manual. After you have saved your blank or empty image close it by {Clicking}on the Close icon at the top right corner of the Document Window.