How to make a web Banner

Got your Photoshop? Okay, open 'er up, and pick File/New from the top menu bar.

In the dialog box that pops up, set your Width at 468 pixels, and your Height at 60 pixels.

See the two colored (or black and white) squares near the bottom of the toolbar? Double-click on the left (foremost) one to go into the Color Picker.

You can select a color either by clicking around in the two color panes, or by typing values into the boxes. If you want to learn how to select "browser-safe" colors, see Pixel Anatomy 101.

Got the perfect color picked out? Now select the Paint Bucket tool from the toolbar, and click somewhere on your canvas. This should fill the canvas with the color you chose.

Got an existing logo that you want to include in the ad banner? No problem. Open 'er up, and adjust it to the desired size. Remember that .gif and .jpg are both compressed, low-quality formats. If you have the "original" graphic files for your logo (.psd, .tif or whatever), then use those instead. If not, don't worry too much - you can usually edit a .gif file and get acceptable results.

Once you have your logo the size that you want it to be in the banner, use the rectangular marquee tool to select the whole thing, and Copy it.

Switch back to the window that contains your banner-to-be, paste in your logo, and position it where you want it. At this point, you should also paste in a picture of a dog or cat.

Here's what I've got so far:


Now we'll add some text. Choose the text tool, click it on your canvas, and type in the text of your choice. For this example, we'll make an animated banner that displays text one snippet at a time. Once you've placed a line of text, you can position it where you want it. Note that the text is now on a new layer.

Repeat the above steps to add another snippet of text on its own layer. Do it again.

Now we have several bits of text, each on its own layer. By turning each layer on one a time (in the Layers window), we can create an animation in which the text appears a bit at a time until the full message is displayed. This is a simple but very popular way to make a banner a little more eye-catching.

So how do you create an animated banner in Photoshop? Ya can't! You need a separate animation program. Fortunately, there are several shareware programs out there that work just fine. Toddle on over to our Web Tools Download Section and get you a couple.

What we have to do is create each of the frames of the animation separately, and save each one as an individual .gif file. This is easy to do using layers.

Turn off all of the text layers except the first one. Choose File/Export/Gif 89a Export. I uncheck the Interlaced box when I'm making banners, but it doesn't matter much for an ad banner whether it's interlaced or not. Ad banners should never be made transparent, however, because you may not know what color background(s) it will be displayed against.

Save this .gif as banner1.gif or whatever. Turn on the next text layer and repeat the above steps, saving it as banner2.gif. Repeat until you have saved all the frames of your animation as separate .gif files.

Now open the animation program of your choice and assemble these .gifs into a finished animation. This is usually pretty simple. You choose the order and the time between frames, and save the finished animation as a new file.

This file is your completed animation, and will be uploaded to your Web server. The other individual files are no longer needed, but you should save them so that you can easily create variations of your banner. For maximum results, always make several slightly different versions of a banner, run all of them, and compare the clickthrough rates. Either go with the banner with the best clickthrough and discard the rest, or rotate them periodically



So, there it is (You may need to refresh to see the above animation, admittedly a very simplistic one

:lol:lo:lol!: l!: !: :lo:lol!: l!: