How to Create a Web site Header

Sample website header

Because the header is the first thing a user sees when browsing your website, it must reflect your site's style and content. A title is also helpful to remind users of what they are seeing. For example, if your site is about traditional travel, the header can include an antique map, as well as the conservatively styled title "Classic Traveler."

Things You'll Need

• Image program such as Photoshop
• Header picture
• Web design program

Instructions

Creating the image

1. Using your image program, open a new file to the dimensions of the header at 72 dots per inch (DPI). This is the DPI to use for web images. This example uses Photoshop to create a "Header" window that is 750 pixels wide by 150 pixels high.

2. 

   Open the picture to use as the background image.

3. Press the "Ctrl" and "A" keys to select all of the image.

4. Press the "Ctrl" and "C" keys to copy the image.

5. Activate the header window by clicking on it. Paste the copied image by pressing the "Ctrl" and "V" keys.

6. 

   Adjust the image as needed to fit within the header. This example enlarges the image by 125 percent and centers it in the "Header" window.

Creating the title

1. 

   Add text to the header as needed by clicking on the "Text" tool and then clicking in the center of the image. Type the new text. This example uses "Classic Traveler."

2. 

   Adjust the text font and color as needed to match the style of your website. This example selects the text and then applies a bold Bookman Old Style font at 84 points with a "darker red orange" color (Red: 123, Green: 46, Blue: 0).

3. 

   Apply special effects to the text as needed. This example applies a "White" drop shadow with a 5 distance, 7 spread, 6 size, 75 percent opacity, and 120-degree angle.

Saving for the web

1. Transform the file to a format usable on the web, such as JPG. For this example, click on the "File" menu and then the "Save for Web" option to display the "Save for Web" dialog box.

2. Adjust the file format size for quick loading. This example uses a quality of 60 to reduce the file size to 60K.

3. Save the formatted file. In this case, click the "Save" button and then enter a file name of "TravelHeader" in the "Save Optimized As" dialog box. Click the "OK" button to save the web header in JPG format.

4. Save the source file in case you want to change the header in future. This example saves the Photshop source as "Header.PSD."

5. Open your website with a web design program ,and import the formatted file as the header graphic. In this case, "TravelHeader.JPG" becomes the header.

References

• Video tutorial for website headers
• Written tutorial for website headers