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

開始畫畫素畫

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

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

相關連結：

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

---

完全小白起步指南

這篇文章是關於如何開始畫畫素畫，專為從來沒用過畫素畫軟體，或者剛開始學畫的人設計。這裡我只會講解最基本的東西，如何建立檔案，設定畫布尺寸，以及如何利用受限的顏色。

如果喜歡這篇文章，歡迎去 Patreon 支援我：patreon.com/saint11

這是一個系列的第一篇。


開始之前

在開始進入畫素畫世界之前，要記住，畫素畫只是一種藝術形式，就像抽象畫，油畫，鉛筆畫，雕塑或者他的親戚鑲嵌畫一樣。畫好畫素畫，你需要能畫好常規的畫。就是說你也要學習結構，透視，光影，顏色理論，甚至藝術史，這些都是畫好畫素畫的關鍵。

工具

畫好畫素畫不需要什麼好的工具，你可以只用滑鼠和免費軟體就畫的不錯。我的裝置有一個小的 Wacom 手繪板，一個好滑鼠，一個鍵盤和我最喜歡的軟體 Aseprite，總之你應該用你用著最舒服的。

這裡是一些很常用的畫素畫軟體：

• Aseprite：專業的編輯器，有很多提高效率的特性，收費。
  

https://www.aseprite.org/

• GraphicsGale：經典，很多遊戲有用到。略複雜，但是好特性很多，免費
  

https://graphicsgale.com/us/

• Piskel：免費線上編輯器（風農：我之前翻譯的視訊教程裡有講）。
  

https://www.piskelapp.com/

• Photoshop：強力圖片編輯器，不是為畫素畫設計的，但設定好了也可以用，收費。
  

Aseprite

目前我最喜歡的畫素畫軟體。非常的強大，特性很多又很方便用。這個教程都是用 Aseprite 來做的，但是我覺得轉換到其他軟體也不需要費很大功夫。你可以試試 Aseprite 的試用版，但是不能儲存檔案，用來練習我覺得還 OK。

建立檔案

點選主介面的“New File”，或者到 FIle > New File，之後就可以開始畫了。


我們新建一個檔案，16 乘 16 可能看起來太小，不過我覺得作為起始還是很好的。大的解析度可能會讓你分心，你現在應該聚焦在：理解每個畫素和周邊的關係。

顏色模式保持 RGBA，這是最簡單直觀的。一些畫素畫手喜歡用 Indexed（索引）模式，能用一些很酷的顏色技巧，但也有一些缺點。

背景選透明（transparent）或者白色（white），暫時沒影響。高階選項（Advanced Options）不要選，以後你可以自己去試試。

現在就都準備 ok 了。

開始畫！

介面上有很多工具和選單，彆著急，我們現在只需要用幾個按鈕。最主要的工具是鉛筆（Pencil），應該一直保持 1px 寬度，這是我們在畫布上畫畫素的工具。點選這個按鈕，或者按 B，再去點選螢幕，就可以畫上一個所選顏色的畫素點。


在左邊你可以看到調色盤，有幾個預設顏色。把這些換一下，換成簡單點的集合。點選調色盤上面第三個按鈕（預設，presets），選擇 ARQ4（Endesga 所做的一個很棒的調色盤）。這就是你畫第一個 sprite 會用的調色盤了。

現在用這裡的 4 個顏色來試著畫個杯子。

可以從我的設計裡找靈感，也要試著畫的個性一點。如果畫錯，按 ALT + 點選一個空白區域或者畫布外，你就會選擇一個透明的色，可以用來擦除畫素。當然也可以點選橡皮（Eraser）或者按 E。

你可能注意到，在這麼低的解析度上畫，跟常規繪畫是不同的。所有東西都要計算好，沒個畫素的位置都是你需要做的決定。你需要適應這些。


你可以去試試其他的按鈕。注意有些按鈕點中後會開啟更多選項。先不要用模糊工具（blur），他會增加很多顏色，我們還用不上。

現在，我們可以畫更多 sprite，試試畫骷髏，寶劍，人臉。這次不找畫素畫參考。如果你感覺這些在畫布上畫不開，完全正常，試著去把一些地方抽象成單畫素再試試。在這麼低的解析度畫畫是很難的，有時候很想是解密。這裡有一篇我之前給 Kano 寫的，關於在低解析度下畫畫的文章：https://kano.me/blog/my-thoughts-on-very-low-resolution/

這裡是我畫的幾個 sprite，一定確保你畫完自己的再看：


這是個不錯的練習，如果你想繼續練習，試著帶著這些限制畫更多東西。

