The Navigation BarTitle Bar Style

The Navigation Bar/Title Bar Style

A common website style you’ll see businesses use is one that contains a left navigation pane and a top title pane. You may have heard the term “frame” from some of your web design buddies, but when I say pane, I don’t mean frame.

Frames are a method to pull multiple web pages to show at once. You can create web pages that use frames in your web editor (Dreamweaver has some frame templates) or by typing the code in HTML.

Heed this warning: Don’t use frames in your web pages. At best, they look amateurish. At worst, they can cause parts of your web page to not display.

Splitting web pages into frames causes a multitude of problems. You can’t bookmark or easily print framed pages. And if a user enters your site without going through the main page, the frames don’t appear at all.

Rather than have the navigation pane and title panes as web pages (which is what many frames do), we just make them images.

Creating a Metallic Navigation Bar

Since this site is for a steel company, let’s create some metallic imagery for your web page.

Let’s start creating the navigation bar, title bar, and contents area for Mr. Jackson III. Perform the following steps:

1. Fire up Photoshop. Go to File ▶New in the menu bar. Define the following:

   • Width: 775

   • Height: 420

   • Resolution: 72

   • Color Mode: RGB Color

   • Background Contents: Transparent

2. Click OK. The image window displays.

3. Rename Layer 1 as nav bar.

4. Select the Rectangle tool (available from the Vector Shapes tools in the toolbox).

5. Make sure you’ve selected the Shapes Layer icon in the options bar.

6. Double-click the Color icon in the options bar. The Color Picker dialog box displays.

7. In the Color Picker dialog box, change the RGB color to 170, 170, 170 (a shade of gray). Then click OK.

8. Draw a rectangle shape toward the right side of your image window. Extend the right side of the rectangle to about 200 pixels, as shown in Figure 10-1.

   
   Figure 10-1: Creating a navigation bar

9. Right-click on a line of the shape. A submenu displays. Select Make Selection from the submenu. The Make Selection dialog box displays.

   Tip 

   You must select a line that’s within the image window to access the submenu.

10. In the Make Selection dialog box, define the following (as shown in Figure 10-2):

    
    Figure 10-2: Defining your selection

    • Feather Radius: 0 pixels

    • Anti-aliased: checked

    • New Selection: selected

11. Click OK. This selection becomes a shape.

12. Right-click on the nav bar layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.

13. Check the Drop Shadow check box in the Layer Style dialog box.

14. Check the Bevel and Emboss and Contour check boxes in the Layer Style dialog box. Then, left-click once on the Bevel and Emboss option. Details associated with this option display on the right side of the Layer Style dialog box.

15. Define the following in the Bevel and Emboss Structure and Shading areas, as shown in Figure 10-3:

    
    Figure 10-3: Defining the bevel and emboss options to create a metallic effect

    • Style: Inner Bevel

    • Technique: Smooth

    • Depth: 100%

    • Direction: Up

    • Size: 5 px

    • Soften: 0 px

    • Angle: 120º

    • Use Global Light: checked

    • Gloss Contour: Ring

    • Anti-aliased: not checked

    • Highlight Mode: Screen

    • Opacity: 75%

    • Shadow Mode: Multiply

    • Opacity: 75%

      Note 

      When you select Contour, most of the previous settings become defined by default. Perhaps the only setting you will need to make is to change the Gloss Contour setting to Ring.

16. Check the Gradient Overlay check box at the left of the Layer Style dialog box. Left-click once in the Gradient Over- lay check box. The Gradient Overlay detail displays in the right side of the Layer Style dialog box.

17. Define the following Gradient Overlay settings, as shown in Figure 10-4.

    
    Figure 10-4: Defining a metallic gradient overlay

    • Blend Mode: Overlay

    • Opacity: 75%

    • Style: Linear

    • Angle: 90º

    • Scale: 100%

18. Double-click the Gradient drop-down field (in the Gradient Overlay details). The Gradient Editor dialog box displays.

19. In the Gradient Editor dialog box, click on the black arrow below the gradient bar. Then click somewhere underneath and toward the middle of the gradient bar. A black arrow displays, as shown in Figure 10-5.

    
    Figure 10-5: Adding a black gradient arrow to the gradient bar

20. Select the white arrow located at the bottom right of the gradient bar. Create an alternating black-white-black-white pattern by clicking below the gradient bar, as shown in Figure 10-6.

    
    Figure 10-6: Creating an alternating black-white gradient

21. Click OK on the Gradient Editor dialog box, and on the Layer Style dialog box. Your screen should look like Figure 10-7.

    
    Figure 10-7: Creating a navigation bar with a metallic gradient

Creating a Logo

Not all logos have to be fancy, graphical images. Sometimes, applying different styles to the company name is enough. The group at Jackson Steel Company isn’t too receptive to flowery, graphical images filling their site. Let’s just play it safe and make a logo using text only.

1. In the same image, create a new layer. Call this new layer logo.

2. Double-click the foreground color. The Color Picker dialog box displays. Define your RGB as 0, 0, 0. Then click OK.

3. Select Window ▶Character from the menu bar. The Character palette displays.

4. Define the following in the Character palette, as shown in Figure 10-8:

   • Font Family: Impact

   • Font Size: 24 pt

   • Leading: (Auto)

   • Tracking: 25

   • Vertically Scale: 100%

   • Horizontally Scale: 100%

   • Baseline Shift: 0 pt

   • Color: RGB = 0, 0, 05. In the options bar, select the Right align text icon.

     
     Figure 10-8: Defining the Jackson Steel Company logo

5. Make sure you’re in the logo layer. Then, type Jackson Steel Company at the top of the navigation bar. Your screen should look similar to Figure 10-9.

   
   Figure 10-9: Creating the Jackson Steel Company logo

6. Right-click on the logo layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.

7. Select the Styles option and then select the right-facing arrow. A submenu displays. Select the Text Effects 2 style, as shown in Figure 10-10.

   
   Figure 10-10: Selecting the Text Effects 2 style

   Note 

   A message box displays, asking if you wish to replace the current style with the Text Effects 2 style. Press OK to accept this new style.

8. Select the Dented Thin Aluminum style from the Text Effects 2 options, then click OK. Your screen should look like Figure 10-11.

   
   Figure 10-11: Creating a metallic logo

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 10-12.

   
   Figure 10-12: Creating a steel plate graphic

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 10-13:

   • Amount: 50%

   • Distribution: Gaussian

   • Monochromatic: checked

     
     Figure 10-13: Adding noise to your steel plate graphic

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

    
    Figure 10-14: Defining a motion blur

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 10-15.

    
    Figure 10-15: Adding effects to your steel plate graphic

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 10-16.

   
   Figure 10-16: Adding text to the steel plate

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 10-17.

    
    Figure 10-17: Finishing your steel plate graphic

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 10-18.

   
   Figure 10-18: Creating a gradient with the Gradient tool

   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 10-19.

   
   Figure 10-19: Filling your contents window with a light gray gradient

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 10-20.

   
   Figure 10-20: Creating a contents window for your website

Creating Slices in Photoshop

Tables are a common technique used in web design today. To control the content of web pages, such as how your text and images display, web designers use tables within their HTML. Table cells allow you to better define how a web page should look. With tables, you can ensure that text and images align correctly through the use of rows and columns.

You’ve already done some design with tables when you used the Slice tool back in Chapter 7. The Slice tool helps you divide your images into workable tables. Before we get started, save your work as Jackson_home.psd.

Let’s continue with our web page design. Perform the following:

1. Select the Slice tool from the toolbox.

2. Click and drag to draw your slices. Create the following slices, as shown in Figure 10-21:

   • Slice 01: Around the navigation bar and steel plate graphic

   • Slice 02: Around the top, which will hold the title of the page

   • Slice 03: Around the contents window area

     
     Figure 10-21: Slicing your image

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

4. 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.

5. Press the Save button. A Save Optimized As dialog box displays. Name your file Jackson_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

Let’s finish your page with some text. We’ll open your HTML file in Dreamweaver and add a title and content to your web page.

1. Fire up Dreamweaver. Open your Jackson_home.html page.

2. Select the navigation bar image and press the Delete key on your keyboard.

3. Press the background folder icon in Dreamweaver (it resides next to the first Bg text field located within the Properties inspector). An explorer window displays, allowing you to navigate to your files.

4. Navigate to the images folder. You’ll find this folder in the same location as the Jackson_home.html file. Photoshop automatically creates an images folder whenever you slice images and save them for the web.

5. Find the image for your navigation bar. Select the image and you’ll find it now fills in the Bg text field.

6. Repeat steps 2 through 5, deleting and then selecting the appropriate images for the contents window graphic and the About Jackson Steel graphic. Setting your images in the Bg text field allows you to type text over them, which is useful when adding content to your web pages.

   
   Figure 10-22: Opening the Jackson Steel web page in Dreamweaver

7. Select Insert ▶Table from the menu bar in Dreamweaver. The Table dialog box displays.

8. Define the following, as shown in Figure 10-23.

   • Rows: 1

   • Columns: 2

   • Border thickness: 0

   • Cell padding: 0

   • Cell spacing: 0

     
     Figure 10-23: Defining a table inDreamweaver

   Defining a table in this manner allows you to align your text in straight columns and rows. You won’t see the table at all with the thickness, padding, and spacing set to 0.

9. Create a similar table over the navigation bar. You can set the horizontal and vertical alignment at the bottom of the screen (where you set the background information). Use your mouse to click and drag the sizes of your table.

   After performing these tasks, your tables should look something like Figure 10-24.

   
   Figure 10-24: Setting up tables (without borders) for your web page content

Add various text within your page. You might want to delete the About Jackson Steel graphic and type in a title using Dream- weaver. I’ve done just that in Figure 10-24 using a Bold Verdana font.

A text title will allow you to easily use this page over and over again to create new pages for this website. Say you want to add a Contacts page.

Just save this web page with a different file name in Dreamweaver (perhaps changing it to Jackson_contacts.html). Then, all you have to do is change the text title to Contacts and you’re ready to go. This beats having to create a new text graphic in Photoshop every time you need to create a new web page.

Figure 10-25 shows the final result of your web page. It’s ready now to save and launch on the World Wide Web.

Figure 10-25: Viewing the Jackson Steel web page in a web browser