2018-10-8 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
本文教你用仿型和破型的思路，掌握各種插畫風(fēng)格。
不管是 UI設(shè)計(jì)中還是營(yíng)銷活動(dòng)中，插畫都有很高的出場(chǎng)率，原因并不復(fù)雜：插畫比起圖片可控性更強(qiáng)，更容易發(fā)揮創(chuàng)意，營(yíng)造氛圍，傳遞信息。從內(nèi)容到技術(shù)細(xì)節(jié)，插畫都在某種程度上超過(guò)現(xiàn)成的圖片。
作為視覺(jué)設(shè)計(jì)師，我們也常常會(huì)接到各種各樣的需求，針對(duì)不同的項(xiàng)目和產(chǎn)品繪制插畫，往往項(xiàng)目時(shí)間緊張但又需要在插畫展示上有差異性。
但看著網(wǎng)上風(fēng)格各異的插圖，往往想學(xué)習(xí)卻又無(wú)從下手，該怎么辦？
下面我將從仿型和破型兩個(gè)角度來(lái)闡述，如何快速掌握風(fēng)格各異的插畫。
△ dribbble上形式各異的插畫 圖片來(lái)源：dribbble
仿型，可說(shuō)是一個(gè)模仿、練習(xí)的過(guò)程。選擇喜歡的插畫作為學(xué)習(xí)對(duì)象，拆解畫面構(gòu)成元素，總結(jié)代表性特征，了解其思考方式，是一種理解原作者繪畫思路和想法的過(guò)程。
我們從形式上來(lái)說(shuō)可以將一張插畫拆解為5個(gè)構(gòu)成元素：構(gòu)圖、造型、素描關(guān)系、配色和肌理。
構(gòu)圖是一張插畫的骨架，各個(gè)元素按照設(shè)計(jì)的位置、大小排列在畫面中，就能形成一張畫最基礎(chǔ)的模樣。概括來(lái)說(shuō)，最基本的構(gòu)圖有如下這么幾種：
環(huán)型
環(huán)形構(gòu)圖是非常常見(jiàn)的一種形式感很強(qiáng)的構(gòu)圖，往往畫幅中心存在一個(gè)視覺(jué)焦點(diǎn)，圍繞視覺(jué)焦點(diǎn)發(fā)散/聚攏元素。
對(duì)稱
對(duì)稱構(gòu)圖的畫面中存在一個(gè)軸線，畫面元素圍繞軸線兩邊對(duì)稱。這種對(duì)稱既可以是追求強(qiáng)形式感的絕對(duì)對(duì)稱，也可以是形成一種視覺(jué)平衡的動(dòng)態(tài)對(duì)稱。
平鋪
平鋪構(gòu)圖的畫面往往不存在一個(gè)明確的視覺(jué)中心，所有的元素均勻的充滿著畫面，強(qiáng)調(diào)整體的統(tǒng)一性。
S型
S型構(gòu)圖是非常常見(jiàn)的一種構(gòu)圖方式，形式靈活多變，相信很多接受過(guò)素描靜物訓(xùn)練的同學(xué)一定對(duì)此不陌生。S型構(gòu)圖重點(diǎn)不在于元素的布局是「S」或是「Z」，而是利用錯(cuò)位布局，營(yíng)造空間，增強(qiáng)畫面的節(jié)奏感。往往 S型構(gòu)圖有著明顯的層次關(guān)系，元素在空間上可以分為前、中、后景。
同樣的元素，在不同的設(shè)計(jì)師手上畫出的感覺(jué)一定是不同的，一個(gè)插畫師最明顯的風(fēng)格特征也往往體現(xiàn)在造型的獨(dú)特性上。造型的類別是無(wú)法枚舉的，寫實(shí)或抽象、松弛或硬朗、精細(xì)或概括……對(duì)造型感的提升需要我們多看優(yōu)秀的作品輔以大量的練習(xí)。
△ 風(fēng)格迥異的人物造型 圖片來(lái)源：dribbble
素描關(guān)系這個(gè)詞想必大家不陌生，嚴(yán)格來(lái)說(shuō)它也是造型的要素之一，單獨(dú)提出來(lái)是方便大家更好的理解。素描關(guān)系由高光、灰部、明暗交界線、暗部、反光、投影組成。一個(gè)元素加哪幾種素描關(guān)系，怎么加，加在哪，什么肌理，都能左右一張插畫的視覺(jué)風(fēng)格。一般來(lái)說(shuō)，對(duì)素描關(guān)系處理的越多，畫面會(huì)有更多的細(xì)節(jié)，更趨近于寫實(shí)。
△ 對(duì)同一元素素描關(guān)系的增減
人類的視覺(jué)感知系統(tǒng)，對(duì)于顏色是第一位的，其次是形狀。插圖的顏色往往能決定觀者的第一印象。對(duì)于配色，我們需要注意兩點(diǎn)：
顏色的配比
決定畫面整體色調(diào)的顏色，一般占畫面60%以上，余下有30%的輔助色，10%的點(diǎn)綴色。這并不意味著畫面中只能出現(xiàn)三個(gè)顏色，但是三個(gè)緯度的顏色需要盡量在色相上保持接近。
顏色的對(duì)比
一張插畫中，一定蘊(yùn)含著色彩的對(duì)比。
我們知道顏色三要素是：色相、明度、純度。相應(yīng)的對(duì)比也分為色相的對(duì)比，明度的對(duì)比，純度的對(duì)比，當(dāng)然更多時(shí)候是混用的。對(duì)比的作用有很多，較強(qiáng)的對(duì)比可以使得你的畫面更富層次感和視覺(jué)沖擊力，較弱的對(duì)比則營(yíng)造一種柔和自然的感受。
△ 不同類型色彩對(duì)比營(yíng)造的畫面 插圖來(lái)源：dribbble
肌理本是指物體表面的組織紋理結(jié)構(gòu)，即各種縱橫交錯(cuò)、高低不平、粗糙平滑的紋理變化，是表達(dá)人對(duì)設(shè)計(jì)物表面紋理特征的感受，是一種三維的概念。在這里，肌理所指的含義與質(zhì)感相近，是一種二維概念。我們可以通過(guò)刻意制造的筆觸感、噪點(diǎn)、紋理等，使得畫面蘊(yùn)含豐富的細(xì)節(jié)，更加耐看。
△ 對(duì)同一元素的不同肌理表現(xiàn)
破型，就是在充分理解學(xué)習(xí)對(duì)象構(gòu)成的基礎(chǔ)上，結(jié)合自己的風(fēng)格痕跡和需要表現(xiàn)的內(nèi)容，形成新的插畫畫面。
好的插畫是形式與內(nèi)容的完美結(jié)合，優(yōu)秀的表現(xiàn)形式是為了傳遞信息，你應(yīng)該明確插畫需要傳遞何種信息，并且讓所有的元素為之服務(wù)。
缺少內(nèi)容創(chuàng)作的插畫學(xué)習(xí)會(huì)失去內(nèi)涵乃至成為抄襲，這是我們一定要避免的。如何更好的結(jié)合內(nèi)容呢？
環(huán)形構(gòu)圖更聚焦，對(duì)稱構(gòu)圖更具形式感；曲線的運(yùn)用會(huì)讓畫面更柔和，貼近自然，直線與幾何則更具現(xiàn)代感和科技感。先要理解各個(gè)元素所隱含的視覺(jué)語(yǔ)言，再通過(guò)你想傳達(dá)的內(nèi)容去挑選合適的呈現(xiàn)方式。
想象一個(gè)故事，誰(shuí)（who），在哪（where），什么時(shí)間（when），做什么事（what），怎樣在做（how）？
比如說(shuō)，如果是想畫關(guān)于工作的故事，是誰(shuí)在工作（加班狗），在哪（工位），什么時(shí)間（深夜），做什么事（加班），怎樣在做（幾個(gè)人討論需求）。
然后我們?cè)賳?wèn)自己一個(gè)問(wèn)題：這個(gè)故事要傳達(dá)什么情緒（有趣、溫馨…）。
不斷思考這樣的問(wèn)題，完成從故事到畫面的轉(zhuǎn)變，畫面里物境-情境-意境的搭建。
故事是文字，我們需要將文字視覺(jué)轉(zhuǎn)譯為圖形。
讓我們接著上面繼續(xù)想：怎樣造型的加班狗是有趣的，什么表情是溫馨的？加班的桌上應(yīng)該有什么？怎樣的色彩和素描關(guān)系可以表現(xiàn)深夜，又體現(xiàn)出溫馨？ 等等。
答案也許會(huì)一點(diǎn)點(diǎn)浮現(xiàn)：深夜這個(gè)詞從顏色的緯度，應(yīng)該是冷色調(diào)的；從素描關(guān)系的緯度，應(yīng)該是具有較深的投影，較強(qiáng)的高光，乃至是一個(gè)背光。
一點(diǎn)點(diǎn)的細(xì)化你的故事，將每一個(gè)詞轉(zhuǎn)化為可見(jiàn)的圖形和顏色，并且快速的反饋到你的草圖中去。當(dāng)然，這個(gè)過(guò)程對(duì)于每個(gè)人來(lái)說(shuō)都會(huì)得到不同的結(jié)果，自信一點(diǎn)，這才是你創(chuàng)作中最與眾不同的部分。
采用這樣的思路，我們可以快速的創(chuàng)作不同風(fēng)格的插畫：
△ 左側(cè)為作者練習(xí) 右側(cè)為學(xué)習(xí)對(duì)象
在自主創(chuàng)作的階段中，我們一定會(huì)遇到想法不夠，不知該如何進(jìn)行下去的時(shí)候，此時(shí)應(yīng)該避免回過(guò)頭去看學(xué)習(xí)的對(duì)象，這樣會(huì)讓自己的創(chuàng)作變的局限，從而越來(lái)越像原作。
很多人對(duì)待草稿是不夠用心的，粗糙的草圖意味著你并沒(méi)有真正做好獨(dú)立創(chuàng)作的準(zhǔn)備。請(qǐng)盡量保證從投影的造型到人物臉部的配色，每一個(gè)元素的細(xì)節(jié)都能在草稿畫完之后心中有數(shù)，這樣才能使你避免你對(duì)著 AI/PS中的半成品不知所措。
△ 作者平日的草稿
dribbble 上固然能提供許多新鮮的想法和創(chuàng)意，但是不妨去了解一下新藝術(shù)運(yùn)動(dòng)的插圖，席勒的速寫，達(dá)達(dá)主義和立體主義的海報(bào)等等，你會(huì)發(fā)現(xiàn)藝術(shù)史上如此多大師和流派，都是取之不盡用之不竭的靈感源泉。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com