For PSP V7Home   >   Tutorials   >   Basics   >
Transparent GIFs
Download this tutorialDownload (211kb)
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
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. The last part will deal with antialiasing in transparent gifs.

Download this tutorial fileDownload file
For the second 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:
– Blend mode = Normal
– Match mode = None
– Tolerance = 0
– Opacity = 100
– Sample Merged = unchecked
In the foreground and background solid color boxes, set a dark blue (Red = 0, Green = 0, Blue = 64) for your background colour (the white box in the image on the left), and a lighter blue (I had Red = 46, Green = 91, Blue = 182) for your foreground colour (the black box in the image on the left).
Click on the little arrows in the Foreground Style Box (the black one on the image on the left) and choose the second icon from the left to set your foreground style to Gradient. For the background style, choose the icon on the right for No Style.
Click right into the Foreground Style box:
– Gradients Drop-down Box = Foreground-Background
– Invert gradient = unchecked
– Horizontal and Vertical = both 50
– Repeats = 0
– Style = Rectangular Gradient (2nd from top)
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 style to Solid Color (click on the little arrow in the Foreground Style Box and choose the brush icon on the left), and change your foreground colour to white (Red/Green/Blue = 255). Fill the inner square with white. Deselect by pressing Ctrl+D or going to Selections || Select None.
To save your 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.
Click on the Flood Fill tool in your tool palette and change your foreground colour back to white. Your foreground style should still be Solid Color. Now 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.
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! :-))