How to Create a Professional Website Header in Photoshop

By David Weedmark

Banners are usually thin and wide, such as 900 by 150 pixels.
i Image courtesy of Adobe.

Photoshop CC 2014 is an ideal tool for designing professional images for your website, including banners. When designing your first banner, keep the design simple so the graphic isn't overloaded with too much visual information. If your business has company colors and a company font, you can certainly use those in your banner.

Step 1

Create a new image 900 by 150 pixels.
i Image courtesy of Adobe.

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

Step 2

Add a solid rectangle as a background if desired.
i Image courtesy of Adobe.

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.

Step 3

Gradient Tool presets are available from the Options bar.
i Image courtesy of Adobe.

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.

Step 4

A white Tahoma Bold font set at 48 pt.
i Image courtesy of Adobe.

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.

Step 5

Select the header's file in the Duplicate Layer window's Document menu.
i Image courtesy of Adobe.

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.

Step 6

Resize the image for the banner.
i Image courtesy of Adobe.

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.

Step 7

Select a color from the image using the Color Picker.
i Image courtesy of Adobe.

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

Step 8

Add a gradient rectangle to the banner.
i Image courtesy of Adobe.

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.

Step 9

Reduce the rectangle's opacity to about 50 percent.
i Image courtesy of Adobe.

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.

Step 10

The Emboss style is set at a depth of "225" percent.
i Image courtesy of Adobe.

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.

Step 11

The Satin style with a "Multiply" Blend Mode set at "15" percent Opacity.
i Image courtesy of Adobe.

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

Step 12

A JPEG image with a quality of 77 percent.
i Image courtesy of Adobe.

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.

×