Photoshop Tutorial: Creating a 468x60 Advertising Banner

It is important to know how to make a simple but eye catching and professional looking banner for your website. Since the majority of web sites rely on advertising to generate traffic, you can imagine how many more hits you can receive if you know how to make such a banner. In this tutorial we will discuss how to make one easily with a few steps. Just so you know this tutorial is primarily for beginners to photoshop so we won't be doing anything too advanced here. Enough with all that though. Lets get started, shall we?

Step One: Create a new document with the dimensions 468x60 with a white background.

Step Two: Create a new layer (Ctrl + Shift+ N), and select your gradient tool (right click the paint bucket tool if you cannot find it). Make a gradient of blue to white in the gradient editor, you can play around with different colors if you want. I just happen to find blue to be the easiest on the eyes.

Step Three: Using your text tool, write the title you wish to use for the banner. For the sake of this tutorial I will just use "cheaphosting", as this banner works mostly for hosting companies, but can be retooled for other uses as well. The font I used is a pixel font, you can find a bunch of them easily using your favorite search engine. Tahoma or arial fonts would work fine as well, you might want to use the bold type however. Make sure you move your text to the left hand side and center it a bit.

Step Four: Select your text layer and open up the blending options for your text (Layer > Layer Style > Blending Options). Now go to drop shadow, set the opacity to 25% and the distance and size to 5 px. Leave everything else at the default values and check the box on the left hand table to enable it. Now go to the outer glow option, set the opacity to 45% and then set the color for the glow to white (#ffffff). Under elements set the spread to 0 if it isn't already, and set the size to 6, and then leave everything else at the default settings and once again check the box on the left to enable the glow.

Step Five: Now we're going to do a reflection with the text, so duplicate your text layer (right click on the text layer and select duplicate). With your new duplicate text layer selected, we are now going to flip it. So go to edit > transform > flip vertical. Select your move tool and either move it downwards with that, or use the directional arrows to move the text down. Move it to where it is barely separated from the original text. Open up the blending options for the duplicate text and set the opacity to 50%, and then uncheck the box next to drop shadow. When you duplicated your text is also keeps all of it's original blending options, but we don't need the drop shadow as it makes the reflection look strange. This step really is optional, you don't have to do this if you don't like how it looks. I just thought I'd show you how to do a simple reflection, you can also make it even nicer using a gradient with transparency to blend the reflection but I won't go into detail on how to do that now.

Step Six: Create a new layer (Ctrl + Shift + N), and select your elliptical marquee tool (right click on the rectangular marquee tool if you cannot find it). Now on the right side of the banner make a selection, and then go to your gradient tool. Using the gradient editor set up the gradient for a yellow or orange to white gradient. With your marquee selection still active, apply the gradient. You may want to try a few times to get it to blend well with the previous blue gradient. Go to the blending options for this layer, select stroke and set the color to a dark blue and then set the opacity to 25% leave the size at it's default of 3.

Step Seven: Now we need to use that new space we just created, so find yourself a picture relating to the theme of your banner (I'm using a picture of some servers as it's a hosting banner). Then place the image into the right side of the image. Starting to look pretty good now isn't it?

Step Eight: Using your text tool, write some text that further describes your site or products your site may offer. As I'm trying to keep this banner simple I chose a color similar to the yellow gradient we used so that the banner is more pleasing on the eyes. The font I used was arial bold at 10 pt. I also applied a drop shadow to it with 25% opacity and default for the rest, and a stroke of 1 px at 25% opacity and black for the color.

Step Nine: Finally I added two accents next to the supplementary text. Just some simple greater than signs, with some of the blending options we discussed earlier. This step is also optional, but it can sometimes bring more attention to your banner or the words on it. Also, another optional step if you want, is to add a simple 1 px stroke around the entire banner. To do that all you'd have to do is use your rectangular marquee tool on a new layer on top of all the previous ones, press ctrl + a to select the entire image. Then right click while your selection is active and click on stroke.

And there you have it, a simple but professional looking advertising banner. If you didn't understand how I described a certain step, remember to look at the pictures attached to this article if you get stuck. Or if that doesn't help, feel free to contact me and ask a question about anything contained in this tutorial. Well, I hope you all enjoyed my first tutorial and learned something from it, I look forward to writing more in the future.