Adobe Fireworks CS3 Tutorial:
Creating a Logo Banner Page 6

Save Your Company Logo Banner

You can use the Preview tab in the Image Canvas window to show how your image will look on a web page. Click on the Preview tab. Your display should be similar to the one shown below.

Look at the lower right status bar of the panel -- Fireworks tells you the file size of your image and the approximate download time, and the suggested image type. Click on the Original tab to continue to edit the image.

Notice how there is a rectangle of white space around the text in the image. This will automatically leave blank space around the text when the image is displayed on a web page. If instead, you would like the image to ONLY contain the text (without an empty area bordering the text), you will need to trim the canvas by selecting Modify > Canvas > Trim Canvas as shown in the figure below.

If you trimmed the canvas around the image, your Fireworks work area should now look similar to the one shown below.

Use the Export Wizard. Select "File", "Export Wizard" and the following dialog box will appear.

This allows you to select an format for export (sometimes you need to choose between gif and jpg) and target an export file size. Click the Continue button.

Select the final destination for your image. Click the Radio Button next to "The web" if it is not already selected. Click Continue. Click Exit to see your Previews. The Export Preview dialog box appears and is shown below.

Notice that you are shown both gif and jpg images. File sizes and download times are given for each. There are many options on this dialog box that can be configured, including the colors palette used by the images. You can see that it can take quite a while to become proficient using Fireworks, For now, click the gif image to select it and configure it to use Alpha Transparency as shown below.

Now click the "Export" button. The Export File Save Dialog box appears as shown below.

Save your file on your hard drive or portable storage media (CD-R, USB thumb drive, etc.). Name the file logo.gif. Click Save. You have now saved your logo in a format that is widely used on the Web.

Now save your working file. Select File > Save As and save your file as logo.png on your hard drive or portable storage media.

Close Fireworks. Select File > Exit.

Note -- You saved TWO versions of your graphic:

• The .gif file will be displayed on web pages.
• The .png file is saved and can be used if you need to modify the logo or create a similar logo image in the future.

The .png file contains the editable text object and can be easily modified. The .gif file is not easily modified.

Continue to the next page for information on opening your file in Fireworks and on creating buttons.

Page 7