Okay, so I was looking for a good tutorial on how to design banner ads for a friend who needed to know… and I quickly learned that they suck. The problem is that most people want to sell you design services and not tell you how to do it yourself. So our mission? To debunk the idea that good banner advertising can only be made by design firms.
In this tutorial, we’ll go through the steps to make a web advertising banner. If you are looking for places to put your advertising (without spending tons of money) try Webmaster Bids www.webmasterbids.com and if you want to know the “technical” stuff behind all the CPM’s and what-nots, you can click here for a .pdf that has a host of collected information, “Banner Advertising 101”.
Now, let’s get started :)
1. Open Photoshop and create a new canvas that is 468 x 60 pixels, with a white background (or your specific background color, if you prefer).
2. First, we need to indicate the layout of our banner. I want to create something quickly effective, which will keep my url static. To achieve this, I came up with this block:
3. It looks pretty plain, but we’ll do a lot with it. To achieve the look I did, just fill your background layer with the color you’ll use, and grab a high-contrast color for your next layer. Click your shape tool, select the “rounded rectangle”, and drag it across the canvas until it looks about right.
4. Next, I wanted to add a stock photo that would grab a bit of attention. I scoured my collections and chose this (which you may freely grab if you want):
5. As you look for a graphic that you’re going to use, think about what kind of text you want to use. I chose the ? sign because I wanted to represent my text which will say something about “Left with questions about Photoshop?” Keep in mind that you want to say what you have to say quickly, so every image that you use should reinforce what you have to say. Try coming up with about 4 “frames” of text – a quick sentence which will be replaced by the next sentence, four times in a row.
My 4 frames of text (at least at this point) will say:
1) Left with questions about Photoshop?
2) It’s not just for the elite!
3) There is help…
4) Free Photoshop Tutorials, Plug-ins, and Graphics
6. Now that we’ve gotten our ideas all outlined, it’s time to put the pieces together. First, add your graphic to the banner, sizing it properly. Leave it on its own layer, so that we can play with layer styles and get a noticeable look going.
7. Since I seem to love that orange, I colored the ? Sign to better blend with the color by adding a new layer (Layer, New Layer) and setting its mode to “Multiply”.
8. Next, I smudged and blurred the ? Sign layer so that the edge wasn’t as sharp. Just click your smudge and blur tools and take your time so that it doesn’t get out of hand.
9. The next thing that I wanted to do was make the rounded rectangle layer stand out from the background, because this is the layer that I want to place my url on. To make it stand out, I first placed a simple inner bevel effect (Layer Styles, Bevel, Simple Inner) and then went to my Layer Styles, Drop Shadows, and placed a low drop shadow to end up with this:
10. Now, it’s time to start adding text. Before you do that, make sure that you save your project so far. If you want to view the .psd of my work to this point, click here. From the next step on, the layers will be merged and each piece won’t be as viewable.
11. Go to Layer, Merge Visible. You should end up with one single layer that has every piece of the banner all stuck on it.
12. It’s better to avoid mistakes from the start, so go ahead and make 4 duplicate layers (Layer, Duplicate Layer) of your banner. Click the “eye” next to the duplicate layers, so that they aren’t visible, and we’ll continue.
13. Now we get to add text. Pick a clean, clear font with no “extras” – Verdana, Arial, and Tahoma are all good options. You want the viewer to be able to read your text with absolutely no effort. I chose Verdana, 14, white and typed my url in the rectangle area. Then, because there was some extra room, I italicized the font and added the site name.
14. Make four duplicates of the text layer, one for each of your background layers, and stagger them between the background layers. This keeps us from re-typing the text and having to try to line it up. If anything doesn’t line up, it will “jump” and look awful. Once again, “hide” all but the bottom text layer.
15. In the same way, go through and add the four frames of text above each layer. As you finish a layer, merge the text down on it.
16. And yayyy – I didn’t make any mistakes, so I had an extra background layer and an extra text layer, so I just deleted them real quick and moved on to the next step…
17. Once you feel you’ve lined everything up, save as a .psd file. Open this .psd in Photoshop Elements to animate it. Once the .psd is opened in Elements, click “File” and choose “Save For Web”. In that screen, click the animate and loop buttons, and then click “Preview In…” your browser.
18. In your browser, you should see a banner which animates VERY quickly, but none of the text jumps around your screen. If it does jump around, you need to adjust the placement of everything. To slow the speed of the animation down, adjust the Frame Delay. I nearly always set my Frame Delay to “2.0”
19. Once you’ve gotten it “perfect”, go ahead and save it. This is what I ended up with:
If you want to view how the layers for the final image work together, you can download the .psd here. Remember that you won’t see the individual text and effect layers – for those, you need the first psd.
Copyright (c) 2005-07, Lolaness of My-Photoshop.com, All Rights Reserved Please contact for Reprint Information
|
