Help with gifs?

23-12-2018, 04:04 AM

Scribbbsss Wrote: So, I just updated my signature with a GIF that I made in Photoshop and AE! The thing is, it's my first time doing these and I don't get why there's a weird white outline on it, anyone with a clue on how to fix it? Thanks!

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.


[spoiler=source]https://graphicdesign.stackexchange.com/questions/15549/how-can-i-remove-the-white-pixels-around-the-edges-when-exporting-a-transparent[/spoiler]

23-12-2018, 04:09 AM

Snacks Wrote: 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.


[spoiler=source]https://graphicdesign.stackexchange.com/questions/15549/how-can-i-remove-the-white-pixels-around-the-edges-when-exporting-a-transparent[/spoiler]

Thanks! This was really a big help!!!

23-12-2018, 04:16 AM

Scribbbsss Wrote: Thanks! This was really a big help!!!

Did it even help you?

23-12-2018, 04:23 AM

Snacks Wrote: Did it even help you?

23-12-2018, 04:31 AM

Scribbbsss Wrote:

See it for yourself!

Had to eyedrop the color of the site to fix it but looks better!

That is so fucking cool.
Do you think I can make you make one for me too? A gif signature of course. :sip:

23-12-2018, 04:32 AM

Snacks Wrote: That is so fucking cool.
Do you think I can make you make one for me too? A gif signature of course. :sip:

Sure thing! I'd absolutely love to :D

PM with what you want it to have and how you want it to look :)

Great Mami profile pic btw, my first profile pic on this forum was an Akemi one

23-12-2018, 04:52 AM

Scribbbsss Wrote: Sure thing! I'd absolutely love to :D

PM with what you want it to have and how you want it to look

Great Mami profile pic btw, my first profile pic on this forum was an Akemi one

Thanks for the comment on the profile picture.
I want something unique, something of my own creation or at least very "touched" by my own hands (if you follow me).
Is it okay if I keep your offer in mind?

23-12-2018, 04:55 AM

Snacks Wrote: Thanks for the comment on the profile picture.
I want something unique, something of my own creation or at least very "touched" by my own hands (if you follow me).
Is it okay if I keep your offer in mind?

Sure thing!

23-12-2018, 04:58 AM

Scribbbsss Wrote: Sure thing!

Thank you a lot!
In the meanwhile I'll just fuck around with my software coding.