AI教程！教你繪制扁平化風(fēng)格的卡通人物肖像（建筑工人篇）

@魚(yú)過(guò)無(wú)聲design ：今天的教程，一起來(lái)學(xué)人物肖像的繪制方法，學(xué)會(huì)了可以用作頭像或者設(shè)計(jì)素材（描繪不同的職業(yè)類(lèi)型），也可以直接給自己畫(huà)一個(gè)，實(shí)用不難，走起練一發(fā)！

現(xiàn)在開(kāi)始我們的教程吧。

第一步：

我們將開(kāi)始我們第一個(gè)任務(wù)的頭像，我們使用矩形工具（括號(hào)內(nèi)為快捷鍵，下同。矩形快捷鍵為M）制作一個(gè)65*80像素的淺粉色矩形，保持矩形選中狀態(tài)。去對(duì)象>路徑 >添加錨點(diǎn)。你將會(huì)注意到每一個(gè)矩形的邊上出現(xiàn)了新的錨點(diǎn)。

第二步

繼續(xù)使用對(duì)象>路徑 >添加錨點(diǎn)。為矩形的每個(gè)邊增加兩個(gè)點(diǎn)。 我們不需要用上面的錨點(diǎn)，所以我們刪除它們。

用直接選擇工具（A）選中需要?jiǎng)h除的左邊和右邊倒數(shù)第三個(gè)點(diǎn)（左右各一個(gè)）然后在頂部的控制面板里，點(diǎn)擊刪除。

現(xiàn)在讓我們創(chuàng)建臉部輪廓。選中矩形下面一條邊上的兩個(gè)末端錨點(diǎn)。敲擊鍵盤(pán)上回車(chē)按鈕，打開(kāi)移動(dòng)窗口。水平值設(shè)為0像素，垂直值設(shè)為－25像素（所中的錨點(diǎn)上移25像素）距離值25px（移動(dòng)錨點(diǎn)25像素）。形成下巴，點(diǎn)擊確定。

第三步：

如果你想要使下巴更寬或者更窄，選擇一個(gè)錨點(diǎn)然后敲回車(chē)，打開(kāi)移動(dòng)窗口，使選中的點(diǎn)向左，向右移動(dòng)。例如：將右邊的點(diǎn)移動(dòng)到左邊，選中右邊的點(diǎn)，然后把水平值設(shè)為－5像素。同理把左邊的點(diǎn)移動(dòng)到右邊，選中左邊的點(diǎn)水平值設(shè)為5像素。這種方式我們可以將這兩個(gè)點(diǎn)移動(dòng)的更近。

使用實(shí)時(shí)轉(zhuǎn)角功能，使臉部更佳平滑。使用直接（A）選擇工具，選中實(shí)時(shí)轉(zhuǎn)角，然后拖拽任何一個(gè)圓角標(biāo)記（就是你選中一個(gè)有角度的錨點(diǎn)，都會(huì)出現(xiàn)一個(gè)中間實(shí)心，外面有個(gè)圓圈的點(diǎn)，選中那個(gè)點(diǎn)，讓它更靠近中心。（這個(gè)功能是老版本AI里沒(méi)有的）

如果你使用的是舊版本的Adobe Illustrator，可以使用效果> 樣式>風(fēng)格化>圓角實(shí)現(xiàn)同樣功能。唯一的區(qū)別是不能選擇一個(gè)角來(lái)發(fā)生變化。他會(huì)使所有角發(fā)生變化。你可以使用橡皮擦（SHIFT+E）完成。

第四步

讓我們開(kāi)始添加鼻子。

使用矩形工具（M）制作一個(gè)9*20像素的粉色小矩形來(lái)作為他的鼻子，然后使它變成圓角。（和上一步制作臉型一樣道理）。或者直接使用圓角矩形工具創(chuàng)建整個(gè)形狀。

確保鼻子和臉保持居中對(duì)齊，用選擇工具（V）選中鼻子和臉，按住ALT并且點(diǎn)擊臉，你將會(huì)看到臉部周邊的選擇框。這意味著臉現(xiàn)在是關(guān)鍵對(duì)象。（所有其他的物體都會(huì)與他進(jìn)行對(duì)齊）現(xiàn)在在頂部屬性面板里找到對(duì)齊里的水平居中對(duì)齊。非常棒！，鼻子就正好在臉部的中間啦。

第五步

