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.

I'm writing a little javascript application in which users need to be able to choose an image from an "image library" and then choose the color of said image. There will be a massive number of images and a massive number of colors, and I would really love if I did not have to make each color of each image. Instead, I was hoping to be able to take a png and swap the transparent and visible elements, so that I can just put a solid block of color behind it to change the color. Does anybody know of a good way to quickly do this (I have adobe design premium 5.5)? Thanks in advance!

share|improve this question
    
I don't think there is any way to inverse transparency in any app I've ever seen. –  Scott Jun 26 '13 at 21:31
1  
What do your images look like? Are they icons in plain colors? Do you have any or do you have to make them? –  Yisela Jun 27 '13 at 2:32
    
You may be able to do what you want with imagemagick, see here. –  David Mear Jul 29 '13 at 13:45
add comment

2 Answers

I can suggest a destructive method, as I've tried using masks but I couldn't get it to work.

  1. Begin with a large canvas size, i.e. the largest possible display size, and 300 PPI.

  2. Set the background to be consistent with the background you're using in your app.

  3. Create the shape you want to be able to colour variably.

  4. Use the Magic Wand tool with zero Tolerance to capture the shape of the image.

  5. Rasterize the background and press delete.

  6. You should end up with a cut out of the shape.

  7. Resize the image to the sizes you need it at.

You will need to use various thumbnail sizes with this method if you need to display it at largely varying sizes, as it's not vector based it won't scale that beautifully outside of a GD program.

You can then change the background colour of the image container dynamically with your script.

A better, but far more time consuming method would be to create a vector based outline.

share|improve this answer
add comment

Thinking laterally: What about using SVG and changing the colour dynamically?

Or using an font that contains all the glyphs you want and changing the colour with CSS?

It really depends on the precise result you're after, but there's hopefully a realtime method for doing it, so you don't need to generate an image for each colour variation.

Quite a few good SVG tricks are noted here, including colour change via CSS: http://css-tricks.com/using-svg/

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.