UI插畫界麵繪製圖文教程

插畫應用到UI、網頁界麵是一種新的趨勢，而用什麼風格類型的插畫，以及插畫和其他元素之間的關係則是需要設計師考慮的事，更進一步來說，如果你學會了插畫，其實本身就可以自由應用在任何場景了。

這篇文章中將帶你一起從草圖開始畫出優雅感的UI界麵插畫，並且學會在這個過程中去體會造型、色彩的表現力，運用AI+PS組合技繪製插畫又會有著意想不到的創意驚喜！開始吧~

學會畫插畫草圖

草圖非常重要，它是插畫最後成形的一個藍圖摸索。草圖沒有色彩，所以本身隻是在一個純線性的層麵對造型的表現演示。

草圖可以畫在任何地方，用任何你習慣的方式：ipad、手繪板、紙筆。草圖可以盡可能突出一個概念，找到一個表達的概念以後再確定所要表現的對象——人物，並對人物的場景進行擴展，重複表達好概念並豐富場景。

畫草圖還需要明確一個就是你所要運用的場景的尺寸，比如用在網頁上，那麼這個配圖的位置是在哪裏，和其他元素（文字、按鈕這類）之間的位置關係。比如這裏我將插畫放在右邊，右邊是出血的設計（我們把這類插畫可以稱為半封閉式的結構）。這在構圖上就要注意，草圖階段就應該明確插畫的尺寸和應用方式。

STEP 01

我在這裏用的是PS裏的鉛筆進行勾勒，畫出一個女生和周圍的普通日常的景象（城鄉結合部？）。其實插畫很多時候不一定需要場景多麼奇特，最重要還是形色關係。

AI構建基礎大形——人物

我們說畫插畫可以有兩種方式，一種就是直接開畫，想到哪就畫到哪，不需要草圖，這是針對那些天生在這方麵特別有自由度且表達力也很強的人（想想兒童塗鴉，天生靈力！），另一種就是絕大多數像我們這類需要思考組織並且按照計劃分步驟進行的，草圖就是後者最好的工具。

STEP 02

有了草圖打底，在AI當中塑形就非常容易了。主要利用的是AI的鋼筆工具，輔以形狀工具、錨點工具等就能輕鬆組合出任何想要的圖案。這時讓我們先畫焦點人物。

打開AI，新建一個1600*1600px的文檔，顏色模式選擇CMYK。將草圖拖入到AI中，然後新建一個圖層（草圖位於最上層），利用鋼筆工具，對照草圖畫出人物的頭頸部分。先畫人物側臉，再畫頭發的部分以及頸部。雖然頭部和頸部是同一個形狀，但最好是分開兩個形狀畫出來。

色彩填充的色值參考如下圖：

有色彩模式疑問的看下麵：

這裏需要說明一下為什麼用CMYK，大家也許發現過有時候你用RGB模式在電腦上調好的色彩到了手機、平板上顯示就特別“亮”，甚至會很刺眼。尤其是那些高飽和度的色彩在移動端的屏幕上顯色特別不自然。我用過最好的解決辦法就是換成CMYK，CMYK和RGB相比色彩不會太過飽和，會溫和一些，即使用到最高飽和度的色彩也不會發出刺眼的亮色，而移動端屏幕稍微提亮一點色彩就會看起來非常舒適飽滿，而與此同時電腦上也會是合適的。這樣就平衡了電腦、移動端的屏幕顯色差異問題。

STEP 03

開始畫出人物的身體。這時大家可以觀察一下草圖，草圖上我設計了很多背景的形狀、有山、遠景、樓房……這些形狀會用到比較多色彩，所以這裏人物的身體部分我就打算用白色來中和這種風景中的多色彩表現。但是在這裏我們的背景是白色，如果這時畫白色就看不出，因此我們就需要先增加一個背景，這個背景不是確定的色彩，隻是用來突出白色的，畫完背景的時候也許就可以刪掉的。

