Question

我想为带有透明背景和阴影的精灵/图标着色。我试图将色调移动到所有像素，但它看起来不那么自然，我在图像中有黑色和白色的问题。如果图像倾向于黑色移动，则色调不会改变红色或其他颜色的黑色甚至移动360度。试图上瘾和减色，甚至在这种情况下，黑色和白色往往会着色或消失。

也许我应该在图标上放置一个图像来实现着色效果？有关如何进行的任何建议。我输了。

Answer 1

你一直在问这个色调转移的事情，所以我想我试着找出一个例子：http://jsfiddle.net/EMujN/3/

这是另一个使用实际图标的人：http://jsfiddle.net/EMujN/4/

那里有很多东西。除非您想要replace it，否则您可以忽略大量数据网址。这是我们修改HSL的相关部分。

    //SHIFT H HERE
    var hMod = .3;
    hsl[0]=(hsl[0]+hMod)%1;

    //MODIFY S HERE
    var sMod = .6;
    hsl[1]=Math.max(0,Math.min(1,
        hsl[1]+sMod
    ));

    //MODIFY L HERE
    var lMod = 0;
    hsl[2]=Math.max(0,Math.min(1,
        hsl[2]+lMod
    ));

我已经转换为HSL，因为在RGB颜色空间中完成你想要的东西要比RGB更容易。

如果没有变得更复杂，你可以调整三个变量：添加到Hue，Saturation或Lightness中的数量。我将亮度变量设置为0，因为任何更高，你会看到一些讨厌的JPEG工件（如果你能找到一个更好的.png，但我选择了我能找到的第一个CC夜间图像。）

我认为色调偏移（黄色到绿色）看起来相当不错，但我已经达到了饱和度，所以即使是正常的白色光也会出现亮紫色。就像我在评论中所说的那样，如果你想为黑白斑块着色，你需要增加亮度和饱和度。希望你能从这个例子中找出你需要的东西。

使用的图片：http://commons.wikimedia.org/wiki/File:Amman_(Jordan)_at_night.jpg

Answer 2

我自己找到了一个更好的解决方案，它可以解决黑白问题。

所以基本上解决方案可以通过多个步骤解决。在这里，我将定义步骤。稍后我会提供一些工作代码：

获取图像

计算主要颜色，平均图像像素或简单地提供输入RGB值，这是您的眼睛可以捕获的主要颜色。

如果主要趋向于黑色或白色，或两者兼而有之，则图像必须使用上瘾或减法方法重新着色，如果是黑色则上瘾，如果是白色则减色。所以基本上所有RGB像素都应该衰减或锐化直到RED。我认为最好的解决方案应该是RED，因为RED首先处于HUE范围内，这可以帮助我们调整像素。

要有一个独特的算法可以处理不同类型的图像，不仅是黑色主导或白色，理想情况下输入非黑色和非白色主导图像应该手动预先变换，使用photoshop或其他算法的方式新的主要颜色也导致RED

在此之后，色调变换着色是直截了当的。我们知道所有图像的主色都是红色，我们将HUE值与所需颜色的HSV值和主色（HS）的HSV之间的差值进行移位。

游戏结束。我们有一种非常通用的方式，以自然的方式为色调移动着色不同的图像。

另一个问题可能是如何自动预移位主要颜色不是黑色或白色的输入图像。但这是另一个问题。

为什么这种着色方法可以被认为是自然的。简单地考虑一件事。通常，非主要的黑色或白色是阴影和光的一部分，其给予图像3D感觉。另一方面，如果我的鞋子是100％黑色，我会用一些颜色着色，它们将不再是黑色。仅仅移动HSV参数不能实现主要黑色的颜色，但是应该执行其他步骤。步骤如上所述。

最好的自然方式着色图标/精灵

2 个答案: