插畫作為Banner元素之一，只要學(xué)會創(chuàng)作小場景，利用場景元素，就能制作出自己原創(chuàng)的插畫Banner。下面這篇文章重點(diǎn)就通過創(chuàng)作一只小貓咪出發(fā)，用小貓咪作為素材設(shè)計(jì)一張插畫風(fēng)格的Banner。

靈感素材

對于無法原創(chuàng)插畫的小伙伴，還是需要參考照片來作為創(chuàng)作起點(diǎn)。我們今天用的照片是我從攝圖網(wǎng)上看到的，剛好被小貓咪可愛的動作所吸引。（很像招財(cái)貓的動作~）

從照片中提取草圖

STEP 01

提取草圖，也就是明確貓咪的身體結(jié)構(gòu)，造型可寫實(shí)可抽象，但是寫實(shí)永遠(yuǎn)是個(gè)起點(diǎn)。所以寫實(shí)的過程就可以在草圖中進(jìn)行。利用照片勾勒也好，還是根據(jù)照片參考自己畫出結(jié)構(gòu)也好。都是一個(gè)不錯的開始。

從上圖可以看出，貓咪的結(jié)構(gòu)輪廓線有了，這部分在我們的扁平插畫研習(xí)社課程中也和大家詳細(xì)講過，從骨骼開始抽取最基本的線條，這部分為接下描繪大形打下了堅(jiān)固的基礎(chǔ)，如果骨骼出了問題，輪廓線就很難糾正最初的結(jié)構(gòu)，導(dǎo)致形體出問題的也是這一最初環(huán)節(jié)。

外輪廓并不一定完全按照貓咪的外形來勾勒了，部分細(xì)節(jié)可以修改。

第一層！整體大輪廓

貓咪的大輪廓是造型的起點(diǎn)，先畫出一整個(gè)剪影形狀，為細(xì)節(jié)打下基礎(chǔ)。

STEP 02

打開AI，開始在AI中描形，文檔可設(shè)為1600*1600px，色彩模式可以設(shè)置為CMYK。有了草圖的輔助，就知道應(yīng)該安排什么形狀最好。但這時(shí)由于是偏抽象的風(fēng)格，因此貓咪的外形需要進(jìn)一步改造，簡化。

先為整個(gè)文檔鋪設(shè)背景形狀，運(yùn)用矩形工具繪制一個(gè)1600*1600px，作為背景，先設(shè)置背景的目的是建立起整個(gè)色彩氛圍，讓前景色跟隨背景色來設(shè)計(jì)。背景色為#F08654。

并利用鋼筆工具畫出貓咪的頭部，注意貓咪的臉可以寬一點(diǎn)、肥一點(diǎn)，這樣會看起來更可愛。

STEP 03

接下畫出身體的部分，貓咪的四只小貓爪可以夸大一點(diǎn)。將四只貓爪安放在合適的位置。這樣整個(gè)身體就拼裝好了。

注意每只貓爪都是用矩形的變體，這樣能讓貓咪看起來有種簡潔的抽象感，和寫實(shí)的貓咪能拉開風(fēng)格距離。

再鋪一層！給貓咪更多細(xì)節(jié)

第二個(gè)層次，應(yīng)該是貓咪更多細(xì)節(jié)：面部、毛色之類，讓貓咪看起來可辨認(rèn)。

STEP 04

先畫出可愛的貓臉五官：眼睛、鼻子、嘴、胡須……等。這部分創(chuàng)作時(shí)需要注意形狀之間的間隔和位置。五官的位置非常重要，稍不小心，就會讓面部看上去不自然。

貓咪的小腮紅可以用降低透明度的方法，疊成在其他色彩上方。

STEP 05

再增加貓咪的毛色，給純白的身體增加不一樣的色彩。依然從頭部開始，給兩只耳朵和額頭部分增加粉色的形狀，這里的形狀可以通過鋼筆工具來畫。

畫好的形狀如果超出了貓咪的大輪廓，就利用形狀生成器剪掉。

STEP 06

給貓咪一個(gè)裝飾上的細(xì)節(jié)，這個(gè)細(xì)節(jié)在照片里沒有，這些小創(chuàng)意都來源于生活。從生活尋找創(chuàng)意素材~不止于小鈴鐺，還有其他可以想到的寵物用品，都可以幫助美化貓咪。

小鈴鐺的色彩用了兩個(gè)互補(bǔ)色，讓這部分看起來更鮮明。藍(lán)色能起到平衡畫面整體冷暖調(diào)的作用。

STEP 07

讓小爪子也增加上細(xì)節(jié)，利用兩端為圓角的豎線條做出指縫，讓小爪子鮮活起來。色彩依然采用肉粉色。和毛色在整體上保持統(tǒng)一。

STEP 08

再利用比較小圓角矩形作為元素，重復(fù)該元素，就形成了裝飾圖案，裝點(diǎn)貓咪的身體，模擬類似貓咪的毛色質(zhì)感。這是在AI中利用簡單的小元素模擬質(zhì)感的常用技法。色彩仍然是為毛色的肉粉色。

