The San Simeon Software Group

In this chapter, you’ll create a modern style web page for San Simeon Software. The group at San Simeon is a serious bunch of software engineers. They want a web presence that suggests as much.

Creating a Modern Logo Layer

Modern logos often use sans-serif fonts (fonts without the fancy curly ends like those of Times New Roman). They also use white space and incorporate some bold color. Perform the following to create a logo for our friends at San Simeon Software:

1. 
   
   Fire up Photoshop. Since you’ve become more familiar with Photoshop, we’ll create all elements of your web page in one file, using multiple layers.
2. 
   
   Go to File ▶New. The New dialog box displays. Enter the following information:
   • 
     
     Width: 775 pixels
   • 
     
     Height: 420 pixels
   • 
     
     Resolution: 72 pixels/inch
   • 
     
     Color Mode: RGB Color 8 bit
   • 
     
     Background Contents: White
3. 
   
   Press OK. A new image window displays.
4. 
   
   Create a new layer. Name this new layer logo.
5. 
   
   Select Window ▶Character from the menu bar. The Character palette displays. Enter the following information, as shown in figure below. Then press OK:
   • 
     
     Font Family: Verdana
   • 
     
     Font Style: Bold
   • 
     
     Font Size: 30 pt
   • 
     
     Leading: (Auto)
   • 
     
     Tracking: –100
      
     
   • 
     
     Color: RGB = 82, 121, 81
   • 
     
     Anti-aliasing Method: Smooth
6. 
   
   Select the Horizontal Text tool from the toolbox. Then type SanSimeonSoftware toward the upper-left side of your blank image.
   Don’t use any spaces. Type all the words together, as shown in figure below.
   
   
   
7. 
   
   Select the Horizontal Text tool and use it to highlight the “Software” portion of your logo.
8. 
   
   Double-click the foreground from the toolbar. The Color Picker dialog box displays. Change the RGB to 255, 185, 22 and press OK. The “Software” portion of your logo changes to yellow, as shown in figure below.
   
   
   

Now that you’ve created your logo, let’s move on to creating the rest of the site.

Tip

A company’s logo will often set the tone for the rest of a website. Thus, when finding the right style for a client’s website, the first place to start is the look and feel of their logo. In this tutorial: Designing a Modern Web Page Style The Simeon Software Group Creating the Navigation Bar Layer Creating a Watermark Layer Adding Menus to the Navigational Bar Creating Colored Menu Selections Adding Photos to Your Web Page Editing your Web Page in Dreamweaver  Creating Background Images Silver and Backgrounds