Adobe Macromedia Fireworks Tutorial:
Creating a Logo Banner
A company "logo" banner image is commonly found on the home page of most web sites.
When creating a web site for a company, it is easiest to scan the organization's logo from their
brochures or promotional material and then save the scanned logo image as a gif or jpg file. If
there are no brochures or other materials available, a graphic application such as Macromedia
Fireworks can be used to create a banner.
This tutorial will guide you in creating a company logo banner. Begin by launching Macromedia
Fireworks from the application program menu:
Select Start > Programs > Macromedia > Macromedia Fireworks.
Your screen should look similar to the image shown below (click on the image to view a larger
Don't worry if you feel a little intimidated by all the windows and panels that appear. We will
focus on the functions needed to create a company logo banner. When you want to learn more
about Fireworks, try out the Using Fireworks option found under "Help" on the top menu bar or
consider taking a course on graphics.
Create a New Image
To create a new image, select File >New. Your display should be similar to the screen shown
The "New Document" dialog box appears in the middle of your screen. This is used to configure
setting for your new document. We would like our banner to be 600 pixels wide, 150 pixels high,
have 72 ppi resolution (the default), and have a transparent background (Canvas Color).
Modify the "New Document" dialog box with these settings. It should be similar to the one
Click "OK". Fireworks creates the new image canvas according to your specifications and the
window below appears on your screen.
Take a minute to familiarize yourself with it.
• The "Untitled-1.png" in the Title Bar is the name of the file at this point. (Your file may
be named Untitled-1.png.)
• The image type png is the native image format for Fireworks, we will convert your logo
to a gif or jpg format later.
• 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.
• The "@ 100%" indicates that the image is displayed at "100%" of its size.
If you look at the bottom right of this window you will notice the document size (600x150),
display magnification (currently 100%) and a number of icons. Place your mouse over each
icon to for a brief description of its purpose.
Fireworks Tool Panel
Notice the Tools Panel in your Fireworks application. The currently
selected tool is the "Pointer Tool" -- the standard cursor pointer.
Place your mouse over the other tool icons for a brief description of
You will be using the "Text Tool" icon on the Tools Panel during this
tutorial. Take a moment and find it. (Hint: Look for the letter "A" in
the Vector area on the Tools Panel.)
You will also be using the Colors Panel, which is located
below the Tools Panel in this window. This is used to
change the color of the object you are working with.
As long as you are examining the screen, take a look in
the Main Tool Bar across the top of the Fireworks Window.
It is handy to know how to undo an action when using Fireworks --
just in case you make a mistake. Pressing the Ctrl and Z keys at the
same time will undo your most recent action. There also is an Undo
option located under the Edit Option on the Main Tool Bar.
Fireworks Tool Panel
Select the Text Tool in the Vector Area on the Tools Panel.
Your cursor changes to an "I Beam".
Click on your checkerboard canvas. A blue outline for a text area appears. See the image
Notice the Property Inspector in the lower center of the window. This is used to configure the
properties of the text area.
Your screen should look similar to the image shown below.
Place your cursor in the blue text area and type "Acme Web Design".
Your text might look different from the sample shown above. That is OK, you will configure your
text in a moment. You will notice the sample text happens to start on the left side of the canvas.
Move the text closer to the left side of the image canvas (as shown in the screen shot below) by
selecting select the Pointer Tool (see page 2), using it to select the text area, and dragging the
text area closer to the left side of the image canvas.
Now you will configure your text to be appropriate for a company logo banner. Examine the
Property Inspector shown below. There are controls that configure the properties of the text,
including the font, size, color, style (bold, italic or underline), and orientation (horizontal or
Select the text area in your image and configure the Property Inspector as shown below:
• Arial font,
• size 64,
• a shade of blue
Notice that the text on the image canvas was changed to match your configuration. You may
need to use the Pointer Tool again to position your text so that it completely displays. Your
image canvas should be similar to the one shown below.
Customize Your Company Logo Banner
Next, you will apply an Filter to your text. Look at your screen and notice the Filter Label
followed by the + sign in the Property Inspector. Click on the + sign to display the Filters
available. See the Figure below. (Note: In Fireworks MX 2004 and earlier versions, these filters
were called "Effects". )
Select "Bevel and
You will note a number of
Select "Outer Bevel" as
shown at the right.
Your image canvas should look similar to the one shown below.
Your image canvas may look slightly different.
Notice the Outer Bevel effect is now listed
in the Property Inspector under the Filter
See the figure at the right.
Doubleclick on the "Outer Bevel"
text to display a dialog box that can
be used to configure the effect.
See the figure at the right.
The color of the outer bevel filter is red. You may change it if you prefer. Try a turquoise color
(#3399CC). Experiment with the settings. For a more subtle effect, change the width from 10 to
5. Try out different types of effects. It is currently set to "Raised" -- try "Inverted" for a different
look. Try changing the contrast, softness, and angle if you feel daring.
Stop when you are happy with your text. Remember Edit, Undo (or Ctrl+Z keys) can help to
correct any mistakes. Your image canvas may now look like the one shown below.
The text above is configured with the setting shown below:
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.
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 (floppy disk, CD, 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