讓我們添加一個(gè)胡子。制作一個(gè)30＊10 px大小的棕色形狀。選中，鼠標(biāo)單擊，右鍵，排列>后移一層（Control-[）。把他放置在鼻子的下方。

第六步

選中棕色胡子上方左邊一個(gè)錨點(diǎn)，敲擊回車(chē)，設(shè)置水平值為 10px，垂直值：0 px。為了讓這個(gè)點(diǎn)更靠近鼻子，在胡子的另一邊錨點(diǎn)上重復(fù)相同的動(dòng)作。這次設(shè)置水平數(shù)值為：－10px。最后用實(shí)時(shí)轉(zhuǎn)角功能讓胡子下面部分有一個(gè)溫柔的圓角 。（看下圖你會(huì)很容易懂的）

第七步

使用圓角矩形功能來(lái)制作一個(gè)小的形狀來(lái)作為下面的嘴唇。放置在胡子的下方（Control＋[）。用水平居中對(duì)齊面板來(lái)和臉進(jìn)行對(duì)齊。

第8步

使用橢圓工具（L）來(lái)制作一個(gè)8＊8 px的白色眼球，然后放置一個(gè)更小的（6*6 px）棕色的圓作為虹膜。

添加一個(gè)細(xì)小的白色圓圈作為高光，移動(dòng)兩個(gè)眼睛到合適的位置。

第9步

我們來(lái)制作一個(gè)可以保護(hù)工人頭部的頭盔吧。在頭的頂部繪制出一個(gè)65*19 px的橘色的矩形，用直接選擇工具選擇上面的錨點(diǎn)（A）向下拖拽實(shí)時(shí)圓角，讓帽子變圓。

第10步

讓我們添加頭發(fā)吧。用矩形工具（M）在臉的左邊制作一個(gè)垂直窄條，作為鬢角。用直接選擇工具（A），選擇右邊的錨點(diǎn)，讓這個(gè)角變的圓滑。

保持左邊鬢角選中，雙擊鏡像工具（O）在垂直軸方向翻轉(zhuǎn)，拷貝這個(gè)鬢角，然后在臉的右側(cè)粘貼。

第11步

讓我們修改頭盔的底部，增加一個(gè)帽舌。找到鬢角穿過(guò)頭盔底部的點(diǎn)。然后使用鋼筆工具（P）來(lái)制作一個(gè)新的錨點(diǎn)。在右邊做相同的動(dòng)作。你可以打開(kāi)智能參考線，視圖>智能參考線（可以標(biāo)記交叉點(diǎn)）

最后用直接選擇工具（A）選擇這個(gè)新創(chuàng)建的點(diǎn)，敲擊回車(chē)鍵，打開(kāi)移動(dòng)窗口。設(shè)置水平移動(dòng)值為0 px，垂直移動(dòng)值為－5 px，最后使這倆個(gè)錨點(diǎn)移動(dòng)起來(lái)（像下圖這樣）。

第12步

現(xiàn)在讓我們添加一個(gè)帽沿吧。制作一個(gè)淺橘色的矩形，使他的上面和頭盔相銜接。這里用智能參考線很方便，視圖>智能參考線。

選中底部左邊錨點(diǎn)，使用移動(dòng)工具，通過(guò)設(shè)置水平移動(dòng)數(shù)值：10 px，垂直數(shù)值為0 px來(lái)使他向右邊移動(dòng)。

在對(duì)應(yīng)的另一邊錨點(diǎn)上重復(fù)相同的動(dòng)作，但是這次是向左移動(dòng)。最后拖拽底部錨點(diǎn)一點(diǎn)，如果你想要使這個(gè)帽沿更寬的話。使用實(shí)時(shí)轉(zhuǎn)角功能使這個(gè)底部轉(zhuǎn)角更加圓潤(rùn)。

第13步

使用圓角矩形工具，在頭盔的頂部制作一個(gè)7*30 px窄的豎條。用對(duì)齊到關(guān)鍵對(duì)象的功能對(duì)齊到頭盔上面。

在第一個(gè)豎條的兩邊各增加一個(gè)豎條。然后使用對(duì)齊面板，使這些豎條的間距相同。

選中這些豎條，然后在對(duì)齊面板里點(diǎn)擊對(duì)齊到所選對(duì)象，點(diǎn)擊水平居中對(duì)齊。然后就完成啦。

第14步

使用圓角矩形工具，這一次讓我們制作耳朵。在頭部的左側(cè)制作一個(gè)11*23 px的粉色矩形。然后把他放置到最后（Shift+Control+[）。按住Alt+Shift 把這個(gè)耳朵拷貝一個(gè)，拖拽到另一邊。

第15步

制作一個(gè)35*40 px 的矩形作為脖子。用一個(gè)淺灰的皮膚色填充這個(gè)矩形，顏色一定要與臉部的皮膚色做區(qū)分。讓脖子底部有一點(diǎn)圓角。

然后讓我們繼續(xù)設(shè)計(jì)工人師傅的衣服。制作一個(gè)90*70 px的深藍(lán)色矩形作為T(mén)恤衫。在脖子和T恤衫交叉的地方做兩個(gè)額外的錨點(diǎn)。按住Shift加選另一邊錨點(diǎn)，多按幾下鍵盤(pán)上向下箭頭，形成肩膀。

第16步

讓我們繼續(xù)制作工人的衣服。在肩膀上擺放兩個(gè)淺橘色的窄條，編輯成組（Control+G），用T恤衫作為關(guān)鍵對(duì)象對(duì)齊。在胸部也添加一個(gè)矩形。然后在路徑查找器里拼合所有橘色部分。把它們合并為一個(gè)圖像。

然后點(diǎn)擊對(duì)象>路徑>添加錨點(diǎn)，選中工作服的脖子中間區(qū)域的新的錨點(diǎn)，向下拖拽，形成一個(gè)V字的形狀。

第17步

用實(shí)時(shí)轉(zhuǎn)角功能，讓工作服的轉(zhuǎn)角有一個(gè)輕微的圓角幅度。現(xiàn)在我們要去除T恤衫外面的部分，使得T恤衫和工作服的形狀相符。

選中這兩個(gè)圖形，使用路徑生成工具（Shift+M）。按住Alt，刪除T恤衫外面的部分。最后在工人肩膀上增加用于描繪反光帶的兩個(gè)窄一點(diǎn)的淺色條。

第18步

讓我們來(lái)制作一個(gè)扁平化的按鈕。

用（Control+A） 選中所有圖形要素，拷貝并且復(fù)制（Control+C>Control+F），在路徑查找器里點(diǎn)擊合并按鈕，形成一個(gè)單獨(dú)的剪影。

第19步

選擇直線工具（\），在輪廓上畫(huà)一個(gè)垂直的直線。選擇直線和輪廓線，使用輪廓作為關(guān)鍵對(duì)象，將其在水平居中對(duì)齊。

保持這兩個(gè)為選中狀態(tài)，在路徑查找器中點(diǎn)擊分離功能，使剪影分離成兩個(gè)部分。

第20步

刪除左半部分，并將剩下的一半在透明度面板里調(diào)整混合模式以及透明度。你可以在顏色模版里調(diào)整顏色投影使他更輕或者更重，或者在透明度模版里改變它們的透明度。

第21步

啊，好像我們竟然忘了眉毛。讓我們回到臉部，在眼睛的周?chē)?huà)一個(gè)圓圈，并且在顏色模版里設(shè)置成深棕色。用剪刀工具（C）點(diǎn)擊下面的錨點(diǎn)，使這個(gè)點(diǎn)從圓分離，刪除底部部分。

點(diǎn)擊屬性面板中的描邊，通過(guò)設(shè)置數(shù)值為2pt來(lái)增加眉毛的厚度。設(shè)置端點(diǎn)和邊角，使其形狀變?yōu)閳A形。

