Menus with Beauty and Brains 5 pg 4: Production Graphics with Wendy Peck at webreference.com

		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