GIF Icons

The problems with GIF icons and backgrounds

Or, How to make your GIF images look great anywhere you use them

by Susan Pichotta, July 2007

SQUARE PIXELS, CURVY IMAGES

Many of the problems in making GIF icons look great (or any icons, for that matter) are based on this one simple fact:

Pixels are square. Curves are not.

Every computer display screen is made up of pixels - and pixels are square. It's very easy to make straight lines with squares, that's a no-brainer. But to make circles and curves out of nothing but squares is a bit more of a challenge.

But wait, you say, I've seen pretty circles and curvy things displayed on monitors. If curves are so difficult, how is that done? Quite simply, you fool the eye. We use different shades of a color to make the eye think you are looking at a smooth curve, when actually you are looking at a whole bunch of little squares. And the larger (more pixels) an image contains, the easier it is to do.

CIRCLES IN A SQUARE

Let's look at some examples. We'll start by working with a 24x24 size grid - which happens to be the size, in pixels, of many toolbar icons. The background color of our grid square will be white.

We'll put a solid red circle in our white square, using only one color of red (at left). How does that look? Not too good, as you can see. The edges are ragged and "jaggy". It's not a smooth, pretty curve, is it? Without too much trouble, you can see that the circle is made of squares - you see little square corners. Not good.

Now, let's make another red circle, but this time, I'll tell my graphics software to "anti-alias" the edges. Anti-aliasing is when you use varying shades of a color to create the illusion of a curve. Notice how the edge of this circle contains pixels in varying shades of red. The closer to the edge, the lighter the red. This makes our circle look like it has a nice, even, pretty curve, doesn't it? By using different shades of color in square pixels, the eye is fooled into seeing a curve in squares.

Easy, right? Not entirely - there are a few other things you need to consider.

TRANSPARENT PIXELS

When we create our GIF icons, we start with a square. In our example, the square is 24x24 white pixels, with a red circle in the center. If you were to use this circle icon on your website or in your software, you would want it to look like the circle was placed directly on the website or software background, in this case, a woodgrain background ("Good" example). But we don't want the square's white background showing ("Bad" example). To make our red circle icon look good on this background, we have to set some of the pixels in our 24x24 square to be transparent.

In GIF icons, there are two levels of transparency: ON or OFF. Either a pixel is transparent, or it's not. Simple, right? If our image has nothing but straight edges, it is simple. But once again, what about those curves?

BACKGROUND COLORS AND CURVES

When we create a curved edge in a GIF image, the background color is important - because it shows through around the edges of curves. And remember, with GIFs, a pixel is either transparent or it's not. Yes/no. No other choice. And this can be a problem with curves.

Since a picture is worth a thousand words, let's take a look at two more examples. We'll use two images from our Glasso Icon Set. The square icon has mostly straight edges, while the round icon has all curved edges. We'll look at these images in the 32x32 pixel size (another common size for icons).

First, let's take a look at these images (left). We will mark the pixels that will be transparent in our GIFs - let's mark the transparent pixels lime green. When we zoom in, you can see the grayish pixels that are left around the edge of the circle (at right).

Now, let's look at these images on a solid pale background - gray, in this case (right). They look good, don't they? Let's take those same GIF images, with their transparent edges, and show them on some patterned, light-colored backgrounds (left). They look great. (Backgrounds are from our Backgrounds Set.)

HALOS AND GIFS

Halos are usually good things - when they are in religious art, anyway. But in our GIF icons, when you see what we call a "halo", it usually means that the original image was created with a very different background color than where it is being displayed.

To see what I mean, look at our two GIF images displayed on a black background (above left, and enlarged at right). See those gray-to-white pixels around the edge of the circle, and in the rounded corners of the square? They stick out like sore thumbs - perhaps you see why they are sometimes called a "halo". And when working with GIFs, halos are bad things. But we can make them go away...

Page 1   Page 2