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