Jagged transparent GIF 3

[doctorChuckles]

Hi. Me again.

I have an animated .gif, consisting mostly of a line drawing and some text on a transparent background. I've toyed with the notion of displaying it on top of a background image.

When displayed in the browser on top of a dark background image, the black lines and text have a light-colored fringe around them. Very unattractive and distracting.

At first I thought there might be some white colored pixels next to the black lines and text, but I'm not so sure now.

I went back to the multi-layer Photoshop document from which the animated .gif was made. I de-fringed the image, just in case, and put a dark colored layer behind it. No sign of any white pixels. I tried saving the whole thing with ImageReady, then examined the resulting .gif, in PhotoShop. No sign of a white fringe.

But... If I remove the dark background from the Photoshop document, save the thing as a new animated .gif and display it in the browser, in front of a dark background image, I get the white fringe again.

I'm beginning to suspect the image is okay, but the browser isn't able to display this sort of thing correctly. Just a guess.

If you've got any thoughts, suggestions or troubleshooting tips... Please pass them on.


Cheers,


Tim

 

[Foamcow]

That's because GIFs is not alpha transparency level for a pixel. It's either 'on' or 'off'. It can't be semi-transparent - it's all or nothing. The transition from solid to transparent is done with colour rather than transparency.

Photoshop is doing it's best to provide a smooth transition between the pixels and the transparency. Unfortunately this often fails because at some point there is a jump from 'on' to 'off'.

Try using a 24 or 32 bit PNG file with transparency.

PNG supports Alpha transparency so the image can fade in opacity as well as colour.

However, these aren't supported in IE6 (suprise suprise).
The good news is that with a little javascript it's possible to fix that problem. Google for IE PNG transparency for the fix if you go down this route (or let me know and I'll find the code I have here).

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ChrisHunt]

The thing about gifs is that a pixel is either transparent or it isn't.

If you draw a black diagonal line on a white background, and tell your graphics program it should be "anti-aliased", what you'll get is a pattern of pixels in various shades of grey that look like a smooth line when viewed from afar.

Now, if you convert that into a transparent gif, only the pure white pixels get converted - all the shades of grey remain fully opaque, giving you a whitish "halo" around the line if you put it on a different coloured background.

To avoid this problem you can...
[ul]
[li]Switch anti-aliasing off in your graphics program, but this gives you jagged lines which often look worse than halos do.[/li]
[li]Generate your gif starting with a background colour close to the background it will be used over. That way the halo won't be so noticable[/li]
[li]Don't use gif, but use a file format that supports full alpha transparency - png is probably the best choice. However, IE6 doesn't support it natively (Google for "ie6 png transparency" and you'll find plenty of ways to work around this problem). PNGs don't do animation though.[/li]
[li]Don't use a transparent background![/li]
[/ul]

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BabyJeffy]

If you switch to using PNGs, you need to use 32bit PNGs. This is required to get consistent colours across all browsers (you can use a 24bit one... but the colours will not always show the same on all browsers - well... across IE6 and FX for instance).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[monksnake]

If you go to using .png files:

If by any chance, you have a security certificate on your site, (https:......), even with the workaround in IE6, your .png files won't display correctly.

Found this out through experience.

<.

 

[Foamcow]

If by any chance, you have a security certificate on your site, (https:......), even with the workaround in IE6, your .png files won't display correctly.

Tell us more. I'd not heard of this.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[doctorChuckles]

Hey folks,

Thanks for your kind and generous replies. Here's a response to the bunch.

********

Okay, I think I get it. The fringe is not white, it's gray. It's the gray pixels that anti-alias the black lines.

Apparently, when ImageReady renders the .psd document as a gif, it processes those anti-alias pixels as transparent, or partly transparent.

Once the .gif is rendered, the transparency is lost, and the gray pixels look white against a dark background.

To fix this, I'd have to return to the original multi-layer .psd document and either alter the gray pixels (remove them or make them black) or re-draw the black lines and text with anti-aliasing turned off.

I've tried the matting:de-fringe... command in Photoshop but I don't understand how it works and it doesn't seem to be solving the problem.

Apparently, the .png format supports transparency, but I have no idea how to save a multi-layer .psd image as an animated .png. My version of ImageReady doesn't seem able to do that. Maybe it isn't even possible. (Anybody know?)

I might just have to settle for displaying this animated .gif on top of a light-colored background.


Thanks,


Tim

 

[BabyJeffy]

...but I have no idea how to save a multi-layer .psd image as an animated .png...

As Chris mentioned...

... PNGs don't do animation though ...

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[feherke]

Hi

Apparently, the .png format supports transparency, but I have no idea how to save a multi-layer .psd image as an animated .png.

PNG itself does not support animation. Its brother, MNG supports it. The problem is that browsers does not support MNG by default.

http://libpng.org/pub/mng/

Feherke.

http://rootshell.be/~feherke/

 

[doctorChuckles]

I'm the OP, checking in with a BFO (blinding flash of the obvious).

If I want this transparent, animated .gif to display in front of a background image, I must return to the original multi-layer .psd document, make a new layer, send it to the back, copy the desired background image to that layer, then render it as an animated .gif in ImageReady. The resulting new .gif will display just fine in the browser.

I already tried it. Works perfectly.

Why does everything always look so clear in the rear view mirror?

Thanks for all the excellent suggestions.


Tim

 

[kaht]

http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerSupportForPNG

Foamcow, at the top of this page you'll find in issue #2 under alphaimageloader bugs that there is no https support for the alphaimageloader filter that is needed to get ie6 to display pngs correctly.


-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[monksnake]

Tell us more. I'd not heard of this.

I apologize Foamcow, I just now read your post. I see kaht pointed you in a direction.

<.