RGB Image Technique for Colorable Images

I was experimenting with Color Matrices to colorize images without affecting their contrast. Practically I wanted to have full control of how an image looks. This tip I'm about to share is more about design than it is about Rainmeter, but hey, at the end, design is what makes skins look great right?.

I'm referring to designed images, not photographs.

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 amount of each color helps to establish the maximum 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 can either use color to color 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, let's explore why this is useful. Take this background image poiru made for the Illustro skin as an 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.

Let's do some adjusting on the ColorMatrix:Example provided by YincognitoWell, now that's red, but now the stroke is lost and the shadows are also red (looks nice tho), but is not what we want either, we want to only change the hue, not just make everything red.

So, we know that's not possible unless we spend 3 hours tweaking the matrix until we get where we want. We should just spend that time designing our images for this purpose in the first place.

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 limitation 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.This method is especially helpful when dealing with more complex designs, like one of my gaugesHopefully I managed to illustrate the use case scenario, 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 — March 24th, 2024, 5:35 pm — Replies 8 — Views 201

---