STEP 10

最后給貓咪增加一條小尾巴，尾巴的畫法可以先利用線條做出弧形，再通過【擴(kuò)展外觀】，轉(zhuǎn)為形狀。

上光影！讓它更生動

光影是能夠加深立體感的，但是扁平化中的立體感和平時(shí)我們所理解的立體感還是有差別。有一次，我在微博上寫過說自己的想要給畫面增加立體感，有提議說可以做3D效果。我立刻知道對方誤解了我的意思。因?yàn)槲宜^的一種立體感是一種心理結(jié)構(gòu)，而不是真要對象看起來立體。

可能把這個(gè)立體感換成鮮活、生動更合適。因?yàn)楸馄交窃谠噲D抹平三維，而不是再現(xiàn)三維，所以增加立體效果，就要從形色上去入手。

STEP 11

畫陰影，還是要先確定光源點(diǎn)，如果光源從左上方打過來，那么陰影就會主要出現(xiàn)在貓咪身體的右側(cè)。當(dāng)然，并不是絕對的，比如貓咪的爪子擋住腹部的部分也會有大面積陰影的表現(xiàn)。

這部分除了寫實(shí)，更要遵循形式美的原則。我在光影的繪制是不會參考攝影圖的，這就需要把握好光影的基本法則。

STEP 12

小鈴鐺的光影部分也不要忘記，給小鈴鐺增加陰影和高光。

讓喵去戶外！植物畫起來

表現(xiàn)戶外的場景，最多用的元素大概就是植物了。

STEP 13

首先畫大片的葉子，我們可以菱形來轉(zhuǎn)為葉片造型，再利用左右兩邊色彩的明暗對比來表現(xiàn)最簡單純粹的光影關(guān)系。

STEP 14

植物的葉片位置關(guān)系，通過再復(fù)制葉片形狀并旋轉(zhuǎn)的方式，可以多放置一個(gè)大葉片在主體對象的后面做背景，讓畫面有“景”的觀感。

色彩因角度的不同產(chǎn)生非常微妙的變化~

STEP 15

最后增加串裝的葉片，這類植物能有一種零碎的感覺，會沖淡大片葉子的整塊感。

到這一步初步的形色就完成了。在背景下為貓咪和植物都增加一個(gè)簡化的投影。

玩顆粒筆刷，增加質(zhì)感

顆粒筆刷是我最喜歡的一種PS筆刷，默認(rèn)的筆刷里沒有，這是我自制的一款顆粒筆刷的方法：

http://www.ifeiwu.com/blog-detail/1523.html

增加顆粒感是一個(gè)可選項(xiàng)，如果有時(shí)間，可以多刷幾筆，讓AI中的平涂形狀色彩看起來更飽滿，也更多視覺趣味。這也是我最喜歡的part。

STEP 16

打開PS，新建一個(gè)2000*2000px的文檔，色彩模式cmyk，分辨率300ppi。首先還是把招財(cái)貓復(fù)制進(jìn)入PS，這里需要把背景色分開兩個(gè)圖層，方便我們通過剪切蒙板實(shí)現(xiàn)涂色效果。

這時(shí)開始運(yùn)用我們自制的顆粒感畫筆給貓咪臉部增加顆粒感細(xì)節(jié)，在貓咪的圖層上新建一個(gè)圖層，再創(chuàng)建剪切蒙板，畫筆就在新建的圖層上開始畫。

STEP 17

接下開始畫身體，有些地方可以學(xué)會運(yùn)用鋼筆工具來畫出部分區(qū)域，讓形狀看起來有更豐富的層次。

STEP 18

開始增加植物環(huán)境部分的顆粒，在植物邊緣部分增加少量顆粒即可。小的葉片可以多增加一點(diǎn)。

STEP 19

最后再利用調(diào)色工具調(diào)整一下整體的顏色。

一般來說質(zhì)感這部分是可選項(xiàng)，有時(shí)候你想要簡潔輕盈，就可以省略這個(gè)步驟。

效果對比：

Banner設(shè)計(jì)

STEP 20

將招財(cái)喵放在右方，給左方文字以空間，順便在左邊也增加同樣的植物元素，算是呼應(yīng)右邊的插畫。

最后，創(chuàng)作思路再捋一捋

從一張照片提取貓咪對象，從草圖開始再轉(zhuǎn)為插畫，給照片對象增加環(huán)境元素（植物等），然后放進(jìn)Banner設(shè)計(jì)里，并跟隨插畫繼續(xù)潤色Banner~

生活就是最好的創(chuàng)作來源，當(dāng)你感覺原創(chuàng)乏力時(shí)，跟著這篇文章來，快給你家家貓也來一張可愛的小插畫吧，把它用在你的下一次的設(shè)計(jì)里。

原文：ifeiwu