photoshop教程

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

時間:2011-03-20 20:32來源:未知 作者:bbs.16xx8.com 點擊:
作者:佚名 出處:飛魚的聲納 作者:Wantfee 本教程主要使用Photoshop設(shè)計一款購物網(wǎng)站的購買按鈕,在網(wǎng)頁的界面設(shè)計中,按鈕的設(shè)計是我們最常遇到的問題,此類的設(shè)計不是很難,只要是通過圖層樣式來實現(xiàn)質(zhì)感和立體感,加上顏色的搭配,西面就讓我們來學(xué)習(xí)一個購物網(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個像素大小,添加投影圖層樣式。

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



(責(zé)任編輯:bbs.16xx8.com)

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發(fā)表評論
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴(yán)禁發(fā)布色情、暴力、反動的言論。
評價:
表情:
用戶名: 驗證碼:點擊我更換圖片
欄目列表
百度聯(lián)盟
推薦內(nèi)容
熱點內(nèi)容