Illustrator繪制逼真質(zhì)感電池圖標(biāo)

2020-04-17 23:31:35

字體：大中小

供稿：網(wǎng)友

在這篇AI實(shí)例教程中，我們將學(xué)習(xí)制作一個(gè)類似于iphone上面的電池圖標(biāo)，它的"燃料"顏色和級(jí)別都可以更改。制作方法介紹的比較詳細(xì)，感興趣的朋友可以嘗試制作一下。
最后效果
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

下面我們開始學(xué)習(xí)制作過程：
STEP 1
先新建一個(gè)文檔，把背景設(shè)成黑色。設(shè)成任何尺寸都可以，我的是600px乘以400px的。我們先做這個(gè)電池尾部的金屬帽。首先先畫出它的形狀，就像下面的這樣。過渡顏色為90%灰度的灰色，白色和黑色。此外，要給對(duì)象1px的羽化，并把透明度調(diào)為75%。
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 2
復(fù)制(ctrl+C)這個(gè)對(duì)象然后直接把它粘貼到前面(ctrl+F)。然后按向右的箭頭將它輕移1px。它的漸變是80%的灰色，黑色，80%的灰色。然后把透明度調(diào)整到100%。然后把外觀拖到下面的小垃圾桶以去除羽化。
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 3
在兩邊加一些高光，用鋼筆畫2個(gè)下面這樣的形狀，把它們填充為白色，然后把上面的高光透明度調(diào)到75%，下面高光的調(diào)到25%。同樣的，給它們2px的羽化。
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 4
它可能不是很明顯，看起來像沒有一樣，但是我們還是要給這個(gè)金屬添加反射。用鋼筆畫出下面的形狀。上面是白色，下面是90%的灰色，然后同樣給它1px的羽化。下面的反射，按照下圖畫出另外一個(gè)形狀，漸變顏色是白色到黑色，羽化1px，然后將透明度降為50%。
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 5
現(xiàn)在我們開始制作電池的透明部分。首先用鋼筆畫出下圖的形狀，完成后用白色填充，將透明度降為50%。提示：一個(gè)繪制形狀簡(jiǎn)單的方法就是先畫出一半的開放路徑，然后復(fù)制粘貼，將形狀翻轉(zhuǎn)，建立另一半。最后將這些形狀連接就可以了，這也保證了圖形是對(duì)稱的。
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 6
現(xiàn)在，我們本可以用一個(gè)簡(jiǎn)單的黑灰色的漸變填充這個(gè)形狀，但是我們要使用一個(gè)不透明的蒙板去代替，這樣就可以在我們做好的時(shí)候，隨意的去更換背景了。建立蒙板，復(fù)制并粘貼這個(gè)形狀到原來的上面。把它的透明度調(diào)到100%，然后將它的透明度調(diào)到下面圖的樣子。左面滑塊是50%的灰，右面是黑色。
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 7
現(xiàn)在選擇這兩個(gè)形狀,然后在"透明度"下拉菜單中選擇不透明蒙板.這樣你就建立了蒙板,可能看不見什么變化,但是當(dāng)你改變背景的時(shí)候就會(huì)看見了.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 8
現(xiàn)在我們添加些反射,使玻璃看起來更透明.繪制兩個(gè)形狀,用白色填充,然后透明度為75%.上面的形狀羽化2px,下面的羽化3.5px.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 9
我們還要在上面的反光條上加上蒙板.復(fù)制粘貼,將其副本的透明度恢復(fù)到100%,并去掉羽化.填充下圖這樣的漸變,從70%的灰到黑色.最后像我們之前那樣,建立一個(gè)不透明蒙板.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 10
現(xiàn)在我們添加另一個(gè)反射去配合金屬上面的那個(gè).畫一個(gè)下面這樣的形狀.填充白色,2px羽化,透明度50%.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 11然后像上面那樣添加蒙板.蒙板是從15%的灰色到85%的灰.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 12
同樣建立不透明蒙板.同樣,一旦建立了蒙板,就要將形狀的混合模式調(diào)為濾色.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 13
現(xiàn)在你應(yīng)該知道了如何繪制反射.現(xiàn)在畫圖中的形狀.填充白色,透明度40%,羽化2px.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 14
同樣是不透明蒙板,蒙板用50%的灰色到黑色.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 15
建立不透明蒙板
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 16
最后一個(gè)反射.畫出下面的形狀,填充為白色,透明度50%,羽化2px.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 17
復(fù)制粘貼形狀,使用一個(gè)由白到黑的不透明蒙板.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 18
建立不透明蒙板.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 19
現(xiàn)在添加另一端的金屬帽.因?yàn)楹妥竺娴囊恢?所以只要復(fù)制就可以.然后選擇對(duì)象>變換>鏡像.在對(duì)話框里選擇復(fù)制軸對(duì)稱按鈕.拖拽變換到電池的另一端即可.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 20
下一步,創(chuàng)建電池的陽極,很簡(jiǎn)單.只要選擇剛才的的金屬帽,然后粘貼在前面.因?yàn)橹行囊恢?所以按住alt并拖動(dòng)手柄到合適的大小,完成后,將他們挪到后面(ctrl+shift+[),然后再送前一層(ctrl+]).如果正確的話,應(yīng)該是直接跟在金屬蓋層的后面.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)

STEP 21
最后要添加電池兩頭的本身.畫出2個(gè)橢圓(或者是畫出一個(gè)另一個(gè)復(fù)制).右面的橢圓填充白色,透明度25%.右面的填充黑色,透明度50%.此外,將左面的橢圓混合模式調(diào)整為疊加.最后都羽化3.5px.
STEP 22
現(xiàn)在我們將畫電池的電量,畫一個(gè)與下面類似的形狀,任意長(zhǎng)度和顏色都可以.我選擇了約三分之二滿,綠色的漸變.
Illustrator繪制質(zhì)感電池圖標(biāo),武林網(wǎng)