Only the extremely astute would have noticed the reference to HTMLGoodies in the title.

Introduction: This tutorial will teach you to create a nifty advertisement banner. I take more of a painter’s approach to Photoshop, and I use less filters/layer effects to achieve the look I want. The outcome isn’t as reversible, but gives more control in the process. This is in NO way the only way to design a banner, but it does look pretty good. This banner will be a 468×60 banner and will not contain any animation. So without further ado..

Step One: Start with a solid background. I chose #2A2A2A for mine, choose anything for yours. Please choose a color that won’t burn people’s retinas.

Step Two: Take your dodge tool. Set the brush size to circular 100px, zero hardness. Set the range to Midtones and the Exposure to 20%. Start making semi-circular motions coming from the top corner of the banner, down to the middle, and back out to the top corner. Do this until you have a faint glow on the top of your banner, like so:

Step Three: Using the Elliptical Marquee Tool, select the top portion of your banner like so.

Step Four: Using the dodge tool on the same settings, go over this section in the same manner as Step Two. Repeat as necessary, but don’t overdo it.

Step Five: Now, take your burn tool, set the brush size to 8px, zero hardness, range to midtones and the exposure to 30%. Place your cursor near the top corner of your banner and align the center of the cursor with the top corner. Hold shift, drag across once and then back. This will create a small shadow at the top of the banner, like this:

Step Six: Select everything but a few pixels off the top (at least 2, so that this effect doesn’t get covered by the border we’ll be adding later), and repeat step 2 within the selected space.

Step Seven: Select the bottom 2-3 pixels of your banner. Select the burn tool and stroke over the selected area. Move the selected area up 2-3 pixels (the same amount of pixels you selected off the bottom), and dodge over the selected area, to get this look:

Step Eight: Now the fun stuff! Find a relevant image, preferably in a block form. I chose to use a portion off the header of this site. Put a black outer glow on the layer (I used these settings: 25% opacity, 0 spread, 10px size). Now, use Edit >> Transform >> Perspective and play around to achieve this:

Step Nine: Take that same layer and duplicate it. Remove the outer glow. Flip it vertically, then align it with the bottom of the layer you created in Step Eight (do whatever is necessary, rotate the layer, and even cut off a little bit so that the edges of the layers match perfectly; I had to cut some off in my case). Now change the layer opacity to about 50% (Numpad 5).

Step Ten: Let’s add some text! Drop in a line of text with whatever your banner needs to say. I used the font Kalinga (standard Windows Vista font, don’t make fun of me!) at 14pt with -75 letter spacing (also known as tracking in Photoshop). Now go to Layer >> Layer Style >> Drop Shadow. Set the angle to 90 degrees, size to zero, distance to 1px, color to black and opacity to 75%. There, now you have a nice shadow. Feel free to change the color of selected portions of the text to make things stand out, like so:

Step Eleven: Now, the final step! Let’s add a border. Create a new layer, and select the outside 1px of the banner (it helps to turn Snap off), fill it with solid black, and bring the layer to the front (Shift + Ctrl + ]). Now, create a drop shadow. Use these settings: 90 degree angle, Linear Dodge mode, white, zero size, 1px distance, 30% opacity. Now, you should have something like this:

Congratulations! You now have a nifty looking ad banner. Go tell all your friends, and then refer them back here so they can learn just how to do what you just did.

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

8 Responses to “So you want an advertisement banner, eh?”

1. Eli Says:
   March 6th, 2007 at 12:15 am

   Decent looking ad banner

   Good job.

2. Brent Says:
   March 31st, 2007 at 1:49 pm

   Useful info in an easy to use format. I wish most of the people I was paying new these basics.

3. shweta Says:
   March 31st, 2007 at 1:50 pm

   its a very nice and simple tutorials…

   thanks for sharing it….

4. Tyler Lemieux Says:
   March 31st, 2007 at 1:55 pm

   Thanks for the comments! More tutorials coming soon =)

5. gago_si_dave Says:
   April 8th, 2007 at 11:51 pm

   taena mu!

6. My Online Web Journey » Blog Hopping Today Says:
   April 30th, 2007 at 1:26 am

   […] Ive found a very nice and simple tutorials on creating a banner ads. Thanks for sharing it Designersmind - Advertisement banner Im not a graphic designer, I hope I can create a very nice and simple looking ads. Im planning to […]

7. swollenpickles Says:
   May 10th, 2007 at 12:27 am

   Looks cool. I love the look of your blog by the way. I’m only a ‘try hard’ garage designer so anything I do looks like a$$!

8. バナー広告デザインまとめ - DesignWalker Says:
   May 28th, 2008 at 2:56 am

   […] So you want an advertisement banner, eh? […]

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website