第22步

保持眉毛選中，使用橡皮擦工具（Shift+E）。按住Alt鍵并拖動(dòng)，刪除眉毛的兩端，讓它短一點(diǎn)。

第23步

選中下面藍(lán)色T恤的邊上的兩個(gè)錨點(diǎn)，用實(shí)時(shí)轉(zhuǎn)角功能，讓肩膀更佳平滑一點(diǎn)。

第24步

我們第一個(gè)卡通頭像的主要部分已經(jīng)完成了。現(xiàn)在我們要做的事通過(guò)給他一個(gè)背景，讓他有一個(gè)完整的展示。用橢圓工具（L）創(chuàng)建 180px*180px的圓形，填充綠色。拷貝一個(gè)，并放到最前面。（Shift+Control+]）

最后選中所有的圖形。點(diǎn)擊鼠標(biāo)右鍵做一個(gè)蒙板，搞定一個(gè)卡通頭像了！

你仍然可以雙擊圖像進(jìn)入隔離模式，來(lái)編輯他。

第25步

最后一步就比較長(zhǎng)了，制作扁平化的投影。利用矩形選擇工具（M）制作一個(gè)大的長(zhǎng)方形。切換到混合模式編輯，降低透明度，然后按住Shift旋轉(zhuǎn)45度。

現(xiàn)在你需要使矩形適合我們工人的輪廓。用鋼筆工具增加額外的錨點(diǎn)，然后使用直接選擇工具移動(dòng)它們，把不需要的部分隱藏在人物的下面。

把投影放在剪切蒙板的下面，隱藏在工人的形象下面（在投影下面使用圖層面板）。

最后利用投影做一個(gè)線性漸變，從深綠到白色透明，對(duì)角線放置。通過(guò)漸變工具（G）改變投影的混合模式，使其與背景混合。

最終效果：

歡迎加譯者微信：ygw_tafa，與他交流設(shè)計(jì)經(jīng)驗(yàn)。

譯者的微信公眾號(hào)：

「Illustrator新手教程合集」

同類(lèi)型紋理教程：
《AI教程：手把手教你用AI創(chuàng)建漂亮的無(wú)縫幾何圖案》

簡(jiǎn)單好上手，效果還很贊！長(zhǎng)投影教程：
《AI新手教程：教你創(chuàng)建精致閃亮的長(zhǎng)投影寶石》

據(jù)說(shuō)是目前最火的設(shè)計(jì)趨勢(shì)：
《AI新手教程！教你簡(jiǎn)單快速地將圖片變成多邊形背景》

原文地址：design.tutsplus

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com