Create a Web-page header with a tabbed navigation bar

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.