Fireworks - Creating a Web Page Banner

Fireworks is a software program specifically used for creating and manipulating images for the web. Made by Macromedia, Fireworks incorporates a number of essentiall tools into one easy to use package. Image optimization, animation, javascript, image mapping, and complex table use are now a point and a click away with this powerful program. This module will discuss some of the features of Fireworks by detailing the steps for creating a web page banner. It is recommended that you additionally complete the tutorial included in the Fireworks manual/software, consult the manual built into the Fireworks software under the "Help" menu, and of course explore Fireworks through creating new graphics.

Creating a New Image

- Click on "File" at the top of the screen, drag down and click on "New".

- A window will open allowing you to configure the canvas for the image. Configure these settings:

Height and Width: When creating web graphics, it is good to start with a canvas that is 580 pixels wide and 430 pixels high. 580x430 pixels creates a canvas that simulates a computer screen. By using starting with this size canvas, it is possible to get a clearer sense of how smaller graphics will look on your page as a whole. Any extra space can be cut when the graphic is finished.

Resolution: Resolution size is the number of dots of color per inch in an image. Where the resolution for graphics used for print publication can be as high as 350 pixels per inch, the web only supports 72 pixels per inch. Setting the resolution higher than this for web graphics will not improve the quality of the image, but it will make it much larger and therefore will take longer to load on a page.

Measurements for the Web: We've been throwing around the word "pixels" in talking about the height, width, and resolution of your image. Pixels is the default measurement for the web. Across from the numbers specifying the measurements for height, width, and resolution, there's a place to specify the measurement unit. If this is not set to pixels, click on the arrow next to it and drag down to the pixels setting.

Canvas Color: For this graphic, click the circle for a white background. The "Transparent" setting is for creating transparent Gifs. These are graphics where the canvas is "clear" allowing the background of a web page to show through. Think of a painting on a wall where the picture was solid, but the canvas and frame were clear allowing the wall the picture was hanging on to show around the content of the painting. Fireworks also allows you to select a color for your background, but if you choose anything other than white it is sometimes difficult to match the background color of your image and a web page.

When the settings for your image have been configured, press "OK" and the canvas for the image will appear. The canvas settings can always be changed by going to "Modify" on the top of the page and dragging down to "Canvas Size" or "Canvas Color".

The Canvas and Work Space

Fireworks provides multiple ways of accessing tools and configuring aspects of your image. On the left, a tool bar contains the tools used to create your graphic. Notice some of the tools have black triangles in the corners of their boxes. These triangles indicate that multiple selections are available for that particular tool. Hold down the button for that tool and the multiple selection for that tool will appear. To select an other tool, simply press its box. The color selectors allow you to configure colors for drawing or brushing lines of color (the top color square marked with the brush) or filling in objects with color (the bottom color square marked with the bucket). To select a color, simply click on the triangle next to the color square and select the color you want. The canvas is the space for creating your image. The list of menu commands along the top of the program contain numerous functions for configuring, saving, or manipulating an image. Some of these resemble all computer programs (open, save, exit, ...) other are specific to this program. The best thing to do is to explore each of the menus and try the different commands to see what they do. The floating palettes contain shortcuts to the most frequently used commands as well as displaying the properties of tools and aspects of your image. You can close these floating palettes by clicking on the "X" located in the upper right corner of each palette and re-open the palette by going to Window and dragging down to the palette you wish to use. This module will use many of the palettes, but the best practice is to again click on all the tabs of each palette to see what they contain.

Creating the Banner Background

Before creating our banner background, its always good to decide whether you're going to use separate layers or take advantage of Firework's ability to use separate objects. Layers and objects are both methods of keeping specific elements of your image separated. Lets say for instance we were creating an image of a circle overlapping a square. If we were to compose this using paint and a canvas, we would first paint the square and then paint the circle on top of it. Once these dried, they would be inseparable - both would be part of the other as well as permanently dried to the canvas. This creates problems when in the computer world when re-editing the image. To rectify this, image editors use layers, objects, or a combination of the two to keep elements of an image seperated so that each element can be edited without effecting the rest of the image.

If you've ever used an overhead projector, layers are like the clear transparent sheets laid over the projector or possibly like pieces of tracing paper laid on top of each other. By drawing a square on one sheet, a circle on the other, and laying the sheets over the background, the image looks to be a unified whole even though the square and circle are separate and can be moved and edited separately. In Fireworks, one of the palettes is dedicated to layers. If you don't see it, click on Window and drag down to Layers. You should see two layers on your layer palette - a Web Layer and a layer called Layer 1. Never place anything on the "Web Layer." Click on Layer 1 and place the first element on the page. Each additional element should be placed on its own, separate layer. To create a new layer, click on the triangle located in the upper right corner of the layer palette and drag down to new layer. Give the new layer a name and press OK.

Objects allow separate elements to exist on the same layer. Using our circle and square scenario, objects would be equivalent to cutting out a colored circle and square from cardboard paper and laying those on white background. Together they exist on the same background, yet remain separated to move around or edit. Any number of objects can be placed on the same layer and will remain separated. To select an object on a layer, click the black pointer in the upper left hand corner of the tool bar and click on an object. A blue line will appear around the object allowing you to make changes or move only that particular part of the image.

- We'll start our banner background by selecting the square marquee tool from the tool palette which is the square constructed with a dotted line.

- Place the cursor over the canvas and it should appear as a cross-hairs. Start in the upper left hand corner, hold down the mouse button, and drag diagonally toward the lower right corner. A box will appear of "Marching Ants". This is a motion line which marks the shape you are creating. Create a rectangle appropriate for a banner and let go of your mouse button. If you don't like the rectangle created with the marquee tool, just click on the outside of the rectangle to make the dancing line disappear and create it again.

- Once you form a rectangle you like, it's time to select a color for the banner background. Click on the triangle next to the color square across from the paint bucket. Choose a color for the background of your banner. Once the color for your background is selected, it will remain in the box across from the paint bucket and will be the dominant color.

- Select the paint bucket from the tool bar on the left. This tool allows you to dump color into any object that is defined by a marquee tool. Place the paint bucket over the rectangle and click somewhere inside its boundaries. The rectangle should fill with the color you have selected. Once the color is filled in, click on the Edit menu at the top of the screen and drag down to deselect. This is another method of making the marquee (motion line or marching ants) go away. Click the black arrow in the upper left hand corner of the tool bar, click somewhere on the rectangular, banner background, hold down the mouse button and move the rectangle into the middle of the canvas. Notice when the object is clicked with the arrow, a line appears around it defining the shape as an object. Your canvas should look something like this (the rectangle might be a different color and slightly different size).

Adding Text

- The text editor included in Fireworks works much like a word processor allowing a user to change font face, size, color, and configure spacing anytime during the composing process. To call up the text editor, click the button on the tool bar with the letter A on it. The editor will open. Type in the text for your banner. The text will appear both in the text editor and on the canvas. Don' worry about the position of the text on the canvas, it can be moved after it's applied. After you type in your text, highlight the text in the text editor and configure the size, font face, and color. Once the text is configured press OK. Click the button with the black arrow on it located in the upper left corner of the tool bar. Place the pointer on the text, hold down the mouse button and move the text into the correct position on your banner. If the text doesn't look right or needs to be edited, double click on the text and this will load it in the text editor. After the text is corrected, press OK once again.

Fun with Effects!!

Fireworks has a nice selection of effects that allow you to add depth and artistic effects to elements of an image. We'll first add an inner bevel to the banner text to give it a 3d effect. Click once on the text so the blue object line appears around it. This essentially selects the text so whatever we do is only executed on that part of the image. Once the text is selected, click on the Effect tab located on one of the palettes. If you can't locate it, click on the Window menu and drag down to Effect. Once you have the effect palette in view, click on the arrow located across from "None", drag down to Bevel and Emboss and over to Inner Bevel. When Inner Bevel is selected, Fireworks allows you to configure the amount and kind of bevel. Try some of the different bevels until you find one you like. Notice that the text shows the beveling before it is applied. If the bevel is applied and you're not happy with it, the effects applied are listed on the Effect palette. Click on the effect you want to remove, and click the trash can in the lower right hand corner.

