Adding a Steel Plate Graphic to Your Web Page

Let’s take a look at another steel texture you can create. We’ll add a brushed steel plate to this page — a graphical element that will help the Jackson Steel Company stand out. Try the following:

1. 
   
   Create a new layer called Steel Plate.
2. 
   
   Select the Rectangle tool from the toolbox (this is available from the Vector Shape tools).
3. 
   
   Make sure you’re in the Steel Plate layer. Then, hold the Shift key and draw a square somewhere in the transparent area of your image window.
4. 
   
   Double-click the Foreground Color icon in the toolbox. The Color Picker dialog box displays. Change the RGB to 118, 118, 118, and click OK.
5. 
   
   Select the Paint Bucket tool. Click within your shape. The square turns a dark gray.
6. 
   
   Press Ctrl+T (or select Edit ▶Free Transform from the menu bar). Rotate your steel plate to the left. Then place it at the lower side of your navigation bar, as shown in figure below.
   
   
   
7. 
   
   Press Enter. Now, let’s add some metallic effects to this plate.
8. 
   
   Select Filter ▶Noise ▶Add Noise from the menu bar. The Add Noise dialog box displays.
9. 
   
   Define the following in the Add Noise dialog box, as shown in figure below:
   • 
     
     Amount: 50%
   • 
     
     Distribution: Gaussian
   • 
     
     Monochromatic: checked
      
     
10. 
    
    Select Filter ▶Blur ▶Motion Blur from the menu bar. The Motion Blur dialog box displays.
11. 
    
    In the Motion Blur dialog box, set the Angle to 0° and the Distance to 20 pixels, as shown in figure below.
    
    
    
12. 
    
    Click OK. Let’s run the motion blur one more time to get a smoother texture. Select Filter ▶Blur ▶Motion Blur from the menu bar. The Motion Blur dialog box displays again.
13. 
    
    Right-click in the steel plate layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.
14. 
    
    Check the Drop Shadow, Bevel and Emboss, and Contour check boxes.
15. 
    
    Click OK. Your screen should look like figure below.
    
    
    

Adding Text to your Steel Plate Graphic

Now that you’ve created a steel plate graphic, let’s add some text. Try the following:

1. 
   
   Create a new layer. Call this new layer plate text.
2. 
   
   Change the foreground color to black (RGB = 0, 0, 0). Then, select the Text tool.
3. 
   
   Select the Center Text icon from the options bar.
4. 
   
   Type Forged in Steel over the steel plate.
5. 
   
   Press Ctrl+T. Rotate your text to the left, so it is parallel with the steel plate graphic, as shown in figure below.
   
   
   
6. 
   
   Let’s add a metallic look to this text. Right-click on the plate text layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.
7. 
   
   Select the Styles option. Select the right-facing arrow. A submenu displays.
8. 
   
   Select the Text Effects style. In this style set, select the Frosted Glass style.
9. 
   
   Check the Color Overlay check box in the Blending Options area. Left-click once on the Color Overlay item. Additional options for the color overlay display in the right side of the Layer Style dialog box.
10. 
    
    Double-click the color box (next to the Blend Mode drop-down field). The Color Picker dialog box displays. Change the RGB to 255, 255, 255.
11. 
    
    Click OK in the Color Picker dialog box. Click OK in 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