For PSP V7Home   >   Tutorials   >   Basics   >
Transparent GIFs
Download this tutorialDownload (212kb)
E-mail this tutorial to a friendEmail to Friend

Transparent GIFs
Created by: Doro Sensen

You often see those nice pictures on web pages where part of the picture is transparent so that the background shines through. It's not at all difficult to create these so-called "transparent gifs".
Transp. GIFs from scratch
Saving in PSP 6
Converting to transp. GIFs
Antialiasing & transp. GIFs

This tutorial will cover two ways of creating transparent gifs: from scratch and from an existing non-transparent image. Since PSP 6 has a great new feature for saving transparent gifs, there's an extra part describing this. The last part will deal with antialiasing in transparent gifs.

Download this tutorial fileDownload file
For the third part of this tutorial, you'll need an image to convert to a transparent gif; you can download the file on the left for this purpose.

Transparent GIFs from scratch Open a new image:
– Width = 150
– Height = 150
– Background color = white
– Image type = 16.7 Million Colors
Click on the Selection tool in your tool palette:
– Selection type = Square
– Feather = 0
– Antialias = unchecked
Draw a square selection about 1 cm (a bit smaller than half an inch) apart from the edge of your picture.
Click on the Floodfill tool in your tool palette:
– Fill Style = Rectangular Gradient
– Match Mode = None
– Tolerance = 0
– Opacity = 100
– Sample Merged = unchecked

Additional options for PSP 6:
– Blend Mode = Normal
– Paper Texture = None

Turn your background colour to a dark blue (Red = 0, Green = 0, Blue = 64) and your foreground colour to a lighter blue (I had Red = 46, Green = 91, Blue = 182). Now click into your selection to fill it with the gradient.
Go to Selection || Modify || Contract and contract your selection by 35 which gives you a small square selection in the middle of the original square.
Set your foreground colour to white (Red/Green/Blue = 255). Change the Fill Style of your Floodfill tool to Solid Color and fill the inner square with white. Deselect by pressing Ctrl+D or going to Selections || Select None.
Click on the Color Switcher (the little arrows on the Active Color Panel) to switch foreground and background colours, so that white is now your background colour.

(PSP 6 users can now go directly to Saving Transparent GIFs in PSP 6.)

Go to Colors || Set Palette Transparency; click on Yes when asked if you want to reduce your color palette to 256 colors. In the following dialogue box, choose "Optimized Octree" in the Palette panel.

In the Reduction Method panel, select the option "Error Diffusion".
In the Options panel, check both "Include Windows' colors" and "Reduce color bleeding". Then click on the OK button, which will now lead you to the "Set Palette Transparency" dialogue box.
In this dialogue box, select the option "Set the transparency value to the current background color". Our background colour is white, so all the white pixels will be turned transparent now.
You won't see that before you go to "Colors || View Palette Transparency"; now you can see that the white background has really been removed from your picture.
Save your picture as a transparent gif: Go to "File || Save"; in the file-type dropdown list choose "CompuServe Graphics Interchange (*.gif)"; click on Options, choose "Version 89a" (the other version doesn't support transparency), click on OK, click on Save. You've now got a nice transparent gif!

Saving Transparent GIFs in PSP 6 In PSP 6, there's a great way to save an image as a transparent gif: Go to File || Export || GIF Optimizer.

The first tab you see is about the colour that you want to be transparent. As you can see, you can also work with a transparent background here and then choose the option "Existing image or layer transparency".

In our case, our background that we want to turn transparent is white, so check "Areas that match this color", click into the color box (that is green in the picture on the left) and select white.

The next tab that's of interest for us is the Color tab. Here you can set the number of colours that are included in your picture (you can see how many colours your image has by going to Colors || Count Colors). With a gradient fill, the image will look best with 256 colours, the maximum of colours that a gif can display.

Below that, you can decide for a reduction method; select "Optimized Octree" here.

Since we're saving as a transparent gif, the format is already set to "Version 89a" on the Format tab since the older version doesn't support transparency.

So that's it! Just click on the OK button and give your transparent gif a name.

Note that you haven't saved the image itself, but a copy of the image as a transparent gif. Maybe you also want to save the original as a .psp file to keep it for future changes.

Converting Pictures to Transparent GIFs Sometimes you'll like to convert an existing picture to a transparent gif. If you're lucky and your picture is jaggy-free, this only requires a few simple steps. However, if your picture has already jaggies in it, you'll have to first "clean it up" a bit.

Let's try this with a jpg file: Open "ornament.jpg" from your download.

Click on the Magic Wand tool in your tool palette:
– Selection Mode = RGB value
– Feather = 0
– Tolerance = 5
– Sample merged = unchecked
Now click somewhere in the center white of your jpg, and you see what I meant when I said some images have to be "cleaned up" a bit first! Though the background looks – to our eyes – all the same white, it's not. So first we have to make sure that the background which we want to turn transparent is all in one colour.
First deselect with a right-click into your image and make sure that the picture is in 16.7 Mil colours (Colours || Increase colour depth || 16 Mil colours). Change the tolerance of your Magic Wand tool to 30, and click somewhere on the white background in your image again. If that white section is totally selected now, go on; otherwise you have to further increase tolerance (see also the notes below). Now go to Selection || Modify || Select Similar so that all the white is selected.
With the Flood Fill tool (Fill Mode = Solid Color) and foreground colour set to white, click anywhere in your selection. Deselect and switch foreground and background colour, so that white is now your background colour.
Now go ahead and save your image as a transparent gif as described above for PSP 5 and PSP 6.
Some notes on properly selecting the background:

Sometimes a tolerance of 5 or even 30 isn't enough to select the whole background, so just experiment a bit! If the "ants" don't "march" exactly on the background's edge, go to Selection || Modify || Expand and expand it by 1 or 2 ... experiment again!

Sometimes the background colour of a picture is also one of the colours within the picture which you want to keep. In this case, when selecting the background, you must not work with Selection || Modify || Similar Areas but have to add to the selection by holding the shift key and clicking into the areas you want to turn transparent. Now you'll fill the selection with a colour that does not appear within the picture; you can take any colour for that, deep purple or bright pink ... Every colour can be turned transparent!

Antialiasing and Transparent GIFs Now why is it so important to make your selection with antialias unchecked? You'd think that at least with square selections the result wouldn't be different. Well, it's the same as with shadows and transparent gifs: Both produce semi-transparent pixels that cannot be displayed in a transparent gif.

For comparison, I've put some square transparent gifs on a darker background; the fragment on the left is without antialiasing, the one on the right is with antialiasing. Note the jaggies around the gifs when antialias was checked!

The same here with circle gifs. Though the circle gif with antialias maybe a bit smoother, you'd have to pay for it with those ugly jaggies which wouldn't show so clear with this background, but with a darker background...

A last note

Oh yes, and of course ...

... transparent GIFs can also be animated! :-))