大家好，我是難得認真學習插畫的小團體。在姐妹不知疲倦的說服下(肩負著寫教程的重任)。

經(jīng)過長久的反復練習，我終于為大家整理了一篇全網(wǎng)方法最齊全的保姆級像素風插畫教程~

PS，AI，包括一個專用的像素風軟件「Aseprite」統(tǒng)統(tǒng)教給你，讓你成為全網(wǎng)最會畫像素風插畫的小能手~

一提到像素風，大家應該馬上就能想到超級瑪麗，魂斗羅，以及我最喜歡的雪人兄弟等紅白游戲機的游戲了。說起像素風，就不能不提他的前身——法國新印象派（點彩派）的創(chuàng)始人之一畫家Paul Signac。

像素風真正進入我們的生活，是因為任天堂開發(fā)的游戲機，也就是80后90后的童年記憶了。

1970年代晚期和1980年代早期的電腦試用的是8位元處理器，受制于內(nèi)存大小，顯示色彩單一，只能使用最原始的計算機圖像表現(xiàn)形式。受制于顏色數(shù)量和顏色種類，游戲開發(fā)只能使用有限資源。早期的像素風就這么形成了。

發(fā)展至今，像素畫并沒有被逐漸替代，而是演變成了一種獨立的數(shù)位藝術創(chuàng)作風格。很多優(yōu)秀的插畫師用他們的插畫告訴我們，像素風插畫的魅力之處。

————俄羅斯插畫師：waneella

日本插畫師：1041uuu （豊井祐太）

————日本插畫師：1041uuu （豊井祐太）

當然，除了記錄生活及風景外，像素風也可以與類似于2.5D插畫，UI圖標制作，人像插畫等結(jié)合，形成更有趣的像素風插畫，簡直是萬物皆可像素畫~

說了這么多想必你們對像素風也有一個大致的了解了，在別的00后小伙伴不太理解這種風格的時候，也可以拿出來和他說道說道。那現(xiàn)在讓我們正式進入今天的主題吧~

知識重點：三種軟件的不同操作方式

操作工具：根據(jù)喜愛程度自選PS或AI或Aseprite

操作難度：對軟件小白插畫小白都友好

在開始前，我們需要確定主題并根據(jù)主題搜索圖片。這一part在我們前面的很多教程都提到過，這里就不著重說了。大家可以自行點擊標題鏈接再看一遍相關的教程，包括下面的線稿步驟也是一樣的，只是用像素風的方式去完成，畢竟萬物皆可像素化嘛~

例如：

你可以根據(jù)自己要畫的畫風來搜索：2.5D商業(yè)插，畫人像插畫，貼紙圖標，風景建筑插畫，卡通形象等。

經(jīng)過幾個詞條的搜索，我得到了下面幾張圖片，用于本次的教程講解。

在正式開始前，我要和大家說一說像素風中最重要的線條處理，即輪廓邊緣的處理。

像素風的線條分為直線，斜線和曲線。其中斜線和曲線容易畫出斷裂或者鋸齒，使畫面不夠干凈。

很多作者為了讓畫面更加干凈，邊緣輪廓大多為45°斜線和直線。

那斷裂是什么呢？以斜線和曲線為例。

• 斜線：可以分為45°斜線和其他斜線。其中紅色的部分稱為鋸齒。

• 曲線：確保曲率在下降或上升時保持遞增或遞減的狀態(tài)，使邊緣輪廓更加整齊有序，避免鋸齒。

下面這個作者的畫面看起來既干凈又保留了像素風的特點，就是對線條的把控比較準確。

但是，如果畫面復雜，鋸齒是幾乎不可避免的，我們能做的是在畫的時候盡量避免，多去嘗試。

首先，我們先說說AI軟件。這就到了我的主場了。AI畫像素的優(yōu)點是不受畫布的限制，操作難度比較低。

