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.
![]()
Select the Rectangular Marquee tool and make sure the new selection option is enabled.

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.

In the Layers palette, 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.
![]()
Click on the Gradient Swatch, then double-click the white slider and choose a light-blue color. I used #ccffff

Click Inner Glow on the left, then click the color swatch and choose the same color that you just used above.
![]()
Click OK in the top-right corner.
Up to this point, 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.
![]()
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.

Settings
#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!
Click here to download the image files used in this tutorial, including the PSD.

