How to save Photoshop file with for web with partial transparency over transparent background?


Question

I have an image in my program which I want to superimpose against a background. However, the image will move around and I need the background image to remain in place while the front image moves. Furthermore, the front image has a dropshadow which I have created in photoshop.

In order to allow the front image to move around, have a dropshadow, and have the background image remain in place, I have set the background for the front image to be transparent.

I am "saving for web" now to PNG-24. However, Photoshop continually turns the transparent pixels either to be white or black - with no real alpha transparency. What should I do?

Here is the image itself:

enter image description here

And here is the image, superimposed over the background, in my program itself: (The key to notice is that in the top-right of the image, the drop shadow turns to white, overlaying and obscuring the background texture.)

enter image description here

What's the best way to solve this issue? I want it to look like this when all is said and done:

enter image description here

1
6
3/6/2011 8:09:00 PM

Accepted Answer

When in Photoshop, make sure you have the background layer turned off, then hit Ctrl+Shift+Alt+S and a box will come up "Save for Web and Devices."

Select "PNG 24" from the dropdown on the right and make sure the transparency checkbox is clicked, hit save, select your destination and then load it into your site.

PNG supports full transparency and alpha masks so it will look exactly as you like, and it will move around with no problems :)

12
12/4/2012 8:35:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^