Create Single-Colored Image Using ColorMatrix

[XANCI]

In some skins such as launcher skins we want Icons become single-colored.

QQ截图20120720122417.png

The first line of Icons is the original ones, if we use ImageTint=255,0,0 (second line of Icons), we can see black areas that we doesn't want. Also ImageTint can't make paint white (ImageTint=255,255,255 means no change)

step1.Apply a geryscale matrix

Code: Select all

[0.30 0.30 0.30 0 0]
[0.59 0.59 0.59 0 0]
[0.11 0.11 0.11 0 0]
[ 0    0    0   1 0]
[ 0    0    0   0 1]

step2.Geryscale to alpha:(the more bright the more solid)

Code: Select all

[0.30 0.30 0.30 0 0]   [1 0 0 1 0]   [0.30 0.30 0.30 0.30 0]
[0.59 0.59 0.59 0 0]   [0 1 0 0 0]   [0.59 0.59 0.59 0.59 0]
[0.11 0.11 0.11 0 0] x [0 0 1 0 0] = [0.11 0.11 0.11 0.11 0]
[ 0    0    0   1 0]   [0 0 0 0 0]   [ 0    0    0    0   0]
[ 0    0    0   0 1]   [0 0 0 0 1]   [ 0    0    0    0   1]

step3.Consider the original alpha

Code: Select all

[0.30 0.30 0.30 0.30 0]
[0.59 0.59 0.59 0.59 0]
[0.11 0.11 0.11 0.11 0]
[ 0    0    0    1   0]
[ 0    0    0   -1   1]

step4.Re-paint to white

Code: Select all

[0 0 0 0.30 0]
[0 0 0 0.59 0]
[0 0 0 0.11 0]
[0 0 0  1   0]
[1 1 1 -1   1]

The third line of Icons using

Code: Select all

ColorMatrix1=0;0;0;0.30;0
ColorMatrix2=0;0;0;0.59;0
ColorMatrix3=0;0;0;0.11;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;1;1;-1;1

You can also enhance the main tone (fourth line of Icons)
Icon1(Red)

Code: Select all

ColorMatrix1=0;0;0;0.70;0
ColorMatrix2=0;0;0;0.25;0
ColorMatrix3=0;0;0;0.05;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;1;1;-1;1

Icon2(Green)

Code: Select all

ColorMatrix1=0;0;0;0.15;0
ColorMatrix2=0;0;0;0.80;0
ColorMatrix3=0;0;0;0.05;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;1;1;-1;1

Icon3(Blue)

Code: Select all

ColorMatrix1=0;0;0;0.10;0
ColorMatrix2=0;0;0;0.30;0
ColorMatrix3=0;0;0;0.60;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;1;1;-1;1

Finally paint them to red(or whatever color you like)
Icon1

Code: Select all

ColorMatrix1=0;0;0;0.70;0
ColorMatrix2=0;0;0;0.25;0
ColorMatrix3=0;0;0;0.05;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;0;0;-1;1

Icon2

Code: Select all

ColorMatrix1=0;0;0;0.15;0
ColorMatrix2=0;0;0;0.80;0
ColorMatrix3=0;0;0;0.05;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;0;0;-1;1

Icon3

Code: Select all

ColorMatrix1=0;0;0;0.10;0
ColorMatrix2=0;0;0;0.30;0
ColorMatrix3=0;0;0;0.60;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=1;0;0;-1;1

Much better than using ImageTint