爲圖標/雪碧着色的最佳自然方式

我想爲具有透明背景和陰影的雪碧/圖標着色。我試圖將色調轉換爲所有像素，但看起來並不那麼自然，我對圖像中的黑色和白色有問題。如果圖像傾向於黑色偏移，則色調不會將黑色改爲紅色或其他顏色，甚至可以移動360度。嘗試顏色成癮和減色，即使在這種情況下，黑色和白色往往是彩色或消失。爲圖標/雪碧着色的最佳自然方式

也許我應該在圖標上放一個圖像來達到着色效果？關於如何繼續的任何建議。我輸了。

來源

2013-10-11 Claudio Ferraro

很明顯，色調偏移不會影響黑白。（360度轉換順便說一句**是** **相同的色調）。我會打開一些圖像編輯軟件（例如GIMP），看看你需要用「着色」來做什麼......從100％黑色圖像開始，顯然你需要增加亮度，也許飽和度，然後選擇色調。 – Jere

當圖像主色爲黑色或白色時，增加亮度和飽和度不能解決問題。 –

我發現自己是一個更好的解決方案可與黑白解決問題。

所以基本上可以通過多個步驟來解決這個問題。在這裏我將定義這些步驟。後來，我將提供一些工作代碼：

獲取圖像

計算爲主色調，平均圖像像素或簡單地提供輸入RGB值，它是主要的，你的眼睛可以趕上。

如果主要趨向於黑色或白色，或者兩者兼而有之，則圖像必須用成癮或減法方法重新着色，如果黑色則爲成癮，如果是白色則爲減色。所以基本上所有的RGB像素都應該衰減或銳化，直到RED。我認爲最好的解決方案應該是RED，因爲RED在HUE尺度上是第一個，當我們對像素進行色調移位時，這可能會有所幫助。

要有一個獨特的算法，可以處理不同類型的圖像，不僅黑色主要或白色，理想情況下，非黑色和非白色主要圖像應手動預先調用，使用Photoshop或與另一種算法使得新的主要顏色變爲紅色

之後，色調移位着色很直接。我們知道所有圖像的主要顏色都是紅色，我們會根據所需顏色的HSV值與主要顏色（紅色）的HSV之間的差異來調整HUE值。

遊戲結束。我們有一種非常普遍的方式來以不同的圖像以自然的方式移動色調。

另一個問題可能是如何自動預偏移主要顏色不是黑色或白色的輸入圖像。但這是另一個問題。

爲什麼這種着色方法可以被認爲是自然的。只需考慮一件事。一般來說，非主導的黑色或白色是陰影和光線的一部分，給圖像帶來3D感。另一方面，如果我的鞋子是100％黑色，我會用一些顏色給他們染色，他們不會再變黑。只有改變HSV參數才能實現顯色黑色，但應執行其他步驟。步驟如上所述。

來源

2013-10-14 17:22:23

你已經問了很多關於這個色調轉移的事情，所以我想我會嘗試找出一個例子：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更容易完成您想要的顏色空間。

沒有更復雜的，你有三個變量你可以調整：多少添加到色調，飽和度或亮度。我將亮度變量設置爲0，因爲任何更高，你會看到一些令人討厭的JPEG文物（如果你能找到一個體面的.png會更好，但我可以找到我能找到的第一個CC夜間圖像）。

我認爲色調轉換（黃色到綠色）雖然看起來不錯，但我最大化了飽和度，所以即使是正常的白光也會呈現明亮的紫色。就像我在評論中所說的那樣，如果您想爲黑色和白色的色塊着色，則需要增加亮度和飽和度。希望你能從這個例子中找出你需要的東西。

圖像使用：http://commons.wikimedia.org/wiki/File:Amman_(Jordan)_at_night.jpg

來源

2013-10-11 13:21:34 Jere

基本上這個方法很明顯，但我沒有考慮光子，而是圖標精靈。黑色並不是最糟糕的。問題是我想要一個通用算法來自動調節hsv，所以看起來很自然，它應該獨立於輸入。另一個輸入是主要顏色。 –

我在回答中發佈了一個圖標示例。「一種通用的算法來自動調節hsv，所以它看起來很自然」你很模糊。我認爲你沒有說清楚你的實際問題是什麼......我認爲你對色調轉移感到困惑。一些你不認爲是「自然的」和更多細節的顏色的例子會有所幫助。「黑色不是最糟糕的。」 ....你說的第一件事就是你有黑色的問題。 – Jere

是的，這是一個相關的事情。我想爲rgb中主要顏色可能是黑色或任何其他顏色的圖像着色。你告訴我，我應該調節亮度和飽和度，但我希望CPU爲我做這個 –

爲圖標/雪碧着色的最佳自然方式

回答

相關問題