Adding Text to your Banner

Linda Cole

March 30, 2000

Alias Smith and Jones

Troubled with jagged uneven text in your banners? Crave that smooth look you see on other web page banners? If so, you've missed a very basic feature of your graphics program called anti-aliasing.

Compare the two images to the left. Notice the difference? The one on the top has rough edges resembling steps. This effect is often called "jaggies" and is caused when text is not anti-aliased. Anti-alias softens the jagged edges, using different shades of the text's color. In a letter that is not angi-aliased, the pixels are either the color of the letter or the color of the background. In anti-aliased text, the pixels where the text meets the background are intermediate shades between the text and background colors.

gif vs. jpg

GIF will produce a higher quality image for such things as line drawings, cartoons, icons with only a few colors and images with only a few unique colors. Quite often it will compress those colors better than JPEG too, as JPEG will lose quality on images with large areas of pixels that are all exactly the same color.

The text saved to jpg format is splotchy, the edges not as crisp and clear as the gif. This doesn't mean you can't use jpg if you plan to add text to your banner, but use a thinner font and lean towards darker colors to minimize the problem.

Also keep in mind that transparencies are not possible with jpgs. If you want your text to appear as if it's floating on a page with a colored background you'll need to match the jpg background color exactly with the web page bgcolor.

Use fonts to your advantage

If your site is about Star Trek don't use a flowery or elaborate font simply because you like it. This banner is made with KlingonBlade. A cutout was applied to make the text look as if it were cut out of the blue background to add depth. The odd shape on the right is the letter "x", KlingonBlade font, slightly deformed. It was made to appear to fade out by placing it on it's own layer and reducing the opacity of that layer.

The same theme done with a script style font doesn't have the same impact.