photoshop網(wǎng)頁應(yīng)用教程:制作一個(gè)簡潔干凈的按鈕

作者佚名　  出處:橘子醬是我

最終效果圖:







在這篇photoshop教程中，將教給你如何制作一個(gè)帶有反轉(zhuǎn)效果的”web2.0″風(fēng)格的簡潔干凈的按鈕效果。 同時(shí)你也會(huì)學(xué)習(xí)到應(yīng)用基礎(chǔ)CSS的技巧 (CSS 背景圖片翻轉(zhuǎn)。

在這篇教程中所示范的按鈕，靈感來源于 Campaign Monitor 的web界面.  按照下面的流程，你將學(xué)會(huì)如何制作一個(gè)類似的簡單按鈕。

最終的效果

點(diǎn)擊下面的圖片，察看demo（鼠標(biāo)滑過按鈕的時(shí)候，按鈕的顏色變成藍(lán)色）。





讓我們開始慢慢的講解如何來制作這樣的一個(gè)效果吧：

新建一個(gè)文檔

1 按鈕的尺寸是250px 寬，50px 高。畫布中要同時(shí)繪畫按鈕的原始狀態(tài)（綠色按鈕效果）和翻轉(zhuǎn)狀態(tài)（藍(lán)色按鈕鮮果），所以畫布的高度100px.





2 在畫布的垂直方向的一半的位置，拖拽一條標(biāo)尺線。如果你的畫布中，沒有標(biāo)尺，可以按住 (Ctrl + R) 調(diào)出它來。直接從標(biāo)尺中向畫布中心拖拽，就可以拖拽出一條標(biāo)尺線。





創(chuàng)建形狀

3 點(diǎn)擊圓角矩形，圓角值設(shè)為3px。





4 在畫布的上半部分，拖拽出一個(gè)圓角矩形，矩形的顏色不重要。這個(gè)矩形的尺寸應(yīng)該是 250px 寬 50px 高。





5  在圖層面板中，按住Ctlr 然后單擊該矩形圖層，創(chuàng)建一個(gè)相關(guān)選區(qū)。





6 保持選區(qū)存在狀態(tài)，創(chuàng)建一個(gè)新的圖層 (Ctrl + Alt + Shift + N). 命名為 Idle.  在新圖層中，填充選區(qū)（圓角矩形）顏色 Edit Fill (Shift + F5).





7  刪除剛才的形狀圖層。

添加一些圖層樣式

8  雙擊圖層Idle，打開圖層樣式面板。





9 添加一個(gè)漸變。雙擊漸變條打開漸變編輯的面板。 設(shè)置漸變的兩個(gè)顏色分別為 深綠色 #618926 和淺綠色 #98ba40.  移動(dòng)顏色的中點(diǎn)為 35% 的位置。














,                                           
10 添加內(nèi)陰影。 改變渲染模式為 Normal。 顏色設(shè)置為淺綠色 #c6d894 。設(shè)置透明度為 100% 。設(shè)置距離和大小值為 2px。按照下圖的設(shè)置調(diào)整。





11 添加描邊。設(shè)置大小為 1px 位置為 Inside。 設(shè)置顏色為較深的綠色#618926。按照下圖的設(shè)置調(diào)整。