Larry's Graphics Tutorials - Banners

How to make an AdBanner (static)

Part 3 of 3


Our banner is almost complete, though there are a few parts still missing. In this final part
of the tutorial we are going to add some more text and make some more adjustments to
the text already in place.

Step 5

Adding the "Click here!" text

The time has come to add the "Click here!" text.
• Bring up the Text edit box (see Part 2 if you have forgotten how to do it)

Photoshop uses something called PS-fonts (Post Script) in addition to all your True Type
fonts. One of the fonts that came with the program is Helvetica. We are going to use that
now. Select it (if you don't have it Arial will do just as well) and set the style to Bold oblique
(Bold italic if Arial), the size to 20 and colour to a darkish red tint.

• Click in the text box and type "Click here!" (without the quotes)
• Position it underneath the slogan and click OK

Now our banner is beginning to look like a real ad banner, and the file size is still well within
the limit (7 kb now)

Step 6

Adding effects

There is still a few things to do. The company name needs to look more prominent. Select
the layer and bring up the Effects box.
Add theses settings:


Medium gray; 2 pixels

Bevel &

Style: Inner bevel
Highlight: Difference
Shadow: Bright light

• Click OK

Now the banner should look like this (file size 8 kb):

Step 7

The final step

With a file size of 8 kb we are getting close to the limit. And with a little left to do. Are we
going to make it? Time will tell.

Since it is a banner it is going to be linked to the Safeman's site (This step isn't really
necessary but it will make the banner look a little more professional).

• Select the Text tool
• Click above the initial S in Safeman's
The Text edit box opens
• Select a medium gray colour
• Select Helvetica (it should be selected already)
• Set the style to Regular and the size to 12.
• Type "www", press Enter and type ".com" (without the quotes)

As you can see the last line is in the middle of the company name

• Highlight the text (both lines)
• In the Line spacing box (top box below the style drop down list box) set the value 30
• Click to the left of ".com" (make sure it is to the left of the dot also)
• Press the space bar to move the ".com" to the right and don't stop until it is vertically aligned
with the last s in the company name
• Click OK

Now our banner is complete, and 9 kb says we also made the size limit!


Back to: Part 1 | Part 2