Adobe Macro Media Fireworks Tutorial Creating a Logo Banner

8/3/2019 Adobe Macro Media Fireworks Tutorial Creating a Logo Banner

http://slidepdf.com/reader/full/adobe-macro-media-fireworks-tutorial-creating-a-logo-banner 1/12

A d o b e M a c r o m e d i a F i r e w o r k s T u t o r i a l :C r e a t i n g a L o g o B a n n e r

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 theirbrochures 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

screenshot ).

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

below.



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

shown below:

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 logoto 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

each.

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

below.



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

vertical).

Select the text area in your image and configure the Property Inspector as shown below:

• Arial font,

• size 64,

• a shade of blue

• italic

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

Emboss".

You will note a number of

options appear.

Select "Outer Bevel" asshown 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

Label.

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

easily modified.

Adobe Macro Media Fireworks Tutorial Creating a Logo Banner

Documents

Transcript of Adobe Macro Media Fireworks Tutorial Creating a Logo Banner