用UI設(shè)計(jì)的手法繪制流行插畫

大家好，我是小魔女，一名根正苗紅的UI設(shè)計(jì)師。  

不久前在站酷傳了這一套插畫后，很多人都對(duì)畫法和配色表示感興趣。

（就是下面這套哦）

 

 

 

在B的插畫構(gòu)思 ，我選擇了Butcher(屠夫)。

無論是做什么設(shè)計(jì)，肯定不可能空穴來風(fēng)，憑空想象，特別是對(duì)自己不太熟悉的東西。

所以我的第一步就是去花瓣，pintrest，或者dribbble上搜一下關(guān)鍵詞，看看能找到到什么靈感。

 

能搜到的不多，質(zhì)量好點(diǎn)的大概就這些。

我們來看看這些屠夫們有什么共同的構(gòu)成點(diǎn)：彪悍的大叔+大刀+圍裙。

接下來是不是腦子里就會(huì)有些畫面感了？

對(duì)我而言，在我腦中出現(xiàn)的是一個(gè)穿著圍裙正在賣力剁肉的屠夫大叔。

 

 

 

 

 

最重要的一步：輪廓勾

上一步有說過，這個(gè)系列的插畫其實(shí)用的是UI繪制icon的手法和思維。

所以在輪廓勾勒的時(shí)候要注意:

 

一定定要用布爾運(yùn)算！一定定要用布爾運(yùn)算！一定定要用布爾運(yùn)算！

 

也就是說，凡是涉及到曲線的部分，一定是用各種圓疊加切割的，而不是用鋼筆工具勾勒的。

 

鋼筆工具勾或許也可以，但這不是小魔女的插畫風(fēng)格~

個(gè)人比較喜歡的是規(guī)整的圓，整齊的方。

 

以稍微復(fù)雜一些的身體為例，它其實(shí)是由很多的圓形，橢圓形疊加而成。

最后一行的不規(guī)則形狀，其實(shí)是1/4圓。

 

 

初稿設(shè)計(jì)的時(shí)候填充的顏色都只是大致的顏色。

我個(gè)人是有一些固定的色卡（色卡在我的小密圈里提供下載哦）；

一般都是先用這些顏色 ，之后再根據(jù)整個(gè)畫面重新去做調(diào)整。

 

 

因?yàn)槭潜容^扁平的插畫，所以陰影疊加起來也很方便。

在這套系列里，統(tǒng)一都是右邊暗，左邊明亮。

光陰的疊加分成面的疊加和線的疊加。

 

首先是面：

上完明暗后的效果如下圖：也還是比較單調(diào)的。

 

所以需要加一些線。

陰影線的顏色和勾勒形體的顏色相同就好，高光線直接用白色。

至于怎么斷的，并沒什么講究，看個(gè)人喜好就行。

 

我一般是短 - 長 - 短這樣的順序。

 

 

 

最后需要添加一些細(xì)節(jié)，讓整個(gè)主體的設(shè)計(jì)更加栩栩如生一些。 

既然是屠夫大叔，肯定不修邊幅，所以會(huì)有胸毛，手毛，同時(shí)胡子也不會(huì)那么干凈整齊，而是有很多的渣渣; 

 

他在那么賣力的砍， 一定很熱，所以頭上會(huì)有汗珠，并且刀上、衣服上都會(huì)粘上血漬。 

把這些細(xì)節(jié)一加，主體的設(shè)計(jì)就大功告成啦。

 

 

為了更好的幫大叔渲染氛圍，后面還補(bǔ)充了個(gè)肉架的圖。

因?yàn)椴荒軗尨笫宓娘L(fēng)頭，所以用的是純面稿，并且透明度也被降低到 25%。以下是100%時(shí)的顯示。 

 

其實(shí)最開始是打算每個(gè)插畫主體后面都有這么一個(gè)氛圍渲染的面稿的，后來覺得太廢時(shí)間，所以就放棄了。

加上效果會(huì)更好一些。

 

 

好了，

這個(gè)系列的創(chuàng)作思路到整個(gè)完成的過程就是這樣的。 

概括的說，其實(shí)是在用UI的設(shè)計(jì)手法去做插畫。UI萬歲! 

 

站酷:小魔女