Photoshop設(shè)計一款購物網(wǎng)站的購買按鈕

作者:佚名　  出處:飛魚的聲納 作者:Wantfee 本教程主要使用Photoshop設(shè)計一款購物網(wǎng)站的購買按鈕，在網(wǎng)頁的界面設(shè)計中，按鈕的設(shè)計是我們最常遇到的問題，此類的設(shè)計不是很難，只要是通過圖層樣式來實現(xiàn)質(zhì)感和立體感，加上顏色的搭配，西面就讓我們來學(xué)習(xí)一個購物網(wǎng)站的按鈕制作。

先看看效果圖

第一步

新建一個文檔(Ctrl+N)，命名為button，大小設(shè)置為640×480，其余選項留作默認(rèn)。

第二步

在圖層面板中新建一個圖層，選擇圓角矩形工具(U)，半徑設(shè)置為80像素，畫出一個矩形。

第三步

在圖層面板中雙擊”layer 1″，打開圖層樣式對話框。勾選漸變疊加(Gradient Overlay)，在漸變疊加面板上點擊漸變色帶，分別選擇顏色#1a3a69和#2c62b2。

勾選描邊(Stroke),顏色#0b1b58，2個像素。

接下來，添加投影(Drop Shadow)，混合模式正常，不透明度14%，角度90度，距離5個像素，大小2個像素。

最后得到的效果如下圖。這樣，通過添加圖層樣式，按鈕的基本效果已經(jīng)出來了。接下來我們開始添加鎖型圖案和文字。

第四步

將上圖的鎖型圖片另存到你的電腦中，在Photoshop中打開，再拷貝粘貼到文檔中，放大圖片，選擇橡皮工具，狀態(tài)為方塊(Block)，將部分像素擦除，把鎖上的鎖變成打開的鎖。

選擇鎖子圖層，使用自由變換命令(Ctrl+T)，同時按住Shift鍵，調(diào)整鎖子大小，直到合適。調(diào)整圖片位置到按鈕的居中位置。在圖層面板中雙擊鎖子圖層，打開圖層樣式對話框，應(yīng)用如下圖層樣式：

使用文字工具(T)，鍵出”Buy It”文字，字體選擇”Arial”，加粗，顏色#E3F7FF，雙擊文字圖層，添加如下投影效果：

最終效果如下圖：

第五步

添加價格標(biāo)簽。新建圖層，使用鋼筆工具畫一個標(biāo)簽形狀。你可以同時按住shift鍵來確保路徑橫平豎直。之后使用直接選擇工具(A)，配合上下左右方向箭頭將路徑形狀調(diào)整到合適。在路徑上點擊右鍵選擇填充路徑(Fill Path)，給路徑填充前景色，再選擇刪除路徑(Delete Path)命令，將路徑刪除掉，這時候留在圖層上的就只有一個標(biāo)簽形狀了(如下圖)。

選擇橢圓形選取工具(M)，樣式選擇固定大小，寬度7個像素，高度7個像素，在標(biāo)簽上做一個圓形的選區(qū)。調(diào)整選區(qū)的位置至標(biāo)簽的正中間，點擊刪除鍵(Delete)，將圓形部分的像素刪除，這樣，標(biāo)簽上的孔洞就打好了。

接下來給標(biāo)簽圖層應(yīng)用如下圖層樣式：

添加文字，顏色白色，字體”Arial”，加粗，12個像素大小，添加投影圖層樣式。

至此，整個的按鈕就制作完成了。