Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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!

share|improve this question
1  
Could you provide example pictures of what you're working with and what you're trying to do? –  JohnB Aug 16 '13 at 18:33
    
Is there some reason you don't just color the shapes in an image as opposed to creating the image mask? –  Scott Aug 16 '13 at 18:40
    
The Image lets say the Orange Part is the background (white) and the text in it are the transparent images, you want to extract the transparent images alone, am i right ? –  MAD4RA Aug 17 '13 at 4:34
add comment

2 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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