Slicing and Optimizing a Navigation Bar

1.	Slice the Buttons Slicing carves an image into pieces, each of which becomes a separate Web file. It's common to slice buttons so that you can attach a separate page link to each button file. (You could add links using Photoshop's or ImageReady's Slice Options, but linking is easier to do later in a site-building program that "knows" the path to each linked page.) INSIGHT Develop a Slicing Strategy. Slice with a specific purpose in mind so you don't end up with random slices that produce unnecessary files. Valid reasons to slice are: To add discrete links to multiple buttons. To create remote rollovers or a series of rollover buttons. To animate part of an image. To optimize various areas of an image differently. But not to try to accelerate download to viewers' browsers. Lots of small images aren't guaranteed to load faster than one large image. In Photoshop, select one of the button layers in the Layers palette. Choose Layer>New Layer-Based Slice from the menu bar. This creates a tight, rectangular layer-based slice (identifiable by its blue symbol) around the button on that layer, and some surrounding slices called auto slices (identified by gray symbols) to fill in the gaps. Repeat this step on each of the button layers. Layer-based slicing is quick and easy, and creates slices that move with the underlying art—so you can change your design after slicing. But this slicing method works only if each button is alone on a separate layer.
2.	Slice the Graphics You'll use another method to slice the top graphic, isolating it from the green rule so you can optimize these items with different settings. This is a job for the Slice tool, because both of these objects are on the same layer. Select the Slice tool in the toolbox A, and click and drag around the top graphic to create a manually drawn slice called a user slice B. If your slice needs adjusting, click on any of the slice borders and drag. (You can adjust user slices, but not auto or layer-based slices.) An auto slice has appeared around the green rule C. Select that auto slice with the Slice Select tool (behind Photoshop's Slice tool) D and click the Promote to User Slice button in the Options bar E so you can optimize the green rule slice independently of the auto slices. TIP Slices are Rectangular. Slices are always rectangular or square. You can't create a slice that follows the outline of a nonrectangular object.
3.	Name the Slices Give the major slices meaningful names so the files they produce are recognizable later. With the Slice Select tool, click on the Home button slice in the image. Click the Slice Options button in the Options bar A to open the Slice Options palette. Type home_btn in the Name field B and click OK. Repeat for each button slice, giving each a recognizable name. Avoid using spaces or odd characters in slice names. Open the Save for Web Window Choose File>Save for Web to open the Save for Web window–where optimizing is done in Photoshop. Click the 2-Up tab so that you can compare the original image A to a preview of the optimized image B. Click the bottom-right corner of the window and drag to resize so that the original and preview panes are horizontal. Optimize the Top Graphic Slice Apply different optimization settings to individual slices to minimize file size and maximize appearance. Start with the top graphic slice, which is likely to optimize best as JPEG due to its many graduated colors. Choose the Save for Web Slice Select tool A, and click on the top graphic slice in the preview pane B. Choose the following optimization settings (described in the preceding JPEG Optimization Settings) for this slice: Optimized File Format: JPEG. Quality pop-up menu: Medium. Then increase the Quality slider to 50 to reduce the remaining color artifacts. Blur slider: increase slightly to 0.21. Optimized: checked. ICC Profile: unchecked. Progressive: unchecked. The size of this slice is reduced to around 11.63K C. (Your size may vary depending on how you drew your slice.) Optimize the Buttons Link the button slices so any optimization change you make to one affects them all. Select one button slice in the preview pane. Shift-click the other button slices. Click the Optimize menu arrow A and choose Link Slices. Choose the following settings (described in GIF Optimization Settings): Optimized File Format: GIF. Color Reduction Algorithm: Selective. Colors: 32 (seen in the Color Table). Dither Algorithm: No Dither. Lossy: 10. Interlaced: Unchecked. Web-Snap: 0%. Transparency, Matte: Not relevant.     TIP Balance File Size and Appearance. Always choose optimization settings that minimize the file size of a slice, without degrading its appearance too much. This is a balancing act that usually requires compromise. Keep your eye on the file size under the selected preview pane and the appearance of the image in the preview pane. To get a better look at the preview, click the Slice Visibility toggle to hide slices. All the buttons together are just 4.4K.
7.	Optimize the Green Rule Slice It's difficult to predict whether a slice like the green rule will optimize best as GIF or JPEG because it has a significant bevel with graduated tones. The best approach is to try both, selecting the slice in the preview pane A and comparing its appearance and file size as GIF and as JPEG. We settled on: Optimized File Format: GIF. Color Reduction Algorithm: Selective. Colors: 32. Dither Algorithm: No Dither. Lossy: 0. Interlaced: Unchecked. Web-Snap: 0%. TIP Optimize Text as GIF. Text usually looks better when it's optimized as a GIF than as a JPEG. File size is 1.8K-—several times smaller than a comparable-looking JPEG.
8.	Optimize the Auto Slices The auto slices (the blue background slices) are automatically linked for optimization. So optimizing one auto slice will optimize them all, saving you time. Select the large blue slice in the preview pane A and choose: Optimized File Format: GIF. Color Reduction Algorithm: Selective. Colors: 64. Dither Algorithm: No Dither. Lossy: 0. Interlaced: Unchecked. Web-Snap: 0%. The small blue slices on the sides automatically have the same settings B. Click and drag with the Slice Select tool over all the slices in the preview pane to select them all. The total file size of the whole navigation bar is now down to about 22.32K-–a reasonable size for display on a Web page C. Save the Optimized Files Photoshop will save each of the slices in this image as a separate GIF or JPEG, along with an HTML file containing a table to reassemble all the individual images as your navigation bar. Choose HTML and Images from the Format/Save as Type menu to generate the HTML file A. (If you choose Images, Photoshop will save only individual GIFs and JPEGs, which you could take into a site-building program for assembly there.) Leave the Slices menu set to its default—All Slices B, choose a destination, and click Save. On your hard drive, there will now be an HTML file and an Images folder containing all your GIFs and JPEGs. Don't separate the HTML file and the Images folder or the links to the images will break. Open the HTML file in a Web browser to see the results of your hard work. Each slice has become a separate image in a cell of an HTML table that holds all the images in place. Save the Source File Before you close your original PSD file, choose File>Save As to save a copy that preserves your optimization settings and slices. Choose a destination, check Layers to preserve any layers in the file, and click Save. It's best to return to the source file in case you need to make changes to the Web files in the future, rather than try to edit and recompress the optimized files.  INSIGHT Slicing and Optimizing a Web Page Layout. Everything you learned here applies to preparing any large image for the Web. Try using these skills to prepare an entire page layout for the Web, slicing, optimizing, and saving its individual components just as you did here with a navigation bar.

In this tutorial:

1. Creating Stylish, User-Friendly Navigation
2. Critical Skills
3. Rollovers
4. Image Maps 
5. Starting New File for Web 
6. Building Navigation Bar 
7. JPEG Optimization Settings 
8. GIF Optimization Settings
9. Slicing and Optimizing Navigation Bar
10. Slice Options
11. Transparent Buttons 
12. Rollover Navigation 
13. Pointers and Remote Rollovers 
14. Image Map Navigation