• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 3. Exporting a Site Design > Optimizing the Navigation Bar

Optimizing the Navigation Bar

At this point you have optimized the logo slice, and with some optimization knowledge and experience under your belt, you are ready to dive into another task—optimizing the navigation bar for the Jade Valley Web site.

Click the 2-Up Preview View button. Choose 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 its entirety. Switch to the Pointer tool in the Tools panel and click the ABOUT US button slice to select it.

There are a total of six navigation buttons, and you will need to optimize them one at a time. The good news is once you find the best optimization setting for the first button, you can reuse it for the remaining five buttons.

With the ABOUT US button slice selected, toggle the Original to Export 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 digital images. In this step, you experimented 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 Export Preview mode. Mouse over the ABOUT US button and take a look at how this setting impacts 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!

Since the Over state of the button contains a digital image, in this step, chose 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 impacts 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 in file size, estimated download time, and visual image quality.

Since you are dealing with small graphics, it is 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 we have effectively chosen GIF Adaptive 256 as our final optimization setting.

This setting makes sense because its download time is lower than that of the JPEG, and yet it looks as good as or better than the JPEG version. While JPEG in general is 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. Since the Up state contains only vector circles and text, which compress better as GIF, GIF ultimately is the best choice.

Return to the image in Authoring mode by clicking the Original button.

We can apply optimization to slices in Original mode as well, but we can't preview them. We don't need to preview the remaining buttons. In Original mode, we can be sure that we 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 we can be confident that the same setting—GIF Adaptive 256—will work for them.

Save the file.

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 have optimized all of 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. Since we are not specifying otherwise, these slices will use the document default, which is Web Snap 128 and all of these slices have only white pixels so the color palette doesn't matter much. We can leave these slices alone.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint