View Full Version : Downside to color variation through PNG masking?

07-05-2011, 07:57 PM
The title is complex, but basically I was thinking is... I have an image of which I would like the user to be able to select the border color. The only issue is I don't want to make dozens of images of varying colors if avoidable. What I was thinking instead was to make a the image a PNG where the background of the image matches the background of my site, place the image in a box filled with the color the border should be, and make the border clear on the PNG. Then whatever color the div behind it is would show up as the border color.

It sounds like a fairly straight forward idea, but I feel like it shouldn't be so straight forward. Can anyone think of downsides to this? Are there situations where the images shouldn't show? Because were that the case, there'd be a giant block of color where the image should be, and if someone goes with something like a neon green, it'd be kinda ugly.

07-06-2011, 01:26 AM
Well obviously if your images have larger filesizes it will take them longer to load, resulting in an ugly color box for a few seconds. Also, if anyone wanted to save the image it wouldn't look the same as it would on the site.

I'm a bit confused as to why you want to do this... But perhaps you should look into php. I'm not familiar with image editing in PHP but this looks interesting...: http://us2.php.net/manual/en/function.imagerectangle.php

07-06-2011, 04:35 AM
I use PHP commonly, I'm just not very good with image manipulation and have yet to find a good guide/tutorial to it.

As for why, its simply so I can provide the most in the way of colors/options to the user. The images are used to mark things on my site, and giving them a few color choices would mean I could let them choose how things are marked. I also plan on altering the thickness of the border, so this way, I could make 3 images and have access to what ends up being (lets say 8 colors), 24 separate visual images.

Of course, I can also make 24 images with diff borders and do that too. Ideally I'd like to figure out how to do it in php, but not sure how. I'll put up a post in the PHP section for it as well.

07-06-2011, 04:50 AM
You could also just use css... maybe the easiest way?

<img src="blah.png" style="border:5px solid #00FF00;" />

But yeah, I think PHP would be the most professional way to go.

07-06-2011, 05:03 AM
Nah, the issue isn't the border of the final image (the square), but the border around the content. Essentially I have an icon inside with a stylized border around it, so there's nothing CSS can do for that.