Make a Website Banner Using Photoshop CS3

Make a Website Banner Using Photoshop CS3

Easy-to-follow instructions on how to make a website banner using Photoshop CS3.

Open Photoshop CS3 and create a new image with a width of 468 pixels, a height of 60 pixels and leave the resolution at 72 DPI.

In the Layers palette, double-click the Background layer and click OK in the dialog box that opens.

Photoshop CS3 - Double-Click Background Layer

Select the Rectangular Marquee tool and make sure the new selection option is enabled.

Photoshop CS3 - Rectangular Marquee Tool

Dragging from bottom-left to top-right, select an area the full width of the banner and 15 pixels high.  You can measure pixels with the rulers on the top and bottom of the screen (top ruler for width; left ruler for height).  There is always a line on the rulers to show you where your cursor is.  If you do not see it at first, move your cursor a little and you will.  For measurement, the long lines represent 10 pixels and the short lines represent 5 pixels.

From the Layers menu at the top of the screen, choose New/Layer via Copy.

Photoshop CS3 - First Rectangular Selection

In the Layers palette, double-click Layer 1.

Photoshop CS3 - Double-Click Layer 1

The Layer Style dialog box will open.  On the left side, place a check beside Stroke.  Then click on Gradient Overlay (not just check, but click on the actual words).

Beside the gradient swatch, click Reverse.

Photoshop CS3 - Reverse Gradient

Click on the Gradient Swatch, then double-click the white slider and choose a light-blue color.  I used #ccffff

Photoshop CS3 - Double-Click the White Gradient

Click Inner Glow on the left, then click the color swatch and choose the same color that you just used above.

Photoshop CS3 - Inner Glow Color Swatch

Click OK in the top-right corner.

Up to this point, your banner should look simular to this:

Photoshop CS3 - Your Banner Should Look Simular to this

In the Layers palette, double-click Layer 0 (what used to be the background).

Click on Gradient Overlay and click OK in the upper-right corner to leave it at default (white to black).

Type whatever you want, but be sure to stay above the red line, in order to keep the 3D dropshadow effect in the bottom section.  To render the text, click the check mark in the upper-right of the work area, or just press the Enter key on your numerical keypad.

Photoshop CS3 - Render Text

In the Layers palette, double-click on the text layer and then click on Gradient Overlay on the left side of the Layer Style dialog box.

Click on the gradient swatch and follow what you see in the image below.

Photoshop CS3 - Text Gradient

#999999, Location 0
#ffffff, Location 11
#ffffff, Location 91
#999999, Location 100

Click OK in the upper-right corner of the dialog box.

Your banner should now look simular to the following.  Just save it and upload it to your server for online use!

GSM eCovers & Mini-Site Design

Click here to download the image files used in this tutorial, including the PSD.