Now you can
get Goodies by
e-mail too!

Banner Primer #1

Introduction - What You Will Need

by Joe Burns, Ph.D.

Use these to jump around or read it all...

[The Primers and Their Images] [What You Will Need]
[Gonna Need An Animator Program Too]
[What We're Going To Make] [Getting Started]

I have been getting email from people asking how to create an advertising banner for their home page for a while now. This series of primers is intended to walk you through the process. The purpose is to introduce you to the basic theory behind banner creation and get you to the point where creating your own banner doesn't seem like an unattainable goal.

The Primers and Their Images

I want to state right up front that these banner primers are quite image intensive so they will take time to load. The reason is that in order to show you all the steps, I thought it would be best to offer multiple screen capture images to help you along. So be patient. The images will load, but it may take a short while.

What You Will Need

A graphics program. This tutorial will use Paint Shop Pro. Those who are already in the graphic creation biz will now immediately go bonkers telling me that any number of programs are a better choice. Well, to each his or her own.
I will use Paint Shop Pro for this tutorial because it has, what we college professors call, a good learning curve. That means if you learn this graphics program, it is quite easy to get up and running on another. The menus are very basic and quite close to other great graphics programs like Photoshop or Corel, which I also own. The biggest problem moving from one program to another, I've found, is that the commands are in different menus. For instance, the CROP function in Paint Shop Pro is under the IMAGE menu. Whereas in Photoshop it's under the EDIT menu. That's a good example of the concerns you face going from this tutorial using Paint Shop Pro to using another graphics program. It's not a big jump.

That said, the best reason I can give for using Paint Shop Pro is that it's shareware. You can go and grab a copy and follow along. (No, there is no PSP yet for Apple, but use what image program you can get or already have. I taught at Bowling Green State University for three years using MAC's and the learning curve is equally as easy).

Get Your 30 Day Evaluation Copy Here:

JASC Inc. (These people make PSP)
http://www.visitorinfo.com
Shareware.com
Shareware.com lists a LOT of download sites. When you arrive, you'll be asked for your system type (Windows 95, MAC, Windows 3.11). Then you can search for the name of the product. Apple users can also use this site to look for graphic programs compatible with their system.

My Computer Came With A Graphics Program

You mean like MS Paint? Or maybe you got a more advanced program through all that great pre-loaded software. That's where I got Corel. If that's the one you want to use - great. Go for it. The one downfall of MS Paint and the like is that they save images as bitmaps. That's a very vanilla format. I will be dealing with .gif format in this tutorial. You will probably be able to follow along all the way up until the time we animate the images we create. Then you will need to find a program that converts the bitmap (denoted by a .bmp extension) into .gif format. Like Paint Shop Pro...

Gonna Need An Animator Program Too

The purpose of these advertising banners is to attract attention. It's nice that people see them, but you also want them to be clicked on. An advertisement that isn't acted upon is not doing its job. In the four years that I have run Goodies, I have seen maybe three static banners. The animation is what really makes a solid banner come alive. Even if the animation is only two cells flipping back and forth. It just adds to the effect. So you're going to need an animator program.

Avid readers of Goodies know that I have had an animation tutorial up and running for well over a year now. If you've read it, then you may already have the Gif Construction Kit program. If not, grab it.
Again, there are a lot of other animation programs. All are good. But I learned on this one and I feel it's the best, plus that whole learning curve thing too.

Click here to download the Gif Construction Kit

If you would like to browse elsewhere, the Animated GIF Artists Guild offers some great programs and instruction.

What We're Going To Make

Here it is:

OK, it's a little goofy, but it will allow us to perform six functions that are crucial to the creation of a good ad banner. Besides, I didn't expect that you would simply grab this one off the page and use it. But if you want to, go ahead.

Here's the plan from this point on:

Banner Primer #2: Creating New Images
Banner Primer #3: Learning to Crop
Banner Primer #4: Importing Images - "Copying and Pasting"
Banner Primer #5: Adding Text and Shadows
Banner Primer #6: Animating the Images
Banner Primer #7: Activating the Image - And What To Do With It

The banner above was created using exactly the same steps I am going to cover here. I used Paint Shop Pro to create all of the images except the original ticket. I got that from the WebSpice Images provided for free on the HTML Goodies site.

The animated image above requires 13 different images to complete. They are:

Don't bother to download any of them now. We'll create them as we go along. The only one you really need from me is the ticket image above, and you'll get that at the start of Banner Primer #2.

Getting Started

First of all, grab the two programs above. Install them on your computer and make sure they work by opening and playing around with the buttons. If you don't get any errors, they work.

Next, start thinking about what your banner is going to look like. I know you don't have the skills yet to create it, but so what? I'm not the president, but I still know what I'd do if I got into office. Sketch it out. Use arrows to show the motion you want. Create a sort of storyboard of your idea. But keep it simple. The more animation cells, the more bytes this will take up and the slower it will be to load and run. If your banner doesn't run, then no one will see it anyway. Show your idea to a couple of people. See what they think. This little image will be your site's welcome mat. It had better be nice or why would anyone come? Get feedback on it. Creating a banner for your site should not be something you throw together in an hour or so. It should be given some thought. It is your representative in the real world.

Think about your site. What is good about it? Why should people come? Ask yourself what is so darn wonderful about your site that someone should take time out of their busy life and come see you?!?! Whatever you land upon, that's what your banner should say, either in text or images.

And speaking of text, what will your banner say? The text will need to be very short. There are only 10 words on this banner (including those on the ticket). Plus, this banner rotates fully in just under six seconds. That's not a lot of time to read things over. So make your text big, exciting, and a very quick read.

And so we start.

On to Banner Primer #2

[The Primers and Their Images] [What You Will Need]
[Gonna Need An Animator Program Too]
[What We're Going To Make] [Getting Started]

Use of this site is subject to certain Terms & Conditions.
Copyright (c) 1996-1998 EarthWeb Inc. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited.