Hints

Here's some hints and tips on making great looking web graphics and banners.

Tip Number One

The number one banner creation tip is “Make your banners small”.  If a banner is too big, it will take a long time to load and visitors to your site may not wait and therefore will not see it, especially those viewers on dial-up connections.  Many webmasters also have size restrictions on banners.  Generally speaking, banners should be as small as possible with a maximum size of 15K for a 468x60 banner.

Animated vs. Static Images

When making banners, one choice you must make is to have an animated or static banner.  Animated banners have a trade-off with size and “eye-catchiness”. Animated banners tend to be bigger (in kb) which causes them to load slower.  If a banner takes too long to load, a user will never see it.  Most banner exchanges will cap the size of a banner at 12KB or 15KB.  Complex animations can take many frames, which causes the size of the banner to go up.

My personal preference is to use animations, but to keep the size down by using less than ten frames, not using background images, and keeping the number of colors to an absolute minimum. All graphics should be compressed.

GIFs vs. JPEGs

The two most popular formats for image files on the internet are gifs and jpegs. Each format has its strengths and weaknesses and understanding the differences can mean the difference between a good and bad looking image.

The gif format allows you to have transparent areas and animation. So, if your graphic image needs either transparency or animation you need to use a gif.  However, gifs are limited to 256 colors, so pictures from digital cameras or images of people tend to look grainy or have washed out colors when saved as a gif.

The jpeg format is not limited to 256 colors, so pictures look great, but the jpeg employs "lossy compression" on the images, meaning it takes images and in the process of shrinking the file, "guesses" as to what colors should be replaced. This is fine for pictures, but can cause problems for plain text. 

To summarize, use gifs for text, transparency, and animation.  Jpegs are best used for images (pictures) and gradients.

Other Tips

• Don't clutter up the banner with lots of images that distract the eye. Make sure your banner has a clean look.

• Include a 'Call to Action' such as 'Click Here', 'Free Trial' or 'Learn More' to encourage a viewer to click the banner.

• If possible, check out the color scheme and style of the website where the banner will appear. Keep the style in mind when designing the banner.