經典原色係質感扁平插畫繪製教程

在插畫學習中，最常遇到的困惑就是配色問題，色彩看似有著非常完備的理論，但實際運用時仍然雲裏霧裏的人是不少。因此，今天這個插畫就是教給大家最經典的原色係配色（紅、黃、藍），造型的同時去掌握色彩運用的基本法則。一起來看下這篇經典原色係質感扁平插畫繪製教程。

草圖過程

草圖是插畫造型的靈魂，下麵是具體的構思過程。

STEP 01

在這裏，根據場景需要，我們要表現的是“探索”的主體，因此我們這個案例中就用人物手中握著望遠鏡這個姿態開始表達，作為第一個人物，我們需要為第二個人物預留位置，也需要了解我們的插畫構圖的預設方案。

在《一起學優雅感原創UI插畫界麵》中，我們講過一種有明顯邊框線的插畫，而今天這個插畫則是沒有邊框線，隻需要將人物繪製出來即可。我們把這類構圖的插畫簡稱為“自由背景素材型”插畫，它的可用場景非常多，且可以自由移植，這一點我們在後麵會看到。

STEP 02

接下我們繼續畫出另一個人物，這個人物需要和第一個人物有一定的關聯，所以我運用了鉛筆這個物象來關聯這兩個人，讓她們成為一體。

基礎大形——第一個人物

STEP 03

由於不涉及到背景，我們就用白色作為背景色，直接開始繪製人物。打開AI，新建一個1600*1600px的文檔，然後將草圖拖入到畫麵中，新建一個圖層，鎖定在最上方。適當降低透明度，這樣就容易看到下方圖層即將畫出的形狀。

STEP 04

準備好三原色：紅、黃、藍。飽和度可以放大一點，但是注意不要開得太大，尤其是色彩模式用RGB的小夥伴。而CMYK相對來說不用擔心色彩過亮的問題，這部分闡述也可以進入到《一起學優雅感原創UI插畫界麵》的相應部分去看看，在這裏我用的是CMYK。

這裏的三個色調不僅是原色，而且在色輪上相對處於120°，因此也可以說它們之間是對比色的關係。紅黃藍三原色搭配是非常經典的。但在這裏我們可以稍微做一點小小的變調，也就是將黃色往橙色的位置調整，這時黃色的色彩就變得更重一點，畫麵的分量感也會增加。

STEP 05

這時還需要明確的一點是畫麵當中除了運用這三個色調以外，還有其他的色彩，這些色彩都是圍繞這三個色調而展開的，比如肉粉色作為皮膚的顏色，它就會偏紅一點，屬於紅色係這個色調中。同樣頭發的部分也是偏紅的棕色，也是屬於紅色係這個色調的範疇。

運用鋼筆工具和形狀工具畫出人物的臉部、帽子和頭發部分。

STEP 06

接下繼續繪製人物的衣服部分，衣服部分相對複雜一點，我們可以把衣服分為衣身和衣袖兩個部分來畫，而衣袖也分左右兩隻手，所以一共是三塊形狀，都統一運用紅色。

第一塊形狀畫好後，置於頭發這個圖層之下，然後再畫第二塊形狀，將兩個形狀拚在一起，但是不需要合並為一個形狀，因為它們的層次不一樣。

STEP 07

接下繪製另一隻衣袖，注意兩隻手臂隱藏的呼應關係，盡管另一隻衣袖被身體遮擋，依然不能忽略這種潛在的位置，否則手臂容易錯位，畫出來的效果也不太好。

雖然草圖部分我們已經表現了一部分，但是不夠精準，基礎形就是要控製精準的表達。

STEP 08

繪製好衣袖就可以開始繪製人的手以及手中拿著的望遠鏡，手的畫法是個難點，難就難在對手的結構不清晰。這時除了要仔細研究一下手的結構以外，就是需要了解下麵幾點：

1）手分為手掌和手指，盡管它們看起來是一個形狀，所以可以分開畫了再組合。

2）先畫望遠鏡再畫手，這樣就容易擺好望遠鏡的位置。

STEP 09

繪製腿部的時候，兩條腿的色彩可以稍微不一樣，比如左腿的色彩更亮一點，右腿更暗一點，這裏可以理解為是光線的明暗深淺不同造成的，而不是人物自己穿了一條左右兩條腿不一樣顏色的褲子。

這點特別提出來是因為之前看到網上的插畫作品有表現左右兩條腿色彩不一樣的，其實都是因為光線場景需要或者一種誇張表達，但是很多初學者並不知道原因，而在所有的插畫中都用這種方式，就造成了視覺上的困擾和不協調。

腿部描繪需要注意的點就是輪廓要表達出來，比如小腿的弧線、臀部的線條弧度，膝蓋的抽象化……這些都不是用兩條矩形隨隨便便拚出來的。尤其兩條腿的粗細長短要均勻。

STEP 10

繪製出人物的鞋子和腳踝，以及身體其他部分的細節。在畫鞋子腳踝部分的時候也要注意身體左右兩邊的均衡。

到這一步，初步的細節描繪就結束了，之所以是初步就是接下到PS當中再進行更深入的細節描繪。

配色小結：

這裏我們用到的三個原色，分別是以紅色為主色，藍色為輔助色，而黃色作為點睛色，雖然分配麵積比例上大致相當，但是注意它們之間內部也有一定的秩序。在我們觀察人物的時候，人物的衣服部分是位於主視覺的，因此上衣的顏色非常重要，填上紅色，更能夠增加這部分的視覺向心力。

基礎大形——第二個人物

在畫第二個人物的時候，注意和第一個人物在色彩上的呼應關係。

STEP 11

畫出這個人物的臉部、頸部和頭發部分。在頭發的部分，弧度的線條需要非常精細的勾勒出來。皮膚的顏色可以和另外一個人物相比有小小的變化。

扁平插畫在表現弧度輪廓上需要一種比較幾何化的風格，接近規則的波浪線，但又要表現出隨機感，這是這類插畫和其他傳統寫實類插畫的不同點。所以用AI造型的優勢就是利用矢量精準控製弧度的表現力。

STEP 12

接下繪製人物身體，繪製身體之前由於草圖表現出了人物是扛著一支巨大的筆的造型，所以這支筆在畫身體之前就最好能畫出來。

STEP 13

身體的結構最好能分開肩臂和主軀幹，一般人物穿了衣服的部分先畫，比如這時就先畫好衣袖再來畫主軀幹。

溫馨小紙條：

這時可能很多人都會有疑問，既然都是同一個形狀，為什麼不直接一筆勾出這個形狀，而要分成兩個不同的形狀，然後組合在一起其實又看不出第一個形狀的輪廓。這就是我為什麼要分步驟演示的目的，因為這樣非常適合初學者去理解內部的結構，練習的目的就是為了記憶，最好的記憶就是畫過一次就多一次記憶。比如這個肩部造型的這塊形狀，在這裏不止是構建肩膀的形狀問題，接下你還會看到其他的作用。

STEP 14

先畫手臂再畫手部，人物由於手臂造型稍微複雜一點，其中左手臂被鉛筆擋住了一部分，但是內部的結構仍然需要注意合理性。尤其手指的細節也要表達清楚。

插畫雖然並不需要太精確的人物比例，但如果風格不是特別誇張的表現，都不能偏離現實太遠。尤其是初學者在學插畫的時候非常容易走入的就是期待一步登頂的坑，誇張的不講造型比例的風格都是一個熟悉了比例、玩比例玩膩了的大神才能表現好的，初學者做起來雖然差不多，但是最終效果肯定是有很大差距的。

STEP 15

把下半身畫出來，注意主結構是裙子和腿部。

STEP 16

再完善人物的腿部，比如鞋子。注意這裏的鞋子和第一個人物從視覺上有關聯，因此就需要從整體去給鞋子上色。比如這裏的鞋子顏色就是根據左右平衡的原則，左邊的人物已經有三個色彩了，右邊的有人至今還沒有用到黃色，雖然下半身的裙子是紅色，但是仍然不夠溫暖，整體偏冷。因此就從鞋子上給出黃色。

STEP 17

進一步繪製細節，比如通過線條讓人物穿上條紋衫。條紋的做法這時就要考慮到兩個方向，還記得剛剛我們畫過肩部那個形狀嗎？在那個肩膀的形狀上條紋的方向就不能和主軀幹的方向一致。

STEP 18

為整個人物造型增加紙飛機，紙飛機的色彩是三色的，因此會讓畫麵更豐富。紙飛機作為整碎視覺原則中的碎的那部分，能和整個大塊的形狀作對比。所以這裏可以把紙飛機替換成任何你能想到的元素。

STEP 19

最後添加筆的細節部分，然後完成整個基礎造型部分的創作。

配色小結

在AI裏，由於配色是可以通過【重新著色圖稿】來調節色彩，因此基礎用色在這一步還能做進一步精準的控製和調節，這是我會比較傾向用AI做基礎形的一個很大的原因，往往優秀的配色都會不斷嚐試的過程，這也是一個學習的機會，因此在AI中利用重新著色圖稿就能快速改變色彩，這是PS裏的調色很難做到的（當然也不是不可以，隻是會更複雜而已）

