UI設計師只懂畫圖標、繪制界面？那你恐怕就OUT了。今天分享下插畫banner的繪制過程，看看作者是如果制作的，希望這篇文章能對你的插畫學習有所幫助。

為什么要學習插畫？

隨著移動互聯網的飛速發展，現在UI設計師的工作已經不僅僅是設計圖標或排版界面那么簡單了,需要打造細膩、高效且更具情感化的優質用戶體驗。因此在如今的UI設計中，插畫變得越來越受歡迎，它更清晰，更時尚，也可以更加精準的傳遞信息，表現力更強，被廣泛應用于banner、H5、專題頁和海報設計，已然成為當今UI設計師們的重要設計手法。

關于插畫

插畫（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.  細節塑造：這時主要考慮到光源、氛圍、質感紋理的的塑造，一層層去深入刻畫。接著給畫面加上背景，添加光照的效果，增加畫面的張力，并給部分裝飾元素做動感模糊處理，使畫面更能表現出緊迫的感覺。最后加上按鈕和文案即可。

需要注意的問題

插畫的創作不需要太高的軟件操作能力，但是優質的插畫需要熟練的細節把控能力，同時還要緊密結合整張設計的商業用途進行適當優化和調整。因此想要做好插畫，要求也是比較高的。在使用和設計插畫的時候，需要考慮以下的幾個方面：

● 目標受眾（身體能力，年齡，文化背景，教育水平等）；

● 產品的使用環境；

● 所選圖形的隱喻以及是否容易被識別；

● 插畫是否會過于搶占文字主體。

轉載聲明：本文來源于網絡，不作任何商業用途