Community Tips & Tricks • RGB Image Technique & Color Matrices

I was experimenting with Color Matrices to colorize images without affecting their contrast. Practically I wanted to have full control of how the image looks.

I'm referring to element images like buttons and so, not photographs.

I tried with ImageTint first, but I quickly moved on to Color Matrices, since tinting an image won't give you white, and black will get rid of the lighting and shadows.

After experimenting for some time I remembered the method that is used on BeamNG (a videogame) to make skins, which probably might be used on a lot of stuff. This method has a drawback of course, the images have to be designed with that in mind. Basically color matrices are just RGB values naturalized (divided by 255), so this method uses a 3x3 matrix for red, green and blue, and we assign those colors to our images, where shadows are red, midtones are green and highlights are blue. This way we can manipulate the image's look pretty easily, we just need to control the amount of each color using their alpha channels.

An image says more than a thousand words:Here, as I said, I used blue to represent white, green to represent color and red to represent black. Controlling the transparency of each color helps to establish the contrast the image will have, so, everything that is 100% red will be black and 100% blue will be white. Anything else will be a shade or a tint of whatever color green represents. You could either use gradients or, as I prefer, start with a green layer, then add the blue layer and finally the red layer, I do it with color to transparent gradients.

Now, lets try this with an actual UI element, take this background image poiru made for the Illustro skin for example:If we wanted to change its color to red, we could try with an ImageTint option. But we find out that all it does is change the stroke's color and anything else, even if we use greyscale=1. That's because black has no hue, nor saturation. There's no information, but white on the other hand does have color information, so it can be tinted just fine. So we could just try a color matrix on it instead..Only to find out that we get the same result...The color looks much better, but not quite what we want.

So, let's redesign the image utilizing the RGB technique:Now, we can assign a color matrix to itwhere
Red=R1,G1,B1
Green=R2,G2,B2
Bue=R3,G3,B3

So this:Results on this:Now we can colorize it however we want, we have full control of body, stroke and shadow colors.This would get you the original black with grey stroke look:This technique has a downside tho, you are limited to 3 colors max. Unless you simply used black for shadows, normally shadows are black unless you wanted to transform them into a glow effect. So we can take advantage of the fact that black has no color information, so it won't be affected by the color matrices. So you now have 3 colors + black.So what you guys think? Have you used this technique before? Just wanted to share it here since it can be useful on many situations.

Statistics: Posted by RicardoTM — Today, 5:35 pm

---