Photoshop十步打造質(zhì)感網(wǎng)站按鈕教程

本Photoshop實(shí)例教程為大家?guī)砭W(wǎng)站按鈕制作教程，制作過程中主要應(yīng)用漸變、蒙板、鋼筆、圖層樣式等工具，希望大家喜歡！先看效果圖：

效果圖

　　以下是制作步驟：

　　1、執(zhí)行菜單：“文件”／“新建”（快捷鍵Ctrl+N），彈出新建對話框，設(shè)置名稱：網(wǎng)站按鈕，寬度：640像素，高度：480像素，分辨率：72像素／英寸，顏色模式：RGB顏色、8位，背景內(nèi)容：白色，設(shè)置完畢后單擊確定按鈕，如圖1所示。

圖1

　　2、在圖層控制面板擊新建圖層按鈕，新建一個(gè)“背景”，選擇工具箱漸變工具（快捷鍵Ｇ），在工具選項(xiàng)欄中設(shè)置為線性漸變，然后點(diǎn)按可編輯漸變，彈出漸變編輯器。雙擊如圖2中的A處，設(shè)置色彩RGB分別為35、137、157,再雙擊圖2中所示的B處，設(shè)置色彩RGB分別為52、173、215，再雙擊圖3中所示的C處，設(shè)置色彩RGB分別為30、115、136，單擊確定按鈕，如圖2所示。效果圖如圖3所示。

圖2

圖3

　　3、在圖層面板上單擊創(chuàng)建新圖層按鈕 ，新建一個(gè)圖層2，再工具箱選擇圓角矩形工具，并按住鍵盤中Shift不放在工作區(qū)拖出一個(gè)圓角矩形，設(shè)置前景色RGB值為160，229、246，按鍵盤快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū)，按鍵盤快捷鍵Ctrl+D取消選區(qū)，如圖4所示。

圖4

　　4、雙單擊圖層2進(jìn)入到圖層樣式，分別勾選投影、內(nèi)陰影、內(nèi)發(fā)光、斜面和浮雕、等高線、漸變疊加、光澤選項(xiàng)。設(shè)置幾項(xiàng)的數(shù)值參考圖5、6、7、8、9、10、11、12、13。效果圖如圖14所示。

圖5

圖6

圖7

圖8

圖9

圖10

圖11

圖12

圖13

圖14

5、在圖層面板上單擊創(chuàng)建新圖層按鈕 ，新建一個(gè)圖層3，再用鋼筆工具，畫出無規(guī)則的形狀，在工具箱中選擇設(shè)置前景色，設(shè)置前景色的顏色為白色，填充給無規(guī)則的形狀，按鍵盤快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū)，接著按按鍵盤快捷鍵Alt+Delete填充，按鍵盤快捷鍵Ctrl+D取消選區(qū)，如圖15所示。

圖15

　　6、雙單擊圖層3進(jìn)入到圖層樣式，勾選顏色疊加選項(xiàng)。設(shè)置數(shù)值參考圖16、17。效果圖如圖18所示。

圖16

圖17

圖18

　　7、在工具箱中選擇移動工具 ，按住鍵盤的Alt鍵不放，選擇圖層3，按鼠標(biāo)左鍵拖出4個(gè)圖層3，并位置與合并圖層（Ctrl+E）成一個(gè)圖層3副本4，選擇圖層3副本4按住鍵盤的Alt鍵不放，按鼠標(biāo)左鍵拖出一個(gè)“圖層3副本5”，并添加一個(gè)蒙板給圖層3副本5，在工具箱中選擇漸變工具，給圖層3副本5添加一個(gè)漸變，如圖19所示。調(diào)整后的效果圖如圖20所示。

圖19 

圖20

　　8、在工具箱中選擇文字工具，分別在幾個(gè)按鈕中輸入漢字設(shè)計(jì)、網(wǎng)站、游戲、編程、多媒體，設(shè)置文字屬性圖21，如圖21所示。

圖21

　　9、在工具箱中選擇文字工具，分別在中輸入漢字太平洋電腦網(wǎng)為你解決的需求、稿件著作權(quán)說明、投稿方式郵箱、稿件要求、稿費(fèi)標(biāo)準(zhǔn)與結(jié)算，并調(diào)整字體的大小與位置，設(shè)置文字屬性圖22，如圖22所示

圖22

　　10、在圖層面板上單擊創(chuàng)建新圖層按鈕 ，新建一個(gè)圖層2，再工具箱選擇矩形工具，并按住鍵盤中Shift不放在工作區(qū)拖出一個(gè)矩形，設(shè)置前景色白色，按鍵盤快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū)，并執(zhí)行菜單：“編輯”／“描邊”的對話框，設(shè)置描邊為1PX按鍵盤快捷鍵Ctrl+D取消選區(qū)，選擇圖層2按住鍵盤的Ａlt鍵不放，按鼠標(biāo)左鍵拖出三個(gè)“圖層2副本”，調(diào)整的效果，也是最終效果。如圖23所示。如圖24所示。效果圖如圖25所示。

圖23 

圖24

圖25