6

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

Improve this question
1
  • 2
    Assuming you're using slices, have you double-checked that the slice in question is also using the PNG-24 as its output? Photoshop can set the output settings per slice (which I've also forgotten quite a few times).
    – Jari Keinänen
    Mar 6, 2011 at 20:39

2 Answers 2

Reset to default
12

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 :)

Improve this answer
2

The image you posted already has the transparent background. When saving it (Save for Web and Devices) I don't think you selected transparency. Also it appears your image was saved as an indexed image.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.