但是由于AI繪制像素風是用「矩形網(wǎng)格工具」點出來的，個人覺得還是用在比較小的插畫繪制上，例如像素風圖標，像素風卡通形象。

• 新建文檔

新建一個1000*1000像素的畫布，顏色模式為RGB。

• 繪制網(wǎng)格

找到「直線工具」，將鼠標光標放置在上面，鼠標右鍵，在彈出的窗口中選擇「矩形網(wǎng)格工具」。

將鼠標光標移動到畫布并單擊鼠標，會彈出一個彈窗：「默認大小」1000px*1000px，「水平分隔線」數(shù)量：20，「垂直分隔線」數(shù)量：20，并勾選第一個選項。（網(wǎng)格數(shù)千萬不要貪心建多了，不然玩久了眼睛真的很疼）

網(wǎng)格建好之后，將它與畫布水平+垂直居中。

• 準備色板

為了更方便上色，我們可以先繪制一個自己的色板。用矩形畫出需要用到的顏色，顏色可以在照片的基礎上吸色并調(diào)高飽和度，也可以調(diào)整為你想要的色調(diào)。由于我的底色是紫色，所以整體的顏色都往紫色調(diào)偏。

• 繪制描邊

接下來就開始進入正題了。首先說一下我們接下來要使用的工具——「實時上色工具」。

將照片拖進ai，透明度降低并「ctrl+2」鎖定。

選中網(wǎng)格，點擊實時上色工具，按住alt吸提前做的色板顏色，并在每個方框內(nèi)進行點擊，就得到了一個色塊，滑動鼠標就得到了一條軌跡。

如果一時畫錯了想要刪除，在實時上色工選擇具下，選中方塊，點擊delet刪除即可。

我們先從描邊開始。描邊要注意對照片進行概括，盡量用直線去表達，并且盡量保持對稱。

TIPS:針對不規(guī)則的圖形，可以提前用鋼筆工具在照片上將大致的形勾出來，穿過的部分（超過半格）就是要填格子的部分。剛好半格的部分需要同學們根據(jù)具體情況去定，以最大化將形態(tài)表現(xiàn)出來為目標。

• 填充顏色

接下來我們就可以把底圖刪除了?？梢韵忍畛湟粋€底色，再開始上色。
我將可樂分為三塊層次，并將相應的顏色填充進去，同樣使用實時上色工具。如果沒有把握，也是一樣使用鋼筆工具先勾出大致輪廓再去填充。

檸檬使用兩個顏色。在填充的時候要分清上下順序，記得把相交的部分填上。

可樂剩余部分使用白色填充。

• 增加細節(jié)

增加高光和陰影。加入一些玻璃的高光和陰影，陰影在底部，高光用一個小點去表示即可。

接下來給圖標加入厚度感。

在外輪廓描1-2層白邊。

接著在底部加入厚度和陰影。

• 刪除網(wǎng)格

接下來，我們把網(wǎng)格刪除。如果有同學覺得加細節(jié)的時候網(wǎng)格會影響你的感官，可以把這一步提前。

選中網(wǎng)格，「對象」—「擴展」，默認勾選，按確定。接著取消編組，把網(wǎng)格刪除即得到我們最終的成品。得到的圖標可以根據(jù)需求水平翻轉(zhuǎn)并調(diào)節(jié)大小。

• 最終成品

最后的最后，我們的小圖標就完成啦。

那么前面講了辣么多，也不知道你們學會了沒有。

接下來就是我們本次教程的重頭戲了?。?！用ps繪制像素風插畫場景?。。?/p>

在開始前，我們先來說一說用ps繪制像素風插畫的優(yōu)點是掌控比較靈活，對于復雜的光影處理也比較靈活。

缺點是，雖然鼠標也可以畫，但是對手的靈活度有較高要求。

• 使用的工具及注意要點

• 畫布的大小會影響最終線條的粗細感

一般畫布尺寸單位都為「像素」，尺寸盡量設置一個整數(shù)。

例如：50px*50px,100px*100px，200px*200px，500px*500px....在這個基礎上再根據(jù)實際的需求調(diào)整長寬中的一項。

我們分別新建這幾個的大小的畫布，并將「筆刷」和「橡皮」的模式切換為「鉛筆」。

我分別在不同尺寸的畫布中，使用系統(tǒng)自帶的「硬邊圓角」筆刷，大小為1，畫出相同的線段，并導出相同的大小給大家感受一下線條的區(qū)別。

可以發(fā)現(xiàn)在畫筆大小和導出圖片大小相同的情況下， 畫布越小，線條越粗。所以大家一定要在畫之前考慮好畫布的大小。例如50*50px，100px*100px的畫布更適合做粗描邊的設計，例如圖標，稍微大畫布更適合做場景插畫。

• 線條的繪制方式

直線：直線按住shift，長按鼠標左鍵拖動即可。手不穩(wěn)的同學，可以按住shift，在直線的首尾各點擊一次鼠標左鍵即可。

斜線：斜線可以分為45°斜線和其他斜線。按住shift，鼠標左鍵點擊一下開頭端和末尾端就出來了。

當然，很多把控不好的同學，也可以像前面ai操作一樣，一個一個去點出來。覺得線太長，找不到起點和終點，也可以按住shift分段點，例如5格一次。

• 線條的繪制原則

我們再來回顧一下，前面說的線條原則：多用直線和45°斜線，曲線保證曲率在下降或上升時保持遞增或者遞減的狀態(tài)。

• 繪制場景線稿

選擇一張場景的照片，托進ps中，先調(diào)整照片的布局。我個人比較習慣的方式是，先把照片放大，讓主體建筑最大化體現(xiàn)。保存得到一張新的場景。

新建200px*200px的畫布，適當調(diào)整畫布的長或者寬中其中的一項。因為一開始更想突出晚霞，所以我把高度稍微拉高了一些。拉完之后的畫布高度是200px*262px。

將照片放置進畫布中，降低照片不透明度，新建圖層，對邊緣進行勾描。

TIPS:對照片進行最大化的概括，如果畫面出現(xiàn)的斜線和曲線比較多，能用45°斜線的盡量用45°斜線代替，曲線部分一定要注意曲線率在上升和下降時遞增或遞減的關系。

加入窗戶，窗戶不需要還原，可以盡量畫的大一些。

接著畫草叢。由于圖片上沒有草叢，如果同學們沒有把握，可以去再找一張草叢的素材貼上去再去勾勒。

勾完之后我們用比較圓的曲線畫出云的輪廓。同理，如果不會畫可以用圓形工具先拼出來。再去勾線。

這個時候天空會有點空，所以再加入一些電線桿做裝飾。

在這樣和那樣之后，我們的線稿就完成了。其實在一些畫風中是沒有描邊的，但是畫出線稿之后，等于直接處理完了輪廓邊緣，對我們之后的上色更加的容易。但是，如果對畫面掌控胸有成竹的同學，所選擇的畫面風格又是不需要描邊的，我們就可以直接省掉線稿的部分。

• 上色

由于繪制的是一個晚霞的場景，所以在顏色的選擇上，使用的是紫色調(diào)。飽和度相對比較低，天空的明度較高，房子的明度較低。

將線稿不透明度降低，我們先填充一個背景色。

將筆刷放大，沿著描邊，填充房子的顏色。切記房子和房子之間的顏色要隔開。窗戶都統(tǒng)一使用墻面顏色的深色進行填充。每一個塊面分一個圖層，方便后面做細節(jié)。

最后，對云層進行以及電線桿進行填充。

• 細節(jié)光影的制作

首先，在背景的基礎上加入一些漸變。

TIPS:天空的漸變部分我們需要使用系統(tǒng)自帶的「柔邊壓力不透明度畫筆」并且畫筆來過渡一下。

給云層加入變化。這一步尤為關鍵，云層是起到提升氛圍感的作用的。

