【 Illustrator教學】Illustrator設計扁平化風格的職業角色圖像 | PS筆刷工廠-

Illustrator設計扁平化風格的職業角色圖像

這一次的教學是屬於矢量教程領域中的Illustrator教程的相關教學。

文章出處是來自站酷的矢量教程類文章，寫教學的作者是美院攝想，感謝美院攝想提供Illustrator教程的實作教學。

教學大綱:

在本教程中，我們將製作一套平面風格的肖像，描繪不同職業的人。這樣的頭像可以被用來當作社交網絡的頭像，或者是你個人網站的設計素材。你還可以用這種方法製作自己的扁平化肖像，用作你自己的商業名片。

Illustrator教程教學開始

在本教程中，我們將製作一套平面風格的肖像，描繪不同職業的人。這樣的頭像可以被用來當作社交網絡的頭像，或者是你個人網站的設計素材(描繪不同的職業類型)。你還可以用這種方法製作自己的扁平化肖像，用作你自己的商業名片。現在讓我們開始我們的教程吧。

Adobe Illustrator的幾何形狀工具在製作矢量圖形方面非常棒。我們通過接下來詳細的教程發現新的使用技巧和竅門。(路徑查找，裁剪和蒙板工具以及其他的一些AI功能)即使你是剛入門的新手，也可以很輕鬆的使用這個教程完成上面的肖像畫。趕緊跟隨教程製作起來吧。

先看看效果圖

(一)製作一個建築工人的扁平化肖像畫

第一步：

我們將開始我們第一個任務的頭像，我們使用矩形工具(括號內為快捷鍵，以下同。矩形快捷鍵為M)製作一個65*80像素淺粉色皮膚色調的矩形，保持矩形選中狀態。去對象>路徑 >添加錨點。你將會注意到每一個矩形的邊上上出現了新的錨點。

第二步

繼續使用對象>路徑 >添加錨點。為矩形的每個邊在增加更多的兩個點。 我們不需要用上面的錨點，，所以我們刪除它們。用直接選擇工具(A)選中需要刪除的左邊和右邊倒數第三個點(左右各一個)然後在頂部的控制面板里，點擊刪除已選中錨點工具按鈕。

