UI設計必看:如何用UI設計的手法繪製流行插畫
先看看下面這套插畫作品
那今天我就以這幅圖為例,跟大家一起探討下整個的創作過程,也就是如何用UI設計的手法繪製插畫。
寫在前面:
在B的插畫構思 ,我選擇了Butcher(屠夫)。
無論是做什麼設計,肯定不可能空穴來風,憑空想像,特別是對自己不太熟悉的東西。
所以我的第一步就是去花瓣,pintrest,或者dribbble上搜一下關鍵詞,看看能找到到什麼靈感。
能搜到的不多,質量好點的大概就這些。
我們來看看這些屠夫們有什麼共同的構成點:彪悍的大叔+大刀+圍裙。
接下來是不是腦子裡就會有些畫面感了?
對我而言,在我腦中出現的是一個穿著圍裙正在賣力剁肉的屠夫大叔。
做了很多年的UI設計,規整的圖形思維已經深入到了骨髓。
所以我在草圖繪製的時候會用一些圓形,圓角矩形,方形等去構思主體框架。
鑒於是給自己看的草圖,也沒想到日後寫教程會用到,所以畫的比較潦草,請大家見諒,不要隨意鄙視~
最重要的一步:輪廓勾
上一步有說過,這個系列的插畫其實用的是UI繪製icon的手法和思維。
所以在輪廓勾勒的時候要注意:
一定定要用布爾運算!一定定要用布爾運算!一定定要用布爾運算!
也就是說,凡是涉及到曲線的部分,一定是用各種圓疊加切割的,而不是用鋼筆工具勾勒的。
鋼筆工具勾或許也可以,但這不是小魔女的插畫風格~
個人比較喜歡的是規整的圓,整齊的方。
以稍微複雜一些的身體為例,它其實是由很多的圓形,橢圓形疊加而成。
最後一行的不規則形狀,其實是1/4圓。
初稿設計的時候填充的顏色都只是大致的顏色。
我個人是有一些固定的色卡(色卡在我的小密圈裡提供下載哦);
一般都是先用這些顏色 ,之後再根據整個畫面重新去做調整。
因為是比較扁平的插畫,所以陰影疊加起來也很方便。
在這套系列裡,統一都是右邊暗,左邊明亮。
光陰的疊加分成面的疊加和線的疊加。
首先是面:
上完明暗後的效果如下圖:也還是比較單調的。
所以需要加一些線。
陰影線的顏色和勾勒形體的顏色相同就好,高光線直接用白色。
至於怎麼斷的,並沒什麼講究,看個人喜好就行。
我一般是短 - 長 - 短這樣的順序。
最後需要添加一些細節,讓整個主體的設計更加栩栩如生一些。
既然是屠夫大叔,肯定不修邊幅,所以會有胸毛,手毛,同時鬍子也不會那麼乾淨整齊,而是有很多的渣渣;
他在那麼賣力的砍, 一定很熱,所以頭上會有汗珠,並且刀上、衣服上都會粘上血漬。
把這些細節一加,主體的設計就大功告成啦。
為了更好的幫大叔渲染氛圍,後面還補充了個肉架的圖。
因為不能搶大叔的風頭,所以用的是純面稿,並且透明度也被降低到 25%。以下是100%時的顯示。
其實最開始是打算每個插畫主體後面都有這麼一個氛圍渲染的面稿的,後來覺得太廢時間,所以就放棄了。
加上效果會更好一些。
好了,
這個系列的創作思路到整個完成的過程就是這樣的。
概括的說,其實是在用UI的設計手法去做插畫。UI萬歲!
最後說句
如果想看更多零碎設計信息?
打開翼狐網,發現更好的設計!
利用更多碎片時間學習設計吧~
※打破次元壁!明星也來玩COS,鹿晗神還原金木研
※感受下2017年下半年的大片陣容,感覺自己睡電影院算了!
※女孩將小時候和現在ps到同一畫面,看著總感覺哪不對勁!
※還記得那年高考你做過的考題么?看到這些藝考試卷,老師氣哭了…
※優秀的LOGO是如何設計出來的?設計大神告訴你!
TAG:翼狐網 |
※設計手法——線在服裝設計中的具體運用
※AI圓角矩形繪製手法!
※IKEA產品新包裝:將信息以裝飾手法傳遞
※今日分享 | 設計手法——線在服裝設計中的具體運用
※圖形創意設計技巧!同構手法
※設計中的「修辭」手法!
※軟裝設計如何搭配窗帘?窗帘搭配7種常見手法!
※優秀Logo設計!圓形表現手法
※Stella McCartney時裝系列依舊利用簡約流暢剪裁手法打造穿搭風格
※客廳液晶電視背景牆的設計手法和顏色搭配,不要亂設計,這幾點很實用!
※LOGO標誌設計的14種手法,你掌握了沒有?
※牽手法網 OPPO跨界營銷又有新動作
※插畫丨他是這樣畫的!用簡單的手法,畫出如此可愛的插畫
※POLA按摩膏很神奇?打造精緻臉蛋兒……附POLA按摩手法!
※新型滲透手法:利用XSS繞過WAF進行SQL注入
※平面設計常用表現手法!
※「要用力,又不能太用力」:公主般傲嬌的手法技術,你能HOLD住嗎?
※時裝手繪 | 服裝設計效果圖——荒誕暗黑,這種手法你見過嗎?
※看設計師如何用創新手法玩轉月亮元素
※歐式電視牆裝修設計注意事項 歐式電視牆設計手法有哪些