圖標(biāo)設(shè)計(jì)，用AI設(shè)計(jì)扁平效果的動(dòng)物圖標(biāo)

本篇教程通過(guò)AI設(shè)計(jì)設(shè)計(jì)扁平效果的動(dòng)物圖標(biāo)，我們會(huì)從最畫一個(gè)圓圈開始，進(jìn)而一步步在AI中實(shí)現(xiàn)我們需要的圖形，扁平化是很流行的設(shè)計(jì)風(fēng)格，我們這次制作的也是扁平效果的圖標(biāo)，通過(guò)教程你會(huì)看到這些生動(dòng)可愛(ài)的小動(dòng)物是如何在自己手中一步步展示的，同學(xué)們一起來(lái)制作一下。

效果圖：

操作步驟：

1.如何創(chuàng)建一個(gè)優(yōu)雅的暹羅貓

步驟1

從橢圓工具（L）制成的60 x 60像素大小的圓圈開始形成貓的臉。用沙粒米色填充圓圈。

第2步

使用直接選擇工具（A）選擇兩側(cè)的定位點(diǎn)，然后將其向下拖動(dòng)，更改臉部的形狀。

第3步

現(xiàn)在讓我們來(lái)形成貓的耳朵。采取多邊形工具，并做出約17×15像素大小的三面形狀。轉(zhuǎn)到效果>扭曲>凸出并將垂直彎曲值設(shè)置為40％。

對(duì)象>展開形狀的外觀以應(yīng)用效果。使用直接選擇工具（A）選擇上部定位點(diǎn)，并通過(guò)單擊上部上下文面板中的轉(zhuǎn)換轉(zhuǎn)角來(lái)平滑按鈕以使角部平滑。縮短此錨點(diǎn)的錨點(diǎn)并向上拖動(dòng)錨點(diǎn)，使耳朵更尖。

步驟4

復(fù)制的形狀和粘貼它在正面（操作-C>控制-F）。使副本變小，并用巧克力棕色填充。旋轉(zhuǎn)耳，并將其放置在頭部的左側(cè)，發(fā)送它到返回（控制-按住Shift [），所述頭部形狀的下方。使用反射工具（O），方法是雙擊工具面板上的圖標(biāo)，將耳朵翻轉(zhuǎn)過(guò)垂直軸并創(chuàng)建副本，將其放置在頭部的另一側(cè)。

第5步

讓我們讓頭部的頂部平坦。選擇頭部形狀，使用橡皮擦工具（Shift-E）并按住Alt鍵在頭部劃一個(gè)窄條。現(xiàn)在我們將這個(gè)形狀分成兩部分。選擇不需要的部分并刪除它。

第6步

用多邊形工具制作一個(gè)粉紅色的小三角形鼻子。選擇鼻子并拉動(dòng)Live Corners的圓圈指示器以使形狀變圓。如果此功能在您的Adobe Illustrator版本中不可用，請(qǐng)使用效果>風(fēng)格化>圓角，其功能完全相同。

第7步

制作另一個(gè)橢圓并將其放在臉部，以便它接觸到鼻子的下部。將鼻子作為關(guān)鍵對(duì)象，將橢圓與鼻子對(duì)齊。為此，請(qǐng)選擇兩種形狀，然后在按住Alt的同時(shí)單擊鼻子。您將在鼻子周圍看到一個(gè)粗大的中風(fēng)，表明關(guān)鍵對(duì)象。前往“對(duì)齊”面板并單擊“水平對(duì)齊中心”。

然后拿起錨點(diǎn)工具（Shift-C）并將底部錨點(diǎn)的錨手柄向下移動(dòng)到大約45度。使用指南將手柄移動(dòng)到相等距離（您可以通過(guò)從標(biāo)尺（Control-R）中將指南線拖到您的畫板上來(lái)添加指南線）。

用與我們?cè)诙渖舷嗤淖厣畛淠槻?ldquo;面具”，用吸管工具（I）挑選顏色。在面具下方添加一個(gè)更小，更淺的棕色橢圓，描繪下頜。

