How to Create a Professional Website Header in Photoshop

Launch Photoshop. Press "Ctrl-N" or select "New" from the File menu. In the dialogue box, specify the height and width for your banner, such as 900 pixels wide and 150 pixels high. Click "OK."

Select a solid background color for the banner if desired. To do this, click the "Foreground Color" icon in the Toolbar and select a color, then click the "Rectangle Tool" and drag it across the entire banner. In this tutorial, however, we will be overlapping two gradients instead of using a solid background.

Click the "Gradient" tool in the Toolbox. Click the "Fill" menu in the Options bar and select the black and white gradient from the available presets. Click anywhere above the banner in the canvas and drag the cursor below the banner. Release the mouse button to apply the gradient.

Click the "Horizontal Text Tool" in the Toolbox. Drag the cursor over the banner to create a text box. Use the menus in the Options bar to specify a font, font size and color. Drag the text box so that it's centered on the left side of the banner.

Select "Open" from the File menu and select any image on your computer that you want to use for your banner, like a company logo, a picture of yourself or a product you are selling. When the image opens, select "Duplicate" from the Layer menu. Change the destination to your header file, which would be called "Untitled-1" unless you already saved it. Click "OK" to add the image as a new layer to your banner.

Select "Transform" from the Edit menu and then click "Scale." In most cases, the entire image won't be visible on the narrow banner, but its outline is visible after you select "Scale." Drag any corner of the image outline to resize it for your banner. Hold down the "Shift" key while dragging to lock its aspect ratio. Press "Enter." Drag the image so it's on the right side of the banner.

Click the "Foreground Color" icon in the Toolbar to open the Color Picker. Click anywhere on the right side of the banner to match its color in the Color Picker and then click "OK."

Select the "Rectangle Tool" from the Toolbox. Click the "Fill" menu and then select the "Gradient" icon at the top of the menu options. Drag the cursor across the banner from just inside the image's left side all the way to the banner's left edge. The makes a rectangle with a gradient using the color you matched from the picture.

Locate the "Rectangle 1" layer in the Layers panel, which is the layer containing the gradient rectangle you just added. Drag this layer down to make it the third layer from the top -- below "Layer 1" and the layer containing your text. Click the "Opacity" menu at the top of the Layers panel and drag the slider so it's about 50 percent. Making the top gradient semi-transparent lets it merge with the gradient below it, creating a rich background.

Select the layer containing your text in the Layers panel. Click the "Layer" menu, select "Layer Style" and then click "Bevel & Emboss." Make sure the Style menu is set at "Emboss" and drag the "Depth" slider to the left -- around "225" percent -- to add only a bit of this effect to the text.

Click the "Satin" option in the Layer Style window. For this style, use a Blend Mode of "Multiply" and reduce the Opacity to about "15" percent. This combines the satin style with the emboss style. Adjust the settings if desired and click "OK."

Save the image as a Web-optimized banner by selecting "Save for Web" from the File menu. Select "JPEG" from the Format menu and use an Image Quality of between 75 and 80 percent. This creates an image with a small file size, which is quickly loaded by any Web browser, without sacrificing image quality. Click "Save" and select a location to store the file on your computer. After closing Photoshop, add the file to your Web page.