【風農翻譯】開始畫畫素畫 #6

開始畫畫素畫
這是來自佩德羅・梅代魯斯（Pedro Medeiros，@saint11）授權的一系列畫素美術教程，由風農翻譯整理。

佩德羅・梅代魯斯最為知名的作品莫過於《塞萊斯特山（蔚藍，Celeste）》，不過他持續在網路上釋出的畫素美術教程也同樣相當知名。這裡選擇的教程就是經過風農翻譯整理內容。

相關連結：

Pedro Medeiros@Patreon
風農@indienova
風農@bilibili 專欄

這期是顏色理論基礎，系列第 6 期。

---

理解顏色

即使是使用預先建立的調色盤，我們還是需要了解正在使用的顏色。對於顏色，我的主要理念是用盡可能少的色做到儘可能多的事情。我會解釋一些顏色之間的特性和協同效果。

顏色可以分解成 3 個主要方面：色調，飽和度和亮度，或者縮寫成 HSV。還有些其他的顏色分解方式，比如 HSL，RGB，LAB，CMYK 等等，我選擇 HSV 是因為它很簡單，也是畫畫時操控顏色比較直接的方式。

我們來一個個的講一下這幾方面。

色調

色調是用來描述顏色本身的屬性。也可以稱為顏色的本質，像是紅，綠，藍，而不是它有多亮。


注意，有的色調，像是藍和紫，也可以顯得比黃色更暗，即使是亮度值相同的情況下。要記住你可能需要對這種情況做些補償，這取決於你最終要的效果是什麼。

通常我們會避免在一幅畫里加太多的不同色調，否則它會顯得很雜。後面的色彩設計部分我會再講一點這個。

飽和度


飽和度是指顏色或者色素的強度。一個亮紅色有較高的飽和度，灰色則相反，飽和度很低。通常過高的飽和度容易傷眼，所以不確定的時候不要用 100% 飽和度的色。

大片的高飽和度區域也會讓眼睛疲勞，所以同樣的，不確定的時候就用大片的低飽和度區域配合小的高飽和度細節。

亮度


簡單講，亮度就是顏色上有多少光。亮橙色亮度值高，暗橙色亮度值低。這通常跟光照直接相關，有光的地方亮度值就高，相反陰影處亮度值就低。

色溫

色溫並不是 HSV 模型的內容，但也是很重要的顏色特質。


色溫是由所有的顏色特性共同表現出來的：色調，飽和度和亮度。總得來說，你可以這樣去考慮：

• 紅色暖，藍色冷
• 高飽和度用作極端溫度（冷或者暖），低飽和度是中間溫度。純灰色通常給人感覺稍冷。
• 亮度稍複雜，但大部分時候，高亮度暖，低亮度冷。
  

我喜歡畫面裡帶有相反的陰影和光照色溫，通常是暖色的光和冷色陰影，不過有時候反過來也可以。這不是說必須一個紅一個藍，稍微暖或者冷一點就可以，取決於你想要營造的氛圍。

明暗

選擇顏色在處理光照和陰影時候尤其重要。我在之前的教程裡講到過基本的明暗，大家應該看過了：開始畫畫素畫 第四部分。

這裡我就重點講如何在上明暗時選色。

我們先簡單的畫個花瓶，這是我畫的：


當畫光照的時候，你可能想“直接增加亮處的亮度值！”，但這並不是實際情況。

觀察這個教堂的照片。


你可以看出頂部的亮處明顯飽和度更高，也更黃，暗處在對比之下感覺有些偏藍（但其實是非常低飽和度的紅）。用這種照片非常有利於理解顏色和光照。

我們來把這個邏輯應用到花瓶上。我們使用色調偏移和飽和度偏移的方式，而不是簡單的調整亮度。


能看出，左邊簡單調整亮度的看起來很枯燥，模糊。而右邊的更生動有趣。這裡我把陰影畫的更藍，飽和度更低（更冷），光照時更黃和飽和度更高（更暖），就像是教堂的照片。

當不確定的時候，就去找些照片參考，多做些實驗！有時候嘗試一些瘋狂的組合，比如加上高亮度而不是中間亮度，或者在高亮處使用完全不同的色調，你可能會發現有趣的技巧。

色彩設計

你可以把顏色按巧妙的方式組合來建立調色盤和組合。這不是必須做的事情，但絕對是建立有趣對比和氣氛的好工具。


單色


最簡單的色彩設計，只用一個色調怎麼也不會出錯。這一般會帶來非常個性的感覺，謹慎使用。記住這不是說你必須要用一個飽和度，或者說禁止稍微調整一點色調，只要避免大的顏色變化，你依然可以偏移一點色調。

補償色


這是個很棒的設計，適合創造出強對比。通常其中一個顏色是主色，而補償的色，就是色輪裡位置相對的色，用在細節上。紅和綠，藍和橙，紫和黃綠是其他的一些例子。

用這種組合時也要注意，它會建立非常強烈，有侵略性的畫面，尤其是飽和度很高時。

類似色


類似色設計是選擇一個主色，比如這裡的綠色，然後選相近的兩個色調。這個色彩設計一般給人感覺平靜舒適。非常適合低對比度的，和諧的畫面。

接下來

還有很多的色彩設計，像是三色設計（Triad），分散互補色搭配（Split Complementary），方形色彩設計（Square）等等。顏色理論是非常深的主題，如果你想更深入瞭解的話可以看看下面這些：

On Wikipedia
https://en.wikipedia.org/wiki/Color_theory

Basic Color Theory （上面提到的幾個色彩設計，這裡都有圖解）
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

Thread about colors in Pixel Joint
http://pixeljoint.com/forum/forum_posts.asp?TID=10695

Understanding Colors in Blender Guru
https://www.youtube.com/watch?v=Qj1FK8n7WgY

如果要做自己的調色盤，Adobe 有個很棒的工具：
https://color.adobe.com/create/color-wheel/
最後提一下：記住，處理顏色是個很主觀的事情。這裡提到的都不是雷打不動的規則，都是靈活的指導方針，不過我還是建議在你能更自信的打破這些規則之前，繼續遵守他們。

作者：Pedro Medeiros
譯者：風農
來源：INDIENOVA
地址：https://indienova.com/indie-game-development/saint11-making-pixel-art-6/