這一步需要注意的地方是人物身體的弧度和流線型。

STEP 04

然後再畫出人物的四肢，先畫手臂和手。手的畫法會比較難，很多初學者也是會容易忽略手的表達，畫的時候非常籠統。所以我們在畫上肢的時候，就要把手臂和手掌分開來畫。

先畫出手臂，再畫出手掌。最後記得畫出另一隻手臂，比膚色的色彩更深，表示兩隻手臂做出相同的動作。從側麵看兩隻手類似是重疊在一起的。

STEP 05

最後畫出人物的腿部，補充完人物手中握住的杯子。

AI構建基礎大形——近景

人物畫好以後，我們就來畫人物周圍比較近的景。

STEP 06

首先是離得比較近的植物，三片葉子比較大，可以用不同的綠色。還有一些細碎的小葉片這可以留給更細節的部分去畫。

STEP 07

然後再畫出人物所在的桌子和椅子。桌子和椅子不需要畫得太具體，可以抽象簡化一點，重點突出人物和整體的氛圍。

這時所運用的色彩主要是綠色，綠色也是我們整個畫麵的主色調。而肉粉作為輔色，同時也能起到冷暖搭配，相得益彰的作用。

STEP 08

最後畫好桌子上的平板側麵，一個支架。還記得我們之前為了畫白色衣服，所以給整個畫麵設置了一個淺色背景嗎？這時就可以把這個背景的矩形進行改變，變為如下圖的形狀。

AI構建基礎大形——遠景

好，這下可以畫遠景了。畫法依然用鋼筆工具，這裏需要注意輪廓的流暢感。

STEP 09

新建一個圖層，這個圖層作為遠景放在人物近景的下方。畫出三塊不同的植物，根據草圖的提示，形狀很好控製，色彩的搭配注意微妙的在綠色調上的變化。

STEP 10

繼續補充更多的景致，體現更豐富的層次感。

STEP 11

畫出遠景中的橋梁，橋梁的設計可以因循最簡單的幾何組裝式畫法，橋洞的畫法可以用形狀生成器減去相應的形狀。步驟如下：

將橋梁放置於插畫中後的效果：

STEP 12

完成建築體的部分，畫法依然和畫橋梁是一樣用矩形進行簡單的組裝。這裏的建築用的是紅色，因此是一個很點睛的色彩，在整個配色體係中處於點睛之筆的地位。

STEP 13

繼續畫遠處的大山造型，這部分的造型可以從棱角的形狀開始畫起，再轉為圓弧。

AI中描細節

STEP 14

最後增加必要的細節，比如山上的三角作為樹的一種簡化的表征（在扁平插畫中這種表征類的形狀是很多的，主要就是不需要把每件物體都非常具體的表現出來），還有為前景增加葉片植物，這時前景是在另一個圖層上，注意圖層之間的切換。

好的，這一步為止，AI就完成它的使命了。根據草圖當然我們有很多細節還沒完成，但沒關係，接下就由PS來接手。

也是從這一步開始，插畫的難度就會提升，其實很多插畫在AI這部分完成就可以拿去用了，平塗的方式看起來相對簡潔，在很多極簡風格的設計中，直接用這樣的插畫並不違和。但是如果要打磨更高品質的插畫就可以繼續進階，那就看下去吧~

從AI搬家去PS

要從AI搬家去PS，需要的不僅僅是複製粘貼，而是要學會分成不同的部分進行複製粘貼。這也是為了方便我們在PS裏的繼續加工。

STEP 15

打開PS，新建一個文檔，這個文檔大小可以設置為2000*2000，顏色模式記得保持和AI裏一致。

這裏需要將不同圖層的部分分別編組，編好組以後再分別複製過去，粘貼為智能對象。前景的兩顆植物由於比較特殊，所以再編一個組。那麼最終到PS裏會出現4個圖層。這4個圖層長這樣。

PS手繪細節

STEP 16

這時用手繪板，利用硬邊緣壓力大小的畫筆，在人物這個圖層基礎之上新建一個圖層，利用畫筆自由的畫出各種細節。這些細節的作用是為了增加畫麵的豐富感，因此你可以任意展開想象，比如給人物增加耳環、帽子、包包、增加桌麵的物件等等……畫的時候盡量在色彩上配合已有的色彩，造型上符合整體的風格。

然後可以把這個新建的圖層和原有人物這個圖層進行合並。

STEP 17

用同樣的方法畫遠景的細節。手繪的方式畫出的風格有一種隨性的感覺，雖然在AI中我們也能畫小樹木等等細節，但是表現的風格是有差別的，並且AI沒有PS手繪這麼直接。

STEP 18

給近景的植物也增加小圓點，圓點不要太多，否則就容易喧賓奪主。

顆粒的飽滿質感

接下我們為整個畫麵增加顆粒感，顆粒感的增加需要的是顆粒畫筆。現在顆粒畫筆的素材雖然多，但我覺得最好用的還是自己自製的顆粒感畫筆以及另一種subtle的顆粒質感畫筆。

可以通過這個鏈接下載這兩款畫筆（其中一個是比較多顆粒畫筆的集合，你也可以用其他的顆粒畫筆，這個畫筆集是我在網上買的畫筆）。

百度網盤下載：

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

提取碼：kpa2

STEP 19

開始結合鋼筆的使用，采用類似水彩畫中“暈染”的手法進行描繪。首先從人物這個圖層開始，在這個圖層之上新建一個圖層，然後右鍵創建一個剪貼蒙版，顆粒的質感就可以增加在這個蒙版之上。

運用我自製的顆粒感畫筆容易在細節上入手畫出非常自然的顆粒的漸變過渡，讓細節的質感飽滿。

從上圖可以看到顆粒大致可以分為三種：

亮點顆粒：屬於受光的部分，顆粒的色彩更亮

暗點顆粒：屬於陰影的部分，顆粒的色彩更暗

增色顆粒：增加了其他複雜顏色的顆粒

畫麵的質感就從平塗轉為了立體，更增加了畫麵的立體感和趣味性。

STEP 20

用另一個顆粒畫筆來畫麵積比較大的部分，比如女孩的白色衣裙，增加色彩更深的subtle顆粒，這個顆粒大麵積塗抹會看起來比較輕盈，適合用在比較清淡的陰影上，陰影的形狀也因循著裙子的輪廓。

STEP 21

為遠景增加有趣的顆粒細節，這部分是很自由的。尤其樹的部分，可以多一點顆粒質感更容易讓視覺停留。

STEP 22

最後為近景增加顆粒質感，植物大部分可以為增色顆粒，讓植物看起來色彩更豐富。

描繪光感

光感的增加可以用最基礎的畫筆就能實現。

STEP 23

運用PS裏最基礎的柔邊圓畫筆，將畫筆的筆頭調到最大，然後對這4個圖層（人物、前景、遠景、背景）分別進行塗抹上色，當然前提也是需要分別新建一個剪貼蒙版圖層。塗抹的時候畫筆可以把流量開到20%左右，這樣顏色就不會用力過猛。

最終效果

通過最後的調整，插畫最終效果如下。

應用在UI設計中時，我將它用在一個網頁的配圖中。

最後：慎用綠色

一開始，我們傳達了優雅這個主題，優雅相對來說就不需要太高調，所以整個配色中盡量選擇比較相對低調的色彩，而避免用高飽和度的色彩。尤其是綠色，在很多插畫學習者的學習過程中，綠色都是一個容易犯錯的色彩，因為綠色帶著黃色的耀眼光芒，因此越接近黃色的綠色，越是要注意在飽和度上不要太過明顯，否則就容易帶上黃色那種明晃晃的光，而和我們的主題容易錯位。

來源：飛屋設計微雜誌