HOME PAGETIPS & TRICKSCleaning Transparent Gifs

ABOUT MEPORTFOLIOTIPS & TRICKSLINKSTRASH [Used to be STORE]
 
Introduction.
Everybody who ever created some transparent gifs knows that it's impossible to correctly export gif with shadows or glowy effects, so that gif can be used with different background colors.
In most cases, especially when creating icons, we want to get rid of theese artifacts so we can export them to several backgrounds without having too much work. following simple tutorial will show you how to do this, fast and efficiently.

This is our nice looking image, which we want to export as a transparent gif. So we turn off background layer to see transparency. Good. Let's go export. Ooops!?! Something went wrong, let's try to fix it.


1.
On the bottom of the layer palette click on little F icon and from dropdown choose Stroke. Set size of the outline to 1 and leave other settings to their default values. You will see immediately where are the problem areas.
2.
Erase red areas with Eraser. I recommend to use Pencil mode for. Continue erasing until you reach contoures of your object.
3.
Open the Stroke effect settings again. Switch Blend Mode to Inside and change stroke color to match object color as much as possible, then make this color little darker, so you can actually see the borders.
4.
Try to export your image. Don't forget to choose matte color, close to your background. You should get perfect clean transparency.
Conclusion
As you see, getting good transparency from shadowed objects isn't so difficult. This technique is very usefull when creating color rich icons. Unfortunately none of todays main browsers does support progressive transparency of 24 bit PNG files, with which you can export shadows or glows without worrying about background.
Let's hope that new versions will have this support and we will finally start to create really transparent images.

NOTE: Some browsers on Mac OS already supports 24 bit PNG transparency.