PS細節手繪

利用PS添加手繪細節，當然前提是搬運到PS當中，打開PS新建好你所需要的新文檔，然後在AI中複製粘貼過去就可以了。由於AI所繪的是矢量圖，因此不用擔心大小尺寸，粘貼為智能對象，就能任意伸縮。這裏我的PS文檔是2000px*2000px,你可以根據自己的情況進行設置。

STEP 20

由於我們的畫麵沒有背景，那隻需要一個圖層就可以了，然後再新建一個圖層。把這個包含了主體對象的圖層進行【風格化>擴散】，擴散的時候有四個選項，通常你可以看看預覽效果來選擇，比如我在這裏就選擇了“變亮優先”。

為什麼要這一步操作呢，大家也許發現了擴散後輪廓線變得比較鬆散和隨意了，更像墨水滲出的感覺。AI畫矢量有個問題就是線條邊緣太硬，有時候看上去顯得隨意感不夠，這是PS裏能幫忙解決的問題，所以我都是AI+PS，等於人的左右腦並用，一個負責藝術一個負責邏輯，配合著用的。

STEP 21

這時開始在新建圖層開始插上手繪板進行描繪了，我在這裏用的是基礎默認畫筆中的“幹介質畫筆-快樂HB”，這個畫筆就是自由自在快樂塗抹的，你可以用線增加陰影，用小形狀修改目前已有的造型，增加更豐富的有趣的細節……好了，話不多說，我們開始吧。

首先從人物的頭臉部分開始，接下就是軀幹四肢以及其他的配件細節。注意用深色線條表現陰影、白色線條表現高光，而其他的細節則可以任意用任何色彩，隻是色彩都不要超過我們基礎三色的範圍。

STEP 22

再進一步繪製人物的腿部褲子的圖案，這裏運用的是kyle的畫筆當中的“kyle`s Screentones-Skinny Hexagons”，整套畫筆的下載地址我分享在文章末尾。

當然你也可以用其他的圖案，圖案的色彩、塗抹的方式和表現的造型都是隨心創作的。我的文章就像一個填色書一樣，你畫到這裏就隨意塗塗畫畫，找到創作中審美的感覺，這比看什麼理論書和文章都對你有幫助。

再給人物的鞋子也添加上豐富的細節，多去某寶上逛逛鞋子，找到自己喜歡的想買的鞋子然後畫出來，插畫中的靈感就是這樣來的。

STEP 23

繼續畫，這一步來到另一個人物，畫法類似，都是用畫筆，隻是這次可以不用圖案畫筆。這裏大家可能會注意，我們有的圖案可以用AI，有的圖案可以用PS，完全可以不用局限。所以文章就演示了兩種不同的工具。

到這一步，我們的人物部分基本完成如下。

配色小結：

在刻畫細節這一步其實色彩的添加原則就是圍繞主色不偏離方向，例如我們用紅、黃、藍，所以畫麵中看不到一點綠色、紫色這類色彩。我在插畫課的學員的作品中就發現，這是很多小夥伴都容易犯的錯誤：認為顏色多是豐富。其實豐富不止來自顏色，還來自造型，尤其是當畫麵主色很有傾向性的時候，突然來一個個別的色調，就有點格格不入，和其他色彩也沒有呼應。這裏的細節雖然也用了很多小顏色，但都是和其他顏色有呼應的。

STEP 24

最後，可以選擇增加一些顆粒，新建一個圖層，將這個圖層建立為剪貼蒙版，利用顆粒質感的畫筆輕點其上，就能製造一種類似舊牆壁的比較斑駁的效果，不過這都不是必須的，所需要的畫筆我也會一並分享到末尾。

插畫應用

插畫的應用可以放在兩個場景中，一個是印刷物料類，還有一個就是虛擬的UI界麵裏。

以上，在各種不同的應用場景下，還可以增加和減少元素，比如在網頁裏就可以增加背景的雲朵形的圖案，而印刷類製品中則可以不必每個畫麵都顯示完全圖，而是部分截取的方式，這就是素材的意義，畫好一個素材圖，就可以隨心所欲的使用，而不再擔心去網上找的素材會有版權問題，或者圖片不夠大，圖片沒辦法改變的問題啦。

後記：畫筆下載地址

百度網盤下載地址

顆粒畫筆套裝：

鏈接：https://pan.baidu.com/s/1-SXTUMjGEpYIhp7BHM2BFg

提取碼：b2ek

Klye`s 畫筆套裝：

鏈接：https://pan.baidu.com/s/1t4frRx1iZbF4cBjFScYImA

提取碼：j3xk

作者：飛屋設計