第8步

現(xiàn)在讓我們添加眼睛！制作一個(gè)橢圓，選擇其正確的錨點(diǎn)并將其轉(zhuǎn)換為上面控制面板中Convert菜單中的一個(gè)尖角。用明亮的藍(lán)色填充橢圓，然后為虹膜添加另一個(gè)橢圓。

在這里，我們需要?jiǎng)h除與眼睛邊緣重疊的虹膜片。選擇兩個(gè)橢圓，然后使用形狀生成器工具（Shift-M）通過(guò)按住Alt鍵并單擊不需要的部分來(lái)擦除虹膜的上半部分。

旋轉(zhuǎn)眼睛，使用反射工具（O）創(chuàng)建鏡像副本。

第9步

為我們的貓的眉毛制作兩個(gè)淺棕色橢圓，并為亮點(diǎn)添加兩個(gè)小白圈。

創(chuàng)建一個(gè)淺粉紅色的橢圓，將其放在鼻子的上部，然后使用形狀生成器工具（Shift-M）按住Alt鍵刪除不需要的部分，從而使鼻子更加細(xì)致。

第10步

讓我們創(chuàng)造一個(gè)時(shí)尚的平面影子，覆蓋貓頭的一半。組（Control-G）一起貓的所有部分，復(fù)制組和粘貼它在正面（操作-C>控制-F）。保持選擇了復(fù)印，團(tuán)結(jié)其部件在探路者面板，將它們合并成一個(gè)單一的形狀。將輪廓的混合模式切換為倍增，使其變?yōu)榘胪该鳌?/p>

最后，選擇輪廓，使用橡皮擦工具（Shift-E），并按住Alt鍵，將鼠標(biāo)拖動(dòng)到貓頭部的左半部分，用白色矩形選擇覆蓋它。釋放鼠標(biāo)按鈕以刪除覆蓋的部分。

在這里，我們擁有它！我們的平貓已經(jīng)準(zhǔn)備好了。讓我們繼續(xù)討論下一個(gè)元素。

2.如何繪制一只開朗的小狗
步驟1

如前所述，我們開始從60 x 60像素圓形成一幅肖像。將側(cè)向錨定點(diǎn)向下移動(dòng)一點(diǎn)，使形狀隆起，并用橡皮擦工具（Shift-E）擦除其頂部。

使用直接選擇工具（A）選擇左側(cè)定位點(diǎn)，然后按Enter打開移動(dòng)選項(xiàng)窗口。將水平位置值設(shè)置為-5 px，將垂直值設(shè)置為0 px，然后單擊確定，從而將錨點(diǎn)向左移動(dòng)5像素。

對(duì)右側(cè)定位點(diǎn)執(zhí)行相同操作，將水平移動(dòng)值設(shè)置為5 px并將其向右移動(dòng)5 px。

第2步

選擇兩側(cè)錨點(diǎn)并將它們轉(zhuǎn)換為尖角。使用定位點(diǎn)工具（Shift-C）調(diào)整定位手柄的位置并將其向上移動(dòng)，使臉部線條變得平滑。

第3步

讓我們使用多邊形工具從40 x 35像素三角形成耳朵。取曲率工具（Control-`）并使三角形的邊更加圓潤(rùn)并凸出。如果您使用Adobe Illustrator的早期版本（不包含此工具），請(qǐng)隨意使用Effect> Warp> Bulge，就像我們以前所做的那樣。

選擇上部定位點(diǎn)，使其更平滑并將其拖動(dòng)到左側(cè)，使形狀傾斜。轉(zhuǎn)到對(duì)象>路徑>偏移路徑，并將偏移值設(shè)置為-3像素，形成耳朵的內(nèi)部部分。用淺灰色填充。

步驟4

旋轉(zhuǎn)耳朵并將其放在頭部的左側(cè)。使用反射工具（O）在對(duì)面創(chuàng)建鏡像副本。

第5步

從壓扁的橢圓形中形成深灰色的鼻子，將其較低的錨點(diǎn)向下拖動(dòng)一點(diǎn)。在鼻子下面做兩個(gè)重疊的淺灰色橢圓，將它們分組并與臉部水平對(duì)齊，使用臉形作為關(guān)鍵對(duì)象。

第6步

現(xiàn)在讓我們制作一個(gè)有趣的舌頭！使用矩形工具（M）創(chuàng)建淺粉色的矩形，并將其放置在淺灰色橢圓下。選擇兩個(gè)較低的錨點(diǎn)并將實(shí)時(shí)角點(diǎn)標(biāo)記拉至最大值，使形狀的底部變圓。采用線段工具（\）并繪制垂直筆劃，同時(shí)按住Shift鍵。您可以在“描邊”面板中使線條的頂端變圓。

第7步

讓我們轉(zhuǎn)向眼睛。制作一個(gè)深藍(lán)色的橢圓形，并用另一個(gè)橢圓或任何顏色覆蓋其下半部分。選擇兩種形狀并使用形狀生成器工具（Shift-M）刪除下面的橢圓和覆蓋的眼睛底部。這樣我們就可以做出俏皮的表情。為眼睛添加更深的虹膜和微小的白色高光。

旋轉(zhuǎn)眼睛并創(chuàng)建第二個(gè)眼睛，將其放在臉部的另一側(cè)。

第8步

創(chuàng)建兩個(gè)均勻的淺灰色圓圈，覆蓋眼睛。然后添加兩個(gè)大圓圈，重疊并覆蓋臉部的下半部分，如下面的屏幕截圖所示。選擇較低的圓圈并使用形狀構(gòu)建工具（Shift-M）刪除臉部以外的部分。

選擇所有四件新作品，并將其統(tǒng)一在探路者中，制作一張臉“面具”。您可以通過(guò)使用直接選擇工具（A）單擊其邊緣并刪除它，刪除中間的間隙。

第9步

制作兩個(gè)帶圓角的小長(zhǎng)方形眉毛，使狗看起來(lái)和藹可親，并通過(guò)在右半邊創(chuàng)建一個(gè)微妙的陰影來(lái)完成。

3.如何制作花式浣熊

步驟1

我們開始從60 x 60 px柔和的藍(lán)色圓圈中整理臉部。擠壓一點(diǎn)，使形狀更寬。將兩邊的錨點(diǎn)向下拖動(dòng)幾個(gè)像素，然后將它們轉(zhuǎn)換為上部工具欄中Convert菜單中的尖角。

復(fù)制我們貓的耳朵，根據(jù)浣熊頭部的顏色重新著色，并將它們放在頭部的兩側(cè)。

第2步

用18×10像素的深灰色橢圓形畫一個(gè)鼻子，將其頂部的錨點(diǎn)向上拖動(dòng)一下。使用深灰色筆觸顏色創(chuàng)建另一個(gè)橢圓，并在“顏色”面板中將“填充顏色”設(shè)置為“無(wú)”。取出剪刀工具（C）并單擊左側(cè)和右側(cè)的定位點(diǎn)，將形狀水平分割成兩半。刪除下半部分，讓我們的浣熊微笑。

第3步

復(fù)制臉部形狀，使復(fù)印件更小，填充白色，并將其放置在鼻子區(qū)域下方。添加兩個(gè)帶有白色高光的黑色小眼睛，將它們分組并在“對(duì)齊”面板中水平對(duì)齊臉部，使臉部成為關(guān)鍵對(duì)象。

再次復(fù)制臉部形狀，使復(fù)印件稍小一點(diǎn)，用深藍(lán)色填充，并將其放在臉部的底部，形成一個(gè)面膜。

步驟4

讓我們將面具分成兩部分，在眼睛周圍創(chuàng)建兩個(gè)獨(dú)立的斑點(diǎn)。拿矩形工具（M）并在面部中間畫一條垂直條紋。選擇蒙版和條紋，并使用探路者的“分割”功能切割所有形狀。刪除不需要的部分，如果有的話。將您創(chuàng)建的一半放在眼睛下方，并使角部稍微變圓。

最后，在臉部的右側(cè)添加一個(gè)平坦的陰影�，F(xiàn)在我們可以繼續(xù)前進(jìn)！

4.如何制作一種熊貓
步驟1

用60 x 60 px淺米色圓圈做出蓬松的臉型，并將側(cè)邊的錨點(diǎn)向下移動(dòng)。

第2步

復(fù)制我們的狗的鼻子區(qū)域，并將“嘴唇”的筆觸顏色設(shè)置為深灰色，以便輪廓可見(jiàn)。選擇兩個(gè)概述的橢圓（沒(méi)有鼻子）并將它們聯(lián)合在探路者中。

選擇剪刀工具（C）并單擊輪廓形狀的側(cè)面錨點(diǎn)，將其分開。刪除上半部分，為我們的熊貓形成一種親切的微笑。

第3步

復(fù)制我們浣熊的眼睛，讓我們?cè)谘劬χ車纬纱蠖罨疑陌唿c(diǎn)。制作一個(gè)壓扁的橢圓并稍微向左旋轉(zhuǎn)一下。使用反射工具（O）制作副本并將其水平翻轉(zhuǎn)到臉部的另一側(cè)。用白色填充眼球，使它們?cè)诤邳c(diǎn)上方可見(jiàn)。

保持選定的眼球，進(jìn)入對(duì)象>路徑>偏移路徑，并用-1 px偏移值創(chuàng)建眼睛內(nèi)部的微小瞳孔。

步驟4

在熊貓的頭部加上深灰色的耳朵，最后在臉的右側(cè)形成一個(gè)半透明的陰影。

做得好！讓我們繼續(xù)！

5.如何創(chuàng)建一個(gè)聰明的熊步驟1

開始制作一個(gè)60 x 60像素圈的熊臉。向下移動(dòng)兩側(cè)錨定點(diǎn)并向上拖動(dòng)頂部錨點(diǎn)，使頭看起來(lái)像一個(gè)雞蛋。

使用橡皮擦工具（Shift-E）使頭部平坦。并使形狀的角落稍微圓潤(rùn)。

第2步

將兩個(gè)圓形耳朵添加到頭頂部，將它們分組并將它們水平對(duì)齊，將頭部用作關(guān)鍵對(duì)象。使用具有-3像素偏移值的偏移路徑功能來(lái)形成耳朵的黑暗內(nèi)部。

第3步

從壓扁的橢圓中制作寬闊的深棕色鼻子。然后讓我們形成鼻梁。拿矩形工具（M），做一個(gè)淺米色的形狀，把它放在鼻子后面。使用移動(dòng)選項(xiàng)面板將其左上角的定位點(diǎn)5 px向右移動(dòng)。對(duì)右上角的錨點(diǎn)執(zhí)行相同的操作，將其沿相反的方向移動(dòng)，從而使鼻梁的頂部變窄。

使矩形的角落變圓。使用實(shí)時(shí)角落功能，您可以改變形狀的每個(gè)單獨(dú)角落圓度的級(jí)別。例如，您只能選擇上部的錨點(diǎn)，并通過(guò)將標(biāo)記向下拉至最大值，從而使上部角點(diǎn)變圓100％。

步驟4

在鼻橋下方加一個(gè)小橢圓，形成下顎。將眼睛放在熊的臉上，如果你覺(jué)得熊的臉太黑，可以讓棕色部分變得更輕。

最后，將陰影添加到熊的臉上。

真棒！我們剩下最后一個(gè)字了！

6.如何制作狡猾的狐貍
步驟1

再次，我們開始從我們熟悉的60×60像素圓形的橙色中形成狐貍的臉。將側(cè)錨點(diǎn)向下拉一點(diǎn)，并將它們轉(zhuǎn)換為尖角，使臉部的兩側(cè)指向。將較低的錨點(diǎn)轉(zhuǎn)換為一個(gè)角落，形成一個(gè)尖銳的鼻子。

第2步

從我們的浣熊的耳朵，并將其放在狐貍頭的兩側(cè)，調(diào)整顏色。將黑色橢圓形覆蓋在臉部的底部，覆蓋鼻子區(qū)域。使用形狀生成器工具（Shift-M）擺脫臉部以外的部分，形成尖銳的黑色鼻子。

第3步

創(chuàng)建一個(gè)橢圓，重疊在狐貍臉部的左側(cè)，如下面的截圖所示。使用反射工具（O）在對(duì)面進(jìn)行翻轉(zhuǎn)復(fù)印。選擇兩個(gè)橢圓并使用形狀生成器工具（Shift-M）刪除臉部以外的部分。用淺米色填充形狀，形成臉頰。給我們的狐貍添加兩只小小的，閃亮的眼睛。

步驟4

在Live Corners功能的幫助下，讓鼻尖有點(diǎn)圓潤(rùn)。讓我們給我們的狐貍添加更多的細(xì)節(jié)！

做一個(gè)淺橙色的小橢圓形橢圓，并將其放在鼻梁的左側(cè)。選擇形狀，按住Alt-Shift并將橢圓拖到右側(cè)，進(jìn)行復(fù)制。按兩次Control-D形成兩個(gè)副本。再做兩行橢圓，將它們置于交叉位置。這樣我們就可以在狐貍鼻子上描繪出一種風(fēng)格化的毛皮。

不要忘記通過(guò)在鼻子上形成一個(gè)更小更輕的形狀來(lái)為鼻子增添柔和的高光。

第5步

在我們狡猾的狐貍的右側(cè)添加一個(gè)溫柔的陰影。

7.如何創(chuàng)建長(zhǎng)陰影圖標(biāo)
步驟1

現(xiàn)在我們有六張平面動(dòng)物肖像，讓我們把它們放在一組彩色圓圈上，創(chuàng)建圖標(biāo)。

為圖標(biāo)的底部做一個(gè)106 x 106像素大小的綠松石圈，然后將浣熊的頭部放在中間。

為陰影基礎(chǔ)創(chuàng)建一個(gè)80 x 80像素的正方形，并按住Shift鍵將其旋轉(zhuǎn)至45度。

第2步

將正方形的混合模式切換為Multiply，使其變?yōu)榘胪该�，并將形狀放置在浣熊上方。如果需要，使形狀稍窄一點(diǎn)，然后將其移動(dòng)，找到形狀與頭部重疊的兩個(gè)點(diǎn)。在我們的例子中，它是右耳的尖端和臉部的左側(cè)。使用添加錨點(diǎn)工具（+）在這些點(diǎn)上添加兩個(gè)錨點(diǎn)，然后切換到刪除錨點(diǎn)工具（ - ）并刪除矩形頂部的那些不需要的錨點(diǎn)，隱藏頂部的形狀浣熊的頭。

將陰影放置在頭部下方，使用形狀生成器工具（Shift-M）和-voila刪除圖標(biāo)外部不需要的部分- 帶有時(shí)髦平面陰影的花式圖標(biāo)完成！使用相同的簡(jiǎn)單技術(shù)為所有其他動(dòng)物創(chuàng)建圓圈圖標(biāo)。

完成：

形狀的制作上五花八門，我們從一個(gè)圓圈制作出這么多可愛(ài)、活靈活現(xiàn)的小動(dòng)物，這種設(shè)計(jì)風(fēng)格時(shí)下比較流行，很多網(wǎng)站、手機(jī)等設(shè)計(jì)中都會(huì)運(yùn)用到，同學(xué)們多多練習(xí)就可以做的更好。