1.創(chuàng)建背景

今天給大家?guī)硪粋€有些老的教程，但是練習技法什么的還是不會老哈！

步驟1

我們可以創(chuàng)立兩個文件圖層，一個叫背景，一個叫游戲機，然后我們確保位于正確的圖層上,然后使用矩形工具 (M) 創(chuàng)建一個800 x 600px的形狀,我們將使用#F96969進行著色,然后使用”對齊”面板的”水平和垂直對齊中心”來對齊畫板的中心位置。

 

步驟2

完成后,鎖定當前圖層,然后我們到下一個繼續(xù)圖層繪制,這個時候我們就將開始繪制我們的游戲機了。

 

2.創(chuàng)建游戲的正面底部

有了背景,我們現(xiàn)在可以專注于我們的小游戲機了,我們將使用Illustrator 的一些基本形狀創(chuàng)建該游戲機。我們將首先繪制設備的正面部分,完成后將會繪制側(cè)面的厚度部分。

 

步驟1

開始繪制設備的主體,創(chuàng)建一個144 x 232px 矩形的圓角為 8px,我們將使用#EDE4E4來著色。

 

步驟2

使用直接選擇工具 (A),選擇形狀的右下角,并通過在變換面板的矩形屬性將其半徑設置為 32 px 來調(diào)整其圓度。

 

步驟3

