GIF Icons, continued

The problems with GIF icons and backgrounds

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

Page 1   Page 2

COLOR OPTIMIZING GIF ICONS   (or "OPTIMISING", if you're British)

Here are the edges of our red icon optimized for a light colored background (left), and for a very dark colored background (right).

The trick to making your GIF icons look great is to create them for the right background color - that is, color optimizing them. If you're lucky, they come already optimised for the colors you need. But all is not lost if they aren't, because (maybe*) you can create your GIF image with the right background color.

*Maybe? The "maybe" refers to this...

You need three things to color optimize (optimise) your GIFs:

1. A good master image
2. The software to do it
3. The desire and time

(If you have #1, but not #2 and/or not #3, you might want to look into our GIF Color Optimization Service.)

1. MASTER IMAGE

You need a master image with "full transparency" (we'll discuss transparency in detail in another article, at a later date). For our purposes, master images with full transparency are:

• PNG files
• ICO files (with XP/32 bit images)

All our icon sets include both of these formats.

2. SOFTWARE NEEDED

If working with PNG files, you need graphics software like PaintShop Pro, Xara, or Photoshop.

If working with ICO files, you need icon software like Axialis or Microangelo.

3. THE PROCESS

Here are the steps I take using PaintShop Pro as graphics software, or Axialis as icon software. These steps should translate, more or less, to any other similar type of software. If you have specific questions about a software product, please contact tech support for that product.

PNG - PaintShop Pro

1. Open the PNG file in PaintShop Pro
2. File | Save As
3. Enter your file name, then
4. For "Save As Type", select "Compuserve Graphics Interchange (*.gif)", then
5. Click on "OPTIONS" (not "Save"!)
6. Click on "Run Optimizer"
7. Transparency tab: Select "Existing Image or Layer Transparency"
8. Partial Transparency tab:
   Top settings: Feel free to try different ones, start with "Full transparency", and 20% opacity.
   Bottom settings… here it is! Select "Blend with the background color", then right click on the color box. Select your background color there.
9. Colors tab: Here are my settings, feel free to try others: 256, 50, Optimized Octree
10. Format tab: Non-interlaced
11. Select "OK" button - you're done!

ICO - Axialis

1. Open the ICO file in Axialis
2. Select the icon size you want, "XP" resolution
3. File | Export | Compuserve GIF
4. The settings I use are as follows, feel free to play with them:
   Auto, Adaptive, Diffusion, Preserve Transparency
   For "Threshold", I push the slider all the way to the left, then a hair to the right.
   Matte: Here it is! Select your background color by clicking in the color box.
5. Select the "OK" button, then enter file name info - you are done!

As you can see, this is not terribly difficult, it just takes a little time. And there are many software packages out there that will do this kind of GIF creation - just because we haven't mentioned them doesn't mean they won't work. If you have a different but similar graphics or icon software, give it a try!

TOO MUCH WORK?

And if this is too much work for you? If you have some GIFs you need color optimized, and you have PNG or ICO or other good masters, you might consider our Color Optimization Service.

Also, one last note - almost everything in this article applies to BMP icons, although there are a few important differences. We'll write about BMPs in a later article. But until then, please be aware that we are also happy to optimize BMPs in our Color Optimization Service.

Page 1   Page 2