|
 |
Menus with Beauty and Brains 5: Creating Slices and Rollover Graphics
|
|
New design for a menu in its final form. No slicing
has been done.
Guidelines show where the slices will be applied. Lines
and background will be completed in the HTML page with background and
table background tags, with small GIF files used to create lines, or
set the size for table rows.
|
|
The first step to prepare your graphics to export as rollover images,
is to decide where you will slice the image. I spend some time at this
stage, because I want to leave behind as much of the image as I can.
Remember, I advocate using HTML commands for background color as much
as possible. Planning your slices is the most important stage for reaching
that goal.
In the sample at the left, the top image is the proposed final appearance
for the normal state. The second sample includes horizontal guidelines
placed to show where I will be slicing. See how I have started the first
slice just above the title graphic. I can fill in the area above the
graphic by specifying background color, and placing the image at the
bottom of the table cell.
Likewise, I have excluded the red line. Lines can be added with almost
no file weight, by creating a 1 or 2 pixel graphic of the desired color.
This graphic can be placed anywhere in the document, with the image
size specified to create the line size. For liquid design, I use a clear
GIF file with the desired height specified, and background color, even
for fine lines like this one. This method allows me to specify the width
of the line in percentage values. See Menu
Bars for Liquid Design.
No matter how you accomplish the background and design lines in your
final document, plan at this stage to translate them into HTML commands,
rather than including them in images, wherever possible. We may only
be saving a few pixels at a time, but they add up over an entire site.
Your design is also much more flexible when you are creating pages with
elements, rather than simply piecing together a sliced image. With this
in mind, let's move to the slicing.
|
| |
|
|
|
The Layers window showing the Web Layer, which contains
the slice and hotspot information.
|
|
Slicing an Image
When you create a slice in a graphics program, you do not affect the
image you are working on. Fireworks creates a layer called Web Layer
to hold slice and hotspot information. This layer is added automatically
when you create a slice, and is not editable through the Layers window,
though it does appear in the listings as a layer (see left).
It is important to keep the Web Layer separate from the objects in
your mind. When you make a change to an object in your document, the
slice that was associated with that object will not change. Slices are
determined by position within the document, not by any object.
|
| |
|
|
|
Slices are created with the Slice tool only in the
areas you wish to create graphics. As explained earlier, this image
will depend on background color and GIF files for the red line.
|
|
 To
create a slice, you use the Slice tool, shown at the right, highlighted
in yellow. You turn off the Web Layer, or slice visibility, with the
Hide/Show Slices button at the bottom of the toolbox, highlighted in
red. This button does just as it claims, hiding or making the slices
visible. The slices remain on the Web Layer until you change them, whether
or not they are visible.
To work in the way I have been describing, using Fireworks only to
create images, not HTML, you will create slices only for the areas you
wish to save.
With the Slice Tool active, click and drag over the area you require
for your first slice. The boundaries of the slice will be the edges
of the resulting image. Drawing a slice will automatically make the
Web Layer visible and will, if the default remains, display as a semitransparent,
green rectangle. The sample at the left shows the slicing in place for
this image. Note that the last slice in the menu area is selected. The
red lines are created by Fireworks as guides to draw subsequent slices
in a row.
|
| |
|
|
| |
|
Creating a Rollover
Fireworks offers several ways to create a rollover, but I am going to
step you through the manual creation for freedom's sake. Once you can
create the graphics on your own, and take them into a page created with
your favorite editor, you will have no problem following the manual
or online instructions to create a button. Also, I am working from the
premise that you have designed the comp for your page in Fireworks,
and simply need to harvest the graphics from the comp image.
|
| |
|
|
|
Creating a new frame that will be used as the Over
state in our rollovers.
The Over frame is identical to the Normal frame (formerly
Frame 2 and Frame 1 respectively). Changing objects on the Over frame
creates the rollover effect.
|
|
With the slices in place, we are going to create a new frame and design
our "over" image. In most cases, it is best to start from
the identical look as your normal view in order to make sure that your
over and normal image line up properly. It can be very disturbing to
have states of an image off by even one pixel. Perfection is the minimum
standard when creating rollovers.
Creating a new frame is very simple. Activate the Frames window, and
make sure that the Frames palette is active. You should have only Frame
1 showing in this window. Click the side arrow on the Frames palette
and select Duplicate Frame. Select After Current Frame from the popup
that appears and the original frame will be duplicated and appear as
Frame 2.
To make it easier to understand the process, double-click on Frame
1 and rename the frame Normal. Double-click on Frame 2 and rename the
frame Over.
Because you have duplicated the Normal frame to create the Over frame,
both are identical. If you look at the sample at the left, you can see
that the new frame, now Over, is active, yet the image is the same as
the original image seen at the very top of this page. Fireworks will
include images on both the Normal and the Over frame when we export
the images. All that remains is to change the Over frame objects to
the required effect.
|
| |
|
|
 |
|
After all the preparation, creating the the rollover effect is anticlimactic.
Simply activate the Over frame and change the elements in the image
that you wish to create a rollover state for. Usually, we are simply
changing the color of text, or adding or removing an effect.
For this sample, I changed the menu text from a light gray to orange.
The first illustration at the left shows the Normal frame active with
the original text color. The lower image shows the Over frame as active,
and the orange text visible. Note that I have left the menu dividing
bars in the original color. Although we have a few more steps, I have
included the completed menu below so you can compare the graphic steps
to the final result. I have created this menu in a table, with background
color providing the decorative elements.
|
| |
|
|
| |
|
That's it! Your graphics are created. We still must look at optimizing
your slices, and finally, exporting the graphics.
|
| |
|
|
|
|
|
Next page
Menus with Beauty and Brains 5: Tutorial Index
Fireworks Rollovers
Fireworks Rollover Basics
Creating Slices and Rollover Graphics
Optimizing Slices in Fireworks
Exporting Rollover Images
  
|
|
|
|
|