現在讓我們創建臉部輪廓。選中矩形下面一條邊上的兩個末端錨點。敲擊鍵盤上回車按鈕，打開移動窗口。水平值設為0像素，垂直值設為-25像素(所中的錨點上移25像素)距離值25px(移動錨點25像素。形成下巴，點擊確定。

第三步：

如果你想要使下巴更寬或者更窄，選擇一個錨點然後敲回車，打開移動窗口，使選中的點向左，向右移動。例如：將右邊的點移動到左邊，選中右邊的點，然後把水平值設為-5像素。同理把左邊的點移動到右邊，選中左邊的點水平值設為5像素。這種方式我們可以將這兩個點移動的更近。

使用實時轉角功能，使臉部更佳平滑。使用直接(A)選擇工具，選中實時轉角，然後拖拽任何一個圓角標記(就是你選中一個有角度的錨點，都會出現一個中間實心，外面有個圓圈的點，選中那個點)更靠近中心。(這個功能是老版本AI里沒有的)

如果你使用的是舊版本的Adobe Illustrator，沒有非常不錯額實時轉角功能!你可以使用效果> 樣式>風格化>圓角實現同樣功能。唯一的區別是不能選擇一個角來發生變化。他會使所有角發生變化。你可以使用橡皮擦(SHIFT+E)完成。

第四步

讓我們開始添加鼻子。使用矩形工具(M)製作一個9*20像素粉色小矩形來作為他的鼻子，然後使他變成圓角。(和上一步製作臉型一樣道理)。或者直接使用圓角矩形工具創建整個形狀。

我們確保鼻子和臉保持居中對齊。用選擇工具(V)選中鼻子和臉,按住ALT並且點擊以下臉。你將會看到厚厚的選擇框在臉部周邊。這意味着臉現在是關鍵對象。(所有其他的物體都會與他進行對齊)現在在頂部屬性面板里找到對齊里的水平居中對齊。非常棒!，鼻子就正好在臉部的中間啦。

第六步

選中棕色鬍子上方左邊一個錨點，敲擊回車，設置水平值為 10px，垂直值：0PX。為了讓這個點更靠近鼻子。在鬍子的另一邊錨點上重複相同的動作。這次設置水平數值為：-10px。最後用實時轉角功能讓鬍子下面部分有一個溫柔的圓角 。(看下圖你會很容易懂的)

第7步

使用圓角矩形功能來製作一個小的形狀來作為下面的嘴唇。放置在鬍子的下方(Control+[)。用水平居中對齊面板來和臉進行對齊。

第8步

使用橢圓工具(L)來製作一個8PX*8px的白色的眼球，然後放置一個更小的(6*6PX)棕色的圓w為 了這個虹膜。添加一個細小的白色圓圈作為高光(雖然學畫畫的我認為高光不是白色圓圈，考究的話。)移動兩個眼睛到合適的位置。

第9步

我們來製作一個可以保護工人頭部的頭盔吧。在頭的頂部繪製出一個65*19px的橘色的矩形

用直接選擇工具選擇上面的錨點(A)向下拖拽實時圓角，讓帽子變圓。

第10步

讓我們添加頭髮吧。用矩形工具(M)製作一個在臉的左邊的垂直窄條，作為鬢角。用直接選擇工具(A)，選擇右邊的錨點，讓這個角變的圓滑。

保持左邊鬢角選中，雙擊鏡像工具(O)在垂直軸方向翻轉，拷貝這個鬢角，然後在臉的右側粘貼。

第11步

讓我們修改頭盔的底部，以至於我們可以增加一個帽舌。找到鬢角穿過頭盔底部的點。然後使用鋼筆工具(P)來製作一個新的錨點。在右邊做相同的動作。你可以打開智能參考線。視圖>智能參考線(可以標記交叉點)

最後用直接選擇工具(A)選擇這個新創建的點，敲擊回車鍵，打開移動窗口。設置水平移動值為0PX，垂直移動值為-5PX，最後使使這倆個錨點移動起來吧(像下圖這樣)。

第12步

現在讓我們添加一個帽沿吧。製作一個淺橘色的矩形，使他的上面和頭盔相銜接。智能參考線。視圖>智能參考在這裡使用是很方便的。

選中底部左邊錨點，使用移動工具，通過設置水平移動數值：10px，垂直數值為0px來使他向右邊移動。重複相同的動作在對應的另一邊錨點上，但是這次是向左移動。最後拖拽底部錨點一點，如果你想要使這個帽沿更寬的話。使用實時轉角功能使這個底部轉角更加圓潤。

第13步

使用圓角矩形工具，在頭盔的頂部製作一個7*30px窄的豎條。用對齊到關鍵對象功能對齊到頭盔上面。

在第一個豎條的兩邊各增加一個豎條。然後使用對齊面板，使這些豎條之間的間距相同。

選中這些豎條，然後在對齊面板里點擊對齊到所選對象。然後點擊水平居中對齊。然後就完成啦。

第14步

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

第15步

製作一個35*40px 的矩形作為脖子。用一個淺灰的皮膚色填充這個矩形，顏色一定要與臉部的皮膚色做區分。讓脖子底部有一點圓角。

然後讓我們繼續設計工人師傅的衣服。製作一個90*70px的深藍色矩形作為T恤衫。在脖子和T恤衫交叉的地方做兩個額外的錨點。按住Shift加選另一邊錨點，多按幾下鍵盤上向下箭頭，形成肩膀。

第16步

讓我們繼續製作工人的服。在肩膀上擺放兩個淺橘色的窄條。編輯成組(Control+G)然後對齊到深藍色T恤衫，通過吧T恤衫作為關鍵對象。在胸部也添加一個矩形。然後在路徑查找器里拼合所有橘色部分。把它們合併為一個單一的圖像。

然後點擊對象>路徑>添加錨點，然後選中工作服的脖子中間區域的新的錨點，向下拖拽，形成一個V字的形狀。

第17步

用實時轉角功能讓工作服的轉角有一個輕微的圓角幅度。現在我們要去除T恤衫外面的部分使得T恤衫和工作服的形狀相符。選中這兩個圖形，使用路徑生成工具(Shift+M)。按住Alt，刪除T恤衫外面的部分。最後在增加用於描繪反光帶的兩個窄一點的淺色條在工人肩膀上。

第18步

讓我們通過給人物一半加黑，來製作一個扁平化的按鈕。用(Control+A) 選中所有圖形要素。拷貝並且在圖形面前複製(Control+C>Control+F)。在路徑查找器里點擊 合併按鈕，形成一個單獨的剪影。

第19步

選擇直線工具(/)。在輪廓上畫一個垂直的直線。選擇直線和輪廓線，並將其在水平居中對齊，通過使用輪廓作為關鍵對象。

保持這兩個選中狀態，在路徑查找器中點擊分離功能。使剪影分離成兩個部分。

第20步

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

第21步

啊。。好像我們竟然忘了眉毛。(原作者就是在這裡賣萌的，哈哈，不知道翻譯的我賣萌賣的咋樣)(附註原話：Oops, looks as if we forgot the eyebrows.)讓我們回到臉部，在眼睛的周圍畫一個圓圈，並且在顏色模版里設置成深棕色。用剪刀工具(C)點擊下面的錨點，使這個點從圓分離。刪除底部部分

點擊屬性面板中的描邊通過設置數值為2pt來增加眉毛的厚度。設置端點和邊角。使其形狀變為圓形。

第22步

保持眉毛選中，使用橡皮擦工具(Shift+E)。按住按住Alt鍵並拖動行程刪除的矩形在底部抹去眉毛的兩端，使拱短一點。

第23步

選中下面藍色T恤的邊上的兩個錨點，用實時轉角功能，讓肩膀更佳平滑一點。

第24步

我們第一個卡通頭像的主要部分已經完成了。現在我們要做的事通過給他一個背景，讓他有一個完整的展示。用橢圓工具(L)180px*180px的圓形。用鮮艷的綠色來填充他。拷貝一個，並把他帶到最前面。(Shift+Control+])

最後選中所有的圖形。點擊鼠標右鍵做一個蒙板.難以想象的，現在我們有一個完整的圓形卡通頭像了。

你仍然可以雙擊圖像進入隔離模式，來編輯他。

第25步

最後一步就比較長了，製作扁平化的投影。利用矩形選擇工具(M)製作一個大的長方形。切換到混合模式編輯，降低透明度。使他在頭像下面可見。按住Shift旋轉45度。

現在你需要使矩形適合我們工人的輪廓。用鋼筆工具增加額外的錨點，然後使用直接選擇工具移動它們。把不需要的部分隱藏在人物的下面。

把投影放在剪切蒙板的下面，隱藏在工人的形象下面。你會很滿意這個結果(在投影下面使用圖層面板)

最後利用把投影做一線性漸變，從深綠到白色透明，對角線放置。通過漸變工具(G)改變投影的混合模式使其與背景混合。

所有的都做完了，讓我們繼續下一個吧。

原作比較長，我今天就先翻譯到這裡吧。第一次翻譯文章。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Illustrator設計扁平化風格的職業角色圖像