教你用Photoshop繪制新款任天堂Wii U游戲手柄

SDC翻茄匠： @我是一只小車
軟件：Adobe Photoshop
版本：CS5
難度：中
完成時(shí)間：1.5-2h

最終效果

第1步

在Photoshop中建立如下圖所示的新文件

第2步

使用圓角矩形工具（快捷鍵U），設(shè)定圓角半徑150-160px。繪制如下面第1圖所示的圓角矩形，填充顏色#dee0df。然后添加圖層樣式（Layer Style）（2步，如下面第2、3圖所示）。做完之后，復(fù)制圖形并清除圖層樣式（Clear Layer Style），將復(fù)制圖形的“填充（Fill）”設(shè)置為0，然后增加如下面第4圖所示的圖層樣式。重新命名兩個(gè)圖層“Base”和“Base 1”。

第3步

建立新圖層并將其置于前兩個(gè)圖層上方。選擇鋼筆工具（P），繪制手柄的邊緣按鈕（如下第1圖）。應(yīng)用如下第2、3圖所示的樣式

第4步

對(duì)所有圖層編組，命名為“Base”。創(chuàng)建新圖層，選擇橢圓工具（U），畫一個(gè)小圓形填充顏色#dee0df，然后應(yīng)用如下圖所示的樣式。

第5步

復(fù)制上面的小圓形兩次，將復(fù)制圖層的“填充”值都設(shè)為0。將復(fù)制的第一個(gè)圖層的樣式清除，并應(yīng)用如下面第1圖所示的樣式；對(duì)復(fù)制的第二個(gè)圖層進(jìn)行與上面相同的處理，添加樣式如下第2圖。最后，在圓圈上面寫上字母“Y”（顏色：#959595，字體：Arial/Helvetica，字號(hào)：4pt）。

第6步

把剛制作的“Y”按鈕編組并命名為“Y”，復(fù)制該組3次，按下圖所示的次序擺放。

第7步

將上面的“Y”“X”“A”“B”編組，命名為“YXAB”。同樣的方法制作組“+-”，如下圖所示。

第8步

創(chuàng)建新圖層，使用圓角矩形工具（U）。設(shè)置圓角半徑為5px，繪制如下兩個(gè)圖形（顏色#dee0df），并添加如下圖所示的樣式。

第9步

畫兩個(gè)圓，合并兩個(gè)圖形并應(yīng)用以下樣式。

第10步

復(fù)制剛剛制作的十字形，將填充設(shè)置為0。添加如下圖所示樣式，并繪制4條短線（顏色#959595）。

第11步

將上面第8-11步的圖層編組，命名為“Cross”。現(xiàn)在開始制作游戲手柄的操縱桿了。創(chuàng)建一個(gè)新圖層，選擇橢圓型工具（U），繪制一個(gè)正圓，填充顏色#deeodf，將填充值設(shè)置為0，并應(yīng)用下面所示的圖層樣式。

第12步

復(fù)制上面的圓圈，清除已有的樣式，將填充值設(shè)為0，并應(yīng)用下面的樣式。

第13步

再次復(fù)制該圓圈，將填充值設(shè)為0，清除已有樣式，替換為如下所示樣式。

第14步

再次復(fù)制該圓圈，將填充值設(shè)為0，應(yīng)用如下所示樣式。

第15步

最后一次復(fù)制該圓圈，將填充值設(shè)為0，應(yīng)用如下所示樣式。

第16步

創(chuàng)建新圖層，選擇鋼筆工具，繪制圓形并應(yīng)用畫筆描邊（2px，顏色#dbdddc），然后添加如下所示樣式。

第17步

創(chuàng)建新圖層，使用“soft round brush”，增加一些高亮點(diǎn)。將第11-17步的圖層編組，命名為“Right analogue stick”。

第18步

復(fù)制“Right analogue stick”組，放置于圖片的另一邊，重新命名為“Left analogue stick”。