在開始畫之前我們可以來觀察一下真實云層的結(jié)構(gòu)?？梢钥吹?，云層分為明暗灰以及受晚霞影響的環(huán)境色。其中，亮部在外部，暗部分散在亮部中間，其余部分為灰部，形成云層的體積感。而晚霞，集中在云層的下方。

這里還要強調(diào)一點，云層的明暗灰邊緣一定要做的不規(guī)則一些，可以稍微處理的小塊一些，如果太過規(guī)則并且大塊會顯得沒有細節(jié)。

按照上面的原則，我們在云層色塊新建一個圖層，并做剪切蒙版，先給云層加入亮部。

接著加灰部。

加入受晚霞影響的云層顏色，與云層同理，也可以分為明暗灰。

由于整體的云層有點不透氣，加入橘色和黃色去增加透氣感。

給房子加入墻面一些變化，漸變的變化顏色不需要太大，房頂靠近天空的位置可以用「柔邊壓力不透明度畫筆」，吸取天空的顏色過渡一下，顏色可以只調(diào)整幾個單位的「明度」去做變化。

給窗戶加入線條，并選擇幾個窗戶做云層的顏色。

最后，天空加入幾顆星星和月亮去做點綴。當然也可以把上半部分截掉

• 導出

「文件」— 「導出」—「存儲為web所用格式」。選擇JEPG和PNG都可以，如果你要導出的是透明通道就選擇PNG。輸入自己想要導出的圖片大小。這里一定要注意，品質(zhì)一定要選擇鄰近，不然導出的圖片會非常糊。

作為標榜全網(wǎng)最詳細的像素風教程，當然要涉及到每個方面！接下來，我來教你們在ps制作圖標的快速方法。

新建一個50*50的畫布，新建一個圖層。然后雙擊圖層，彈出圖層樣式。

接下來設置圖層樣式，勾選一個內(nèi)陰影和兩個投影，設置參數(shù)，并改變顏色。以下是數(shù)值參數(shù)。

接下來拖進圖片，將圖片透明度降低，放大筆刷，根據(jù)圖片去涂出來就可以了。

為了保證對稱，可以使用ps2018以上版本的繪畫對稱工具。

最后可以再適當?shù)娜フ{(diào)整一下，導出PNG，我們的圖標就完成了，是不是很簡單！

可以發(fā)現(xiàn)我們設置的內(nèi)內(nèi)陰影其實是白色的描邊，大小其實就是決定了描邊的粗細，粉色的部分是第一個投影，距離是決定了描邊粗細，最后一層陰影是第二個投影，因為改變了不透明度，所以顏色在背景色上有陰影的感覺。

TIPS:投影除了改變不透明度，也可以改變混合模式：正片疊底去體現(xiàn)。

最后我們來說說Aseprite。這是一款專門用于繪制像素風的軟件，界面風格包括字體的設計，也延續(xù)了像素風格，十分復古。

優(yōu)點相較于ps和ai來說，畫像素風插畫更加有針對性，可以直接開始畫。有專門針對曲線斜線調(diào)整的工具，大大減少出現(xiàn)鋸齒的情況，同時，也可以完成逐幀動畫，缺點就是需要重新學習一個新的英文軟件，門檻大大提高。（我也是先學，好玩是真的好玩）

至于具體的軟件操作，實在是工具非常多。我寫了，沒有接觸過軟件的同學大概率也是看不懂的，接觸過這款軟件的同學也無需我多說。（其實，我是真的肝不動了，自封的“全網(wǎng)最全的像素風教程”，就此打臉

感興趣的同學可以上百度搜索一下軟件和教程，多了解下插畫。

那么今天的教程就這么愉快的結(jié)束啦。至此我已經(jīng)寫了N多個字了，相當于六

篇800字的高考小作文了，看在我如此勤奮的份上，請大家點再看并踴躍轉(zhuǎn)發(fā)喲~

我們下次再見！