Transparent Buttons

Place transparent buttons on a Web page without the telltale halo you often see around Web graphics. This project is done in ImageReady.

1.	Delete the Background Layer Start with a PSD file that includes navigation buttons. This file has been sliced and optimized for you. If the slices aren't visible, click the Slice Visibility toggle in ImageReady's toolbox A. Saving the solid gray background slices as GIF files would inflate the total file size of this page. Instead, make these areas transparent to let the Web page background show through. The page background color is created with HTML code, which has less impact on file size than do image files. Choose the Original tab in ImageReady's document window B. In the Layers palette, select the Background layer and drag it to the trash icon C. This creates transparency (represented by a checkerboard pattern) in the source file. Slice the Buttons Click thee Button5 Layer and hold the Shift key while clicking the Button1 in the Layers palette to select all the button layers A. Choose Layer>New Layer Based Slices from the menu bar to create a layer-based slice around each button B. Slices are always rectangular, so each slice encompasses some of the transparent area that surrounds the button. INSIGHT Why Design with Transparency? Transparency can add visual interest to a Web page by giving shape to the graphics. Without transparency all bitmapped graphics look rectangular, like the patterned boxes in this Web page layout.
3.	Optimize the Button Slices Click on the Optimized tab in the document window to view the slices optimized for the Web. With all the button slices still selected (displaying yellow borders) choose Slices>Link Slices for Optimization from the menu bar. Select any button slice A with the Slice Select tool, and choose the following settings in the Optimize palette. (To expand the Optimize palette choose Show Options from the palette side menu B.) Format: GIF. Reduction: Selective. Colors: 8. Web-Snap: 0%. Dither Method: No Dither. Transparency: Make sure Transparency is checked or you won't see transparency around your buttons C. Matte: Leave the Matte field at its default of white temporarily D. Lossy: 0. Interlaced, Use Unified Color Table, and Add Metadata: Unchecked. TIP Optimizing in ImageReady. Optimizing in ImageReady is just like optimizing in Photoshop, except that the features are located in different places. In ImageReady the Slice and Slice Select tools each have a separate spot in the toolbox, the preview pane tabs are in the document window, optimization settings are in the Optimize palette (Window>Optimize), and the Color Table is in its own palette (Window>Color Table or click the Color Table Palette icon in the Optimize palette).
4.	Specify a Page Background Color Now set a color for a Web page background that will show through wherever there is transparency in a slice. Choose File>Output Settings>Background from the menu bar. Make sure that View Document As is set to Image, and the Path field is blank A. Click in the BG Color field B to open the Color Picker. Activate the Only Web Colors checkbox C, click on the darkest Web-safe gray D and click OK. This sets the Web page background color in the HTML file that will be saved with the sliced images. Click OK in the Output Settings dialog box. CAUTION Web-Safe Backgrounds. Earlier we told you not to feel compelled to stick to Web-safe colors when you're making GIFs for the Web. However, when you're specifying a page background color that will be generated by HTML code we suggest you do use a Web-safe color so the color doesn't shift in a browser.
5.	Preview the Buttons with Halos Choose a Web browser from the Preview in Browser button in the toolbox A to preview your sliced images against a gray Web page background in a browser. Notice that there are white pixels along the diagonal edges of each button B. This is not part of the design; it is a halo that takes its color from the default white Matte setting in the Optimize palette. The original file is in PSD format, which allows many levels of transparency. You are previewing the optimized file as a GIF, which allows only one level of transparency-—completely transparent or completely opaque. The semitransparent pixels along the diagonal edges of the buttons have become opaque white, as specified in the Matte setting, creating the unsightly halo. The vertical and horizontal edges are not soft, so they have no halo. (Don't be confused by the white lines around the skyline graphic; they are part of this design.) INSIGHT Soft Edges Become Halos. A transparent GIF will have a halo if the graphic in the original file has soft edges. Soft edges can be created by a selection tool or painting tool that creates anti-aliased edges (edges with graduated levels of opacity), a feather, a blur, or a drop shadow.
6.	Hide the Halo To camouflage the halo against a solid color background, simply set the Matte field in the Optimize palette to the same color as the Web page background. In the Optimize palette, click the Matte field A to open the Color Picker. Make sure Only Web Colors is checked, choose the same gray color you chose for the page background B, and click OK. Click the Preview in Browser button again. This time you won't see the halo around the buttons in your Web browser C. It's still there, but it blends perfectly with the background of the same color. Add a Repeating Patterned Background You can use the same technique to camouflage a halo against some patterned backgrounds. To make a patterned background that is small in file size, take advantage of the tiling nature of an HTML background image. Start with a small patterned GIF file. This simple pattern, magnified here to 1600% so you can see it A, is six pixels wide by six pixels high and has a file size of less than 1K. The pattern file will be downloaded only once to a viewer's Web browser, but will be displayed over and over to fill any size browser window. In the sliced document, choose File>Output Settings>Background. Click the Choose button next to the Path field B to open the Choose Background Image window. Navigate to the pattern file, and click Open C. The path to the pattern file appears in the Output Settings dialog box. Click OK. This identifies the pattern as a background image in the HTML file that will be saved with the slices. TIP Patterned Backgrounds That Hide a Halo. Not all patterned backgrounds do a good job of camouflaging a transparent GIF's halo. Patterns with thin lines and similar colors work best. Thicker patterns with contrasting colors often reveal the halo.
8.	Hide the Halo Against the Pattern Open the background pattern file and click on the lighter gray in the pattern with the Eyedropper tool to set the foreground color. In the Optimize palette, click the Matte field arrow and choose Foreground Color A. Click the Preview in Browser button. The halo blends into the pattern of horizontal stripes created from the repeated pattern file B. Set Slice Options and Save Select each auto slice (those with gray symbols) and set Type to No Image in the Slice palette (Window>Slice) A. Select each button slice and name it in the Slice palette B. Choose File>Save Optimized As, set Format to HTML and Images, and click Save.

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