創(chuàng)建游戲機的側(cè)面部分,選中我們現(xiàn)在繪制好的形狀的副本(ctrl-C + ctrl-B),并將其向左移動 24 px,確保將其顏色更改為較暗一些的顏色(#DDCCCC)。

 

步驟4

創(chuàng)建一個游戲機主形狀的副本 (Ctrl-C), 并將其粘貼到原位 (Ctrl-F),然后通過進入對象 > 路徑 >偏移路徑，并將偏移的值設置為-4px。

 

步驟5

我們將使用此偏移來創(chuàng)建外部的高光,通過選擇它的副本,然后使用路徑查找器的減去頂層形狀模式來切掉不要的部分。然后,選擇生成的形狀并將其顏色更改為白色(#FFFFFF),將其混合模式設置為”變亮”,并將其不透明度降低到 40%。

 

步驟6

此時,最好使用 Ctrl-G 鍵盤快捷鍵把做好的元素打組,從而將游戲機的正面與其側(cè)面部分分開。這樣,我們只需雙擊分組對象就可以進入隔離模式,然后就可以向其添加新的東西。使用矩形工具 (M), 創(chuàng)建一個 144 x 4 px 水平分隔線 (#D8C5C5), 我們將會設置一個距離游戲機的頂部16px的間隙.

 

步驟7

在它上方添加另一個更暗的144 x 2 px 矩形(#C1A8A8),當添加完第二條水平分隔線后,選擇它和較粗的線,并使用 Ctrl-G 鍵盤快捷鍵將它們組合在一起。

 

步驟8

接下來,我們將在我們剛才創(chuàng)建的兩條水平分隔線上添加兩個 6 x16px 的矩形 (#D8C5C5),將每個矩形放置在正面邊緣距離中心12 px的地方。

 

步驟9

將剛才繪制的矩形放在其頂部,然后將它們 (Ctrl-G) 打組,這樣就不會因意外而讓他們錯位。

 

步驟10

使用矩形工具 (M), 再創(chuàng)建兩個 2 x 10 px 形狀,我們將使用白色(#FFFFFF)著色,然后定位到每個垂直分隔器的左側(cè),確保將其混合模式調(diào)整為”變亮”,并將其不透明度降低到 40%。

 

步驟11

接下來,我們將開始繪制關閉/打開開關,創(chuàng)建一個10 x 4px 矩形 (#D8C5C5),將其對齊正面的頂部部分,并將其定位到第一個垂直分隔器的右側(cè)。

 

步驟12

使用圓角矩形工具,創(chuàng)建具有4px 圓角的28 x 8px的形狀(#D8C5C5),然后添加一個較小的20 x 4px圓角矩形(#EDE4E4),其頂部圓角半徑為2px。

 

步驟13

創(chuàng)建兩個2 x 4px的矩形 (#EDE4E4),然進行圓角處理，然后放到圖片中對應的位置。

 

步驟14

使用三個2 x 2px的矩形(#C1A8A8)作為陰影,從而賦予此部分更多立體感。

 

步驟15

通過添加一些細節(jié)(如垂直線下方的陰影)來完成開關,重復使用我們已有的形狀,通過將其顏色設置為#C1A8A8來調(diào)整它們。添加陰影后,不要忘記將細微的高光繪制到開關的按鈕上半部分,使用白色(#FFFFFF),為混合模式提供”變亮”,為”不透明度”設置為 40%。

 

步驟16

在較寬的水平分隔線下方添加一個 136 x 2px (#FFFFFF) 矩形,通過將混合模式設置為”變亮”并將其不透明度降低到 40%,我們將其作為高光。到現(xiàn)在,我們幾乎完成了游戲機的上半部分,這意味著我們現(xiàn)在可以專注于創(chuàng)建顯示器了,這是所有的樂趣發(fā)生的地方。

 

步驟17

選擇圓角矩形工具,創(chuàng)建一個 88 x 120px 的形狀,具有 4 px 的圓角半徑,我們將使用#7E7E89進行著色,然后將其定位在水平高光下方具有4 px 的距離的位置。

 

步驟18

顯示屏就位后,我們必須稍微調(diào)整一下,將其右下角半徑設置為 20 px,而不是用默認的4px。

 

步驟19

使用前面創(chuàng)建正面的方法創(chuàng)建顯示器的厚度感,然后選擇形狀并將其顏色更改為黑色#000000,將其不透明度降低到 20%。

 

步驟20

在使用類似的過程,添加一個2 px寬的內(nèi)部高光,使用白色(#FFFFFF),為混合模式為”變亮”,不透明度為 20%。

 

步驟21

在矩形工具 (M) 的幫助下,創(chuàng)建一個 80 x 64px 的形狀,我們將使用#82874D進行著色,因為它將充當顯示器的活動區(qū)域,并將其放置在灰色圖形上,確保將其與其中心對齊。

 

步驟22

通過使用偏移路徑工具繪制4 px 厚的內(nèi)陰影(顏色:黑色)為屏幕提供一些厚度感然后不透明度設置為20%。

 

步驟23

添加陰影后,選擇筆工具 (P) 并跟隨幾個對角線繪制高光,使用白色(#FFFFFF)作為填充顏色,將混合模式設置為柔光,并將不透明度降至40%。

 

步驟24

此時,屏幕已接近完成。我們現(xiàn)在需要做的是添加一些小點綴在游戲機上面,然而你可以使用#6B6B75來著色。

 

步驟25

通過添加兩對白色垂直矩形來作為高光，將其混合模式改為:變亮; 不透明度:20%,然后選擇其所有組合元素,并使用 Ctrl-G 鍵盤快捷鍵將它們打組在一起。

 

步驟26

使用橢圓工具 (L) 創(chuàng)建一個 44 x 44 px 的圓圈 (#DDCCCC),他將距離屏幕底部大約 24 px。

 

步驟27

創(chuàng)建一個垂直的14 x 36 px 圓角矩形 (#6B6B75),其圓角半徑為2px ,我們將添加副本并旋轉(zhuǎn)他,確保將它們居中到基礎圓的中心。

 

步驟28

通過添加一個 12 x 12px 的圓圈(#5E5E68),為按鈕提供一些厚度感。我們將圓放置在中心位置。

 

步驟29

通過添加幾個白色矩形來作為高光，然后混合模式:變亮，不透明度: 20%，和陰影(顏色:#BAA0A0),然后將它們組合在一起(Ctrl-G)。

 

步驟30

由于我們將再添加幾個按鈕,因此現(xiàn)在最好添加垂直高光,這樣我們就不必在創(chuàng)建后將它們調(diào)整到后面。因此,使用矩形工具 (M) 創(chuàng)建四對高光,對填充顏色使用白色 (#FFFFFF),將混合模式設置為”變亮”,并將不透明度降低到 40%,并將它們定位到游戲機的右側(cè)。

 

步驟31

添加高光后,您可以選擇橢圓工具 (L), 并用它來創(chuàng)建兩個16 x 16px的按鈕(#A86578),我們會將他放置在距離游戲機的右側(cè)36px與距離底部62px的位置。（其中一個按鈕）

 

步驟32

通過創(chuàng)建一個白色的半圓來作為高光，然后混合模式為:變亮，不透明度為: 20%，并使用形狀的副本來作為小陰影,我們將使用#DDCCCC進行著色,然后使用 Ctrl-G 鍵盤快捷鍵將所有按鈕元素組合在一起。

 

步驟33

把我們剛才的按鈕復制一份放到下圖差不多的位置即可

 

步驟34

選擇鋼筆工具 (P),并使用8px帶圓角的描邊 (#7E7E89),繪制一條將用作選擇按鈕的斜線。

 

步驟35

給按鈕繪制一個的高光，使用白色大小為2px的線，記得線要用圓角的哦，底層陰影(顏色:#DDCCCC，大小為8px。將它們打組(ctrl-G),并在大約相距4px的位置處創(chuàng)建副本。

 

步驟36

在游戲機的右下角添加小揚聲器格柵,繪制六條 4px 粗細的描邊線 (#AD9C9C),帶有圓角的哦。

 

步驟37

做好了之后我們可以吧之前做的那個開關放置到底部這里來，如圖的位置！這樣我們的游戲機就差不多做完了。然后我們需要繪制一個圓角矩形！放置到方向鍵的上面。如圖所示！

 

3. 將添加一些細節(jié)到游戲機的側(cè)面

此時,我們幾乎完成了在游戲機正面的工作,這意味著我們現(xiàn)在可以專注于它的側(cè)部。

 

步驟1

選擇正面部分的主高光的副本,并將其粘貼到側(cè)面,確保將其與左側(cè)對齊,其不透明度設置為60%,然后打組 (Ctrl-G) 并將它們同時放到到背面(右鍵單擊>排列>發(fā)送到底部。

 

步驟2

創(chuàng)建游戲機正面部分的副本(Ctrl-C + Ctrl-F),然后對其應用 4px 的偏移,我們將在副本的幫助下來創(chuàng)建新的圖形。然后,將生成的形狀的顏色更改為#BAA0A0,并將其放到其左側(cè),使其與游戲機側(cè)面可見區(qū)域的中心對齊。

 

步驟3

現(xiàn)在我們需要把多余的部分用剪切蒙版去掉！對于剪切蒙版的用法不清楚的小伙伴可以看看我以前的教程哦！

 

步驟4

使用矩形工具 (M) 創(chuàng)建一個 10 x 4px 的形狀,我們將使用#BAA0A0進行著色。

 

步驟 5

接下來,在我們剛剛創(chuàng)建的水平分隔線上方添加一個10 x 2px的矩形作為陰影(#A58888),并在下面繪制10 x 2 px的白色矩形作為高光，混合模式:變亮，不透明度: 60%。

 

步驟6

選擇矩形工具 (M) 并創(chuàng)建10 個8 x 2 px形狀,我們將使用#A58888進行著色,并彼此垂直分布6px,確保將它們到游戲機的底部有48px。

 

步驟7

使用我們剛剛創(chuàng)建的矩形組,并將它們下移2px,將其顏色更改為#BAA0A0，這些圖像更有厚度感！

 

步驟8

通過在我們剛剛創(chuàng)建的線條下面添加第三個副本來完成側(cè)格柵的高光,我們需要通過將寬度從8px 更改為4px 來調(diào)整這些矩形。然后,將其顏色更改為白色(#FFFFFF),并將混合模式設置為”變亮”,同時將其不透明度降至 60%。

 

步驟9

如果你已經(jīng)到達了最后一步,這意味著你已經(jīng)成功地完成了我們的小游戲機。現(xiàn)在我們要創(chuàng)建一個陰影,只需選擇橢圓工具 (L) 并繪制一個 148 x 16 px 的橢圓,我們將使用較深的紅色 (#DD5252) 著色,然后放在游戲機下方,距離它 12 px的位置就好了。

 

原文地址：ENVATO TUTS+

譯文地址：UI中國

作者：Andrei Stefan

譯者：米夏小雨