Creating the Navigation Bar

Your next step is to create the navigation bar for the website. This will stretch across the top of the web page that will allow visitors to access other pages in the site.

Launch Photoshop CS2 and create a new document that's 600 pixels wide by 130 pixels high. Set the Resolution to 72dpi and the Color Mode to RGB Color, 8 bit (see Figure 16.4). Now you'll add some elements that have already been created. From your Version Cue project, open the image of the empty beach. The image should already have a fade on the left side, which you created for the Brochure project. Select the Move tool and drag the image of the beach into the empty window that you created. Bringing the image into your file automatically created a new layer, so double-click on the name of the layer and rename it Image.

Figure 16.4. Creating a new Photoshop file.

For your needs here, this image is too large, so you'll need to scale it down a bit. Press Command+T (Ctrl+T) to bring up the transform bounding box. Instead of trying to eyeball this, you can specify an exact scale size. In the Tool Options bar, click on the Lock icon to constrain the scale and enter 65% for Width (see Figure 16.5). Press Enter on your keyboard to accept the edit. Position the image (using the Move tool) to get a nice view of the horizon and so that the right side of the image butts up to the right side of the document (see Figure 16.6).

Figure 16.5. Scaling the image numerically from the Tool Options bar.

Figure 16.6. The background image scaled and in position.

Let's add a bar across the bottom (where you'll put the buttons). Create a new layer above the Image layer and call it Button Bar. Press the M key to switch to the Rectangular Marquee tool, and choose Fixed Size from the Style pop-up in the Tool Options bar (see Figure 16.7). Specify a Width value of 600 pixels and a Height value of 20 pixels. When you click in the document, you'll see that your selection is automatically constrained to that size. Drag it down so that it rests at the bottom of the file (see Figure 16.8).

Figure 16.7. Choosing the Fixed Size option from the Tool Options bar.

Figure 16.8. Creating your selection.

Press I to select the Eyedropper tool, and click in a dark blue area in the right side of the image to sample a color (see Figure 16.9). Now press Option+Delete (Alt+Delete) to fill your selection with the color you just sampled. As an added touch, set the Button Bar layer to the Multiply blend mode, which gives the bar a unified look with the image (Figure 16.10).

Figure 16.9. Sampling a color from the sky in the background.

Figure 16.10. Setting the button bar to the Multiply blend mode.

Now you'll want to place the logo into your file. Choose File, Place, and from your Version Cue project, choose the Sunflowers Logo. Photoshop sees the PDF inside the Illustrator file and provides a dialog box for how you want to place the content (see Figure 16.11). Choose Bounding Box and click OK. Reduce the logo to 55% using the Tool Options bar and position it on the left side of the image (see Figure 16.12). Press Enter to commit the layer. Notice that Photoshop has placed this file as a smart object, meaning that you can edit it without any loss in detail at a later time if you want (see Figure 16.13).

Figure 16.11. The Place PDF dialog box.

Figure 16.12. The logo in position.

Figure 16.13. The thumbnail icon in the Layers palette indicates that the placed logo is a Smart Object.

Add the Buttons

Now you'll add the text for the buttons. Press the T key to select the Type tool, and click anywhere in the file to create a new text layer. Type the words CONTACT US, style it 14-point Adobe Caslon Pro Bold, and color it white (see Figure 16.14). In the Layers palette, change the Opacity for the text layer to 40%. This gives a dimmed appearance to the text, and you'll create rollovers for it when you're in ImageReady. Position the text (using the Move tool) so that it appears at the far right of the bar (see Figure 16.15).

Figure 16.14. Entering the text for the first button.

Figure 16.15. Positioning the text in the button bar, to the far right.

In the Layers palette, select the CONTACT US text layer and choose Duplicate Layer from the palette menu (see Figure 16.16). Alternatively, you can drag the text layer itself onto the Create New Layer icon to duplicate the layer. Use the Move tool to position the new text to the left, and change the text to read RETREATS. Repeat this step to add three more text layers, reading VACATIONS, SPECIALS, and SERVICES (see Figure 16.17).

Figure 16.16. Duplicating a text layer.

Figure 16.17. All the buttons added.

Save your image as a native Photoshop (.PSD) file into your Version Cue project, but do something a little different this time. Instead of saving it into your regular project folder, navigate to your project's Web-Data\SmartObjects folder (see Figure 16.18). GoLive created this folder in your project when you created your site file at the beginning of this chapter. As you'll see later, this will make it easier for you to use this file in GoLive.

Figure 16.18. Saving your file in your project's SmartObjects folder.

Add Rollovers

With the navigation file still open in Photoshop, click on the Edit in ImageReady button (see Figure 16.19), which launches ImageReady (if it isn't already open) and opens the navigation bar file. Because you had a smart object in your file, ImageReady alerts you that the smart object will no longer be editable after you save the file from ImageReady. You don't have much of a choice in the matter because you need ImageReady to create the rollovers, so click OK.

Figure 16.19. Using the Edit in ImageReady feature.

Before you can add any rollovers, you'll need to create slices. Using the Slice tool, draw slices so that each button is a separate slice (see Figure 16.20). It's also a good idea to create a slice for the logo.

Figure 16.20. Specifying web slices with the Slice tool.

Switch to the Slice Select tool and click on the slice for the SERVICES button. Open the Web Content palette; you'll notice that the slice that you selected is now highlighted. Click on the Create Rollover State button at the bottom of the palette to create an "over" state (see Figure 16.21).

Figure 16.21. Adding a roll over state to the selected slice.

Now change the Opacity level for the SERVICES text layer back to 100% in the Layers palette (see Figure 16.22). This causes the word SERVICES to appear to "light up" when you move your mouse over the word.

Figure 16.22. Changing the Opacity level of the SERVICES layer for the rollover.

Select the SPECIALS slice and create a rollover state for that slice as well. Then change the Opacity level of the SPECIALS text layer (remember to first select it in the Layers palette). Repeat the process until all the text buttons have rollovers applied to them.

By the Way

If you know the URL links ahead of time, you can specify them here in ImageReady. Otherwise, you can also specify them later in the workflow, when you're in GoLive. Because you're designing a single page in this project, you won't specify URL links for the button slices. Likewise, you don't need to specify optimization settings because you can do that later in GoLive.

Choose File, Save, and then click the Edit in Photoshop button at the bottom of the toolbox to open this file back in Photoshop. You're doing this extra step because you're going to check a new version of this file into Version Cue, and there's no way to do that directly from ImageReady.

Save a Version

Now that you're back in Photoshop, choose File, Save a Version, and enter a comment stating that you've added rollovers to the navigation bar.

You're going to need another image for the web page, so while you're still here in Photoshop, open the image of the couples walking along the beach and save that file as a native Photoshop document (.PSD) into your project's Web-Data\SmartObjects folder.

You're done with both Photoshop and ImageReady for now, so you can quit both of those applications.