Eye-Popping Banner Ad Tutorial

In this tutorial we are going to create a banner ad. Here’s the outcome:

And the story goes like this:

Let’s suppose, a client contacts me, saying “hey, I need a banner ad for my website. I started some heavy promotion of free iPod nano offers, so I need a banner saying: Want a Free iPod Nano? - No catch, get yours now! And of course, a picture of iPod nano And everything else to your liking, just remeber I need it to really POP, ya know, to make them wanna click it”

While reading client’s message, I already have some initial idea in my head, so why not go for it?

My initial idea was like this, I drew it on a piece of paper (sorry, too lazy to scan it):

As we now know what we are going to create, time to start the Photoshop and get to work:

Step 1

Create a new file. The most common banner ad format is 468×60, so we will go for that (that kind of ads is said to be getting less and less click-through every day due to “banner blindness”, but that’s a whole another story – and clients still want them anyway):

Create a new layer for our background ( in the bottom of Layers palette) and then switch to Gradient tool hitting G on your keyboard.

Click the gradient preview in the top toolbar:

I started with the 3-color gradient, because I wanted mine to be 3-color too – it’s often a good idea to add more colors to a gradient instead of plain “1 to 1″. I want to create a gradient from cyan (light) to deep blue (darkness), so in the Gradient Editor I click color stops (little squares under the gradient) and change colors respectively:

As you can see, I made the middle color more blue than cyan, somehow it gives it a bit more natural “light to dark” look. There is no strict rules here, just tweaking. I ended up with these colors: #43E2E8 → #2488C1 → #124A88

Now make sure your Gradient tool is in Radial Gradient mode and we’re ready to make our background:

I click the place where my iPod is supposed to reside and drag outside like shown. And get this great background:

Step 2

Now we need an iPod Nano, so I open up the screen capture of Apple Store with iPods:

I already made this in advance, you can do this screen capture of apple.com page using Cmd+Shift+4 on a Mac or Alt+PrtScreen on PC. What I want to do now is to cut out the iPod Nano from the white background. Switch to Rounded Rectangle Tool and draw a shape over iPod to cover it. Make sure the shape is as similar as possible to that of an iPod, with a little tweaking I came to 14px corner radius (change in the top toolbar):

Once we have the shape similar to iPod, Cmd+click (Ctrl+click on PC) the shape layer thumbnail to load that shape as a selection. And then switch to the layer with iPods and hit Cmd+J (duplicate selected area). You should now have a new layer with an iPod cut out from the background:

Now switch to Rectangular Marquee Tool (keyboard M), grab your iPod like this and hit Cmd+C (Copy):

You can now return to our banner and paste (Cmd+V) the iPod into it like this:

Step 3

Now it’s time to add text. Let’s hide the iPod for now (click the eye icon of the iPod layer) and switch to Text tool hitting T. In the top toolbar choose a good font, I like Myriad Pro a lot. It always looks nice, clean and professional compared to all that amature stuff like Comic Sans or some ultra-high-tek styled free fonts.

I started with the second line somehow (can’t tell you why ) and adjusted the text properties like this:

Note the All caps button toggled, and the letter spacing set to -10. It’s a good tip to always try to tweak letter spacing of any text, sometimes it can really give your text an overall better look.

Duplicate the first (i.e. the second) line of text hitting Cmd+J and drag it upwards:

Click it with a Text tool and type in the first line, “Want a free iPod Nano?”. I did that line with a bigger font size, so that it could catch an eye of a reader. Consequently, while increasing the font size, I had to make letter spacing smaller, -50:

