今天給大家?guī)硪粋€(gè)有些老的教程，但是練習(xí)技法什么的還是不會(huì)老哈！
步驟1
我們可以創(chuàng)立兩個(gè)文件圖層，一個(gè)叫背景，一個(gè)叫游戲機(jī)，然后我們確保位于正確的圖層上,然后使用矩形工具 (M) 創(chuàng)建一個(gè)800 x 600px的形狀,我們將使用#F96969進(jìn)行著色,然后使用”對齊”面板的”水平和垂直對齊中心”來對齊畫板的中心位置。
步驟2
完成后,鎖定當(dāng)前圖層,然后我們到下一個(gè)繼續(xù)圖層繪制,這個(gè)時(shí)候我們就將開始繪制我們的游戲機(jī)了。
2.創(chuàng)建游戲的正面底部
有了背景,我們現(xiàn)在可以專注于我們的小游戲機(jī)了,我們將使用Illustrator 的一些基本形狀創(chuàng)建該游戲機(jī)。我們將首先繪制設(shè)備的正面部分,完成后將會(huì)繪制側(cè)面的厚度部分。
步驟1
開始繪制設(shè)備的主體,創(chuàng)建一個(gè)144 x 232px 矩形的圓角為 8px,我們將使用#EDE4E4來著色。
步驟2
使用直接選擇工具 (A),選擇形狀的右下角,并通過在變換面板的矩形屬性將其半徑設(shè)置為 32 px 來調(diào)整其圓度。
步驟3
創(chuàng)建游戲機(jī)的側(cè)面部分,選中我們現(xiàn)在繪制好的形狀的副本(ctrl-C + ctrl-B),并將其向左移動(dòng) 24 px,確保將其顏色更改為較暗一些的顏色(#DDCCCC)。
步驟4
創(chuàng)建一個(gè)游戲機(jī)主形狀的副本 (Ctrl-C), 并將其粘貼到原位 (Ctrl-F),然后通過進(jìn)入對象 > 路徑 >偏移路徑，并將偏移的值設(shè)置為-4px。
步驟5
我們將使用此偏移來創(chuàng)建外部的高光,通過選擇它的副本,然后使用路徑查找器的減去頂層形狀模式來切掉不要的部分。然后,選擇生成的形狀并將其顏色更改為白色(#FFFFFF),將其混合模式設(shè)置為”變亮”,并將其不透明度降低到 40%。
步驟6
此時(shí),最好使用 Ctrl-G 鍵盤快捷鍵把做好的元素打組,從而將游戲機(jī)的正面與其側(cè)面部分分開。這樣,我們只需雙擊分組對象就可以進(jìn)入隔離模式,然后就可以向其添加新的東西。使用矩形工具 (M), 創(chuàng)建一個(gè) 144 x 4 px 水平分隔線 (#D8C5C5), 我們將會(huì)設(shè)置一個(gè)距離游戲機(jī)的頂部16px的間隙.
步驟7
在它上方添加另一個(gè)更暗的144 x 2 px 矩形(#C1A8A8),當(dāng)添加完第二條水平分隔線后,選擇它和較粗的線,并使用 Ctrl-G 鍵盤快捷鍵將它們組合在一起。
步驟8
接下來,我們將在我們剛才創(chuàng)建的兩條水平分隔線上添加兩個(gè) 6 x16px 的矩形 (#D8C5C5),將每個(gè)矩形放置在正面邊緣距離中心12 px的地方。
步驟9
將剛才繪制的矩形放在其頂部,然后將它們 (Ctrl-G) 打組,這樣就不會(huì)因意外而讓他們錯(cuò)位。
步驟10
使用矩形工具 (M), 再創(chuàng)建兩個(gè) 2 x 10 px 形狀,我們將使用白色(#FFFFFF)著色,然后定位到每個(gè)垂直分隔器的左側(cè),確保將其混合模式調(diào)整為”變亮”,并將其不透明度降低到 40%。
步驟11
接下來,我們將開始繪制關(guān)閉/打開開關(guān),創(chuàng)建一個(gè)10 x 4px 矩形 (#D8C5C5),將其對齊正面的頂部部分,并將其定位到第一個(gè)垂直分隔器的右側(cè)。
步驟12
使用圓角矩形工具,創(chuàng)建具有4px 圓角的28 x 8px的形狀(#D8C5C5),然后添加一個(gè)較小的20 x 4px圓角矩形(#EDE4E4),其頂部圓角半徑為2px。
步驟13
創(chuàng)建兩個(gè)2 x 4px的矩形 (#EDE4E4),然進(jìn)行圓角處理，然后放到圖片中對應(yīng)的位置。
步驟14
使用三個(gè)2 x 2px的矩形(#C1A8A8)作為陰影,從而賦予此部分更多立體感。
步驟15
通過添加一些細(xì)節(jié)(如垂直線下方的陰影)來完成開關(guān),重復(fù)使用我們已有的形狀,通過將其顏色設(shè)置為#C1A8A8來調(diào)整它們。添加陰影后,不要忘記將細(xì)微的高光繪制到開關(guān)的按鈕上半部分,使用白色(#FFFFFF),為混合模式提供”變亮”,為”不透明度”設(shè)置為 40%。
步驟16
在較寬的水平分隔線下方添加一個(gè) 136 x 2px (#FFFFFF) 矩形,通過將混合模式設(shè)置為”變亮”并將其不透明度降低到 40%,我們將其作為高光。到現(xiàn)在,我們幾乎完成了游戲機(jī)的上半部分,這意味著我們現(xiàn)在可以專注于創(chuàng)建顯示器了,這是所有的樂趣發(fā)生的地方。
步驟17
選擇圓角矩形工具,創(chuàng)建一個(gè) 88 x 120px 的形狀,具有 4 px 的圓角半徑,我們將使用#7E7E89進(jìn)行著色,然后將其定位在水平高光下方具有4 px 的距離的位置。
步驟18
顯示屏就位后,我們必須稍微調(diào)整一下,將其右下角半徑設(shè)置為 20 px,而不是用默認(rèn)的4px。
步驟19
使用前面創(chuàng)建正面的方法創(chuàng)建顯示器的厚度感,然后選擇形狀并將其顏色更改為黑色#000000,將其不透明度降低到 20%。
步驟20
在使用類似的過程,添加一個(gè)2 px寬的內(nèi)部高光,使用白色(#FFFFFF),為混合模式為”變亮”,不透明度為 20%。
步驟21
在矩形工具 (M) 的幫助下,創(chuàng)建一個(gè) 80 x 64px 的形狀,我們將使用#82874D進(jìn)行著色,因?yàn)樗鼘⒊洚?dāng)顯示器的活動(dòng)區(qū)域,并將其放置在灰色圖形上,確保將其與其中心對齊。
步驟22
通過使用偏移路徑工具繪制4 px 厚的內(nèi)陰影(顏色:黑色)為屏幕提供一些厚度感然后不透明度設(shè)置為20%。
步驟23
添加陰影后,選擇筆工具 (P) 并跟隨幾個(gè)對角線繪制高光,使用白色(#FFFFFF)作為填充顏色,將混合模式設(shè)置為柔光,并將不透明度降至40%。
步驟24
此時(shí),屏幕已接近完成。我們現(xiàn)在需要做的是添加一些小點(diǎn)綴在游戲機(jī)上面,然而你可以使用#6B6B75來著色。
步驟25
通過添加兩對白色垂直矩形來作為高光，將其混合模式改為:變亮; 不透明度:20%,然后選擇其所有組合元素,并使用 Ctrl-G 鍵盤快捷鍵將它們打組在一起。
步驟26
使用橢圓工具 (L) 創(chuàng)建一個(gè) 44 x 44 px 的圓圈 (#DDCCCC),他將距離屏幕底部大約 24 px。
步驟27
創(chuàng)建一個(gè)垂直的14 x 36 px 圓角矩形 (#6B6B75),其圓角半徑為2px ,我們將添加副本并旋轉(zhuǎn)他,確保將它們居中到基礎(chǔ)圓的中心。
步驟28
通過添加一個(gè) 12 x 12px 的圓圈(#5E5E68),為按鈕提供一些厚度感。我們將圓放置在中心位置。
步驟29
通過添加幾個(gè)白色矩形來作為高光，然后混合模式:變亮，不透明度: 20%，和陰影(顏色:#BAA0A0),然后將它們組合在一起(Ctrl-G)。
步驟30
由于我們將再添加幾個(gè)按鈕,因此現(xiàn)在最好添加垂直高光,這樣我們就不必在創(chuàng)建后將它們調(diào)整到后面。因此,使用矩形工具 (M) 創(chuàng)建四對高光,對填充顏色使用白色 (#FFFFFF),將混合模式設(shè)置為”變亮”,并將不透明度降低到 40%,并將它們定位到游戲機(jī)的右側(cè)。
步驟31
添加高光后,您可以選擇橢圓工具 (L), 并用它來創(chuàng)建兩個(gè)16 x 16px的按鈕(#A86578),我們會(huì)將他放置在距離游戲機(jī)的右側(cè)36px與距離底部62px的位置。（其中一個(gè)按鈕）
步驟32
通過創(chuàng)建一個(gè)白色的半圓來作為高光，然后混合模式為:變亮，不透明度為: 20%，并使用形狀的副本來作為小陰影,我們將使用#DDCCCC進(jìn)行著色,然后使用 Ctrl-G 鍵盤快捷鍵將所有按鈕元素組合在一起。
步驟33
把我們剛才的按鈕復(fù)制一份放到下圖差不多的位置即可
步驟34
選擇鋼筆工具 (P),并使用8px帶圓角的描邊 (#7E7E89),繪制一條將用作選擇按鈕的斜線。
步驟35
給按鈕繪制一個(gè)的高光，使用白色大小為2px的線，記得線要用圓角的哦，底層陰影(顏色:#DDCCCC，大小為8px。將它們打組(ctrl-G),并在大約相距4px的位置處創(chuàng)建副本。
步驟36
在游戲機(jī)的右下角添加小揚(yáng)聲器格柵,繪制六條 4px 粗細(xì)的描邊線 (#AD9C9C),帶有圓角的哦。
步驟37
做好了之后我們可以吧之前做的那個(gè)開關(guān)放置到底部這里來，如圖的位置！這樣我們的游戲機(jī)就差不多做完了。然后我們需要繪制一個(gè)圓角矩形！放置到方向鍵的上面。如圖所示！
3. 將添加一些細(xì)節(jié)到游戲機(jī)的側(cè)面
此時(shí),我們幾乎完成了在游戲機(jī)正面的工作,這意味著我們現(xiàn)在可以專注于它的側(cè)部。
步驟1
選擇正面部分的主高光的副本,并將其粘貼到側(cè)面,確保將其與左側(cè)對齊,其不透明度設(shè)置為60%,然后打組 (Ctrl-G) 并將它們同時(shí)放到到背面(右鍵單擊>排列>發(fā)送到底部。
步驟2
創(chuàng)建游戲機(jī)正面部分的副本(Ctrl-C + Ctrl-F),然后對其應(yīng)用 4px 的偏移,我們將在副本的幫助下來創(chuàng)建新的圖形。然后,將生成的形狀的顏色更改為#BAA0A0,并將其放到其左側(cè),使其與游戲機(jī)側(cè)面可見區(qū)域的中心對齊。
步驟3
現(xiàn)在我們需要把多余的部分用剪切蒙版去掉！對于剪切蒙版的用法不清楚的小伙伴可以看看我以前的教程哦！
步驟4
使用矩形工具 (M) 創(chuàng)建一個(gè) 10 x 4px 的形狀,我們將使用#BAA0A0進(jìn)行著色。
步驟 5
接下來,在我們剛剛創(chuàng)建的水平分隔線上方添加一個(gè)10 x 2px的矩形作為陰影(#A58888),并在下面繪制10 x 2 px的白色矩形作為高光，混合模式:變亮，不透明度: 60%。
步驟6
選擇矩形工具 (M) 并創(chuàng)建10 個(gè)8 x 2 px形狀,我們將使用#A58888進(jìn)行著色,并彼此垂直分布6px,確保將它們到游戲機(jī)的底部有48px。
步驟7
使用我們剛剛創(chuàng)建的矩形組,并將它們下移2px,將其顏色更改為#BAA0A0，這些圖像更有厚度感！
步驟8
通過在我們剛剛創(chuàng)建的線條下面添加第三個(gè)副本來完成側(cè)格柵的高光,我們需要通過將寬度從8px 更改為4px 來調(diào)整這些矩形。然后,將其顏色更改為白色(#FFFFFF),并將混合模式設(shè)置為”變亮”,同時(shí)將其不透明度降至 60%。
步驟9
如果你已經(jīng)到達(dá)了最后一步,這意味著你已經(jīng)成功地完成了我們的小游戲機(jī)。現(xiàn)在我們要?jiǎng)?chuàng)建一個(gè)陰影,只需選擇橢圓工具 (L) 并繪制一個(gè) 148 x 16 px 的橢圓,我們將使用較深的紅色 (#DD5252) 著色,然后放在游戲機(jī)下方,距離它 12 px的位置就好了。
原文地址：ENVATO TUTS+
譯文地址：UI中國
譯者：米夏小雨
]]>