Creating "AntiImages"

I've no idea if there's an official name for this technique; I called it "AntiImage" when doing it.

The basic idea is overlaying a white/black transparent image file (usually a PNG) over a solid color background. That way a single graphic can change color to match the layout of a website by only using CSS.

My brother had the basic idea first and talked about it here. But his Photoshop skills are far better than mine, so I needed a way to do the same thing with an existing graphic.

I found a couple plugins for paint.net that let me do it in just a few steps. The first is Color Difference to Alpha and the second was Curves+. Install those first. (This would be really hard without something like that color-to-alpha converter!)


Step 1) Open the image in Paint.net, then pick the Adjustments--"Black and White" menu. I started with an image from a set purchased from icons-icons.com
Orginal: to black-and-white version:


Step 2) Set White to be the active drawing color, then choose the Effects--Color--"Primary Color Difference to Alpha" menu. This gives a sort of shadow of the image. I used just the paint bucket tool to fill the area outside the circle with the background color of the web page (white in my case--your web page will need to have solid color background too.)



Step 3) Pick the Adjustments--Curves+ menu. Select Alpha from the drop down at the top, then you can drag around the curve to see how it looks. How you want to change will depend on the original image. For this one, I made it a little less transparent.


Step 4) Use CSS to set the background-color for the IMG tag, then just use the graphic as the image! All these graphics below use the same overlay image. For the website I'm working on, where clients can pick a color scheme to customize it, this lets us use one image that looks good no matter what sort of color scheme they choose.


The graphics are all more subdued than the original and than the background color (which shows around the edges since I'm not an expert with this blog tools CSS/HTML editor)...but the colors match pretty well. (And you could use the CSS :hover to just change the background color to do a mouse-over effect as well!)