Creating a Metallic Navigation Bar

Since this site is for a steel company, let’s create some metallic imagery for your web page.

Let’s start creating the navigation bar, title bar, and contents area for Mr. Jackson III. Perform the following steps:

1. Fire up Photoshop. Go to File ▶New in the menu bar. Define the following:
   • Width: 775
   • Height: 420
   • Resolution: 72
   • Color Mode: RGB Color
   • Background Contents: Transparent
2. Click OK. The image window displays.
3. Rename Layer 1 as nav bar.
4. Select the Rectangle tool (available from the Vector Shapes tools in the toolbox).
5. Make sure you’ve selected the Shapes Layer icon in the options bar.
6. Double-click the Color icon in the options bar. The Color Picker dialog box displays.
7. In the Color Picker dialog box, change the RGB color to 170, 170, 170 (a shade of gray). Then click OK.
8. Draw a rectangle shape toward the right side of your image window. Extend the right side of the rectangle to about 200 pixels, as shown in figure below.
   
   
   
9. Right-click on a line of the shape. A submenu displays. Select Make Selection from the submenu. The Make Selection dialog box displays.

   Tip

   You must select a line that’s within the image window to access the submenu.

10. In the Make Selection dialog box, define the following:
    
    
    
    • Feather Radius: 0 pixels
    • Anti-aliased: checked
    • New Selection: selected
11. Click OK. This selection becomes a shape.
12. Right-click on the nav bar layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.
13. Check the Drop Shadow check box in the Layer Style dialog box.
14. Check the Bevel and Emboss and Contour check boxes in the Layer Style dialog box. Then, left-click once on the Bevel and Emboss option. Details associated with this option display on the right side of the Layer Style dialog box.
15. Define the following in the Bevel and Emboss Structure and Shading areas, as shown in figure below:
    
    
    
    
    
    • Style: Inner Bevel
    • Technique: Smooth
    • Depth: 100%
    • Direction: Up
    • Size: 5 px
    • Soften: 0 px
    • Angle: 120º
    • Use Global Light: checked
    • Gloss Contour: Ring
    • Anti-aliased: not checked
    • Highlight Mode: Screen
    • Opacity: 75%
    • Shadow Mode: Multiply
    • Opacity: 75%

      Note

      When you select Contour, most of the previous settings become defined by default. Perhaps the only setting you will need to make is to change the Gloss Contour setting to Ring.

16. Check the Gradient Overlay check box at the left of the Layer Style dialog box. Left-click once in the Gradient Over- lay check box. The Gradient Overlay detail displays in the right side of the Layer Style dialog box.
17. Define the following Gradient Overlay settings, as shown in figure below.
    
    
    
    • Blend Mode: Overlay
    • Opacity: 75%
    • Style: Linear
    • Angle: 90º
    • Scale: 100%
18. Double-click the Gradient drop-down field (in the Gradient Overlay details). The Gradient Editor dialog box displays.
19. In the Gradient Editor dialog box, click on the black arrow below the gradient bar. Then click somewhere underneath and toward the middle of the gradient bar. A black arrow displays, as shown in figure below.
    
    
    
20. Select the white arrow located at the bottom right of the gradient bar. Create an alternating black-white-black-white pattern by clicking below the gradient bar, as shown in figure below.
    
    
    
21. 
    
    Click OK on the Gradient Editor dialog box, and on the Layer Style dialog box. Your screen should look like figure below.
    
    
    

In this tutorial:

1. Creating a Professional Web Page Style
2. The Navigation Bar/Title Bar Style
3. Creating a Metallic Navigation Bar
4. Creating a Logo 
5. Adding a Steel Plate Graphic to your Web 
6. Creating a Contents Area 
7. Creating Slices in Photoshop 
8. Editing your Web Page in Dreamweaver