圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標

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

效果圖:

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn

操作步驟:

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

步驟1

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第2步

使用直接選擇工具(A)選擇兩側(cè)的定位點,然后將其向下拖動,更改臉部的形狀。

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第3步

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
步驟4

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第5步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第6步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第7步

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

然后拿起錨點工具(Shift-C)并將底部錨點的錨手柄向下移動到大約45度。使用指南將手柄移動到相等距離(您可以通過從標尺(Control-R)中將指南線拖到您的畫板上來添加指南線)。

用與我們在耳朵上相同的棕色填充臉部“面具”,用吸管工具(I)挑選顏色。在面具下方添加一個更小,更淺的棕色橢圓,描繪下頜。

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第8步

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

在這里,我們需要刪除與眼睛邊緣重疊的虹膜片。選擇兩個橢圓,然后使用形狀生成器工具(Shift-M)通過按住Alt鍵并單擊不需要的部分來擦除虹膜的上半部分。

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第9步

為我們的貓的眉毛制作兩個淺棕色橢圓,并為亮點添加兩個小白圈。

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第10步

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

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

在這里,我們擁有它!我們的平貓已經(jīng)準備好了。讓我們繼續(xù)討論下一個元素。

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
2.如何繪制一只開朗的小狗
步驟1

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

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

對右側(cè)定位點執(zhí)行相同操作,將水平移動值設(shè)置為5 px并將其向右移動5 px。

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第2步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第3步

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
步驟4

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第5步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第6步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第7步

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第8步

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第9步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
3.如何制作花式浣熊

步驟1

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第2步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第3步

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
步驟4

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
4.如何制作一種熊貓
步驟1

用60 x 60 px淺米色圓圈做出蓬松的臉型,并將側(cè)邊的錨點向下移動。

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第2步

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第3步

復(fù)制我們浣熊的眼睛,讓我們在眼睛周圍形成大而深灰色的斑點。制作一個壓扁的橢圓并稍微向左旋轉(zhuǎn)一下。使用反射工具(O)制作副本并將其水平翻轉(zhuǎn)到臉部的另一側(cè)。用白色填充眼球,使它們在黑點上方可見。

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
步驟4

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
5.如何創(chuàng)建一個聰明的熊步驟1

開始制作一個60 x 60像素圈的熊臉。向下移動兩側(cè)錨定點并向上拖動頂部錨點,使頭看起來像一個雞蛋。

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第2步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第3步

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

使矩形的角落變圓。使用實時角落功能,您可以改變形狀的每個單獨角落圓度的級別。例如,您只能選擇上部的錨點,并通過將標記向下拉至最大值,從而使上部角點變圓100%。

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
步驟4

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

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

真棒!我們剩下最后一個字了!

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
6.如何制作狡猾的狐貍
步驟1

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第2步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第3步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
步驟4

在Live Corners功能的幫助下,讓鼻尖有點圓潤。讓我們給我們的狐貍添加更多的細節(jié)!

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

不要忘記通過在鼻子上形成一個更小更輕的形狀來為鼻子增添柔和的高光。

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第5步

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
7.如何創(chuàng)建長陰影圖標
步驟1

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

為圖標的底部做一個106 x 106像素大小的綠松石圈,然后將浣熊的頭部放在中間。

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
第2步

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

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

圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
完成:
圖標設(shè)計,用AI設(shè)計扁平效果的動物圖標_www.theoat.com.cn
形狀的制作上五花八門,我們從一個圓圈制作出這么多可愛、活靈活現(xiàn)的小動物,這種設(shè)計風(fēng)格時下比較流行,很多網(wǎng)站、手機等設(shè)計中都會運用到,同學(xué)們多多練習(xí)就可以做的更好。

全教程完,學(xué)完記得交作業(yè)。教程對您有所幫助,請推薦給你的朋友。如果學(xué)會了,可以嘗試投稿給我們,跟大家分享你的學(xué)習(xí)經(jīng)驗:http://i.16xx8.com

學(xué)習(xí) · 提示

  • 打開ps,跟著教程做一遍,做完的圖要到這里交作業(yè):提交作業(yè)
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:ps新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們微博:@photoshop教程論壇
  • 想學(xué)更多的同學(xué),可以訂閱我們郵件,每天都有新教程發(fā)給你:http://t.cn/Rzm5o8Y
PS教程自學(xué)網(wǎng) 歡迎投稿教程:http://i.16xx8.com

    雨夜珊瑚258 說: 簽到
    娟寶貝110 說: 真的很棒……謝謝!
    kobeliuxin 說: 學(xué)習(xí)了,很好的帖子
    圈圈中的1 說: 實用干貨!
    幻影沁 說: 棒棒噠,收下了。
    邇猜不透prince 說: 學(xué)習(xí)了!果斷收藏
    墩兒墩兒貓 說: 感謝分享
    小奇天 說: 像貓嗎?哈哈!快把自己笑死了? 我的作業(yè):<img src=http://bbs.16xx8.com/data/attachment/album/201805/28/204715tjjrjpz9akoquorj.jpg>
    小奇天 說: 升級版 我的作業(yè):<img src=http://bbs.16xx8.com/data/attachment/album/201805/29/145257yd6ioz3rzdp69hhi.jpg>
    小奇天 說: 最終版 [/奮斗]我的作業(yè):<img src=http://bbs.16xx8.com/data/attachment/album/201805/29/150320dcdhk7miik0eq6f4.jpg>
    小奇天 說: 我的作業(yè):<img src=http://bbs.16xx8.com/data/attachment/album/201805/29/163815m75a9fffb6fl559z.jpg>