Does your transparent gif look like this:
…but you want it to look like:
?
Here’s how to do it properly with the Gimp.
- Create a new image with a transparent background (c’mon, you gotta know how to do that!)
- Using the text tool select a nice font and add some nice text with a color of your choice
- Set the background color to your theme’s background color
- 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:
- 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!
Thank you very, very much. This helped me out a lot. I was having trouble with an image on a site I was creating for someone else.
Hal
Thanks! Filters / Web / Semi-Flatten is exactly what I needed.
Mystery solved! Thanks for the answer to a most frustrating last several hours.
Thanks thats Excellent… you saved the day for me.
thanks it works perfect for me… search something like this for days…
I think this method works great for a flat background color, but when trying it myself the outline still looks rough. but I am trying to get it to work for a gradient background.
The reason I’m trying to use a gif as opposed to a PNG is the PNG problem in IE6 as it just shows a gray box when transparency is used.
I am trying to render text in Gimp 2.6.2, then curve it, then make the background transparent, then save it as a Gif/jpg file and import it into Pagemaker and place it over a picture to see the picture right through it!
Can it be done?, if anyone can help – then, thank you! electricwillman@gmail.com. i am desperate! really would like to solve it, been working on this problem (off+on) x 4 months!
Thanks!
Awesome TUT!. Thank you! Now if I can just figure out how to use layer masks.! lol
Thanks man. I arrived here by searching about the Save for Web plugin. Nice to know a little more about Gimp =)
thanks man ~
you really saved me :->
awesome tut ~
thanks for posting the mini tutorial!
i’ve been searching a way to do this one!