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

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

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

相關連結：

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

明暗基礎

系列第 4 篇。這期文字比較長，準備好。

---

光照的原理

我們能看到東西是因為有光，當我們畫某個事物時，實際上是在表現光在這個物體上的反應。即使沒學過這些，你其實也知道光是如何工作的，因為你每天都在看：它會從一些材質上彈開，有時候會折射到其他東西上。


另外一個也很重要，但是不太明顯的方面是光照射物體的角度，垂直的光要比直射光暗些。

你需要試著在腦海裡模擬光的表現，就好像你是個人型渲染機器。因為這是非常難的，而且很容易出錯，所以還有個好的學習光照的方法，就是用照片參考。拿照片參考是很好的，你不需要去複製照片，但你可以用它來理解特定條件下光的表現。使用照片參考也是個不錯的練習。


基本結構

給圖片加明暗時，最好有個可遵循的結構，這裡我做了個簡單的詞彙表，以及每個詞的簡單定義。


體積陰影（volume shadow）：最常見的陰影，是自投射的軟陰影。由於光被物體自身體積阻擋而產生。

明暗交界線（Terminator） ：明和暗區域的過渡區，可以是軟的或者尖銳的。畫素畫裡我們傾向尖銳的，以避免色帶問題（之後會講）。

投射陰影（Projected shadow） ：一個物體向另外一個物體投射的陰影，通常很尖銳。

反射高光 （Reflection highlight） ： 也被稱為鏡面高光（Specular highlight），是物體上最亮的一個點。光滑易反光的物體有很小很聚焦的高亮點。粗糙的物體可能沒有反射高光。

高光 （highlight） ：物體上基本的高亮區，想象成體積陰影的反面。

邊緣光 （rim light）：當光從背面射來，看著就像輪廓變亮了。這通常由另外一個，暗點的光產生。

漫反射光 （bounce light）：有時候很難見到，是一個體積陰影中比較亮的地方，由光彈到地面又彈回物體上產生。

這些你沒必要記住，只是如果畫的時候不確定了，就來看看這個表。另外一個要記住的是這些東西可能大部分的畫素畫都裝不下，尤其是低解析度，或者低顏色數的畫素畫。永遠記住：好的畫素畫會去除所有不需要的細節。

使用照片參考

我們做個練習，來畫一下這個照片：


首先新建檔案，我用的是 48 乘以 48 的畫布，AAP-64 調色盤。我推薦你拍個簡單的東西，然後一起做，或者就用這個。試著跟這我的步驟。

像之前的教程，我先畫出大的顏色簇，試著去除光照在照片中的效果。線面是整個過程，以及最後的一個縮放版的照片。


你能看出我的設計裡有很多自由發揮，我把姿勢修改了一點，刪掉了鏡面高光，把娃娃畫的更像個蛋一樣。主要的原因是我們不是想要畫的像個縮放版的照片，我們要讓它看起來更好，所以我進行了調整，可讀性更好，也更有趣。

我聚焦在重要的細節上。因為我們在非常低的解析度上畫，有些細節不需要包括進來，而有一些需要被”高亮“。注意縮放版的嘴，幾乎看不到了，我把它畫的更大，更好注意到，因為這算是個重要細節。眼睛一樣，現在更大，更常規。

我們一步一步看：

• 先畫基本顏色和形狀，我喜歡先用暗的色，然後畫上亮的，不過這是個人喜好。
• 畫上物體內部的基本的光/影，這裡先保持顏色數低些。
• 畫出投射的陰影。
• 畫上細節，以及其他小的部分。
• 修正形狀，增強陰影和高亮。
• 如果需要的話新增抗鋸齒和輪廓線。
  

如果你還是不滿意結果，別擔心，試著按自己節奏來，多練習。試著畫簡單點的東西，注意去掉不必要的細節。

識別面

下一個畫，我們來試點其他的。你要給這個畫加上明暗：


我們還是用 AAP-64 調色盤和 48 乘 48 的畫布。要合理的給這個場景加上照明。這個跟其他圖的主要區別是，這個大部分是平的面，其他的是圓的。

平面通常在整個面都有一致的顏色，圓的面上有顏色漸變。如果顏色不是很強烈，或者距離光源很近的話，平面也可以有漸變。不過我儘量避免這種，或者把變化做到最小。

瞭解這些之後，我麼選個光的方向開始畫。再回到這裡檢查如何解決這些問題，以及一些常見錯誤。

我沒把光源也畫到圖裡，因為這也是你需要練習的東西。選個好的光源是跟合理渲染場景一樣重要的技術。

我的版本

我首先畫的是背景和投射陰影，有助於我奠定整幅畫的基調。


之後給每個面選顏色，頂部和側面應該是一致的顏色，斜面有個漸變。我只用了兩個顏色是為了保持簡單，並且讓色帶效果最小（下一節講）。


接著是輪廓線，比較煩人。我試著把他們現象成其他的小面，把形狀軟化一點。


現在對比度有些低，我加上了小的鏡面高光，並加深了一些陰影。我還加上了簡單的抖動，讓斜面上的過渡更好。


常見錯誤

下面是加明暗時一些常見的錯誤，看看你有沒有這樣做過。注意這裡的例子都比較誇張，這些也可能出現在更小的區域裡。


軟面

這通常出現在試圖過分的軟化物體光照時，或者是做錯了方向。平面應該是一致的顏色，曲面應該只在彎曲方向上漸變顏色。


枕形陰影

這是個很常見的問題，通常是因為沒有個明確的光源，沿著形狀加上了陰影。

這個最好通過設定明確的光源，以及不要把面的邊緣變暗來避免。


平光

另一個常見錯誤是忽視了實際形狀。記住你畫的物體代表的是 3d 的形狀，如果你不確定光如何表現，試著搜一下，或者直接拍一個照片參考。

接下來

練習！找更多的照片和其他的照明示例，直接複製，越多越好。去實驗，用很有限的調色盤，你能否用一個顏色代替其他顏色？學習是關鍵，放大圖片，看看他們的畫素是什麼樣的，縮放照片看看什麼可行，什麼不可行。


注意觀察周圍，在街上走時，看看光在建築上的效果，看看它如何穿過你的手指。沒什麼比觀察日常生活更能教會你明和暗的知識了。

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