UI設計之教你打造俏皮卡通插畫教程

目前很多流行的APP界面已經有手繪風格的插圖，作為UI設計師，也應該學學一些手繪技能，今天為大家分享來自小魔女007的一幅卡通插畫教程，使用的繪製方法和UI設計手法相似，有點像繪製 ICON 的步驟，過程並不很複雜，歡迎同學們一起嘗試。

下面大家一起來看看這個教程。

STEP 01 方案構思

在 B 的插畫構思里，我選擇了 Butcher（屠夫）。無論是做什麼設計，肯定 不可能空穴來風，憑空想像，特別是對自己不太熟悉的東西。所以我的第一步就是，快速搜索Pinterest、花瓣、Dribbble 等設計站來獲得靈感。

能搜到的不多，質量好點的大概就這些了。我們來看看這些屠夫們有什麼共同的構成點：彪悍的大叔+大刀+圍裙。

接下來是不是腦子裡就會有些畫面感了？對我而言，在我腦海中出現的是一個穿著圍裙正在賣力剁肉的屠夫大叔。

STEP 02 草圖繪製

做了很多年的 UI 設計，規整的圖形思維已經深入到了骨髓。所以我在草圖繪製的時候會用一些圓形，圓角矩形，方形等去構思主體框架。

鑒於是給自己看的草圖，也沒想到日後寫教程會用到，所以畫的比較潦草，請大家見諒，不要隨意鄙視~

STEP 03 初稿設計

最重要的一步：輪廓勾勒。

上一步有說過，這個系列的插畫其實用的是 UI 繪製 icon 手法和思維。所以在輪廓勾勒的時候要注意：

一定要用布爾運算！一定要用布爾運算！一定要用布爾運算！

也就是說，凡是涉及到出線部分，一定是用各種圓疊加切割的，而不是用鉛筆工具勾勒 。鋼筆工具勾或放也可以，但這不是小魔女的插畫風格~個人比較喜歡的是規整的圓，整齊的方。

以稍微複雜一些的身體為例，它其實是由很多的圓形、橢圓形疊加而成的。最後一行的不規則形狀，其實是1/4圓。

初稿設計的時候直充的顏色都只是大致的顏色，我個人是有一些回寫的色卡，一般都是先用這些顏色 ，之後再根據整個畫面重新去做調整。

STEP 04 光陰疊加

因為是比較扁平的插畫，所以陰影疊加起來也很方便，在這套系列裡，統一都是右邊暗，左邊明亮。光明的疊加分成面的疊加和線的疊加。

首先是面。上完明暗後的效果如下圖：也還是比較單調的。

所以需要加一些線。陰影 線的顏色和勾勒形體的顏色相同就好，高光線直接用白色。至於怎麼判斷的，並沒什麼講究，看人個喜好就行。我一般是短-長-短這樣的順序。

STEP O5 細節添加

最後需要添加一些細節，讓整個主體的設計更加栩栩如生一些。

既然是屠夫大叔，肯定不修邊幅，所以會有胸毛，搬遷，同時鬍子也不會那麼乾淨整齊，而是有很多的渣渣。

他在那麼賣力的砍肉，一定很熱，所以頭上會有汗珠，並且刀上，衣服上都會粘上血漬。所這些細節一加，主體的設計就大功告啦。

為了更好的幫大叔渲染氛圍，後面還補充了個肉架的圖。因為不能搶了大叔的風頭，所以用的是純面稿，並且透明度也被降低到了25%。以下是100%時的顯示。

其實最開始是打算每個插畫主體後面都有這麼一個氛圍渲染的面稿的，後來覺得太廢時間，所以就放棄了。加上效果會更好。

這個系列的創作思路到整個完成的過程就是這樣的。概括的說，其實是在用 UI 的設計方法去做插畫。UI 萬歲！

我不是機器人，各位可以留言互動

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！