儲存檔案

按 CTRL+S 來儲存檔案，或者到 File > Save As...，選檔名和儲存路徑，點選 save。

在試用版這個功能是禁用的！


Aseprite 可以儲存很多的格式，我建議儲存一個 ase 檔案。就好像 PS 裡你會留一個 psd 檔案一樣。當要匯出到 web 或遊戲裡時，可以 CTRL+ALT+SHIFT+S，或者 File > Export.


Aseprite 在匯出介面有個很棒的 Resize 特性。它只會把你的 sprite 放大整數倍，完美。如果你要把 sprite 放大 107%，就會把所有畫素都破壞掉，亂七八糟。但如果你縮放 200%，每個畫素就會變成 2 倍寬和高，還是很整潔。

大點的畫布

現在你已經連線了基礎，像建立儲存檔案，在畫布上畫畫。我們試著畫個大點的畫布，32 乘 32 畫素。調色盤也換大一點，試一試 AAP-Micro12（ AdigunPolack 製作）。這次畫個鏟子。

不像 16 乘 16 的 sprite，我們可以在這裡畫一些輪廓線，這是我的流程分解：

第一步：線條


這種線條風格我稱為畫素完美線，只有 1 畫素寬，與其他畫素對角線連線。當畫這種線時，注意避免不必要的邊，比如：


Aseprite 還有個很棒的筆刷特性可以自動處理這些：選中你的筆刷工具，再選中畫素完美（pixel-perfect）。記得不畫線的時候要把它勾掉，不然很煩人。


第二步：基本顏色


可選顏色少有個好處是不會被太多的選擇淹沒。這就是為什麼用一大堆色也很難，如果你的調色盤裡有個顏色，你沒理由不好好利用起來。試著把它當成解密，多試驗，即使是怪異的，非常規的組合，知道你找到你認為最合適這個區域的組合。

第三步：明暗

用你的調色盤有創意的畫出明暗。因為你只有非常受限的調色盤，你不會有每種不同亮度的色調，你必須隨機應變。


這個例子裡，我用的也是 AAP-Mini12 調色盤。當我畫上這個綠老哥之後，我沒有其他亮綠色可用了，所以我選了能用的最接近的色，也就是黃色。陰影也是一樣，我選了藍色，因為這是最接近的暗色。但如果我反過來呢？我可以用個亮藍色和暗紅色，對吧？其實不太行：


看起來好像很酷，但是明顯有點不對勁。通常你得把冷色呼叫在陰影，暖色用在亮處，不然就看著怪。當然這也不是雷打不動的規則，有很多的例外。在你不確定的時候，就遵從它。

第四步：抗鋸齒和優化


這部分需要你試著把畫素變得不那麼“尖”。手工抗鋸齒是個複雜的主題，估計我們要用一整篇文章來討論，不過概念是，你可以用中間色來模擬“半個畫素”，軟化邊界。但是不用過多的關心這個，現在你需要把 spirite 的儘量畫的易於理解。

另外一個適合在這個階段做的是幹掉孤立畫素減少噪點。孤立畫素就是不屬於任何大的同色的畫素簇的畫素，也不屬於抗鋸齒，比如：


注意到左邊的 1 畫素小島了嗎？那些就是孤立畫素，在我們把這些孤立畫素和鄰近的同色畫素合併之後，能看出這個地球看起來好多了。

那麼圖裡的那些星星呢？他們的存在是為了表示孤立畫素也不是完全不好，這些星星就是想要的效果，畫出一個噪點紋理，提高了背景的對比度。

不要無腦的刪除孤立畫素，要在過程中問自己：這個畫素是不是需要單獨存在？

接下來？


現在是時候去試試更多顏色和更大的解析度了。但要慢慢來，比如 48 乘 48，16 個色等等。如果你是完全初學，我建議先別做動畫，先聚焦於如何舒服的畫出靜態的畫。

我選了幾個我很喜歡的畫素畫教程，如果你想看看的話：

Pixel art tutorial by Cure
http://pixeljoint.com/forum/forum_posts.asp?TID=11299&PID=139318#139318
Pixel art tutorial by Derek Yu
http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial
Pixel art tutorial by Arne
https://androidarts.com/pixtut/pixelart.htm

我自己也做了很多不同主題的教程，你可以在 patreon 頁裡看到（風農：就是我做的這個系列~）。

My Patreon page
patreon.com/saint11
A compiled list of all my tutorials
http://blog.studiominiboss.com/pixelart

相關閱讀：可移步風農翻譯的《畫素寶典系列》

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