|
 |
Menus with Beauty and Brains 5: Optimizing Slices in Fireworks
|
| |
|
I will start the optimizing discussion with our simple menu from the
previous page, but I want to look at a more complex image to illustrate
using varied file formats for export.
|
| |
|
|
|
The selected slice can be renamed in the Object palette.
|
|
Naming Rollover Images
No matter which method you use to create rollovers in Fireworks, optimization
is done in the same way, slice by slice. It is a good idea to start
by renaming your slices.
Click the Hide/Show slices at the bottom of the toolbox to make your
slices visible, if necessary. With the Pointer tool active, select the
top slice. Open the Object palette. Note that this is the palette where
all link information can be entered for a slice if you are using automatic
HTML generation. We are only using the graphics, though, so are only
interested in using this palette to create our file names.
If you have used automatic rollover generation in the past, you have
probably found that the filenames created by the program can be confusing.
You can specify the file name for each slice in the Object palette.
Click the Auto-Name Slices option to deselect and the default name (derived
from the document name) will be displayed and selected. Simply type
in a name for this slice, in this case "logo." Now, all images
for this slice will have the root name "logo." Fireworks adds
a frame number to help you keep track of the image states. The graphic
from Frame 2, or Over in our sample, will be named "logo_f2"
with the file format extension that we will set in a moment.
I always name my slices. I find the numerical naming is hard to follow
when I am creating the rollovers. Even if you are using the automatic
HTML generation, naming your slices with meaningful names can help your
troubleshooting efforts.
|
| |
|
|
|
Five slices are selected and optimization set in the
Optimize palette. Transparency is a good idea for GIF image files, even
when not necessary.
Optimize settings are saved as "best_ideas"
for future use in this, or any document.
|
|
Optimizing Slices
With your top slice still selected, we will now specify the file format
and quality details. Open the Optimize palette if it is not already
open.
The image at the left shows the final settings for the selected slices.
You can select one slice or many, and apply optimize settings. There
is no reason to have every slice the same as you will see in our next
sample, but please make sure you understand what happens during optimization,
since some settings can change colors, or create a look that will not
blend well across slices. Again, I recommend you visit Graphic
Underworld: Behind the Pretty Pictures
for more information if this subject is not clear.
You can test the result of your optimization by clicking on the Preview
tab at the top of the screen. This will apply the optimize settings
and show you how it will look. You can also use the 2-Up or 4-Up settings
to compare various settings for file size and quality.
I have set these slices images for a transparent background. When you
are using HTML backgrounds as we are here, it is a good idea to use
transparency for GIF image files, even when the color forms a perfect
rectangle. Color shifting is always a possibility, and using transparent
backgrounds will prevent any subtle color differences between the page
background and your images. To set transparency, select Index Transparency
from the drop-down list, and set your Matte color to your background
color. Setting the Matte color provides the correct color for anti-aliasing.
You can also save any settings that you create. Suppose for this project
you will be creating several different menu areas for different pages.
If you save your optimization settings, you can apply that setting to
any slices in any document. Once you have your settings perfected, click
the arrow at the side of the Optimization palette. Select Save Settings
from the menu that appears, and assign a meaningful name to the setting.
To use the saved setting, select a slice, and select the saved file
from the Settings drop-down list.
|
| |
|
|
|
Menu comp with entire image saved as an 8-color GIF
file. This setting is excellent for the text area and fine lines, but
not for the gradient.
The same image saved as a JPG file. The gradient is
great, but the text is fuzzy and the file size large.
The final prepared menu, with rollovers in place. The
individual slices are set to create the most appropriate file type for
optimum quality and file size for each slice.
|
|
Optimizing GIF and JPG Slices in the Same Image
The image at the left shows the benefit to slicing even beyond the ability
to create rollover graphics.
The top image was saved as a GIF file with eight colors – a perfect
setting for the main portion of the image, producing crisp, clean text
and a tiny file size (2k). However, our gradient bar at the top was
destroyed. On the other hand, the second image shows a JPG file, with
a smooth gradient, but fuzzy text and a file that is more than triple
the GIF file size (7k).
By using slices, not only for rollovers, but also to separate the gradient
area from the rest of the image, we can create graphics with high quality
and low file size.  The
sample shown here illustrates the same menu with slicing in place. Note
that the top slice, containing the gradient area, is set to optimize
as a JPG image, and the remaining images are optimized as GIF files.
Fireworks will save the images according to the optimization settings
included in the document for each slice. The final menu result is shown
at the left.
Finally, you are ready to export your images. Carry on to learn about
the little details and a few tricks for creating perfect images to create
your rollovers.
|
| |
|
|
| |
|
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
  
|
 |
|
|
|
