Create a Web-page header with a tabbed navigation bar
5. Create a layer-based slice.
Open the Web Content palette. Arrange the palettes so that you can see the document window, as well as the Layers palette and Web Content palette. With the tab layer selected in the Layers palette, choose Layer > New Layer Based Slice. (Unlike a slice you draw with the Slice tool, a layer-based slice moves and resizes automatically as you edit or move the layer on which it’s based.) The Web Content palette lists the new layer-based slice. Double-click the slice name and enter a new name so that you can easily identify it later. Notice that ImageReady not only creates the slice for the tab, but divides the remainder of the page into slices as well.
Using the Slice Select Tool, select the slice for the header. Choose Slices > Promote to User Slice. Then, rename the slice so that it will be easier to recognize after generating HTML that contains the header.
Slices define the area triggered by the mouse for rollover states and links. They also let you optimize areas in a page separately so that you can use compression settings appropriate for each area. A sliced page may download more quickly than an unsliced page, and, because it displays slice by slice, it gives users visual feedback while they wait for the entire page to appear.
6. Design the rollover states.
Select the tab’s slice in the Web Content palette and make sure that the correct layers are visible for the normal, unselected state of the tab. Then, click the Create Rollover State button at the bottom of the Web Content palette. ImageReady adds an Over state for the tab. With the new Over state selected in the Web Content palette and either the tab layer or text layer selected in the Layers palette, choose a layer style from the Layer Style menu. This style will apply to the tab or text only when the user mouses over the tab.
Set the style attributes in the Layer Style dialog box. If you want to apply another style for the Over state, select it from the list of styles in the dialog box. (Be sure to click its name, not just the check box, so its options appear.) To preview the states, click the Preview Document button in the toolbox and use the mouse to test the rollover state.
You can define several different rollover states for the tabs in the navigation bar. The most common states are the Over state, which appears when the user moves the mouse over the tab, and the Selected state, which appears when the user clicks the tab. To add other states, repeat this step from the beginning. You can change a state to a different state by choosing Rollover State Options from the Web Content palette menu and selecting the desired state. For example, you can change the Bevel and Emboss layer style to the down mode for the Over state.
7. Duplicate and arrange tabs.
When you are satisfied with the tab and its rollover states, select all the layers of the tab in the Layers palette and group them by choosing Layer > Group Layers. Double-click the group name and rename it to help distinguish it from the other tabs. Duplicate the group by choosing Layer > Duplicate Layer Group. ImageReady duplicates each layer in the group including the layer-based slice, the rollover states, and the layer styles.
Using the Move tool, drag the duplicate tab to its new location. Let the Smart Guides help you snap the tabs to each other and align the bottom edges. Use the Text tool to edit the text layer for the new tab. To more easily identify the new tab and slice, rename the new group and its layers in the Layers palette, as well as the newly created slice in the Web Content palette.
Duplicate, move, and rename the tabs until your navigation bar is complete. Remember to rename each new slice in the Web Content palette as well. While renaming the layers, layer groups, and slices makes it easier to identify the tabs within ImageReady, clearly labeled slices will also help you later when you convert the header into HTML.
8. Group the tabs into a table.
In the Web Content palette, select all the tab slices. Then, click the Group Slice into Table button at the bottom of the Web Content palette. ImageReady adds a table to the Web Content palette, with the tab slices indented beneath it. Double-click the table name and enter a more descriptive label.
When you convert the header into HTML, the navigation bar becomes a nested table within the table containing the header.
9. Finalize the header.
Adjust the placement of all the components in your header. To move the navigation bar as a unit, Shift-click each group in the Layers palette, and then use the Move tool or arrow keys to adjust their position. Use the Move tool alignment buttons on the options bar to align the tabs, if necessary. When your design is complete, use the Crop tool to remove the unused portion of the image. Then, save the header as a standard Photoshop PSD file so that you can revise it later if needed.
If you plan to place this header into Adobe GoLive, your header is ready to go, and you can skip step 10. GoLive not only imports PSD files, it lets you import the file as a Smart Object so that any changes you make to the original are updated automatically.
You can also optimize the header and save it as HTML (described in step 10). How you optimize it depends on the content of the header. Because it is sliced, you can optimize different areas using different settings. For example, if the header contains a continuous tone image, such as a photograph, optimize that area using JPEG compression, and optimize the navigation bar as a GIF.
10. Optimize the header.
Using the Slice Select tool, select all the slices containing the navigation tabs and areas with solid or repetitive color, such as line art and logos. Click the 4-Up tab in the document window, and then open the Optimize palette. Click one of the previews in the document window, and then in the Optimize palette, choose a GIF file format preset from the Preset menu. Try different presets on each preview. Note the file size and download time estimates beneath the previews. Select the preview with the smallest file size, that still meets your standards for quality.
For slices that contain continuous tone images, repeat this same process, but preview the slices using the JPEG presets. When you have selected the desired preview for these slices, choose File > Save Optimized. Then save the file as HTML and Images.
Without writing a single line of code, you have a Web-ready header!
