手把手教你用AI繪制扁平化卡通風(fēng)格人像【UI設(shè)計培訓(xùn)】

1、手把手教你用AI繪制扁平化卡通風(fēng)格人像【UI設(shè)計培訓(xùn)】作者: 一網(wǎng)學(xué)   最后更新時間：2016-02-26 09:35:45小編：今天的AI教程，教大家人物肖像的繪制方法，學(xué)會了可以用作頭像或者設(shè)計素材（描繪不同的職業(yè)類型），也可以給身邊朋友畫一個，非常實用?，F(xiàn)在開始我們的教程吧。第一步：我們將開始我們第一個任務(wù)的頭像，我們使用矩形工具（括號內(nèi)為快捷鍵，下同。矩形快捷鍵為M）制作一個65*80像素的淺粉色矩形，保持矩形選中狀態(tài)。去對象>路徑 >添加錨點。你將會注意到每一個矩形的邊上出現(xiàn)了新的錨點。第二步繼續(xù)使用對象>路徑 >添加錨點。為矩

2、形的每個邊增加兩個點。 我們不需要用上面的錨點，所以我們刪除它們。用直接選擇工具（A）選中需要刪除的左邊和右邊倒數(shù)第三個點（左右各一個）然后在頂部的控制面板里，點擊刪除?，F(xiàn)在讓我們創(chuàng)建臉部輪廓。選中矩形下面一條邊上的兩個末端錨點。敲擊鍵盤上回車按鈕，打開移動窗口。水平值設(shè)為0像素，垂直值設(shè)為25像素（所中的錨點上移25像素）距離值25px（移動錨點25像素）。形成下巴，點擊確定。第三步：如果你想要使下巴更寬或者更窄，選擇一個錨點然后敲回車，打開移動窗口，使選中的點向左，向右移動。例如：將右邊的點移動到左邊，選中右邊的點，然后把水平值設(shè)為5像素。同理把左邊的點移動到右邊，選中左邊的點水平值設(shè)為5

3、像素。這種方式我們可以將這兩個點移動的更近。使用實時轉(zhuǎn)角功能，使臉部更佳平滑。使用直接（A）選擇工具，選中實時轉(zhuǎn)角，然后拖拽任何一個圓角標記（就是你選中一個有角度的錨點，都會出現(xiàn)一個中間實心，外面有個圓圈的點，選中那個點，讓它更靠近中心。（這個功能是老版本AI里沒有的）如果你使用的是舊版本的Adobe Illustrator，可以使用效果> 樣式>風(fēng)格化>圓角實現(xiàn)同樣功能。唯一的區(qū)別是不能選擇一個角來發(fā)生變化。他會使所有角發(fā)生變化。你可以使用橡皮擦（SHIFT+E）完成。第四步讓我們開始添加鼻子。使用矩形工具（M）制作一個9*20像素的粉色小矩形來作為他的鼻子，然后使它變成圓

4、角。（和上一步制作臉型一樣道理）?；蛘咧苯邮褂脠A角矩形工具創(chuàng)建整個形狀。確保鼻子和臉保持居中對齊，用選擇工具（V）選中鼻子和臉，按住ALT并且點擊臉，你將會看到臉部周邊的選擇框。這意味著臉現(xiàn)在是關(guān)鍵對象。（所有其他的物體都會與他進行對齊）現(xiàn)在在頂部屬性面板里找到對齊里的水平居中對齊。非常棒！，鼻子就正好在臉部的中間啦。第五步讓我們添加一個胡子。制作一個3010 px大小的棕色形狀。選中，鼠標單擊，右鍵，排列>后移一層（Control-）。把他放置在鼻子的下方。第六步選中棕色胡子上方左邊一個錨點，敲擊回車，設(shè)置水平值為 10px，垂直值：0 px。為了讓這個點更靠近鼻子，在胡子的另一邊錨點

5、上重復(fù)相同的動作。這次設(shè)置水平數(shù)值為：10px。最后用實時轉(zhuǎn)角功能讓胡子下面部分有一個溫柔的圓角 。（看下圖你會很容易懂的）第七步使用圓角矩形功能來制作一個小的形狀來作為下面的嘴唇。放置在胡子的下方（Control）。用水平居中對齊面板來和臉進行對齊。第8步使用橢圓工具（L）來制作一個88 px的白色眼球，然后放置一個更小的（6*6 px）棕色的圓作為虹膜。添加一個細小的白色圓圈作為高光，移動兩個眼睛到合適的位置。第9步我們來制作一個可以保護工人頭部的頭盔吧。在頭的頂部繪制出一個65*19 px的橘色的矩形，用直接選擇工具選擇上面的錨點（A）向下拖拽實時圓角，讓帽子變圓。第10步讓我們添加頭發(fā)

6、吧。用矩形工具（M）在臉的左邊制作一個垂直窄條，作為鬢角。用直接選擇工具（A），選擇右邊的錨點，讓這個角變的圓滑。保持左邊鬢角選中，雙擊鏡像工具（O）在垂直軸方向翻轉(zhuǎn)，拷貝這個鬢角，然后在臉的右側(cè)粘貼。第11步讓我們修改頭盔的底部，增加一個帽舌。找到鬢角穿過頭盔底部的點。然后使用鋼筆工具（P）來制作一個新的錨點。在右邊做相同的動作。你可以打開智能參考線，視圖>智能參考線（可以標記交叉點）最后用直接選擇工具（A）選擇這個新創(chuàng)建的點，敲擊回車鍵，打開移動窗口。設(shè)置水平移動值為0 px，垂直移動值為5 px，最后使這倆個錨點移動起來（像下圖這樣）。第12步現(xiàn)在讓我們添加一個帽沿吧。制作一個淺橘

