I took the loaders from xooplate.com then exported them with the help of the included action to a GIF. But I have some white pixels around the loader which are really annoying when displayed on a dark background. You can see it here, in a frame I extracted from the gif:
How can I prevent those white pixels and maintain the transparent background?
Answer
The way transparency works with 8-bit gifs/pngs is that a pixel is either fully transparent or fully opaque.
On the corners of a circle where the circle blends transparently to the background, there are usually pixels that are semi-transparent to smoothen the transition. This smooth transition can not fully be reproduced with 8-bit gifs/pngs.
One way of faking this is to select a background matte for all those semi-transparent pixels. This means those pixels that are not fully transparent get their color calculated as if they were on top of the matte color.
The white pixels in your circle gif happend like this, because they gif was made to be used against white background. The semi-transparent pixels of the original circle got rastered against the white matte color, resulting in almost white but fully opaque pixels around the corners.
The way to remedy this if you have the original, fully transparent circle is to save for web & devices and select a matte color that suits your background. That way, potentially semi-transparent pixels will get merged to fully opaque pixels against the matte color, and viewed on you website with similar background color, it will appear fully smooth. Note that a) graphics with small ranges of semi-transparent areas (in pixels) work best, and b) this requires that the background the gif is shown against is some of what in a consistent color that you pick for your matte.
In this image:
- The top left is the original round graphic with anti aliased, i.e. smoothed, corners.
- The same result you get with png-24, as seen in the top right - but this does not work for animation.
- The bottom left view shows you how the semi-transparent pixels of the graphic get transposed onto the selected red matte color. Also note how those pixels, that are completely transparent, remain completely transparent. Whereas only those pixels that have a bit of transparency in them get "underlayed" with the matte color, and the fully opaque pixels remain completely unaffected by the transparency settings (however, they are affected from selections on dithering type and colors).
- The bottom right resembles the kind of exporting options that were used for your example image. With a white matte selected, the same pixels that show red in the bottom left image, will show white in the bottom right image. This is perfectly acceptable if you show it against white background. With other, darker, backgrounds, the white pixels show because the use the wrong matte color to create fully opaque pixels for any pixels not fully transparent.
See the both gifs exported with red and white matte in this image, against different background. This shows how the red matte nicely blends with a red background, but also how disturbing the white matte shows against a black background.
If you are in the unfortunate situation, that you do not have the original file with full anti-aliased alphas (i.e. you only have the 8-bit gif), it is troublesome to reverse this matte rastering - pixel by pixel you have to remove the matte color from the semi-transparent pixels and then re-export them with more appropriate settings.
No comments:
Post a Comment