Web Development & Design Foundations with HTML5

Skip to Content 8th Edition

Adobe Fireworks CS5 Tutorial: Creating a Logo Banner Page 2

Create a New Image

To create a new image, select File > New. Your display should be similar to the screen shown below.

The New Dialog Box

The "New Document" dialog box appears in the middle of your screen. This is used to configure settings for your new document. We would like our banner to be 950 pixels wide, 100 pixels high, have 96 ppi resolution (the default), and have a transparent background (Canvas Color).

Modify the "New Document" dialog box with these settings.

Click "OK". Fireworks creates the new image canvas according to your specifications, as shown below.

Fireworks Canvas
Click on the image to view a larger version of the screen capture.

Take a minute to familiarize yourself with the display.

  • The "Untitled-1" in the Title Bar is the name of the file at this point.
  • This image is a png - the native image format for Fireworks. (Note: you will learn how to export your image to a .gif or .jpg format later in this tutorial.)
  • The checkerboard pattern in the window indicates a transparent background canvas -- don't worry your final image will not have a checkerboard pattern background.
  • The "Original" tab is initially selected and indicates the image may be edited. We will work with "Preview" later.

If you look at the bottom right of this window you will notice the document sizeĀ (950x100), display magnification (currently 100%) and a number of icons.

Continue with the next page to begin editing your company logo banner.

Page 3Next Page