When you are working with .gif images you need to know about semi-transparency and antialiasing and how they behave in .gif images. GIF format is the main file format for making animations for the present and success at making transparent gif and animated images that look good depends upon knowing about semi-transparent pixels, antialiasing, and semi-flattening.

GIF files can not handle semi-transparency therefore those pixels need to be completely filled with color.

This picture is a demo of semi-transparency. I put the red dot to demonstrate the shading. That shadow is not fading from black to gray. Every pixel has gradations of black that get less and less as the shadow gets lighter and lighter. Imagine teeny dots of black in each pixel becoming less and less dense. GIF images can't handle that. The pixel has to be made opaque by adding background color behind those dots. The process of adding the background color is called, semi-flattening.



This is what it looks like in GIMP after it's been semi-flattened.



When you create text or draw you get something called antialiasing. That is the addition of semitransparent pixels around the image. It gives a smooth look to the image. If you don't semi-flatten it, .gif image format deletes those antialiased pixels and you get a rough, not so nice finish.

These two smilies demonstrate that. The one on the left is semi-flattened, the one on the right isn't and looks rough - the bigger the image, the rougher it looks. It's pretty apparent that you need to semi-flatten .gif images.



This is the red smiley zoomed and you can see the lighter pixels around it. That is the antialiasing.



Here is a text example.



The two goblets in this picture started out with identical drop shadows. The one on the left was semi-flattened, the one on the right wasn't. As you can see, the gif format ate the antialiased pixels and the semi-transparent parts of the drop shadow. All that's left of the drop shadow are a few black pixels on the right and bottom of the goblet.



You can see what happened to the drop shadow on these hearts.



How to semi-flatten your image.

You can get fencepost's Settings with Semi-Flatten script here. Right-click and download it and save it in your /.gimp-2.6/scripts folder. It will save you a lot of time.

You can also access semi-flatten and do the layers one at a time by Layer > Transparency > Semi-Flatten.

This is an image of the Settings with Semi-Flatten script dialog. Make the color the color of the background you will be showing your image on.

You will find it in Filters > Animation > Settings with Semi-Flatten.



You can do it manually by going to Layer > Transparency > Semi-Flatten or to Filters > Web > Semi-Flatten.

PNG images don't need semi-flattening and will look nice because they can handle semi-transparency. PNG animations are starting to be showing up on the web now but are few and far between so far.

Optimizing the Difference
Optimize the difference after semi-flattening.

If you have a large animated image with many layers, you may want to cut down on bandwidth size by optimizing the difference. Before semi-flattening, save your image as a GIMP .xcf file so if you need to edit it again you will have a complete copy. After optimizing the difference you may not be able to edit it effectively. Press Ctrl + D, close the .xcf file and you will have a copy of it. Always work on copies; preserve your original file.


After you have semi-flattened the layers, go to Filters/Animation/Optimize (Difference). Wait until it is finished. The layers should have (combine) in them after the speed rate.



Then Save As an animation. When it comes to frame disposal, click the down arrow by frame disposal and choose Cumulative layers (Combine)



Optimizing the difference removes repeated areas of the file. If you have a picture behind the animation layers, it will only be visible in the first layer of an optimized, combined animation.

This looks like it's written for GAP? Usually any animations I do are with Xara Extreme but I've been wanting to install but haven't figured it out yet. I saved this nevertheless.

Not just for GAP.

I think Xara Extreme probably has a semi-flattening choice when you save your animations from there.

That's not to say GAP animations shouldn't be semi-flattened. All gif images that have any transparency in them should be semi-flattened whether they are animations or not.

To add to what O said; remember that each layer in a GIMP image can also be treated as a frame in an animation. You can just save the layers as an animated .gif or .png (with the apng plugin).

Basically, GIMP has built-in framework to handle animations, even without the GAP plug-in.

I think I recall you mentioning that you are a PaintShopPro user. I, too, have come from PSP7 and I used Animation Shop with it to create animations.

Not so with GIMP. As GnuTux said, gimp can make animations simply with layers. The layers make the animation frames and when you save it as a gif you check Save as Animation in the dialog.

This is very informative and interesting. I know I find it very useful. Thanks for posting.

I'm pleased it was useful for you, Silvertayl. Keep on GIMPing!

Sorry been working on other projects, but from time to time I come here to read stuff. The reason why I ended up on this very old post. LOL I have textures that contain several layers I place on 3D meshes or objects and was wondering if this technique would help make the details look better? Also with brushes too because it seems if i go too small or too large to make them fit properly I lose the detail and crispness. I will try to post some pictures of my work. Thanks..

Liana

I only recommend semiflattening for transparent backgrounds in gif images.

I downloaded your white bikini and played with it a bit.

Use the Color Selection tool with the threshold set at 30 and click a white area. All of the white will be selected. With the selection in place, Select > To Path.

Ctrl + Shift + A to turn off selection.

Make a new layer filled with black, then Select > From Path and fill the selection with white. The Paths tool is great for smoothing out stuff like that. Here's what I got when I did that. Yours in on the left, the one I did on the right.

Thanks O, for educating us a little bit more. I had no idea about semi-flattening with .gifs (evidence that I am not a big animation artist) but I did make some emoticons for messenger and struggled with the apparent pixelation. Now I know what I need to do to fix that. Thanks.

Oh great thanks O. I will do that with my other things I make from now on. I posted my finished colored project on the 3D mesh and avatar. I have not done any meshing just the retexturing. I did the textures on everything but the skin color, head, and eyes. No I do not look like that. LOL Thanks again for the info.

Liana

Well great, Mahvin. Glad you found it helpful. This tutorial kind of got resurrected. It was posted last May and is having a second life.

Liana, those are adorable. Keep up the good work.