UI設計師只懂畫圖標、繪製界面？那你恐怕就OUT了。
為什麼要學習插畫？
隨著移動網際網路的飛速發展，現在UI設計師的工作已經不僅僅是設計圖標或排版界面那麼簡單了,需要打造細膩、高效且更具情感化的優質用戶體驗。因此在如今的UI設計中，插畫變得越來越受歡迎，它更清晰，更時尚，也可以更加精準的傳遞信息，表現力更強，被廣泛應用於banner、H5、專題頁和海報設計，已然成為當今UI設計師們的重要設計手法。
今天的文章，我們就簡單介紹一下插畫的分類，以及如何繪製一個插畫banner。
關於插畫
插畫（illustration），源自拉丁語illustraio，該詞的意思是照亮。最初，插畫僅用於照亮文字，即以圖書插畫的形式存在。然而，伴隨著視聽時代的到來，插畫被廣泛應用於廣告、動畫、設計、消費品等各行各業，尤其是當前的網際網路設計圈，更是對插畫這種手法推崇備至。
我們常見的插畫大致分為兩類：
一、傳統插畫：其特點是色彩豐富、造型繁雜、層次豐富，主要以傳統的印刷媒介為載體。
1.繪本類：多為有故事性、主題性，個人風格明顯。
2.廣告類：常見招貼廣告、海報、宣傳冊、pop廣告等。
3.刊物類：報紙、雜誌、書本等的內頁插圖設計、封面設計、文章配圖設計等。
4.包裝類：產品包裝中的插畫設計也日益廣泛，國內著名的有農夫山泉各種主題系列包裝，三隻松鼠、良品鋪子等食品包裝。
二、網際網路插畫：其特點是色彩明快、造型簡潔、層次清晰，主要以數字媒體為載體。
1.Logo&icon：節日換膚、偏向寫實的插畫風格 icon 等；
2.APP：開屏界面、節日開屏頁面、新手引導頁面、內容預設頁面等；
3.WEB：登錄頁面、官網設計手繪元素、產品介紹等；
4.H5：線上宣傳類海報及H5小遊戲，前者鮮明活潑具有吸引力，後者常常會把插畫和故事結合，體現更好的設計感和傳播價值；
5.活動頁面設計：電商類的店鋪活動頁面也越來越多的用到手繪元素，手繪風格的插畫往往色彩豐富，親和力極強，很容易打動用戶，能有效提升banner的轉化率。
製作思路和繪製方法
文案：高考衝刺訓練營 | 11個套路剖析 | 實戰解題思路 | 立即試聽
一、思路分析
首先確定畫面的主題，根據文案中的關鍵字構思插畫中可能出現的元素內容，並且儘量讓自己的畫面當中具有一定的故事性，可以提升層次。在文案中我們可以提取出「高考衝刺」這一關鍵詞，根據關鍵詞能夠得知目標受眾是高三考生，因此可以將手握試卷的學生形象作為畫面的主體，用奔跑的動作表達衝刺。
二、製作步驟
1.草圖：草圖是很重要的一步，可以用來解決構圖、故事設計的最基本的問題。這個階段可以在紙上進行，也可以在設計軟體中建立一個線稿的圖層。沒有手繪能力的設計師也不用擔心，草圖不用描繪的過於細緻，表達清楚意思即可。
2.勾線：將繪製好的草圖導入設計軟體，用形狀工具或鋼筆工具勾出輪廓。這裡要注意將不同元素分別勾線，結構複雜的元素可以依照其結構分不同圖層勾出輪廓，最後記得將圖層編組。如此一來，既方便對線稿進行調整，也可以對各個結構分別進行上色。
3.元素構圖：勾線完成之後，就可以依照草稿把元素組合起來，調整位置和大小關係。這時也可以給畫面添加圖形元素來點綴裝飾，讓整個畫面不會顯得呆板，提昇平衡感。
4.上色：儘量不要使用過多顏色。可以先根據文案調性選擇冷色或暖色作為主色調，再根據同色系、鄰近色、對立色、互補色、分散互補色等配色方0式進行配色。
5. 細節塑造：這時主要考慮到光源、氛圍、質感紋理的的塑造，一層層去深入刻畫。接著給畫面加上背景，添加光照的效果，增加畫面的張力，並給部分裝飾元素做動感模糊處理，使畫面更能表現出緊迫的感覺。最後加上按鈕和文案即可。
需要注意的問題
插畫的創作不需要太高的軟體操作能力，但是優質的插畫需要熟練的細節把控能力，同時還要緊密結合整張設計的商業用途進行適當優化和調整。因此想要做好插畫，要求也是比較高的。在使用和設計插畫的時候，需要考慮以下的幾個方面：
● 目標受眾（身體能力，年齡，文化背景，教育水平等）；
● 產品的使用環境；
● 所選圖形的隱喻以及是否容易被識別；
● 插畫是否會過於搶佔文字主體。
希望這篇文章能對你的插畫學習有所幫助。
（本文首發於公眾號：摹客