Art Saving Transparent Gifs

[DBZgirl88]

[COLOR=#004a6f]I've always had trouble saving transparent gifs. My images always turn out to be very rough around the edges, even when it's text.

What am I doing wrong? Is there a way to keep the edges of my images smooth?

This image has a transparent background and it's completely smooth around the edges.
[IMG]http://www.cjvlang.com/Writing/images/kkana/akaks.gif[/IMG]

I tried to do the same thing and the edges were very rough with mine.

I am using photoshop cs2 by the way.[/COLOR]

[Retribution]

[size=1]I think you might need to turn Anti-Aliasing off or on, depending on what you have it on currently. It also might be your font, if you're using a font -- try turning the mode to something like "Strong" or "Smooth". But basically, I don't think it's the .gif's fault.[/size]

[Desbreko]

[color=#4B0082]For the gif to look smooth, it needs anti-aliasing around the edges. But, with the gif format, you get "transparent," and, "not transparent," with no in between. (Unlike png which, while it can have varying levels of transparency, doesn't work in IE.) So the color of the anti-aliasing has to match the background it's going to be set against, or else it looks horrble. Setting that image against a dark blue background instead of a light gray/white, for example, it ends up looking like this:

[img]http://img133.imageshack.us/img133/5933/akaks27rv.gif[/img]

Not pretty. And, in fact, it would look better without anti-aliasing when set against anything but a light background. The trick, then, is being able to change the color of the anti-aliasing to match up against whatever background you intend the image to be set against.

At least in Paint Shop Pro (which is what I use, and I'd think Photoshop would be able to do the same), you can accomplish that by making a layer containing the image you want, with anti-aliasing turned on. Then you create a solid-color background layer behind it, with the color that the final image is going to be set against, and then merge the layers. Next you get the fill tool and change the solid background color around the image to whatever color you're going to make transparent, making sure that the fill tool is set to zero tolerance, so as not to recolor any of the anti-aliasing. This'll get you an image looking very much like the editted one I showed above, where the anti-aliasing shows up strongly against the new background color. Then all you have to do is set that new color to be transparent, save the image as a gif, and you've got yourself an anti-aliased image with a transparent background.

Now, to change the anti-aliasing to match a different color background, all you'd need to do is save a copy of the image in .psd format before the merging of the image and the background layer. Then you could just change the color of the background layer to whatever you wanted and repeat the process to save a new gif copy with different anti-aliasing.[/color]

[Sara]

[color=33333][font=trebuchet ms]...and at that rate, you might as well skip the transparency altogether and simply save the image with your desired background color.[/font][/color]

[Desbreko]

[color=#4B0082]Not quite. Having it transparent but with anti-aliasing gives it more flexibility, just not unlimited flexibility. That image would look fine, for example, on a somewhat darker background, just not a really dark one.

One practical use, for example, is the slight difference in background color between the Liquid and Geisha skins. Say you have an avatar using the Liquid background color; well, it's going to look a bit off whenever someone using the Geisha skin views it, and vice versa. But if you use anti-aliasing with the rest transparent, it will look fine on both, since the two shades of gray aren't all that far apart.

Personally, I'd just use png and be done with it, except that Microsoft still haven't gotten off their butts and implemented full support for png transparency in IE yet.[/color]

[Delta]

[COLOR=#790A43][SIZE=1][COLOR=#248C8D]Maybe the transparency dithering settings are off. Alright, chief. Here's what I'd do:[/COLOR]

1. Create your image with the transparency and all. Pretty basic.
2. Go to [b]File[/b]>[b]Save for Web[/b]. A screen that looks like [URL][b]this[/b] [/URL]should pop up.
3. Follow the settings in the picture and save.
4. Enjoy!

[CENTER][COLOR=#248C8D]A comparison between a dithered gif and one with no dithering:[/COLOR][COLOR=#EDEDED]__________[/COLOR]
[COLOR=#EDEDED]_____[/COLOR][pattern transparency dither] [COLOR=#EDEDED]_____[/COLOR][b]vs.[/b][COLOR=#EDEDED]_____[/COLOR] [no dither][COLOR=#EDEDED]________________[/COLOR]
[IMG]http://img.photobucket.com/albums/v487/meoi/chabi-gif-128-no-dither-dif.gif[/IMG] [COLOR=#EDEDED]_____[/COLOR] [IMG]http://img.photobucket.com/albums/v487/meoi/chabi-gif-128-no-dither.gif[/IMG][/CENTER]

Hope that helps![/SIZE][/COLOR]

[Desbreko]

[color=#4B0082]Er . . . that second image is a png, not a gif. And while it looks great in Firefox with the alpha channel transparency, this is what you get in IE when you try to use it:

[quote][img]http://img295.imageshack.us/img295/9710/iescrewspng4az.gif[/img][/quote]IE has no clue what to make of anything but single color transparency, so it just slaps a solid background color behind images with alpha channel transparency.[/color]

[DBZgirl88]

[COLOR=#004a6f]Thanks everyone, for your help. Oh and Delta, it worked like a charm :animesmil [/COLOR]