How would I go about saving a layered transparent image?

Question

This is a little hard to explain, so bear with me. I'm wanting to save out a series of diagram images in a sprite sheet for a website. Right now, I have it so that I have a white image with "holes" cut into it that make the diagram. I put a background behind that image and it colors the "holes."

The problem is, the parts not colored are white, and this sometimes looks bad if the sprite sheet goes against a non-white background (so it's a white box with a colored diagram on it).

Is there a way to save an image so that the white part could be transparent (or any color), but maintain the ability to also customize the diagram color?

I'm not sure this is possible, since the only way I can think of requires layers (which can't be saved for the web) but I'd appreciate any help! Thanks!

Answer 1

Instead of using a basic white layer with holes in it, I would use a black layer mask with white "holes" in it.

Try converting one of your existing sheets this way:

• Ctl/Cmd-Click on the Layer Panel thumbnail of your white layer to select by Opacity.

• Ctl/Cmd-Shift-I to invert the selection.

• Target your colored background layer.

• Click the New Layer Mask icon at the bottom of the layers panel.

• Delete the white layer unless you need to keep it for some other purpose, in which case hide it.

Your "colored background" layer is now the diagram layer, with everything else on the layer transparent, so you can put any other background you want behind it.

Answer 2

Make the layers you want to get saved visible. I usually do this by creating a new file and dragging and dropping all the layers to this new file. Make sure to have all the other layers to be invisible.

Go to File->Export->Export Layers to Files.

Click the checkbox next to "Visible Layers only"

Select your file saving type as PNG.

This works exactly like sprites with greater precision and saves time.