第19步

現(xiàn)在開始繪制屏幕了。選擇矩形工具（U），繪制一個(gè)大的矩形（如下第1圖所示）。然后將填充值設(shè)為0，應(yīng)用下面的樣式。

第20步

繪制另外一個(gè)矩形（顏色#ffffff），比上面的矩形略小，添加如下所示的樣式。

第21步

在屏幕上添加logo。將19-21步的圖層編組，命名為“Screen”。到現(xiàn)在為止，大體的性狀已經(jīng)出來了。

第22步

繪制一些圓形（一個(gè)黑色兩個(gè)白色），來完成頂部的攝像頭（你可以增加一些高亮點(diǎn)）。

第23步

創(chuàng)建一個(gè)新的圖層，選擇橢圓形工具，繪制一下小圓（顏色#282828），應(yīng)用如下所示樣式。

第24步

復(fù)制上面的圓圈，并縮小（如下圖所示紅色圓圈）。將顏色填充為#84919a，清除已有樣式，添加如下所示樣式。

第25步

再次復(fù)制該藍(lán)色圓圈，略微縮放該圓圈。清除之前的內(nèi)陰影樣式，替換為如下樣式。

第26步

最后，應(yīng)用soft round brush添加高亮點(diǎn)。將22-26步的圖層編組，命名為“Camera”。

第27步

創(chuàng)建新圖層，應(yīng)用鋼筆工具并使用描邊（顏色#b7b7b7，畫筆大小2px），繪制如下所示圖形。

第28步

創(chuàng)建新圖層，選擇圓角矩形工具，將圓角半徑設(shè)置為10px，繪制一個(gè)非常小的圓角矩形。填充顏色為#000000，應(yīng)用如下樣式。

第29步

復(fù)制上面的小圓角矩形，并將其置于對(duì)應(yīng)的位置。最后，在左邊添加logo。如下圖所示。

第30步

應(yīng)用與上面相同的樣式，繪制兩個(gè)小圓圈（顏色#000000），并做相應(yīng)的標(biāo)注。如下圖所示。

第31步

將上面的圖層編組，命名為“Lower parts”。然后建立一個(gè)新圖層，繪制一個(gè)較大的圓圈，將填充值設(shè)為0，應(yīng)用如下所示的樣式。

第32步

用一個(gè)房子的圖標(biāo)裝飾上面繪制的圓圈（這個(gè)圓圈實(shí)際上是Home鍵，房子圖標(biāo)可以從網(wǎng)上找到），并在圖標(biāo)下面做標(biāo)注。

第33步

復(fù)制第三十一步中的圓圈（保持填充值為0），清除已有樣式，添加如下所示樣式。

第34步

將31-33步的圖層編組，命名為“Home”。然后創(chuàng)建新圖層，繪制一個(gè)小的正圓，填充顏色為#deeodf，并應(yīng)用如下所示的樣式。

第35步

復(fù)制上面的圓圈兩次，并將填充值都設(shè)為0，清除所有已有樣式。然后對(duì)復(fù)制的第一個(gè)圖層添加如下第一幅圖所示的樣式，復(fù)制的第二個(gè)圖層添加下面第二幅圖所示樣式。

第36步

在上面的圓圈中添加I/O圖標(biāo)，顏色為#d1200e。并在下方添加文本。如圖。

第37步

創(chuàng)建新圖層，應(yīng)用圓角矩形工具（圓角半徑為6px），繪制一個(gè)小的圓角矩形，填充顏色為#dee0df，重復(fù)步驟34-35。

第38步

添加裝飾（TV，顏色:#079389，字體：Arial/Hekvetica，字號(hào)：3.5pt）。并在下方添加文本。如圖。

第39步

增加整體高光。打完收工。

總結(jié)

教程至此結(jié)束。你可以增加一些很酷的背景讓你的游戲手柄看上去更好，希望你會(huì)喜歡這篇文章。