Create a Web-page header with a tabbed navigation bar
With the Adobe® ImageReady® CS Tab Rectangle tool and Web Content palette, you don’t need to be a JavaScript wiz to create an interactive header for your Web page. Using the tools you’ve become accustomed to in Adobe Photoshop®, you can place images, style text, and create other design elements for the header. And with ImageReady’s Web Content and Layers palettes, it’s easy to create a navigation bar that changes as the user mouses over or selects a tab. Best of all, when you’re done, you can either place the header directly into Adobe GoLive® or optimize the header for the Web and let ImageReady write the code for you.
1. Create the document.
Open ImageReady, and choose File > New to create a new document. In the New Document dialog box, select Web Page in the Image Size area and White in the Contents of First Layer area. Although a 600 x 500 pixel Web page is larger than needed for your header, starting with this page size allows you to get a sense of how your header and navigation bar fits within a full Web page. You will crop the excess area once you have finished designing the page.
2. Lay out components of the header.
Place into the document any images you want included in the header. Add any other design elements except for the navigation bar. To use tools or apply effects available only in Photoshop, choose File > Edit in Photoshop. When done, return to ImageReady by choosing File > Edit in ImageReady.
3. Draw the first tab for the navigation bar.
First, turn the rulers on using the View > Rulers command, and then drag a guide from the horizontal ruler to where you want the tops of the tabs to align. Make sure that Snap is selected in the View menu. Decide on the size of your tabs; if you’d like 4 tabs, each should be 150 pixels (remember that the page size is 600 pixels wide). Select the Tab Rectangle tool. Then, in the options bar at the top of the work area, make sure that the Shape Layer option is selected. Select Fixed Size and enter values for Width and Height, adjust the corner radius if desired, and set the color for the tab. To create the first tab, click the guide you placed for the tabs. Because you selected Fixed Size, ImageReady draws the tab for you using the dimensions you specified in the options bar. If necessary, use the Move tool or arrow keys to reposition the tab.
When you create the tab, a new layer is added to the Layers palette. Double-click its name and type a descriptive name for the tab. To achieve the look you want, apply layer styles by clicking the Layer Style button at the bottom of the Layers palette.
4. Add text to the navigation tab.
In the Character palette, set the font attributes and color for the tab’s text. Using the Text tool, type the text in the middle of the tab, and then apply layer styles as desired. Select the Move tool (make sure that the Layer Move tool icon is selected in the options bar), and drag the text to the location you want within the tab. If Snap is selected in the View menu, the Smart Guides appear as you near the center or edges of the tab.
