*** From the Archives ***

This article is from May 22, 2000, and is no longer current.

Designing Banner Ads that Inspire and Amaze

As a big, bad Web designer, you face a number of challenges when creating Internet banner advertisements. You have a very small space–usually about 468 pixels wide by 60 pixels high–in which to convey your twisted marketing spiel. That message has to be legible, and it has to catch the reader’s eyes on what is often a very busy page, all while keeping file size to a minimum. That’s a lot to ask from such a small graphic! To help you out, we’ve created some simple guidelines that will help you design ads that are catchy, effective, easy to make, and guaranteed to lower your cholesterol a few points.

The trick is to make your ad different–but still keep it simple–by varying your layout options and experimenting with various effects. Figure A shows an example of a few of our guidelines in action: functional components, browser-safe colors, easy-to-read text, a layout that draws the reader’s eyes into the ad, and boundaries formed by graphic elements instead of a static box.

Figure A: A banner ad doesn’t have to be one big box of color.

Determining the components

Sometimes the most difficult part of designing a graphic is the creative aspect. Chances are, you’ve routinely opened a blank Photoshop document and then began pounding your face rhythmically against the keyboard while chanting “What now? What now?” You can quickly bypass this artistic version of writer’s block, and forgo damage to your keyboard (and face) by assembling the following staples of any banner ad:

  • The main message–What’s your ad selling? Be specific here; few readers will click on a cryptic ad, regardless of how cute the message is.
  • Company logo–Who’s doing the selling?
    Graphic–You need something that will attract the attention of your market.
  • The URL–If the viewer prints out the page and decides to visit the site later, you want to provide a way to reach the site.
  • The words Click Here–Yes, it’s obvious, but we promise that your ad will garner a higher click rate with these two magic words.

Now gather these elements in one place, as shown in Figure B (they can be in separate documents if you like). Think of this as your palette. For our example we’ll use Photoshop, although Fireworks is also suited to the creation of Web banner ads.

Figure B: Start by assembling essential banner ad elements in one place.

Having all your elements in one place should quickly eliminate your writer’s block and spark the creative process. Although we won’t discuss those annoying animated ads in this article, make sure that as many elements as possible are in the last frame of the animation if that’s what you’re assembling these components for.

Another advantage to grouping all the components before you start laying out the ad is that it can help you avoid a busy ad. If you stick with these basic elements instead of just adding what you want as it occurs to you, your message will stay clear and your ad will be more successful.

Creating a canvas you can work on

Once you’ve gathered all the elements, create a document that’s 468 pixels wide by 60 pixels high. Such a small document can be limiting, so it’s a good idea to give yourself more room. But before you enlarge the canvas size, create a guide border of that 468 x 60-pixel space (or whatever dimensions your ad must be). Be sure to create the border in such a way that you can easily delete it from the finished image.

One way to do so is to duplicate Background in the Layers palette, and select all. Choose Select > Modify > Border. Set the Width to 1 pixel and click OK. Then press [option][delete] ([Alt][Delete] in Windows) to create a 1-pixel-wide border at the edge of your image. As you work, don’t place any of your elements on this layer. When you’ve finished laying out your ad, you can simply delete the layer.

Now you’ll enlarge the canvas size to give yourself enough room to work. From the Image menu, choose Canvas Size, add about 100 pixels to both the Width and Height, and click OK. At this point, you should have a lovely canvas like the one shown in Figure C, which provides you with plenty of room to arrange your elements, as well as a guide for the final size.

Figure C: Give yourself a spacious canvas while retaining an outline of the final ad size.

Choosing your colors wisely

Once you’ve assembled your elements and prepared your canvas, you need to choose your colors. Your first consideration is the color of the background on which the ad will appear. If you don’t have this information, it’s best to stick with black or white.

When choosing colors for your ad, always make your selections from the 216-color browser-safe palette. To correctly use the palette, you must get rid of the existing colors in the Swatches palette, not just add the new colors to them. To load the browser-safe palette correctly, display the Swatches palette by choosing Show Swatches from the Window menu, then select Replace Swatches from the pulldown menu, as shown in Figure D. In the resulting dialog box, locate the new palette and click Open. As you choose your colors, be aware of problematic color combinations. Figure E shows a few examples of color combinations you should avoid.

Figure D: Replace the current color swatches with those of the browser-safe color palette.

Figure E: Avoid color combinations that are unattractive or difficult to read.

Arranging the elements outside the box

Now that you’ve chosen your colors, it’s time to start arranging the elements on your canvas. If you’re in a hurry, you can simply drag the elements over from where you gathered them and arrange them, as shown in Figure F. Just get rid of your border layer and crop the image down to 468 x 60 pixels.

Figure F: To finish the ad quickly, you can simply drag your elements onto the background.

However, if you stop now, you’re passing up one of your best chances to make your ad stand out. People are used to seeing ads as long boxes of color, so you should try not to confine your ad to the box. Although you do have to stay within the size limit, there’s no rule that says you have to stick to a strictly rectangular shape. Think of giving that box irregular borders by using elements of your design to define the boundaries. Figure G shows a few examples of how you can design “outside the box.”

Figure G: By taking a little more time, you can design a neato ad and still stay within your size limits.

With these examples, we used most of the elements as we created them in our initial palette. Of course, you can reposition or break up text to give yourself additional options. After all, it’s your banner ad.

Keeping the text legible

With all the competing elements in a banner ad, text can easily become lost. In addition, the small text that banner ad formats require can make text difficult to read. But, unless you have a really catchy image, readers use the text as the basis for deciding whether to click on your ad. So here are a few tips for keeping your text legible. First, try not to use text that’s less than 9 points; if possible, keep it at 10 or 12. Second, if you must use small text, stick to sans serif type–it generally retains its legibility on the Web better than serif fonts.

You can also employ a couple of tricks in Photoshop to increase legibility. When you create your text, increase the spacing between the letters. You can also duplicate your text layer, which increases the color saturation of the text, as shown in Figure H, without increasing the color depth.

Figure H: You can increase the legibility of text by duplicating the layer.

You might also try selecting your text and choosing Filter > Sharpen > Sharpen. This doesn’t always make text more legible, but it’s worth a try.

Keeping your file size down

Now’s a great time to weigh your image–to find out what size GIF file your image will make at this point. Knowing this will tell you what further enhancements you can afford to make. Of course, if you started with a minimal number of colors, you should be in good shape.

Save your file and choose Image > Mode > Indexed Color. Use the smallest bit depth that doesn’t compromise the quality of the image, then save the file under a different name in GIF format and check its size. Generally, you should keep your banner ads to about 10-12 KB, or 12-16 KB if you’re using animation.

Making your ad jump off the page

If you have room for a few enhancements, think of ways to really draw the reader’s eyes to your ad. Anything out of the ordinary will do the trick–creative borders, a dynamic layout, concentric circles around your focal graphic, or any of a number of text effects.

Figure I shows how you can lead the viewer’s eyes into an ad by changing the perspective of the text (choose Layer > Transform > Perspective and experiment with the angle). The other Transform tools provide some interesting effects as well, most of which don’t increase the color depth of your image.

Figure I: Changing the perspective of some of the text draws the reader’s eyes to your ad.

Making sure your ad links to a targeted area

Even the most radical ad won’t be successful if it isn’t linked to the right place. Make sure that clicking on your ad takes readers to a page on which they can find exactly what your banner is advertising. For our sample ad, a link to the fictitious home page of www.helpmedia.com is just fine. However, if our ad was specifically hawking a particular service from the company, the link should ideally jump to a page with information about that service. If the link must go to a different page, make sure it’s easy for readers to find a path–preferably a short one–to the exact item being advertised. Otherwise, they’ll quickly leave the site. And that’s a bad thing.

Conclusion

When you create your banner ads, keep your options open. After all, ads are no longer just colored boxes with a little text. By combining the guidelines we’ve outlined with a little creativity, you should have no problem designing vibrant, exciting banner ads that inspire and amaze.

Copyright © 2000, Element K Content LLC. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Element K Content LLC is prohibited. Element K is a service mark of Element K LLC.

 

>