Closed (sort of)

TEOM as you know it has been closed. I will keep it up for reference but it no longer will receive tutorial updates.

There are plans for a completely new site. If you'd like to be notified once the other site is up, simply subscribe to my mailing list.

Thanks for the support throughout all these years :)

Paint Shop Pro 7

Exporting GIFs

Before the PNG format was introduced, the GIF was the only format used on the web with transparency. In fact, even after the PNG format was introduced GIFs are still widely used.

If you still haven’t discovered the wonders of PNGs, take a look below on how to save your GIFs for the web – or any other use that you might have for them.

There isn’t really much technical detail that one needs to know about GIFs. The most important thing about them is the low amount of colors used – up to only 256. Just for you to have an idea, JPEGs support over 16 million colors.

Another interesting thing to know about them is that you can set a specific color to act as a transparent area, which can be quite useful when you use the image on different backgrounds for example.
Just remember to set the transparency on the image before you start the exporting process – not that it is complicated, but just to save you some time.

Below is the example that I’ll be using:


(zoom in)

Note: Since I’m only using PNGs on my site, the image above is also a PNG, but it will work exactly the same as the GIF in this case so don’t worry about that.

What do I have to know about it in order to properly export it?

» The number of colors.
The lower the number you used when optimizing, the smaller the file size will be.
In order to count the number of colors used go to Colors – Count Colors Used.
In the case of my image the number of colors used is 9.

» The bright green area will be transparent.
This means that I shouldn’t use this shade of green on areas that I would like to make opaque. If I want to use it opaque I will have to change the transparency color that will have to be different from all other colors.

With only these two things in mind, go to File – Export – GIF Optimzier.

On the GIF Optimizer you have the option of viewing all settings as tabs or using the Wizard, which will guide you step-by-step and will give more detailed information about the process.
Personally I prefer the tabs view but if you want to use the Wizard go ahead. I’ll be explaining the process with the tabs in mind, though.

1st tab: Transparency.

As said before, the bright green area is the one that is going to be used for the transparency.
Of course there are a few other options, but let’s go for the simple things now. As you get used to exporting GIFs you’ll be able to modify your own images according to the available settings.

» Settings: areas that match this color = checked, color = bright green, tolerance = 0.

Note: If you increase the tolerance amount more shades of green (when available) will also be made transparent.

2nd tab: Partial Transparency.

This should only be used when your original image has different opacity settings (usually done through layers). When this happens, you should decide if such semi-transparent areas should be made completely opaque or completely transparent.

3rd tab: Colors.

Here’s where the Count Colors Used tool is useful.

Depending on the color selection method you select, the minimum amount of color increases.
Because the Optimized Octree is the method that preserves the most information from the original image (the other methods are for reducing even more the file size through less color information), I’ll use instead of the other available ones. The only bad thing about it is that the minimum amount of colors that I can set is 17 – instead of the original 9.

» Settings: amount of colors = 17, dithering = 100%, optimized octree = checked, include Windows’ colors = unchecked.

Note: According to PSP’s Help File, the include Windows’ colors option should be checked when saving the GIF for web. However, Windows’ colors was a method used a very long time ago when browsers couldn’t handle color properly and each one would display a different version of the original image. Today, it is very difficult to find a browser that still needs the Windows’ colors information.

4th tab: Format.

Here you can specify how the GIF will be shown while it still loads and decide whether it can support transparency or not (option automatically modified by PSP once you set the transparency on the 1st tab).

You can select any type you wish, but I strongly suggest that you select Non-Interlaced – I find it really annoying to stare at a highly pixelated file while it still loads.

5th tab: Download Times.

And finally information about the file size and how long it will take to load on a few connections.

Tools, Menus and Palettes · Jul 31, 2004 ·