changing background color in transparency

P
Posted By
pm
Sep 3, 2004
Views
550
Replies
6
Status
Closed
Hello,

I feel silly for asking this, as I know I’ve learned this before, but I’ve forgotten how to do this. I need to move a gif with transparent background (assuming a white background, the color graduates to white along the edges) to a background color other than white. How do I get it to avoid looking crappy with the whiteness showing up after the move to the new color?

Thanks for helping me out.

Paul

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

MR
Mike Russell
Sep 3, 2004
PM wrote:
Hello,

I feel silly for asking this, as I know I’ve learned this before, but I’ve forgotten how to do this. I need to move a gif with transparent background (assuming a white background, the color graduates to white along the edges) to a background color other than white. How do I get it to avoid looking crappy with the whiteness showing up after the move to the new color?

This is not directly possible, unfortunately, because GIF supports an all or nothing transparency. This is one of the reasons you seldom see drop shadows for a gif image. Here are some common workarounds:

1) make your gif with pixel accurate edges, instead of relying on a matte color. You may see jaggies with this method, but at least there will be no white edges.

2) us a large number of gif images, with different edge color combinations, and change the gif according to the location on the page.

3) If the image has inherrently soft edges, e.g. a cloud, dither the edges of your image instead of fading it to the matte color.

4) use a png image instead of gif. Png supports a true alpha channel. The drawback is that some browsers ain’t got a thing cuz they don’t got that PNG.

None of these is a perfect solution – but at least now you know why web animations against a gradient background are so rare.


Mike Russell
www.curvemeister.com
www.geigy.2y.net
H
Hecate
Sep 4, 2004
On 3 Sep 2004 13:29:01 -0700, (PM) wrote:

Hello,

I feel silly for asking this, as I know I’ve learned this before, but I’ve forgotten how to do this. I need to move a gif with transparent background (assuming a white background, the color graduates to white along the edges) to a background color other than white. How do I get it to avoid looking crappy with the whiteness showing up after the move to the new color?

Thanks for helping me out.
Resave the original image with a different matte.



Hecate – The Real One

veni, vidi, reliqui
E
edjh
Sep 4, 2004
Mike Russell wrote:
PM wrote:

Hello,

I feel silly for asking this, as I know I’ve learned this before, but I’ve forgotten how to do this. I need to move a gif with transparent background (assuming a white background, the color graduates to white along the edges) to a background color other than white. How do I get it to avoid looking crappy with the whiteness showing up after the move to the new color?

This is not directly possible, unfortunately, because GIF supports an all or nothing transparency. This is one of the reasons you seldom see drop shadows for a gif image. Here are some common workarounds:
1) make your gif with pixel accurate edges, instead of relying on a matte color. You may see jaggies with this method, but at least there will be no white edges.

2) us a large number of gif images, with different edge color combinations, and change the gif according to the location on the page.
3) If the image has inherrently soft edges, e.g. a cloud, dither the edges of your image instead of fading it to the matte color.

4) use a png image instead of gif. Png supports a true alpha channel. The drawback is that some browsers ain’t got a thing cuz they don’t got that PNG.

None of these is a perfect solution – but at least now you know why web animations against a gradient background are so rare.

Here’s another solution which works for some images:
http://www.sover.net/~hannigan/lucyinthesky.html


Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html
Comics art for sale:
http://www.sover.net/~hannigan/batsale.html
I
iehsmith
Sep 4, 2004
On 9/3/04 8:15 PM, Hecate uttered:

On 3 Sep 2004 13:29:01 -0700, (PM) wrote:

Hello,

I feel silly for asking this, as I know I’ve learned this before, but I’ve forgotten how to do this. I need to move a gif with transparent background (assuming a white background, the color graduates to white along the edges) to a background color other than white. How do I get it to avoid looking crappy with the whiteness showing up after the move to the new color?

Thanks for helping me out.
Resave the original image with a different matte.



Hecate – The Real One

veni, vidi, reliqui

I’m thinking that Paul doesn’t have the original. Paul, can you upload the GIF in questions somewhere we can see it? The answer could be simple or complex, depending on the image.

inez
P
pm
Sep 4, 2004
Thank you all for your assitance!

It is, as Inez suggested, not one of my own designs:
http://www.bidpay.com/images/banners/banner3.gif

I’ve worked it over by graying the white pixels (color replacement) before moving it to a background color. Not perfect, but it’s so small that it’s passable for now.

Still, I’d like to know the more "accepted" way.

Paul
T
tacitr
Sep 7, 2004
Still, I’d like to know the more "accepted" way.

The accepted way is to use the original .PSD file. Open it, use File->Save for Web,and choose a matte color that is the color of the new background.

If you do not have the original .PSD, there is no "accepted" way to do it; the matte color has already been integrated into the GIF and can not be changed. So the answer to your question is: If you are starting from a .GIF and do not have the original .PSD, your options are very limited and there is no really good way to do what you’re asking.


Art, literature, shareware, polyamory, kink, and more:
http://www.xeromag.com/franklin.html

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections