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

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

最終效果圖:







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

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

最終的效果

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





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

新建一個(gè)文檔

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





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





創(chuàng)建形狀

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





4 在畫(huà)布的上半部分，拖拽出一個(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，打開(kāi)圖層樣式面板。





9 添加一個(gè)漸變。雙擊漸變條打開(kāi)漸變編輯的面板。 設(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)整。





現(xiàn)在已經(jīng)和最終的效果很像了。





添加徑向（圓形）漸變

12 在Idle圖層上，新建一個(gè)圖層，命名為 Radial_Gradient。改變前景色為# b8cf69。按住ctrl 單擊 Idle圖層，創(chuàng)建一個(gè)圓角矩形選區(qū)。 然后切換回到Radial_Gradient圖層。





13 切換到漸變工具 (G).  設(shè)置漸變模式為 徑向(圓形)漸變。點(diǎn)擊漸變條打開(kāi)漸變面板。





14 在漸變面板中，選擇 前景色-透明。確定左邊的顏色為淺綠色 #b8cf69。





15 確定圓角矩形的選區(qū)始終存在，選中的圖層為 Radial_Gradient。確定標(biāo)尺已經(jīng)打開(kāi)，點(diǎn)擊漸變，從圖層頂部開(kāi)始拖拽，結(jié)束點(diǎn)在選區(qū)往下30px的位置上。





16 調(diào)整該圖層的透明度為80% 。





創(chuàng)建翻轉(zhuǎn)的按鈕

17  分別復(fù)制圖層 Idle 和 Radial_Gradient。

18 移動(dòng)這兩個(gè)復(fù)制的圖層，到畫(huà)布的下半部分。重命名這兩個(gè)圖層，Idle copy 命名為 Rollover ，Radient_Gradient layer命名為 Radial_Gradient_Rollover 。





調(diào)整翻轉(zhuǎn)按鈕的樣式

19 我們保持所有的設(shè)置不變，只更改顏色。雙擊 Rollover 圖層打開(kāi)圖層樣式面板。在內(nèi)陰影里面，改變顏色為淺藍(lán)色#839dbf。在漸變疊加中，改變顏色為深藍(lán)色#0f2557 和淺藍(lán)色 #245293。最后，改變描邊的顏色為深藍(lán)色 #0f2557。






,                                           
20 我們將在圖層Radial_Gradient_Rollover上添加一個(gè)顏色疊加。雙擊該圖層打開(kāi)圖層樣式面板。添加顏色疊加，設(shè)置顏色為深藍(lán)色#5c737c。





添加文字

21 在這個(gè)例子中，我們用一種簡(jiǎn)單的字體: Arial。 你可以使用任何你喜歡的字體，不過(guò)在這個(gè)例子中，建議使用粗的字體。

22 添加文字 (T)，設(shè)置字體為 Arial，字體加粗 Bold，字體大小為 16px, 反鋸齒效果 Smooth，顏色設(shè)置為白色 (#ffffff). 在按鈕中輸入你想要的文字。





給字體添加陰影

23 雙擊字體圖層打開(kāi)圖層樣式面板，點(diǎn)擊外陰影。設(shè)置渲染模式為 正常Normal, 顏色設(shè)置為深綠色 (#618926)，透明度為 100%，不要選中全局光，設(shè)置角度為 -60%,  尺寸和距離均設(shè)為 1px。





設(shè)置字體和圖層對(duì)齊

24 Ctrl + 單擊圖層 Idle 制作選區(qū)。確定字體圖層是選中的圖層。

25 點(diǎn)擊 圖層 將圖層與選區(qū)對(duì)齊 垂直對(duì)齊，設(shè)置文字垂直對(duì)齊。

26 點(diǎn)擊 圖層 將圖層與選區(qū)對(duì)齊 水平對(duì)齊，設(shè)置文字水平對(duì)齊。





復(fù)制字體圖層為翻轉(zhuǎn)按鈕

27 保持字體的圖層始終未選中狀態(tài)，單擊該圖層然后選擇 復(fù)制圖層 。移動(dòng)到下半個(gè)按鈕上面。

28 Ctrl + 單擊 Rollover圖層，創(chuàng)建一個(gè)選區(qū)。按照25/26步驟，進(jìn)行字體和選區(qū)的對(duì)齊。





改變字體圖層樣式

29 雙擊字體圖層，打開(kāi)圖層樣式圖層。保持其他設(shè)置不變，更改顏色為深藍(lán)色 (#0f2557)。

好了，photoshop部分的東西就做完了!

如果你一直按照步驟來(lái)做，那么你的最后的效果應(yīng)該和下圖一樣。





現(xiàn)在開(kāi)始學(xué)習(xí) HTML 和 CSS 的部分。

30 保存圖片為 campaign-monitor-button.png.

31 創(chuàng)建一個(gè) HTML 文檔。和圖片campaign-monitor-button.png 放在同一個(gè)文件夾中。

HTML的部分
基本的工作原理很簡(jiǎn)單，一個(gè)鏈接在一個(gè)一個(gè)段落標(biāo)記。我選擇用一個(gè)段落標(biāo)記 p 作為包裝/容器，因?yàn)槲矣X(jué)得請(qǐng) a 內(nèi)容不應(yīng)獨(dú)立。如果沒(méi)有 p 它將不會(huì)作用。

p a href="#null" Click this button /a /p
CSS的部分
css的部分就是圖片翻轉(zhuǎn)的技巧。

.button {

        display:block;
        width:250px;
        height:50px;
        text-indent:-9999px;
}
.button a {
        display:block;
        width:100%;
        height:100%;
        background:transparent url(campaign-monitor-button.png) no-repeat top left;
        outline:none;
}
.button a:hover {
        background-position:0 -50px;
}