GIF transparency question

CC
Posted By
chris ciotti
Feb 6, 2005
Views
344
Replies
2
Status
Closed
Greetings all –

Info:
Photoshop CS under Mac OS X (10.3.7)

I’m adding some text buttons to a website and am saving as gif via the "Save for Web" option and am generally displeased with the results. The text looks fine in PS but the exported gif is nothing if not mangled. See the result here: http://www.geocities.com/chris_ciotti/Holding/Test.html

The buttons are on a transparent background and I suspect this is the problem. PNG would be nice but I’ve read of issues with IE and alpha transparency. My question is, is there a method for producing good looking gif transparent images? Thanks.

–chris
Related Tags
question transparency

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.

CC
chris ciotti
Feb 6, 2005
On Sun, 6 Feb 2005 16:32:54 -0500, chris ciotti wrote
(in article ):

Greetings all –

Info:
Photoshop CS under Mac OS X (10.3.7)

I’m adding some text buttons to a website and am saving as gif via the "Save for Web" option and am generally displeased with the results. The text looks
fine in PS but the exported gif is nothing if not mangled. See the result here: http://www.geocities.com/chris_ciotti/Holding/Test.html
The buttons are on a transparent background and I suspect this is the problem. PNG would be nice but I’ve read of issues with IE and alpha transparency. My question is, is there a method for producing good looking gif transparent images? Thanks.

–chris

Seems I’ve been able to answer my own question. I discovered the "Matte" option and set it to the color of my background and viola, clean image 🙂

–chris
T
tacitr
Feb 7, 2005
I’m adding some text buttons to a website and am saving as gif via the "Save for Web" option and am generally displeased with the results. The text looks fine in PS but the exported gif is nothing if not mangled.

Yep, that is correct. GIF transparency is "all or nothing;" a pixel is completely transparent or completely opaque, but the GIF specification does not permit translucency. Because of that, anti-aliased edges, such as the edges of text, get mangled.

There is a fix.

Look closely at the "Save for Web" dialog. You will see an option called "Matte color." Right now, it’s set to "None."

Set the matte color to be the same as the background color of your Web page.

Photoshop will "fake" translucency by creating pixels that are the color of the Web page along the edges of the text. The advantage is that it creates the illusion of a smooth, anti-aliased edge; the text will look great. the disadvantage is you can ONLY use that GIF on that color background. if you change the color of the Web page background, you will see a weird halo around the edge of the GIF, and you will need to use Save for Web on the original file to create a new GIF with the proper matte color.

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

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections