HOWTO: Smooth transparent gifs with Gimp

Does your transparent gif look like this:

…but you want it to look like:

?

Here’s how to do it properly with the Gimp.

1. Create a new image with a transparent background (c’mon, you gotta know how to do that!)
2. Using the text tool select a nice font and add some nice text with a color of your choice
   
3. Set the background color to your theme’s background color
   
4. The most important step: right click the text layer and choose Filters->Web->Semi-Flatten. Your text should now have some “smudge” around the edges:
   
5. Click File->Save as and save the file as a gif. You’re done!

If you skip step 4 your text will most likely look like crap! The Semi-Flatten function will replace partial transparency with the background colour, creating a nice smooth edge. That’s what you want. It took me a long time to figure out how to do that with Gimp, so I hope this short tutorial will help others.

My blog uses the cool unwakeable wordpress theme. If you’re using this theme (or any similar theme) you probably want to change the “unwakeable” logo with your own text. Ben Gray has a short tutorial on how to do that with Photoshop, but those instruction didn’t quite work for Gimp, so I wrote my own short tutorial. If using this theme, use a background image of (roughly) size 200×42 px, save the file as title.gif and upload to wp-content/themes/unwakeable-1.x/images. Easy!