Creating Colored Menu Sections

In addition to the key menus available from the navigational bar, let’s add menus on the right side of the screen. We’ll place the menus on the right side in colored boxes. Try the following:

1. Create a new layer called company.
2. Select the Rectangular Marquee tool. Draw a small rectangle shape.
3. Double-click the foreground color on the toolbar. The Color Picker dialog box displays. Change the RGB to 255, 185, 222 (the San Simeon Software yellow), then click OK.
4. Click the Paint Bucket tool from the toolbar. Then click within the rectangle you just drew. Your screen should look like figure below.
   
   
5. Create a new layer called company text.
6. Use the same text size you used in the navigational bar text. The settings are as follows (available from Window ▶Character):
   • Font Family: Verdana
   • Font Style: Regular
   • Font Size: 14 pt
   • Leading: 100%
   • Tracking: 0
   • Color: RGB = 255, 255, 255
   • Anti-aliasing Method: Smooth
7. Select the Text tool, then type the word Company over the yellow box. Use the Move tool to center this text if necessary. Your screen should look like figure below.
   
   

   
8. 
   
   Right-click on the company layer, then select Duplicate Layer. Rename your duplicate layer solutions.
9. Select the Move tool from the toolbox. Hold the Shift key and press the Down Arrow 10 times.
10. Select the Magic Wand tool. Click this new rectangle you just moved down the page.
11. Double-click the foreground color in the toolbox. The Color Picker dialog box displays. Change the RGB to 249, 147, 150 (this is a nice rose color that complements the San Simeon green you used earlier), then press OK.
12. Select the Paint Bucket tool from the toolbox. Click within the solutions rectangle. The box fills with the rose color.
13. Right-click within the company text layer, then select Duplicate Layer. Rename your duplicate layer solutions text.
14. Select the Move tool from the toolbox. Hold the Shift key and press the Down Arrow 10 times.
15. Select the Text tool and highlight the text Company (that you just moved down 10 times). Type Solutions, as shown in figure below. Use the Move tool to center your text if necessary.
    
    

    

In this tutorial:

1. Designing a Modern Web Page Style
2. The Simeon Software Group
3. Creating the Navigation Bar Layer
4. Creating a Watermark Layer
5. Adding Menus to the Navigational Bar
6. Creating Colored Menu Selections
7. Adding Photos to Your Web Page
8. Editing your Web Page in Dreamweaver 
9. Creating Background Images
10. Silver and Backgrounds