Transparent GIF help!

[follicle]

I'm working with a transparent GIF file to stick up on my site. I've made them several times before but I've never seemed to have this problem until recently. I'll have the file ready and when I go to save it as a GIF with transparency (I check preview in the file settings field), it becomes very jaggy, almost bitmap like. Below is an image of before saving it as a GIF and after (The difference may be hard to see but compare the 2 A's in the word). I've gone through all of the "File Save" settings possible with no luck. When I post the image on my site, the jaggy edges really become noticable. Anyone know how to keep that anti-aliased (blended) look in a transparent GIF? Thanks!

(Top is before saving as a GIF. Bottom is after saving as a GIF)
http://i22.photobucket.com/albums/b326/follicle/TranGif.jpg

[urstwile]

Are you doing this with Save for Web out of Photoshop? I tried replicating your result, but it looked fine on my end. The only thing that made my font jaggy was having different Transparency dither settings on, it's smooth as long as I selected No Transparency dither.

[follicle]

Interesting. I'll give it a try and repost.

[follicle]

First, thanks for your suggestions. This is odd. I first tried it one a really small signature of mine on another forum and it worked well. Then I tried it on some large text and it happend again. See it below placed on a test website.

http://i22.photobucket.com/albums/b326/follicle/Test.jpg

Here are my settings when saving:

http://i22.photobucket.com/albums/b326/follicle/Settings.jpg

[urstwile]

What if you try with no dither at all?

[follicle]

What if you try with no dither at all?

Same thing. :( I'm at work now and I'll try it here to see if there is any difference.

One thing I have discovered is when saving as a transparent GIF, you have several "Mat Color" options like white, black, gray, 50% gray, or Netscape gray. Maybe you just have to choose a Mat color that best represents the BG color of your site. I'm not sure. I just never thought I had problems like this before.

Again, thanks for your help so far.

[DrummerHead]

Why don't you go PNG?

[M @]

Maybe you just have to choose a Mat color that best represents the BG color of your site.

That is correct. GIF is just a nasty, jagged, ugly file type. You need to have the background color of your GIF resemble the background of the page you intend to display it on.

For instance, look at the "GDF" logo at the top of the page. If you download it and view it in PS, you will find that it does not actually contain any transparency, but instead has a white background (which matches the site).

[resdog]

The problem with going "PNG" is that it isn't supported in IE6. So if you have viewers who are using IE6 (which, unfortunately, is a majority), what they see will not be pretty. With IE7, they are supposed to support pngs, so we'll see.

[follicle]

Thanks for the responses. They are greately appreciated.

I tried the same thing at work and it's the same. So all I can guess is that you must choose a Mat color that closely matches the BG color of your site so that it blends in better.

[urstwile]

Are you doing this with Save for Web out of Photoshop, or are you doing File>Save As? Because I get two entirely different results depending on the method I use.

File>Save As:

http://img465.imageshack.us/img465/4015/untitled1sz7.gif

File>Save for Web:

http://img217.imageshack.us/img217/3130/untitled2sv7.gif

[DrummerHead]

The problem with going "PNG" is that it isn't supported in IE6. So if you have viewers who are using IE6 (which, unfortunately, is a majority), what they see will not be pretty. With IE7, they are supposed to support pngs, so we'll see.

It is indeed true. Luckily you can do this (http://homepage.ntlworld.com/bobosola/) in order to see PNG correctly on IE 5.5 and above. And apparently IE 7 will be compatible with PNG.

People should know that IE is evil.

GO FIREFOX PEOPLE!! (http://www.mozilla.com/firefox/)

[Ned]

The reason why GIF cannot keep clean edges on transparency without a matte color, is because GIF only supports 1 level of transparency. In other words, each pixel is either there or its not, and can't have partial opacity. PNG supports multiple levels of transparency (PNG-24 is best), but is a newer format and not as widely supported.

Check out the w3school's browser statistics to see how many users around the globe use which browsers: http://www.w3schools.com/browsers/browsers_stats.asp

The latest stats say that 55% are on IE6, and 27% on Firefox (way to go, Firefox, on gaining such a large market share...). As far as IE6 not supporting PNG, I'm pretty sure that's wrong (I don't use IE, so I won't say with certainty). I think that's IE5 you're thinking about, ResDog...?

[resdog]

no, the png issue is with IE 6 and below. Since IE hasn't updated their programs since 2001, support for recent standards (CSS2, png, etc.) is very low.

DrummerHead, Thanks for that workaround! That's awesome!

[bazman]

You can have png supported under IE6 by using a simple bit of javascript. If you look at my site www.realflairdesign.co.uk (http://www.realflairdesign.co.uk) you can see I have used it for my logo.

Simply place this bit of script at the bottom of the head tag on any page you want a png

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="../pngfix.js"></script>
<![endif]-->

Copy this code into a text editor
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
var imgAttribs = img.attributes;
for (var j=0; j<imgAttribs.length; j++)
{
var imgAttrib = imgAttribs[j];
if (imgAttrib.nodeName == "align")
{
if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
break
}
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader"
strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
Save it as pngfix.js and upload to the root of your site and you will be able to see transparent 24bit pngs in IE6

[urstwile]

Just to reiterate what I said in Post #11 of this thread, are you using File>Save As or File>Save for Web. Check post 11, it shows a dramatic difference in quality between the two.