Once the text is beveled, it's time to make the banner look snazzy. Click on the banner background so the blue object line appears around it. This selects the banner background so that anything executed is applied only to that element. Once the banner background is selected, click on the Effect tab, then the arrow across from None, and this time drag down to Shadow and Glow and then to Drop Shadow. Notice that the shadow appears under your banner background. Play with the Drop shadow settings until the shadow is right for your image. Remember - you can always remove the effect by selecting it in the list of applied effects located on the Effect Palette and clicking the trash can in the lower right corner.

Cropping

When starting our image, we created a canvas the was the size of a "whole" computer screen to get a sense of how the banner would look on a web page. Because the banner will only go across the top of the page, we must remove the extra space around the image. To do this we will Crop the extra canvas around the banner. The crop tool is one of the multiple tools located "behind" the square marquee tool. Click on the square marquee tool and hold down the button with your mouse. The other marquee tools will appear to the right of the square marquee tool. The crop tool is the last tool in the list (located after the circle tool). Once that tool is selected, place your mouse just outside the upper left hand corner of the banner. We want to draw a rectangle around our banner leaving just a bit of canvas around its edges. Everything on the outside of the crop selection will be deleted, so be sure none of the image is on the outside of the crop selection. Starting just outside of the upper left hand corner of the banner, hold down the mouse button and drag to just outside the lower right corner of the banner. Once you have a little of the white canvas around the banner and the crop selection is correct, let go of the mouse button. The crop selection will appear on your canvas. If it looks good, press the Enter key and everything outside the crop selection will disappear. You can repeat this step if more needs to be cropped, just be sure not to delete any of the image. The banner should appear something like the image below.

Saving for Fireworks and Optimizing for the Web

The banner is now ready to be saved. It is HIGHLY recommended that you save your work twice - once as a Fireworks file and once as an image format that can be used on the web. Saving as a Fireworks file keeps the objects and layers of an image separated allowing you to come back and edit the image at any time. When an image is saved as a GIF or JPEG for use on a web page, the layers and object are combined into a single graphic. Without the layers and separated objects, images can be difficult to edit.

To Save as Fireworks File:

- Click on File at the top of the screen and drag down to Save As. A window will launch allowing you to choose the location for saving and to name the file.

- Click on the arrow across from Save in: at the top of the window. Choose the location where the file should be saved.

- Type in a one word filename in the box across from File name: Make sure the file name is somewhat descriptive of the file. No extension for the file is needed.

- Make sure Save as type: is Fireworks File Format

- When these are done, press the Save button.

Optimizing and Saving for the Web:

Fireworks allows graphics that are to be used for the web to be optimized before saving. Optimizing allows us to pick the file format and number of colors that produces the best looking image at the smallest file size. This is key since download time and quick loading graphics are critical for a successful web page. To optimize your graphic:

- Select the Preview tab at the top of the canvas. This allows us to preview what the image is going to look like in different formats and at different color settings.

- Click the Optimize tab located on the same palette as Effect.

- You can choose one of the pre-configured settings located in Fireworks, or configure the image yourself. For this graphic, Click on the arrow located across from Settings and choose the GIF WebSnap 128 setting. Look at the image in the preview window and see if the quality was effected. If not, click on the triangle next to 128 and Colors and drag down to a lower number. Keep lowering the number of colors until the quality of the image changes and then select the next highest number. You want might want to experiment and click on the arrow across from GIF and drag down to JPEG to see if the quality is any better at smaller sizes for that format. Notice the size and download size of the image is listed at the top of the preview window. Usually GIF is a better format for images that use large blocks of solid color while JPEG's are good for images that has lots of and slight shifts in color.

- When the optimization settings are configured, it is time to save the banner for the web. Instead of going File to Save As, we'll this time click on File and drag down to Export. This will produce a window similar to the Save As window.

- Click on the triangle across from Save in: and select the location you would like to save the image.

- In the box next to File Name:, give your image a one word file name with the proper extension for the optimization settings selected. If you chose GIF for your file, place .gif after the file name. If JPEG was chosen, place .jpg after the file name. These extensions lets web browsers know what kind of file a web page is using.

- Your image is now ready for the web!!