Tutorial Adobe Fireworks CS3

Adobe Fireworks CS3 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 Adobe Fireworks can be used to create a banner.
This tutorial will guide you in creating a company logo banner. Begin by launching Fireworks from the application program menu:
Select Start > Programs > Adobe > Adobe Web Premium CS3 > Fireworks CS3.
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

Adobe Fireworks CS3 Tutorial:
Creating a Logo Banner

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 settings 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.
• 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.

Adobe Fireworks CS3 Tutorial:
Creating a Logo Banner

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. Continue to actually create the company logo banner.

Adobe Fireworks CS3 Tutorial:
Creating a Logo Banner

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. The Property Inspector configures the properties of the text area.

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.

Adobe Fireworks CS3 Tutorial:
Creating a Logo Banner 

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" 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 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:

Adobe Fireworks CS3 Tutorial:
Creating a Logo Banner 

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.

Adobe Fireworks CS3 Tutorial:
Creating a Logo Banner

Opening Existing Files and More....

You saved your company banner logo in two separate files: logo.gif and logo.png. The logo.gif file was optimized to display on a web page. If you open it in Fireworks (Launch Fireworks, select File, select Open and choose your logo.gif) you will find that while you can add objects to it, you cannot directly edit or change the text object "Acme Web Design".
The logo.png file was saved in a file format that DOES allow you to edit objects. Close the logo.gif file and open the logo.png file. Notice that if you double click on the text you can edit and format it however you wish. It is a great idea to save your files in BOTH formats -- in case you need to go back and modify an image.

Creating Buttons with Fireworks

There are a number of methods that you can use to create buttons with Fireworks. One very simple method is to create a new image with the appropriate dimensions and background color. Then add text to it.
The next section will walk you through creating a "Home" button. Close any open images in Fireworks. (Hint: When creating a series of navigation buttons for a website create the one that displays the longest text first!)
Create a new image.
Select File > New. The New Document dialog box appears.
Configure it so that the image is:

• 150 pixels wide
• 50 pixels high
• has a shade of blue for the background color.

Click OK.








Your image canvas will look similar to the one shown below:

Add the text "Home" to the button. (Hint: choose the Text Toolfrom the Tool Menu, refer to earlier pages in this tutorial if needed.)

Your image canvas will look similar to the one shown below:

Use the Export Wizard and save the file on your hard drive or portable storage media as home1.gif.

Sometimes you need two versions of the same button with slightly different text colors. The easiest way to do this is to create the second button right now. Select the text, change the color, and use the Export Wizard to create the second button. Call it home2.gif.

To prepare for future modifications (you never know when your clients or project manager will change their mind), save the file as home.png to allow for easy maintenance.

Samples of home1.gif and home2.gif are shown below:

    

If you are thinking, "There really is a lot to learn about using graphics applications." -- you are correct.

Consider taking a graphics course sometime in the future. Some technical web developers outsource their graphic work to graphic specialists.

Large-scale web projects usually have at least one graphic designer on the team. This allows the developers to concentrate on the HTML and scripting.