7、色的矩形，使他的上面和頭盔相銜接。這里用智能參考線很方便，視圖>智能參考線。選中底部左邊錨點，使用移動工具，通過設(shè)置水平移動數(shù)值：10 px，垂直數(shù)值為0 px來使他向右邊移動。在對應(yīng)的另一邊錨點上重復(fù)相同的動作，但是這次是向左移動。最后拖拽底部錨點一點，如果你想要使這個帽沿更寬的話。使用實時轉(zhuǎn)角功能使這個底部轉(zhuǎn)角更加圓潤。第13步使用圓角矩形工具，在頭盔的頂部制作一個7*30 px窄的豎條。用對齊到關(guān)鍵對象的功能對齊到頭盔上面。在第一個豎條的兩邊各增加一個豎條。然后使用對齊面板，使這些豎條的間距相同。選中這些豎條，然后在對齊面板里點擊對齊到所選對象，點擊水平居中對齊。然后就完成啦。第1

8、4步使用圓角矩形工具，這一次讓我們制作耳朵。在頭部的左側(cè)制作一個11*23 px的粉色矩形。然后把他放置到最后（Shift+Control+）。按住Alt+Shift 把這個耳朵拷貝一個，拖拽到另一邊。第15步制作一個35*40 px 的矩形作為脖子。用一個淺灰的皮膚色填充這個矩形，顏色一定要與臉部的皮膚色做區(qū)分。讓脖子底部有一點圓角。然后讓我們繼續(xù)設(shè)計工人師傅的衣服。制作一個90*70 px的深藍色矩形作為T恤衫。在脖子和T恤衫交叉的地方做兩個額外的錨點。按住Shift加選另一邊錨點，多按幾下鍵盤上向下箭頭，形成肩膀。第16步讓我們繼續(xù)制作工人的衣服。在肩膀上擺放兩個淺橘色的窄條，編輯成組（

9、Control+G），用T恤衫作為關(guān)鍵對象對齊。在胸部也添加一個矩形。然后在路徑查找器里拼合所有橘色部分。把它們合并為一個圖像。然后點擊對象>路徑>添加錨點，選中工作服的脖子中間區(qū)域的新的錨點，向下拖拽，形成一個V字的形狀。第17步用實時轉(zhuǎn)角功能，讓工作服的轉(zhuǎn)角有一個輕微的圓角幅度?，F(xiàn)在我們要去除T恤衫外面的部分，使得T恤衫和工作服的形狀相符。選中這兩個圖形，使用路徑生成工具（Shift+M）。按住Alt，刪除T恤衫外面的部分。最后在工人肩膀上增加用于描繪反光帶的兩個窄一點的淺色條。第18步讓我們來制作一個扁平化的按鈕。用（Control+A） 選中所有圖形要素，拷貝并且復(fù)制（Co

10、ntrol+C>Control+F），在路徑查找器里點擊合并按鈕，形成一個單獨的剪影。第19步選擇直線工具（），在輪廓上畫一個垂直的直線。選擇直線和輪廓線，使用輪廓作為關(guān)鍵對象，將其在水平居中對齊。保持這兩個為選中狀態(tài)，在路徑查找器中點擊分離功能，使剪影分離成兩個部分。第20步刪除左半部分，并將剩下的一半在透明度面板里調(diào)整混合模式以及透明度。你可以在顏色模版里調(diào)整顏色投影使他更輕或者更重，或者在透明度模版里改變它們的透明度。第21步啊，好像我們竟然忘了眉毛。讓我們回到臉部，在眼睛的周圍畫一個圓圈，并且在顏色模版里設(shè)置成深棕色。用剪刀工具（C）點擊下面的錨點，使這個點從圓分離，刪除底部部分

11、。點擊屬性面板中的描邊，通過設(shè)置數(shù)值為2pt來增加眉毛的厚度。設(shè)置端點和邊角，使其形狀變?yōu)閳A形。第22步保持眉毛選中，使用橡皮擦工具（Shift+E）。按住Alt鍵并拖動，刪除眉毛的兩端，讓它短一點。第23步選中下面藍色T恤的邊上的兩個錨點，用實時轉(zhuǎn)角功能，讓肩膀更佳平滑一點。第24步我們第一個卡通頭像的主要部分已經(jīng)完成了?，F(xiàn)在我們要做的事通過給他一個背景，讓他有一個完整的展示。用橢圓工具（L）創(chuàng)建 180px*180px的圓形，填充綠色?？截愐粋€，并放到最前面。（Shift+Control+）最后選中所有的圖形。點擊鼠標右鍵做一個蒙板，搞定一個卡通頭像了！你仍然可以雙擊圖像進入隔離模式，來編輯他。第25步最后一步就比較長了，制作扁平化的投影。利用矩形選擇工具（M）制作一個大的長方形。切換到混合模式編輯，降低透明度，然后按住Shift旋轉(zhuǎn)45度?，F(xiàn)在你需要使矩形適合我們工人的輪廓。用鋼筆工具增加額外的錨點，然后使用直接選擇工具移動它們，把不需要的部分隱藏在人物的下面。把投影放在剪切蒙板的下面，隱藏在工人的形象下面（在投影下面使用圖層面板）。最后利用投影做一個線性漸變，從深綠到白色透明，對角線放置。通過漸變工具（G）改變投影的混合模式，使其與背景混合。最終效果：原文地址：design.tuts