創(chuàng)作：Maxim Shkret
]]>
創(chuàng)作：Ekaterina Savic
Benoit Drigny是來(lái)自法國(guó)的自由插畫(huà)師和平面設(shè)計(jì)師。他擅長(zhǎng)用繽紛的色彩和簡(jiǎn)單的幾何圖形創(chuàng)造出可愛(ài)而抽象的插圖作品。
智利視覺(jué)藝術(shù)家Christian Orrillo使用強(qiáng)大的調(diào)色板創(chuàng)作了華麗的超現(xiàn)實(shí)主義藝術(shù)品。
Sibel Acikalin Akgun，土耳其插畫(huà)師。她的作品線條流暢，運(yùn)用線面結(jié)合的方式，使畫(huà)面豐富有層次，人物造型獨(dú)特，故事表現(xiàn)能力強(qiáng)。
您可以在Illustrator中使用等距網(wǎng)格創(chuàng)建等距圖形(如下圖所示)。這將幫助您根據(jù)網(wǎng)格創(chuàng)建等距形狀。
這是今天要繪制的人物插畫(huà)(如下圖所示)。
1. 創(chuàng)建人物的頭部
步驟1
選擇橢圓工具 (L) 并創(chuàng)建一個(gè)圓。按住鍵盤上的 Shift 鍵, 同時(shí)用鼠標(biāo)單擊和拖動(dòng), 以創(chuàng)建一個(gè)完美的正圓。對(duì)于膚色, 我們將使用下面的設(shè)置, 但您可以自由地為您的項(xiàng)目選擇自己喜歡的顏色。R:194 G:119 B:112
步驟2
選擇直接選擇工具 (A) 并選擇圓。這樣你就能看見(jiàn)形狀的定位點(diǎn), 并且您能夠使用該工具對(duì)其進(jìn)行調(diào)整。
步驟3
使用直接選擇工具 (A) 選擇底部錨點(diǎn), 并將其移動(dòng)到一側(cè), 以創(chuàng)建角色的下巴。
步驟4
使用橢圓工具創(chuàng)建另一個(gè)完美的圓, 這次為你的角色的頭發(fā)選擇一種顏色。R: 45 G: 42 B: 69
步驟5
要?jiǎng)?chuàng)建耳朵, 請(qǐng)使用圓角矩形工具。使用與頭部相同的膚色繪制一個(gè)小膠囊形狀, 并將其移動(dòng)到位。
步驟6
使用圓角矩形工具創(chuàng)建一個(gè)更大的膠囊。使用與頭發(fā)相同的顏色, 并以一定角度稍微旋轉(zhuǎn)頭發(fā)。
步驟7
使用選擇工具 (V) 將形狀放在頭部前面。
步驟8
復(fù)制膠囊形狀, 方法是復(fù)制它 (Ctrl-C) 并粘貼它 (Ctrl-V)。將新膠囊放在頭部上方, 讓人物的額頭有一些額外的頭發(fā)體積面。
步驟9
右鍵單擊耳朵的矢量形狀, 然后選擇 “排列” > “置于頂層”。
步驟10
這樣就能讓耳朵露出來(lái)啦
步驟11
創(chuàng)建兩個(gè)很小的膠囊, 并使用選擇工具 (V) 旋轉(zhuǎn)它們, 并將它們移動(dòng)到位
步驟12
創(chuàng)建一個(gè)膠囊來(lái)作為頸部, 并將其移動(dòng)到頭部下方。對(duì)皮膚使用稍微深一點(diǎn)的顏色。R: 165 G: 89 B: 89
步驟13
為背景創(chuàng)建新圖層。
步驟14
在新圖層上, 使用矩形工具創(chuàng)建新背景并選擇合適的顏色:R: 186 G: 227 B: 254
2.創(chuàng)建人物的身體
步驟1
使用矩形工具, 并大致繪制出一個(gè)很長(zhǎng)的白色矩形。使用直接選擇工具 (A) 將頂部的兩個(gè)錨點(diǎn)相互移動(dòng), 以創(chuàng)建一個(gè)梯形。確保所有四個(gè)實(shí)時(shí)圓角小部件都可見(jiàn) (如果沒(méi)有, 你可以換AIcc以上版本或者在效果里面使用圓角效果)。選擇小部件并將所有四個(gè)角拖動(dòng)到中心以使四個(gè)角是圓的。
步驟2
確保已選擇身體（長(zhǎng)白圓角矩形），轉(zhuǎn)到 “效果” > 3D > “旋轉(zhuǎn)”。
步驟3
在彈出框中, 請(qǐng)確保選擇以下內(nèi)容:
位置: 等角-右方
表面: 無(wú)底紋
步驟4
這將使身體出現(xiàn)等距形狀。請(qǐng)注意, 您仍然是可以編輯形狀, 因?yàn)樗?D的, 這將會(huì)實(shí)時(shí)調(diào)整。（所以你的電腦配置得高點(diǎn)，不然東西做多了會(huì)卡）
步驟5
確保已選擇主體。轉(zhuǎn)到效果 > 3D > 凸出與斜角。
步驟6
在彈出框中, 請(qǐng)確保選擇以下內(nèi)容:
位置: 離軸-前方
凹凸厚度:50
斜面: 圓角
高度: 4
表面: 無(wú)底紋
步驟7
這將創(chuàng)建一個(gè)等距3D對(duì)象, 我們可以將其用于人物的主體。
步驟8
使用選擇工具 (V) 將頭部移動(dòng)到身體頂部的位置。
3.創(chuàng)建人物的腿
步驟1
使用圓角矩形工具創(chuàng)建人物的臀部。選擇要用于腿部的新顏色:R: 100 G: 118 B: 202
步驟2
確保已選擇臀部。轉(zhuǎn)到 “效果” > 3D > “旋轉(zhuǎn)”。在彈出框中, 請(qǐng)確保選擇以下內(nèi)容:
位置: 等角-右方
表面: 無(wú)底紋
步驟3
確保髖關(guān)節(jié)仍處于選中狀態(tài)。轉(zhuǎn)到效果 > 3D > 拉伸和斜面。在彈出框中, 請(qǐng)確保選擇以下內(nèi)容:
位置: 離軸-前方
凹凸厚度:50
斜面: 圓角
高度: 4
表面: 無(wú)底紋
步驟4
將形狀放置在身體下方和后面。您可以通過(guò)右鍵單擊形狀并選擇 “排列-置于底層” 來(lái)執(zhí)行此操作。
步驟5
選擇鋼筆工具 (P) 并把粗細(xì)設(shè)置為21pt。
步驟6
使用鋼筆工具 (P) 通過(guò)按住鍵盤上的 Shift 鍵繪制一條直線。復(fù)制或繪制兩條腿, 并將它們放在臀部下方。
4.創(chuàng)建人物的手臂
步驟1
使用圓角矩形工具創(chuàng)建一個(gè)白色膠囊來(lái)作為襯衫的袖子。使用選擇工具 (V) 以輕微角度旋轉(zhuǎn)。
步驟2
將膠囊放在角色的肩膀上。
步驟3
復(fù)制形狀并將其放到左邊的肩膀位置。接下來(lái), 您需要翻轉(zhuǎn)形狀 (右鍵單擊 > 變換 > 對(duì)稱 > 垂直), 然后將其縮短并放置在肩膀上。
步驟4
選擇鋼筆工具 (P) 并調(diào)整描邊設(shè)置, 使顏色與角色的膚色相匹配:
粗細(xì):11 pt
端點(diǎn): 圓角
步驟5
使用鋼筆工具 (P) 繪制一個(gè)稍微彎曲的手臂, 并將其放置在白色膠囊下方。
步驟6
復(fù)制手臂復(fù)制 (Ctrl-C) 并粘貼它 (Ctrl-V)。
步驟7
右鍵單擊手臂并選擇 “變換” >”對(duì)稱”> “垂直”。
步驟8
使用選擇工具 (V) 將手臂放到背部, 并將其放置在第二個(gè)白色膠囊下方。
步驟9
使用選擇工具 (V) 移動(dòng)形狀, 并對(duì)等距的人物各部分進(jìn)行最終的微調(diào)整。（細(xì)心的朋友應(yīng)該早發(fā)現(xiàn)脖子的地方有個(gè)橢圓的小細(xì)節(jié)了把，如果你看教程到這里還沒(méi)有發(fā)現(xiàn)我就只能emmmm）
5.創(chuàng)建人物的裙子
步驟1
現(xiàn)在我們已經(jīng)創(chuàng)建了第一個(gè)人物, 現(xiàn)在可以進(jìn)行一些輕微的調(diào)整來(lái)創(chuàng)建第二個(gè)人物。使用選擇工具 (V) 選擇整個(gè)人物并對(duì)其進(jìn)行復(fù)制。在第二個(gè)人物上, 使用直接選擇工具 (A) 刪除頭發(fā)。
步驟2
選擇兩條腿并更改筆畫(huà)屬性, 以使顏色與人物的膚色相匹配。稍微減輕腿部的粗細(xì):
粗細(xì):15 pt
圓角: 圓角
步驟3
要?jiǎng)?chuàng)建裙子, 請(qǐng)選擇構(gòu)成人物臀部的等距形狀。然后使用選擇工具 (V) 并向下拉形狀以達(dá)到調(diào)整長(zhǎng)度的作用。
步驟4
使用直接選擇工具 (A) 調(diào)整實(shí)時(shí)圓角的小部件, 使邊角再次變得銳利。這將使你更容易調(diào)整裙子的形狀, 通過(guò)互相的移動(dòng)底部錨點(diǎn)。一旦你對(duì)裙子的一般形狀感到滿意, 你可以再次使用直接選擇工具 (A) 來(lái)使用實(shí)時(shí)圓角小工具來(lái)再次進(jìn)行圓角。
6. 創(chuàng)建女人的頭發(fā)
步驟1
要?jiǎng)?chuàng)建第二個(gè)人物的頭發(fā), 請(qǐng)使用橢圓工具 (L) 并創(chuàng)建一個(gè)完美的圓。使用選擇工具 (V) 將其放置在正確的位置, 并將其放到頭部的后面 (右鍵單擊 > “排列” 置于底層 “)。接下來(lái), 創(chuàng)建一個(gè)較小的圓, 并將其放置在耳朵后面。
步驟2
創(chuàng)建另一個(gè)圓, 并將其放置在角色的前額前面。使用直接選擇工具 (V) 來(lái)降低圓的高度。
7. 創(chuàng)建女人的胸部
步驟1
使用橢圓工具 (L) 創(chuàng)建一個(gè)小的白色圓形形狀, 并將其放置在人物的胸部區(qū)域的頂部。
步驟2
復(fù)制形狀, 并將其放置在胸部的另一側(cè)。
步驟3
將這兩個(gè)形狀組合在一起 (Ctrl-G), 并復(fù)制他得到一個(gè)新的組。如何按住ctrl-shift-v，這將在上一個(gè)組的頂部粘貼復(fù)制的新組。我們將把這個(gè)新的小組稱為 “影子小組”。然后選擇一個(gè)稍暗的顏色填充他。
步驟4
將陰影組移動(dòng)到兩個(gè)白色圓形形狀的后面, 并使用鍵盤上的箭頭鍵以增量方式向下移動(dòng), 以便出現(xiàn)一個(gè)小的、有厚度的陰影。
步驟5
通過(guò)用形狀覆蓋來(lái)刪除任何多余的陰影區(qū)域(這可以用鋼筆工具完成)。選擇陰影形狀和新形狀 (以紅色顯示), 然后使用 “減去頂層” 模式刪除多余的陰影。
步驟6
將陰影放置在白色橢圓下方。
恭喜你，完成了今天的教程！
原文地址：tutsplus
譯文地址：UI中國(guó)
作者：Jonathan Lam
譯者：米夏小雨
]]>
創(chuàng)作：Karina Yashagina
]]>
在今天的文章中，主要分享扁平化插畫(huà)的形色平衡的訓(xùn)練為重點(diǎn)，演示創(chuàng)作夸張風(fēng)格人物的過(guò)程。
效果圖：
使用工具：
Adboe illustrator (2019)
一、草圖：生成作品也許只需要30秒
我一再?gòu)?qiáng)調(diào)過(guò)草圖的重要性，草圖不需要畫(huà)得多好，它是一個(gè)想法的探索過(guò)程。在我們今天繪制的人物，我希望給人物一個(gè)看起來(lái)比較像是在舞蹈的動(dòng)作，這樣的畫(huà)面會(huì)看起來(lái)更有活力。
這是我的草圖，看上去很凌亂，不過(guò)大家可以看到我在這里的思考脈絡(luò)。畫(huà)這個(gè)草圖用不到十五秒，但是它瞬間捕捉到了我腦海中想要人物呈現(xiàn)的樣子，以及可能想要給人物增加了一些場(chǎng)景元素。
我也在扁平插畫(huà)研習(xí)社當(dāng)中和大家提到過(guò)，每天不一定能有時(shí)間完成一幅練習(xí)作品，但是一定可以拿1分鐘時(shí)間來(lái)完成一幅完全原創(chuàng)、天馬行空的涂鴉。
二、線 Or 非線
人物形態(tài)確定以后，接下就需要進(jìn)一步了解到：你需要運(yùn)用哪種更為細(xì)化的筆觸來(lái)表現(xiàn)插畫(huà)？
扁平插畫(huà)最基本的劃分，其中一個(gè)是線性或者是非線性。所謂線性就是要利用線條來(lái)對(duì)輪廓線或者邊線進(jìn)行處理，而非線性只是采用形狀。它們之間的區(qū)別除了線條的存在與否以外，線性更需要加強(qiáng)線條本身的表現(xiàn)力，所以對(duì)線條的形態(tài)本身也需要格外關(guān)注。
STEP 01
首先打開(kāi)AI，新建文檔，文檔大小可以設(shè)置為1200*1200，分辨率72，色彩模式RGB。
先從線條開(kāi)始起步，設(shè)定好線條的大小為3px，繪制出一個(gè)圓角矩形。圓角矩形的角度圓弧可以放到最大，呈現(xiàn)一個(gè)膠囊形。這也是人物的頭部的繪制。
描邊的形態(tài)也要注意一下統(tǒng)一規(guī)格，詳見(jiàn)下圖：
三、繪制身體的大形
上一部繪制好了頭部，接下就可以開(kāi)始繪制頸部以及身體的其他部分，這時(shí)候可以不用繪制細(xì)節(jié)的部分。重點(diǎn)是要抓住身體的比例以及大型的輪廓。
雖說(shuō)我們繪制的是夸張比例的人物，但是比例仍然是我們繪制的關(guān)注點(diǎn)。
STEP 02
脖子的處理方式很像畫(huà)一條管子。這里我們采用鋼筆工具繪制直線條的方法，然后再將直角變圓角。這是扁平插畫(huà)中常用的繪制弧形的方式，除非你能很精準(zhǔn)的控制鋼筆工具的貝塞爾曲線。
STEP 03
接下處理的身體的部分，首先要畫(huà)的是領(lǐng)口和肩臂的部分，這兩部分其實(shí)無(wú)法分割，而是作為一個(gè)整體來(lái)繪制的。
這時(shí)我們還要確定的是領(lǐng)口的樣式，領(lǐng)口究竟有什么樣式?jīng)Q定了衣服的樣式，一般我們常見(jiàn)的領(lǐng)口樣式就是一個(gè)圓領(lǐng)和一個(gè)V領(lǐng)，所以在這里，我們選擇用圓領(lǐng)。
要畫(huà)圓領(lǐng)很簡(jiǎn)單的方法是用鋼筆工具，但是初學(xué)者不一定能把這個(gè)圓弧畫(huà)得很精準(zhǔn)，這時(shí)我們可以借助圓角矩形本身來(lái)畫(huà)。然后利用形狀生成器工具（在左側(cè)工具欄中找到），在按住鍵盤ALT鍵的同時(shí)，對(duì)路徑進(jìn)行刪減。
STEP 04
接下繪制肩部和身體，注意跟隨草圖的思路，同時(shí)需要注意線條的表現(xiàn)，弧線要處理到平滑均勻。從下圖的右側(cè)可以看出，扁平插畫(huà)中我們是如何運(yùn)用幾何塊狀來(lái)構(gòu)型的。
STEP 05
接下完成另一只手臂，但暫時(shí)不繪制手的部分。另外一只手臂也是需要表現(xiàn)出幾何形的感覺(jué)。
STEP 06
最后完成腿部的繪制，手和腳的部分留起來(lái)單獨(dú)畫(huà)，這是為了讓我們的身體大形全部建立起來(lái)，從而獲得人物動(dòng)作的全貌，以便我們從大體上進(jìn)行調(diào)整。
提示：
如果我們?cè)诓輬D階段畫(huà)好了人物，也許覺(jué)得很滿意的作品，放到軟件里畫(huà)出來(lái)未必就是同樣的感覺(jué)，這時(shí)就需要繼續(xù)調(diào)整。
四、手腳細(xì)節(jié)
整個(gè)人物的身體都是用大的形狀所組成的，相對(duì)欠缺細(xì)節(jié)。那么手部和腳部（鞋子）就需要比較細(xì)節(jié)的刻畫(huà)，這樣就能讓細(xì)節(jié)也富有感染力。
STEP 07
繪制手部的時(shí)候，注意手指的線條要分布均勻，關(guān)系適當(dāng)，手指的長(zhǎng)短要表現(xiàn)出錯(cuò)落有致。
STEP 08
腳部的細(xì)節(jié)主要就是要描繪出腳踝，以及鞋子的部分。鞋子的樣式可以自由發(fā)揮，照顧到整體的審美感即可。
注意右邊的鞋子，由于腳后跟的位置略往上抬起，因此鞋子的外觀和左邊就略有差別。
五、增加細(xì)節(jié)化處理
大形繪制完，整個(gè)人物就完成了，接下繼續(xù)增加線條，從細(xì)節(jié)上繼續(xù)豐富人物的表現(xiàn)力。
STEP 09
從頭部的細(xì)節(jié)開(kāi)始增加，為人物增加眼睛和頭巾。頭巾的部分可以稍作夸張。
STEP 10
對(duì)人物的服飾增加裝飾性的線條細(xì)節(jié)。
STEP 11
繼續(xù)增加鞋子部分的細(xì)節(jié)，這里的線條可以稍作更為復(fù)雜的刻畫(huà)。
STEP 12
這里接下我們將直線替換為波浪線，比如人物的右邊的褲腿，就可以采用這類方式來(lái)增加人物的律動(dòng)感。
首先繪制出一條直線，這條直線不要太短，接下在選中直線的基礎(chǔ)上，進(jìn)入到【效果>扭曲和變換>波紋效果】，進(jìn)入波紋效果的設(shè)置面板，然后根據(jù)下圖中的參數(shù)進(jìn)行設(shè)置。這時(shí)直線變?yōu)榱瞬ɡ饲€。
STEP 13
刪掉人物右邊的褲腿那條直線，然后將做好的曲線進(jìn)行擴(kuò)展外觀，擴(kuò)展外觀后，這條波浪曲線就變?yōu)榱饲€的路徑，然后將這條路徑放置在合適的位置上，注意首尾和原有圖形的對(duì)接。
六、裝飾線的細(xì)節(jié)
所謂裝飾，就是看似和人物不相干，但又能幫助烘托氛圍，增加豐富感的線條、圓圈等圖案。這些圖案的排布應(yīng)該是靈活的，但又不失視覺(jué)的韻律感。
每個(gè)小裝飾的畫(huà)法都非常簡(jiǎn)單，裝飾就像一種調(diào)味料，因此要把握好整體的比例。
STEP 14
增加線條作為主裝飾，它們的方向最好保持一致，和人物的腿部線條有方向上的共鳴。
STEP 15
繼續(xù)豐富裝飾的細(xì)節(jié)，增加幾何形、虛線、圓點(diǎn)、斜線……等等。這無(wú)疑就是多種調(diào)味來(lái)增加視覺(jué)的豐富和動(dòng)態(tài)。
然后線條的部分我們就完成了。
接下我的習(xí)慣做法是，先把所有的圖形全部建立一個(gè)組，然后復(fù)制一個(gè)，當(dāng)作備份。對(duì)新的復(fù)制出的線條進(jìn)行擴(kuò)展外觀。由于有了備份，即使最后發(fā)現(xiàn)線條有什么不對(duì)，也能重新把原始的線條調(diào)出來(lái)進(jìn)行修改。因?yàn)樵贏I中如果已經(jīng)擴(kuò)展了外觀的線條就已經(jīng)不再好繼續(xù)改動(dòng)了。
七、填色
填色前先將所有的線條進(jìn)行擴(kuò)展，擴(kuò)展后再將所有的線條（現(xiàn)在已經(jīng)是黑色的形狀了）進(jìn)行合并。
STEP 16
利用形狀生成器工具，選中剛剛我們擴(kuò)展后的所有的黑色線條，然后通過(guò)鼠標(biāo)單擊的方式來(lái)生成內(nèi)部的形狀，從而可以對(duì)內(nèi)部形狀進(jìn)行填色處理。
這時(shí)我們選用藍(lán)色作為主色來(lái)填充人物衣服的部分。
STEP 17
然后再填充人物的皮膚的顏色。
STEP 18
運(yùn)用一個(gè)飽和度更高的藍(lán)色，和之前所運(yùn)用的藍(lán)色相比，它運(yùn)用的面積比較小，讓這塊顏色具有視覺(jué)的凝聚力。
STEP 19
最后把主色調(diào)的藍(lán)色分別運(yùn)用在其他的形狀上。然后再把人物的褲子的形狀填充黑色。
黑色和藍(lán)色的運(yùn)用，會(huì)讓色彩整體有種力量感。而黑色褲子的部分就和其他地方用線包圍的感覺(jué)形成了對(duì)比，視覺(jué)上會(huì)具有更多層次。
STEP 20
將裝飾形狀的色彩也進(jìn)行部分填充，色彩可以運(yùn)用藍(lán)綠來(lái)補(bǔ)充畫(huà)面中色彩的單調(diào)。然后選用接近白色的藍(lán)色（不一定非要是純白）來(lái)給目前仍然處于空白狀態(tài)的形狀以白色。這樣整個(gè)畫(huà)面的填色就完成了。
STEP 21
主色為藍(lán)色，這就讓畫(huà)面看起來(lái)比較冷，那么為了中和這種冷調(diào)，那就需要增加一個(gè)暖色。這里我們?yōu)槿宋镌黾右粋€(gè)背景裝飾數(shù)字01，讓這個(gè)數(shù)字的色彩表現(xiàn)為黃色。
STEP 22
最后一步，為了讓畫(huà)面看起來(lái)更靈動(dòng)，我們給人物的衣服增加白色英文字母。
最終效果如下：
八、插畫(huà)應(yīng)用
最終應(yīng)用在UI設(shè)計(jì)的界面中的效果：
九、后記：扁平（FLAT）的魅力
FLAT不是樸素，只是學(xué)會(huì)克制的表達(dá)。比起純快樂(lè)式的張揚(yáng)藝術(shù)相比，扁平看起來(lái)比較冷靜，這也賦予了它在商業(yè)應(yīng)用上的實(shí)用性。
在學(xué)習(xí)扁平插畫(huà)的時(shí)候，學(xué)會(huì)脫離原有物體的形態(tài)，練習(xí)夸張的人物是最有效的方式。由于重點(diǎn)從人物形態(tài)轉(zhuǎn)移到了形色的造型組合，因此，直達(dá)視覺(jué)傳達(dá)的本質(zhì)。
來(lái)源：ifeiwu
]]>
