Photoshop十步打造質(zhì)感網(wǎng)站按鈕教程
本Photoshop實(shí)例教程為大家?guī)?lái)網(wǎng)站按鈕制作教程,制作過(guò)程中主要應(yīng)用漸變、蒙板、鋼筆、圖層樣式等工具,希望大家喜歡!先看效果圖:
效果圖
以下是制作步驟:
1、執(zhí)行菜單:“文件”/“新建”(快捷鍵Ctrl+N),彈出新建對(duì)話框,設(shè)置名稱:網(wǎng)站按鈕,寬度:640像素,高度:480像素,分辨率:72像素/英寸,顏色模式:RGB顏色、8位,背景內(nèi)容:白色,設(shè)置完畢后單擊確定按鈕,如圖1所示。
圖1
2、在圖層控制面板擊新建圖層按鈕,新建一個(gè)“背景”,選擇工具箱漸變工具(快捷鍵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,再工具箱選擇圓角矩形工具,并按住鍵盤(pán)中Shift不放在工作區(qū)拖出一個(gè)圓角矩形,設(shè)置前景色RGB值為160,229、246,按鍵盤(pán)快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū),按鍵盤(pán)快捷鍵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,再用鋼筆工具,畫(huà)出無(wú)規(guī)則的形狀,在工具箱中選擇設(shè)置前景色,設(shè)置前景色的顏色為白色,填充給無(wú)規(guī)則的形狀,按鍵盤(pán)快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū),接著按按鍵盤(pán)快捷鍵Alt+Delete填充,按鍵盤(pán)快捷鍵Ctrl+D取消選區(qū),如圖15所示。
圖15
6、雙單擊圖層3進(jìn)入到圖層樣式,勾選顏色疊加選項(xiàng)。設(shè)置數(shù)值參考圖16、17。效果圖如圖18所示。
圖16
圖17
圖18
7、在工具箱中選擇移動(dòng)工具 ,按住鍵盤(pán)的Alt鍵不放,選擇圖層3,按鼠標(biāo)左鍵拖出4個(gè)圖層3,并位置與合并圖層(Ctrl+E)成一個(gè)圖層3副本4,選擇圖層3副本4按住鍵盤(pán)的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)說(shuō)明、投稿方式郵箱、稿件要求、稿費(fèi)標(biāo)準(zhǔn)與結(jié)算,并調(diào)整字體的大小與位置,設(shè)置文字屬性圖22,如圖22所示
圖22
10、在圖層面板上單擊創(chuàng)建新圖層按鈕 ,新建一個(gè)圖層2,再工具箱選擇矩形工具,并按住鍵盤(pán)中Shift不放在工作區(qū)拖出一個(gè)矩形,設(shè)置前景色白色,按鍵盤(pán)快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū),并執(zhí)行菜單:“編輯”/“描邊”的對(duì)話框,設(shè)置描邊為1PX按鍵盤(pán)快捷鍵Ctrl+D取消選區(qū),選擇圖層2按住鍵盤(pán)的Alt鍵不放,按鼠標(biāo)左鍵拖出三個(gè)“圖層2副本”,調(diào)整的效果,也是最終效果。如圖23所示。如圖24所示。效果圖如圖25所示。
圖23
圖24
圖25
學(xué)習(xí) · 提示
相關(guān)教程
- 圖標(biāo)設(shè)計(jì),用PS制作一款簡(jiǎn)單的按鈕圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS制作精美的辦公室圖標(biāo)
- 描邊圖標(biāo),用PS制作萌萌噠小黃人卡通圖案
- 圖標(biāo)制作,制作形象的手指指紋圖標(biāo)
- 描邊圖標(biāo),用PS繪制可愛(ài)的卡通的笑臉描邊圖標(biāo)
- 按鈕教程,6步制作按鈕視頻教程
- 按鈕教程,簡(jiǎn)易質(zhì)感按鈕制作
- 圖標(biāo)制作,用圖層樣式制作旋轉(zhuǎn)按鈕
- 開(kāi)關(guān)按鈕,用PS制作漸變風(fēng)格的音樂(lè)播放圖標(biāo)
- 圖標(biāo)制作,用Photoshop設(shè)計(jì)不銹鋼主題的圖標(biāo)按鈕
推薦教程
- ps快速設(shè)計(jì)短信圖標(biāo)教程
- 用ps制作高光橘色RSS按鈕
- 塑料按鈕的制作方法
- Photoshop打造矢量風(fēng)格的箭頭點(diǎn)擊按鈕
- 用ps制作網(wǎng)站導(dǎo)航按鈕
- 唱片機(jī)圖標(biāo),設(shè)計(jì)一枚唱片主題圖標(biāo)實(shí)例
- 圖標(biāo)設(shè)計(jì),通過(guò)PS制作設(shè)計(jì)質(zhì)感水晶圖標(biāo)
- 圖標(biāo)制作,用PS設(shè)計(jì)一個(gè)透明的雪景圖標(biāo)
- photoshop制作網(wǎng)頁(yè)用水晶按鈕
- ps網(wǎng)頁(yè)開(kāi)關(guān)按鈕