Building a Navigation Bar

Add a set of matching buttons to a navigation bar.

1.	Switch to ImageReady This navigation bar image was made in Photoshop to take advantage of Photoshop's wide range of image-editing features. You could continue to use Photoshop to add buttons to this bar, but we recommend you switch to ImageReady for that purpose to make use of ImageReady's exclusive object-oriented tools (the Tab Rectangle tool, Smart Guides, multiple layer selection, layer groups, Move tool variations, and more). INSIGHT Photoshop or ImageReady? ImageReady is a companion program to Photoshop, designed specifically for making graphics for the Web. The two programs look very similar and have many of the same tools and commands. This can cause confusion about which program to use when. We recommend using Photoshop for correcting and retouching photographs, making Web page layouts, and enhancing images. Use ImageReady for buttons, rollovers, animations, and image maps. As you work through the projects in this book, you'll see examples of which program to use for specific purposes. With the file open in Photoshop, click the Edit in ImageReady button at the bottom of the Photoshop toolbox. ImageReady launches, and the open file is automatically moved to ImageReady. You'll work in ImageReady for the rest of this project.
2.	Create a Button Shape Start by creating one tab-shaped button. Select the Tab Rectangle tool in the ImageReady toolbox A. In the Options bar, make sure the Shape Layer icon is selected B. Set the button's size by checking Fixed Size and entering Width: 106 px and Height: 24 px C. Set the button's style by clicking the arrow on the Style field and choosing 01_button_style D. If this style doesn't appear, load the HTWWeb Presets as explained in the Introduction, or just choose a different style. Select the Background layer in the Layers palette. Then click in the image to create a button on a new shape layer E. Give the layer a meaningful name by double-clicking Layer 1 and typing button 1 in its place F. TIP Turn Off Border. You can hide the blue border that appears around your new button by choosing View>Show>Layer Edges.
3.	Flip and Move the Button Now you'll turn the button upside down and hang it from the navigation bar. Select the Move Tool in the toolbox A, and make sure the Layer Select tool is highlighted in the Options bar B. This variation of the Move tool automatically selects the layer or layer group that contains the object you click on in the image. Click on the button you just made to automatically select the button 1 layer. Choose Edit>Transform>Flip Vertical to invert the button. Click and drag the button into position under the navigation bar's overhang C. Add Button Text Select the Type tool in the ImageReady toolbox. In the Options bar, set Font Family to Arial Narrow or a similar font A, set Font Size to around 14 px B, and set Font Color to black C. Click on the button in the image and type home. This creates a new home type layer above the button 1 layer. Don't worry about where the text is positioned on the button for now. Make a Layer Group With the home type layer selected, hold the Shift key and click the button 1 layer in the Layers palette, so that both layers are selected A. Then choose Layer>Group Layers from the main menu bar. This gathers the two layers into a layer group labeled Group 1 B. Now that the button and text are grouped, it will be easy to duplicate them as a unit. Make Duplicate Buttons Duplicate button 1 along with its text by Control/right-clicking Group 1 in the Layers palette and choosing Duplicate Layer Group from the menu that appears A. You won't see the duplicate button in the image yet because it is located directly on top of the original button. TIP Selecting Multiple Layers. You can select more than one layer at a time–but only in ImageReady, not Photoshop. To select multiple layers, Shift-click if the layers are next to one another in the Layers palette; Command/Ctrl-click if they are not. Select the Move tool, and make sure its Layer Select tool variation is highlighted in the Options bar. Click on the button in the image and drag to the right to move the duplicate button and its text B. Notice the light blue lines that appear and disappear as you move the button C. These are Smart Guides–temporary alignment guides that display automatically when you move an object. Use them to align the buttons horizontally as you drag. Release the mouse when a vertical Smart Guide appears in between the two buttons, indicating that they are no longer overlapping. INSIGHT Layer Groups vs. Layer Sets. ImageReady layer groups are similar to layer sets, but more useful for working with objects, because of the way layer groups react to the Move tool variations–the Layer Select tool and the Direct Select tool. If an object is on a layer that's included in a layer group, clicking on the object with the Layer Select tool selects the entire layer group, while clicking with the Direct Select tool selects only the layer. If an object is on a layer that's in a layer set, both tools select the layer, but not its set. Repeat this step five more times until you have a total of seven layer groups and seven buttons, all displaying the label home D. Change the Button Text Select the Type tool and click and drag to highlight the word home on the second button from the left. Type the word Info instead. Repeat this step on each button, renaming the next five buttons: tours, stories, pictures, booking, and links. Edit Multiple Layers at Once You can save time by editing multiple layers together. Command/Ctrl-click on each of the seven type layers in the Layers palette to select them all A. Open the Character palette (Window>Character). With the Type tool selected, click the All Caps icon in the Character palette to make all the button labels uppercase.    CAUTION Selecting a Type Layer. You must click directly on the word home to select the corresponding type layer so you replace that text. Otherwise you'll create a new type layer. If that happens, use the History palette to back up and try again.
9.	Align Text to Buttons Now align each text label to its button. Start with the home button. Shift-click the home type layer and the button 1 layer to select them both in the Layers palette A. Select the Move tool in the Options bar. Click the Align Layer Horizontal Centers button to move the text to the horizontal center of the button B. Then click the Align Layer Vertical Centers button to move the text to the vertical center of the button C. Repeat this step on each of the six remaining pairs of button and text.

Congratulations! You've created a navigation bar of matching buttons and text with a minimum of fuss. The file is still in PSD (Photoshop Document format), which is a good format in which to save the source file because it retains program features like layers. However, this image is not ready to upload to the Web, because Web browsers cannot display a PSD file. The file must first be converted to a Web-ready format, like JPEG or GIF, as you learn to do in the next project.
 
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