Photoshop-- Can't get a dropped Shadow on a transparent background?

Question

I'm trying to make a banner for a site and want a transparent background and dropped shadows on the text and images. It looks fine in Photoshop but when I upload the image (I'm testing it on a blog) the shadows become dark black and blocky, sort of like a weird outline. I can't seem to figure out how to fix this. Is there any way I can do a dropped shadow on a transparent background?

Answer 1

The only web image format supporting transparency is the 24-bit png. Unfortunately, it's not well-supported by IE earlier than version 7.0.

What we web designers have done for years is to create a background layer the same color or pattern the drop-shadowed image will be positioned on. When you upload the image to your site, it will LOOK as if it is transparent, but actually it is not.

Be sure to zoom in on your image to make sure you don't cut off some of your drop-shadow when cropping. It will be noticeable if you do.

There are other, more complex workaround solutions involving code, but for now, try this simple method first.

Best of luck.