Help required with Photoshop - Halo around text

[vindaloo]

Hi,

I'm just starting to use Photoshop, and I'm having trouble when saving a file as a transparent GIF. The image looks fine in Photoshop, but when I save it using the Save for Web option, a white halo appears around the parts of the text that sit over the transparent part of the background as follows:

http://home.freeuk.com/pete.collins/banner.gif

I expect it's something simple bearing in mind I've been using Photoshop for all of 2 days now, but it's been driving me mad. If I take off the Bevel and Emboss effect, it gets rid of it.

Many thanks,
Vindaloo

[DCElliott]

In creating the bevel PS is doing a gradient from the text to the background (which I assume is white?). When you make the background transparent, it takes away the white but the nearly white of the gradients from background to text remain.

What you need to do is chose a background color that is the color of your page - that way the gradient will flow into the background color unnoticably.

I hope Animgirl jumps in here - I learned most of this from her.

DE

[vindaloo]

Thanks DE, this makes sense.

I've added a new layer and filled it with the background color of the page - this works perfectly. I think what I was expecting was the gradient to go into transparent, rather than going into white. It confused me when the PSD file showed the image exactly as I wanted it

http://home.freeuk.com/pete.collins/hwaviation/banner.gif

Anyway, I can now get on and fine-tune the image.

Thanks,
Vindaloo

[animgirl]

When you save an image as a gif with transparency, photoshop will take the matte color that it has chosen and put a "halo" around your text. Depending on the styles or effects that are on your text, this "halo" may be large or very small. Photoshop adds a "halo" just big enough to outline your gif file, and no more. So when we see a large outline caused by saving it as a gif as in your example vindaloo, it means there are some semi-transparent pixels there that the gif matte needs to surround and compensate for.

In your case, you have applied a bevel that affects the inside and outside of your letters. Saving that as a gif will cause the gif matte to go around the verymost outer bevel of your text, which makes the outline look large because it is compensating for transparent pixels made by the bevel.

I took your pic into photoshop and adjusted the contrast so we could see the effects of your bevel better. The outside sections of your text that are not your true background color are semitransparent pixels.
That is what the gif matte has to go around. When you take the bevel off however, the text is flat and the gif exporting doesn't need to make up for your semitransparent bevel.
http://beta.impeldesigns.com/h1.gif

This can throw you off because in Photoshop you can't see the entireness that the effect of your outer bevel made.
http://beta.impeldesigns.com/h2.gif

gif can't save semitransparent sections, so it has to go around them.

This all does not mean it's bad to use transparency when we have semitransparent pixels, or not to use it when it has to make a large outline.
You can still save your graphic when gif makes a larger outline, as long as the matte color you have chosen is the same as your background, it will work great.
This will cut file size also because it's saving less pixels.

hth,
animgirl

[vindaloo]

Thanks Animgirl, nicely explained.

Vindaloo