Creating Graphic Banners
June 7, 1999
A banner can be any size, of course, but certain sizes have
become standard. The most ubiquitous standard size is 468
pixels wide by 60 pixels high. This is the standard size
for regular top-of-page banners. Smaller sidebar-size banners
and "buttons" are popular too. Two common sizes are 120x90
and 88x31.
You can create banners with any graphic editing software.
Photoshop is the best known, but it's pricey, and there are
several lower-cost options that are quite good, notably
Paint Shop Pro. Another drawback to Photoshop is that it isn't
particularly Web-oriented. To create animated GIFs, you need
a separate package.
One thing that is really cool about Photoshop, (and Paint
Shop Pro), is its Layers feature. You can have as many layers
as you want in a single file, and choose which ones are to be
displayed. This makes it easy to create a series of frames for
an animated banner, or to make different banners that share
certain elements.
File Formats
Graphics on the Web are almost always in either
.jpg or
.gif format.
For photos, .jpg is the better format to choose, but for
most other stuff that uses spot color, and combines
pictures and text, .gif is the way to go. Also, only
the .gif 89 format allows you to create animated banners,
and to make images transparent and/or interlaced.
Both .gif and .jpg are compressed formats, and are designed
to be used for final Web-ready productions, not for editable
files. When creating a banner, exporting to .gif or .jpg
format is always the very last step. Although it is possible
to open a .gif or .jpg file, edit it, and save the new file,
this is not recommended. As often as not, this will bugger up
the file, and the image will look terrible. Therefore, it's
essential that you keep the original files that you created
in your graphics editor (Photoshop files are .psd) in case
you want to use them in the future. If someone else is making
your banners for you, make sure they deliver the original work
files to you as well as the finished .gifs or .jpgs.
Transparent and Interlaced GIFs
When you create a .gif file, you have the option to make
it
transparent and/or
interlaced. Choosing the transparent
option means that a selected color will be transparent, so the
image can appear to float over a Web page, with no visible
background. While this is quite useful for general Web graphics,
ad banners should never be transparent. You may be placing the
banner on various different Web sites, and you have no way of
knowing what background color they may use. A transparent .gif
that looks great over a white background may look terrible over
a tan one (who would use a tan background?), and unreadable
over a black one.
An interlaced .gif loads in several passes, so the viewer
sees a blurry image that gradually becomes sharper, instead
of rendering a chunk at a time, as a non-interlaced image
does. This is useful for general Web graphics because it gives
the viewer an idea of what the image is without having to wait
for it to load fully. For an ad banner, however, there's little
point in making it interlaced, as a banner is small enough that
it won't take very long to load anyway. In fact, interlaced
graphics actually load slightly slower (although they appear
to load faster), so you may gain a microscopic bit of page-load
time by making your banners non-interlaced.
Designing for Clickthrough
Designing Winning Ad Banners
Building an Animated Banner
|
