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 11-1. Then press OK:

   • Font Family: Verdana

   • Font Style: Bold

   • Font Size: 30 pt

   • Leading: (Auto)

   • Tracking: –100

     
     Figure 11-1: Defining the San Simeon Software logo

   • 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 11-2.

   
   Figure 11-2: Typing the San Simeon logo

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 11-3.

   
   Figure 11-3: Coloring a portion of your logo

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.

Creating the Navigation Bar Layer

After working on the new logo, let’s now create the navigational menu for the San Simeon Software group. Perform the following:

1. Create a new layer and call it nav bar.

2. Select the Rectangle tool from the toolbox. Draw a rectangle down the left side of the window starting right below the San Simeon logo.

3. Right-click on the rectangle with your mouse. Then select Make Selection from the submenu.

4. Double-click on the foreground color. The Color Picker dialog box displays. Change the RGB to 255, 185, 22 and click OK.

5. Select the Paint Bucket tool from the toolbox. Click within the rectangle. You screen should look like Figure 11-4.

   
   Figure 11-4: Drawing a navigational menu bar

6. Press Ctrl+D to deselect the navigational bar.

At this point, let’s save our work. Save the file as Simeon_ home.psd.

Creating a Watermark Layer

Just because the San Simeon Software group wants a minimalist website doesn’t mean this site has to be boring. Let’s create a watermark effect that will run up and down the navigational bar.

1. Create a new layer called watermark 1.

2. Select the Elliptical Marquee tool from the toolbox. In the options bar, make sure the Feather text box is set to 0 px.

3. With the watermark 1 layer selected, draw an oval, as shown in Figure 11-5.

   
   Figure 11-5: Drawing an oval watermark

4. In the options bar, select the Add to Selection icon. Then, click the Rectangular Marquee tool.

5. Draw a rectangle that does not extend past the right side of the oval. Then, drag your rectangle downward. You’ve created a new watermark shape, as shown in Figure 11-6.

   
   Figure 11-6: Adding to your watermark shape

6. Double-click on the foreground color from the toolbox. The Color Picker dialog box displays. Change the foreground color to white (RGB = 255, 255, 255), then press OK.

7. Choose the Paint Bucket tool from the toolbox. Click within the watermark selection.

8. In the watermark 1 layer, change Opacity to 20%.

9. Press Ctrl+T to transform your watermark. Grab the right side and pull it so it’s flush with the right edge of the navigational bar, as shown in Figure 11-7.

   
   Figure 11-7: Transforming the watermark to fit the navigational bar

10. Press Ctrl+D to deselect the watermark layer.

11. Let’s add a couple more watermarks. Right-click on the water- mark 1 layer and select Duplicate Layer. The Duplicate Layer dialog box displays.

12. Change the name of your duplicate layer to watermark 2, then press OK. Your first watermark layer is duplicated.

13. Select the Move tool from the toolbox. Make sure you are in the watermark 2 layer.

14. Hold down the Shift key, then press the Down Arrow key on your keyboard 10 times. You screen should look like Figure 11-8.

    
    Figure 11-8: Creating a duplicate layer for your watermark

Adding Menus to the Navigational Bar

Now that you’ve developed your navigational bar, let’s add some menus to it. We’ll create the following areas for our navigational menu:

• Products

• Services

• Site Index

Let’s go ahead and create these now.

1. Create a new layer called products menu.

2. Select Window ▶Character. The Character palette displays. Enter the following information, as shown in Figure 11-9.

   • Font Family: Verdana

   • Font Style: Regular

   • Font Size: 14 pt

     
     Figure 11-9: Defining the navigational menu text

   • Leading: 100%

   • Tracking: 0

   • Color: RGB = 255, 255, 255

   • Anti-aliasing Method: Smooth

3. Select the Text tool from the toolbox. Make sure that you are in the products menu layer, then type Products. Your screen should look similar to Figure 11-10.

   
   Figure 11-10: Adding a menu to your navigational bar

4. Right-click on the products menu layer, then select Duplicate Layer. Rename your duplicate layer services.

5. Select the Move tool from the toolbox. Hold your Shift key and press the Down Arrow eight times.

6. Select the Text tool and highlight the text Products (that you just moved down eight times). Type the word Services, as shown in Figure 11-11. Use the Move tool to center your text if necessary.

   
   Figure 11-11: Adding a Services menu to your navigational bar

7. Right-click on the services layer, then select Duplicate Layer. Rename your duplicate layer site index.

8. Select the Move tool from the toolbox. Hold the Shift key and press the Down Arrow 10 times.

9. Select the Text tool and highlight the text Services (that you just moved down 10 times). Type Site Index, as shown in Figure 11-12. Use the Move tool to center your text if necessary.

   
   Figure 11-12: Adding a Site Index menu to your navigational bar

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 11-13.

   
   Figure 11-13: Creating a colored menu section

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 11-14.

   
   Figure 11-14: Adding text to the Company colored menu

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 11-15. Use the Move tool to center your text if necessary.

    
    Figure 11-15: Adding the Solutions text to your Solutions colored menu

Adding Photos to Your Web Page

Everyone likes pictures. Adding a few images of things relevant to the site can help a website appear more inviting. You don’t want to fill your pages with text only. Too much text will scare visitors away.

Since the San Simeon Software group provides network, software, and customer service services, let’s find three images that capture these themes, as shown in Figure 11-16.

Figure 11-16: Selecting images to use in the San Simeon Software website

Note 

You can access the software.jpg and customer service.jpg files from the Chapter 11 folder of the companion files, available at www.wordware.com/files/webdesign.

Once you’ve got these files open, let’s tweak them a bit. Not only is Photoshop a great program in which to create shapes, but it’s also a great program for adding special effects to your images. Let’s explore some of these different effects.

Replacing Traditional Photography Filters

Photoshop can easily reproduce many photography filters — things the pros use to warm or cool pictures to create a more dramatic mood for a photograph. Perform the following to get a taste of Photoshop’s digital photography filters:

1. Select the software.jpg image. This is the image to which we’ll apply a lens filter effect.

2. In the Layers palette, select the Create New Adjustment Layer icon. This icon is the half black and half white circle icon at the bottom of the Layers palette.

3. A submenu displays. Select Photo Filter from this submenu, as shown in Figure 11-17.

   
   Figure 11-17: Selecting the photo filters

4. The Photo Filter dialog box displays. Click and hold on the Filter drop-down field. A list of filters displays. Select Cooling Filter (82), as shown in Figure 11-18.

   
   Figure 11-18: Selecting the Cooling Filter (82) lens filter

5. If you want to make the blue a little more dramatic, move the Density slider to the right. Let’s move it from 25% to about 75%. Then click OK.

6. Go to Image ▶Image Size. Change the Width and Height to 25%, then click OK. You’ve now shrunk your image.

7. Press Ctrl+Shift+E to merge all visible layers. Then, drag it onto the San Simeon Software image, somewhere below the Solutions colored menu.

8. Select the layer this software graphic is on. Change the name of the layer to software, then change the opacity of that layer to 50% (using the Opacity drop-down field on the Layers palette).

   Your image should look like Figure 11-19.

   
   Figure 11-19: Adding a software image to the San Simeon Software website

Dodging and Burning Your Photos

Dodging and burning allows you to tweak the lightness (dodging) and darkness (burning) of images. Unfortunately, the dodging and burning tools available in Photoshop don’t allow much control. Not only do they not allow you to control the dodging and burning easily, but they also screw up your original image data.

There’s a better way to get dodging and burning results with your photos in Photoshop — a method professional designers use. Perform the following:

1. Select the customer service.jpg image. It’s dark at the top of this image and light at the bottom. Let’s use some dodge and burn techniques to fix these areas of our image.

2. In the Layers palette, select the right-facing arrow directly above the Opacity drop-down field. A submenu displays. Select New Layer, as shown in Figure 11-20. The New Layer dialog box displays.

   
   Figure 11-20: Creating a new layer from the Layers palette

   Tip 

   You’ll need to create a new layer using this method rather than clicking on the Create New Layer icon at the bottom of the Layers palette. The Create New Layer icon does not bring up the New Layer dialog box, while this method of selecting from the right-facing arrow does.
   For this technique to work, you’ll need to define some settings in the New Layer dialog box.

3. In the New Layer dialog box, define the following settings:

   • Name: dodge and burn

   • Color: None

   • Mode: Overlay

   • Opacity: 100%

   • Fill with Overlay-neutral color (50% gray): checked

   Your screen should look like Figure 11-21.

   
   Figure 11-21: Defining your new layer

4. Press the OK button. A new layer displays above your background layer and is filled with gray. The Overlay setting, however, allows Photoshop to ignore the color. You’ll see how this all comes into play in a moment.

5. Select the Brush tool from the toolbox (it’s the fourth tool from the top, on the right side of the toolbox).

6. In the options bar, select the down-facing arrow next to the Brush option. A drop-down list displays, filled with the different brushes you can select.

7. Select a soft-edged brush from this brush picker (such as Brush 65, as shown in Figure 11-22). Then, change the Opacity in the options bar to 25%.

   
   Figure 11-22: Selecting a soft-edged brush

8. Change the foreground color in the toolbox to white.

   Tip 

   Want a shortcut for changing your foreground color to white or black? Press the letter D on your keyboard. The foreground color changes to black. To change your foreground color to white, press the letter D and then the letter X.

9. With your Brush tool selected, select the background layer. Then, click and hold to paint over the top part of your image. If the dodge effect isn’t light enough, release your mouse and then click and hold again as you paint over the area. Your image should look something like Figure 11-23.

   
   Figure 11-23: Using a dodge effect to lighten up dark areas

10. Change the foreground color to black. Select the background layer and paint over the keyboard.

    
    Figure 11-24: Using a burn effect to darken light areas

11. Go to Image ▶Image Size. Change the Width and Height to 25%, then click OK. You’ve now shrunk your image.

12. Press Ctrl+Shift+E to merge all visible layers. Then, drag it onto the San Simeon Software image, somewhere below the software image.

13. Select the layer this software graphic is on. Change the name of the layer to customer service. Your image should look like Figure 11-25.

    
    Figure 11-25: Adding a customer service photo to the San Simeon Software website

You’ve done a lot of work up to this point. Let’s save the file again before moving on.

Slicing Your Images in Photoshop

Now that you’ve gotten your images created, let’s slice them in Photoshop, as you first learned to do in Chapter 7. Once you chop your image into slices, you can then pull the pieces into Dream- weaver (or some other web editing program) and add your text.

1. Select the Slice tool from the toolbox. Click and hold to draw your slices. Create the following slices, as displayed in Figure 11-26:

   • Slice 01: Around the SanSimeonSoftware web header

   • Slice 02: Around the green navigation bar on the left side of the image

   • Slice 03: Around the white space in the center of the image

   • Slice 04: Around colored menu selections on the right side of the image

     
     Figure 11-26: Slicing your image in Photoshop

     Note 

     Photoshop automatically appends 01, 02, etc., to the file name if you do not define a name.

2. Select File ▶Save for Web from the menu bar. The Save For Web dialog box displays.

3. In the Save For Web dialog box, change the file format (the first drop-down field on the right side of the screen) to JPEG.

4. Press the Save button. A Save Optimized As dialog box displays. Name your file Simeon_home.html, and change the Save type as text box to HTML and Images. Then, navigate to where you wish to save this file.

Editing Your Web Page in Dreamweaver

Now the fun begins — filling your image with content. ImageReady creates an HTML file you can hand code, or you can simply open your HTML file in your favorite web editing program and add your content just like you would a word processing document.

Although we’ve used Dreamweaver throughout this book for our web editing, you can use various programs, including FrontPage and GoLive. You could even use Notepad if you so wanted. The choice is up to you.

1. Fire up Dreamweaver. Then, open your Simeon_home.html page. Your screen should look like Figure 11-27.

   
   Figure 11-27: Opening the San Simeon web page in Dreamweaver

2. Add various text within your page. Remember to use a sans-serif font like Verdana. Also, a gray font works nicely in breaking up the white space. Add some text — whatever the client wants.