This chapter is from the book
This chapter is from the book
This chapter is from the book
Optimizing the Navigation Bar
At this point you’ve optimized the logo slice, and with some optimization knowledge and experience under your belt, you’re ready to dive into another task: optimizing the navigation bar for the Jade Valley Web site.
- Click the 2-Up Preview View button. Select the Hand tool and drag the original file interface_slices.png (i.e., the left pane
of the Document window) so that the ABOUT US button of the navigation bar is in focus and you can see it in its entirety.
Switch to the Pointer tool in the Tools panel and click the ABOUT US button slice to select it.
There are six navigation buttons, and you’ll need to optimize them one at a time. The good news is that once you find the best optimization setting for the first button, you can reuse that setting for the remaining five buttons.
- With the ABOUT US button slice selected, toggle the Original to Image Preview mode. In the Optimize panel, select GIF Adaptive
256 from the Saved settings drop-down list.
Recall from Lesson 2 that all the navigation buttons contain two states: the Up state (simple text and vector drawing) and the Over state (text, vector drawing, and a digital photo within a vector graphic). The challenge of optimizing these navigation buttons is to find a setting that best translates both the simple vector graphics and the more complex digital images. In this step, you’ll experiment with the GIF Adaptive 256 setting, which results in an estimated 681 bytes (.6 K) file with a 0-second download time using a 56K modem.
To see both states of the button, you need to set Fireworks to preview it, which is why you toggled to Image Preview mode. Mouse over the ABOUT US button and take a look at how this setting affects the lemon image in the Over state.
- Use the Pointer tool to click the ABOUT US button in the right pane. In the Optimize panel, choose JPEG - Better Quality from
the Saved settings drop-down list.
Do not click any other slice, or you will select (and optimize) the wrong slice!
Because the Over state of the button contains a digital image, in this step you’ll choose JPEG - Better Quality as the optimizing setting. This results in an estimated 1.03K file size with a 0-second download time on a 56K modem.
Again, mouse over the ABOUT US button and see how this setting affects the vector circles and the button label below it.
- Use the Zoom drop-down in the lower-right corner of the Document window to raise the resolution to 200% or higher, and review
both panes side by side. Compare the two settings for file size, estimated download time, and visual image quality.
You’re dealing with small graphics, so it’s helpful to zoom in.
- With the Pointer tool, click to select the ABOUT US button in the left pane.
The Optimize panel once again displays the settings for GIF Adaptive 256, which means that you have effectively chosen GIF Adaptive 256 as your final optimization setting.
This setting makes sense because its download time is shorter than that of the JPEG, and yet it looks as good as or better than the JPEG version. While JPEG is generally a better setting for digital images, and the bitmap graphic within the Over state’s circle is very small, using GIF Adaptive 256 doesn’t sacrifice the image quality noticeably. Because the Up state contains only vector circles and text, which compress better as GIF, GIF is ultimately the best choice.
- Click the Original button to return to the image in Authoring mode.
You can apply optimization to slices in Original mode as well, but you can’t preview them. You don’t need to preview the remaining buttons. In Original mode, you can select button slices and their buttons won’t disappear.
- Hold down the Shift key and use the Pointer tool to select the remaining button slices. Change the optimizing setting to GIF
Adaptive 256.
The remaining buttons need to be optimized, but you can be confident that the same setting—GIF Adaptive 256—will work for them.
- Save the file.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
Fireworks saves optimization information as a part of the PNG. In the future, if you want to export or re-export the graphic, it will always be properly optimized.
At this point, you’ve optimized all the slices with content. There are more than a dozen rectangular regions without content on the page that don’t have slices drawn over them. However, for our design to work, Fireworks will create graphics for them as well. Because we haven’t specified otherwise, these slices will use the document default, which is Web Snap 128 (all these slices have only white pixels, so the color palette doesn’t matter much). You can leave these slices alone.