Note the capitalization, it’s good for an ad copy to be “Initial caps”. Move both lines a bit, so that they are center-aligned and then move the whole text group a bit back-and-forth - find it’s place, so that it is not too much into light area, and not too much into the right side either. Then change first line color to white (#FFFFFF) and the second to orange-red (#FFA60B):

Step 4

Now we will place our iPod into it’s place. Make iPod visible again (eye icon of iPod layer), and create a backup copy (just duplicate the layer Cmd+J, and make the lower layer invisible). We’re going to transform the iPod picture, and once transformed it will lose some quality. So it’s a good idea to have a backup copy, so that if later we will want to resize the iPod or something, we can do it with our initial high-quality picture and not the blurred transformed one.

Start transforming the iPod picture - hit Cmd+T, then click the lower left (or right if you like) transform handle and drag it upwards holding Shift key. Shift key means that the transformation will save the aspect ration of a picture and won’t distort it. Resize the iPod to fit the banner area:

Then click in the middle and drag the iPod to our “light source”, try to find a good place for it, so that it looks like the light is coming from behind the iPod. Resize and move to your taste, here’s mine:

Hit Cmd+Enter to end the transformation. It’s always a good idea to apply Unsharp Mask to any picture that was just scaled, because scaling usually adds some blur, that’s the side effect of scaling calculation. I used this: Filter → Sharpen → Unsharp Mask

Step 5

Now it’s time to make that energy blast from behind the iPod. Create a new file, square of about 400×400:

And fill it with black (#000000). Now we need a nice white circle in the middle of this square, I did it like this:

Select all Cmd+A, turn on the Rulers if not already (Cmd+R) and then drag both vertical and horizontal guides from the top and left ruler. As you drag your guides closer to the center, you might feel a little snapping, i.e. the guide tends to be placed right in the middle of your selection. Photoshop is fantastic, isn’t it? Find the center, then Deselect (Cmd+D) and take Elliptical Marquee Tool (Shift+M). And then make a small circle clicking in the center and dragging to the side while holding Option (Alt) key down. And then fill the circle with white Option+Backspace.

This is the base of our energy blast. Now go to Filter → Distort → Ocean Ripple and make a heap of pieces out of this perfect circle. My settings were like this:

Make sure the pieces are not too small, but not too large – just try to do this all energy blast effect a couple of times if needed, and you will see what settings give what result. Now it’s time to actually make a blast, so go to Filter → Blur → Radial Blur, select Zoom method and then push it to the limit, with amount of 100 and Best quality:

Cool, eh? We’re not finished yet, so hit Cmd+F to repeat this filter once again and maybe once again (I did 3 or 4 times, until it really started to look like a blast):

I wanted the spikes of light to be really visible, so I added Unsharp Mask on top of it all, just tweaking the sliders to see if it helps:

Now it’s looking great, so we do Cmd+A (Select all), Cmd+C (Copy), return to our banner and paste Cmd+V

Step 6

Now we have to place the energy blast in it’s place (just grab a Move tool V and drag the blast layer):

Alright, but what with all that black background? Simple. Go to your Layers palette, open the Blending mode dropdown menu (where it says Normal) and change the blending mode to Screen. Finally it looks like a real blast:

I was not quite happy with the center of the blast, so I added a couple of things:

– An overlay gradient. I made one more radial gradient, this time starting with white (the epicenter of our energy blast), through cyan to blue, with blue being transparent like shown on a snapshot (the exact colors are #FFFFFF → #5DEEFF → #124988):

Create a new layer on top of our blast, and add gradient, starting from the center of iPod dragging outwards:

Set this layer blending mode to Overlay and you should have something like this:

As you can see, white and cyan colors in overlay mode make our blast look more like light rather than just white blurry spikes. By the way, here’s a snapshot of my Layers palette at this stage (just in case):

Layer 2 is our radial gradient overlay. But hey, we can go even further than that, I’m still not happy with how this blast thing looks. I need more light coming from the epicenter, so I grab my Brush tool (keyboard B), pick white as foreground color, create a blank layer and start adding more light with a brush of like 45-65-100 diameter. It’s a good idea to set brush opacity to like 30%-50% in the top toolbar. Here’s what I have done:

Just place the brush behind the iPod and click it a couple of times, making the epicenter of your blast really shining with white light.

After that I decided to add even more improvement to the blast, this time sharpening the spikes. I duplicated the blast layer (the initial white on black blast effect that we started with), and placed it on top of all additional layers, the radiant overlay and white epicenter. I applied Filter → Sharpen → Unsharp mask with these settings (again, I was just tweaking the sliders to see if it gives the desired effect, my goal was to make each spike of light sharper):

I did not want to “over-do” it, so I turned this layer to about 30% opacity and decided that my energy blast was finally looking good enough:

Step 7

Now we need to add some effects to our text, ’cause for now it looks too plain. Switch to first line layer and click the Effects button at the bottom of Layers palette (), and choose a Gradient Overlay effect. I applied these settings, and here’s why: As our white text resides on a blue background, it’s a good idea to add some blue to it, really really light, but still visible. Why is that? That’s because in the real world any colored background produces a reflected light of it’s color, and every object placed against colored background always receives a bit of that color!

I also decided to add some drop shadow to the text, but not too much, like this:

Beware of thick black shadows! It’s quite rare in the real world for a shadow to be thick and black. It’s a whole another story really, maybe a theme for my future tutorial, but for now just take my word on it.

For the second line of text I applied the same shadow style and a different sort of gradient overlay:

So now our text looks like this:

Cool already, eh? Well, there’s still room for improvement of course. I really don’t like the empty right side of the ad, and more importantly, I know that the client won’t like it either. So we will have to add one more step:

Step 8

Lets place some arrow there, it’s a common practice for banner ads to contain arrows pointing right. Somehow it represents “Go there” action, a forward move or something of that sort. Let’s start with a round base, pick an Ellipse tool and create a small circle next to our text:

I assume your circle is white, if not - you better make it white by double-clicking the color thumbnail of your shape layer and setting the color to white. Then set the opacity of the layer to something like 10%:

Great! Now pick a Line tool and set your line width to 2px (in the top toolbar). And start drawing a little arrow, beginning with a horizontal line:

Good, half of our arrow is ready. As the arrow is symmetrical, we can now just duplicate this half and reflect it vertically. To do this, I created a blank layer on top of these lines, than selected lines and my new layer using Shift key:

And then flattened the whole thing by pressing Cmd+E. Then it was simple: Duplicate the “half arrow” Cmd+J, hit Transform Cmd+T and then select Flip Vertical from the context menu (right-click or Ctrl+click on a Mac):

Use Move tool (V) and arrow keys on your keyboard to position the second half of our arrow correctly, and maybe experiment with layer opacity a bit, so that the arrow is not too bright:

Or maybe don’t do it, it’s up to your taste

Sooo, we’re finished with this. Time to upload to showroom directory and show it to the client (and get the bucks of course )!

Cheers, hope this was helpful and stay tuned for more tutorials!