Shadow on transparent background

Problems on making it...

[LetItBe]

As you might have just understood from title, I need a shadow on the transparent background.
Firstly everything looks fine. Select transparent background, then put layer and drop shadow:

<url edited>

Then the turn comes to saving. Naturally my choice is GIF (as we all understand it well... tried PNG - worse...). But then...

<url edited>
... shadow simply is gone. I tried most combinations of all these options but the struggle was empty.

Any ideas?

Thanks.

<Sorry, no personal urls, screenshots etc.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 9:31 pm (utc) on May 7, 2006]

[tedster]

Although your approach may be intuitive, as you've discovered it does not give you the results you need. If the IE browser had good alpha channel support for the png format, then you might use that form of more intuitive transparency. But alas, IE is not yet there for us.

So you need a work-around that will look like a partial transparency, even though it actually isn't. A drop shadow is a kind of gradient -- that is, it really consists of many shades of gray. These gray shades add differing tones of color to the background color. If you take a gif image with such a drop shadow effect and zoom in on it, you can see this effect clearly.

So you need a bottom layer of color in your image's work file that matches the page background color exactly, whatever color that is. This bottom layer should NOT be a background layer, but simply a layer of solid color. Once you've created this layer, you can delete any background layer that exists in your work file.

Now build your next layer and its drop shadow over this solid color layer. When you have the exact effect you want, you can use "merge layers". Note, even though you will end up with just 1 layer, do not use "flatten image" -- you don't want this single layer to be a true background layer, because of the next step.

With the solid layer color as the foreground color, choose Select > Color Range and make sure the fuzziness is set to 0. Then with this new selection active, press delete and your deletion will have created a transparent area below the drop shadow. And because the drop shadow was created over the page's background color, when it is displayed on the web page, the blend will make it appear as if the shadow is partially transparent.

Just use "save for the web" at this point, choosing the gif format, transparency checked, and enough colors in the color table to preserve the variations in tone without visible pixellation. 16 colors should do it, or even 8 in some cases.

[rden17]

when saving a trasparent image with a gradient drop shadow, in the 'save for web' section, there is an attribute called "matte color" for transparent gif's. set this matte color to match the background color of your document. If the page background you are putting it on is white, set the matte to white. If the page background is red, set your matte to red.