GIFs in PS

I have been trying to improve my meagre web skills and have been trying to make a simple gif with a transparent background. I tried with the shape tool (experimenting with all three settings), and I always got a little bit of a halo or fringe around the image. I have done this in PS and used Save for Web. I also tried exporting to IR (which I don’t normally use). I got the same results whatever I tried.
OTOH, when I create the shapes in PS over the same background as the web page, it merges fine (with the web page), and I don’t see this white-ish fringe.

But really I didn’t want to stay with a plain background in my web page, so I textured it (back in PS). Then, I also applied the same texture to the background of the gif in PS. However, when I import this into the web page, I can see a very faint outline where the two textures don’t merge seamlessly.

So, I am back to a transparent gif seeming to be the best option, but it isn’t quite working out for me.

Questions:
(1) Can you tell me what I might be doing wrong to get the fringe when trying to save a transparent background?
(2) Any other suggestions about any of the steps above?

I have been trying to improve my meagre web skills and have been trying to make a simple gif with a transparent background. I tried with the shape tool (experimenting with all three settings), and I always got a little bit of a halo or fringe around the image. I have done this in PS and used Save for Web. I also tried exporting to IR (which I don’t normally use). I got the same results whatever I tried.

OTOH, when I create the shapes in PS over the same background as the web page, it merges fine (with the web page), and I don’t see this white-ish fringe.

But really I didn’t want to stay with a plain background in my web page, so I textured it (back in PS). Then, I also applied the same texture to the background of the gif in PS. However, when I import this into the web page, I can see a very faint outline where the two textures don’t merge seamlessly.

So, I am back to a transparent gif seeming to be the best option, but it isn’t quite working out for me.

Questions:
(1) Can you tell me what I might be doing wrong to get the fringe when trying to save a transparent background?
(2) Any other suggestions about any of the steps above?

Thanks, Jasper

Jasper wrote:

Questions:
(1) Can you tell me what I might be doing wrong to get the fringe when trying to save a transparent background?
(2) Any other suggestions about any of the steps above?

Thanks, Jasper

Pick a matte colo (in the SFW dialog or in ImageReady) that is the same or close to your background color.

Questions:
(1) Can you tell me what I might be doing wrong to get the fringe when trying to save a transparent background?
(2) Any other suggestions about any of the steps above?

This is standard behavior of GIF’s. The reason for it is that GIF does

allow variable transparency – each pixel is either completely clear or opaque. Edge pixels will contain a mixture of the object color and the background color, causing a fringe. This is similar to cutting out a magazine picture using pinking shears, and gluing it on top of another background: if the background color matches the original, there will be no fringe..

So you get a jaggy edge to your image unless you match the original background of your GIF image to the color of the background. As you’ve discovered, you can do this to an extent with a textured background, but there will still be a seam when the background does not line up with the original texture of your image.

One solution is to use PNG format, which supports semi-transparency and is supported by most browsers. PNG is still not universally supported,

so you may want to make do with GIF. Even with PNG, you will need to use photoshop’s defringe command, or a similar procedure, to remove the last traces of the background from your image.

—

Mike Russell
http://www.curvemeister.com
http://www.zocalo.net/~mgr
http://geigy.2y.net