Creating a Contents Area

Now that you’ve created your navigation area, we need some content for the page. Let’s make a rounded rectangle shape to house the informative content for the site.

1. Create a new layer. Call this new layer contents window.
2. Select the Rounded Rectangle tool from the toolbox (this is found in the Vector Shapes tools).
3. Make sure you’re in the contents window layer. Draw a rectangle shape in the transparent area of your image.
4. Right-click on an edge of this shape. A submenu displays. Select Make Selection from the submenu.
5. Double-click the Foreground Color icon in the toolbox. The Color Picker dialog box displays. Change the RGB to 225, 225, 225, then click OK.
6. Select the Gradient tool from the toolbox. Click and drag from the top-left corner of the image to the bottom-right corner. This draws a line that will define the direction of your gradient, as shown in figure below.
   

   Tip

   The first point you click will define where the dark portion of your gradient starts. The last point you click will define where the light portion of your gradient ends.

7. Release your mouse. Your contents window layer should fill with a light gray gradient, as shown in figure below.
   
   
   
8. Right-click on the contents window layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.
9. Check the Drop Shadow and Bevel and Emboss check boxes. Press Ctrl+D to deselect this shape. Then click OK. 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