在這篇photoshop教程中，將教給你如何制作一個帶有反轉(zhuǎn)效果的“web2.0”風(fēng)格的簡潔干凈的按鈕效果，同時你也會學(xué)習(xí)到應(yīng)用基礎(chǔ)css的技巧。
在這篇教程中所示范的按鈕，靈感來源于 campaign monitor 的web界面. 按照下面的流程，你將學(xué)會如何制作一個類似的簡單按鈕。
最終的效果
讓我們開始慢慢的講解如何來制作這樣的一個效果吧：
新建一個文檔
1 按鈕的尺寸是250px 寬，50px 高。畫布中要同時繪畫按鈕的原始狀態(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 點擊圓角矩形，圓角值設(shè)為3px。
|||
4 在畫布的上半部分，拖拽出一個圓角矩形，矩形的顏色不重要。這個矩形的尺寸應(yīng)該是 250px 寬 50px 高。
5 在圖層面板中，按住ctlr 然后單擊該矩形圖層，創(chuàng)建一個相關(guān)選區(qū)。
6 保持選區(qū)存在狀態(tài)，創(chuàng)建一個新的圖層 (ctrl + alt + shift + n). 命名為 idle. 在新圖層中，填充選區(qū)(圓角矩形)顏色 edit > fill (shift + f5).
7 刪除剛才的形狀圖層。
添加一些圖層樣式
8 雙擊圖層idle，打開圖層樣式面板。
|||
9 添加一個漸變。雙擊漸變條打開漸變編輯的面板。 設(shè)置漸變的兩個顏色分別為 深綠色 #618926 和淺綠色 #98ba40. 移動顏色的中點為 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圖層上，新建一個圖層，命名為 radial_gradient。改變前景色為# b8cf69。按住ctrl 單擊 idle圖層，創(chuàng)建一個圓角矩形選區(qū)。 然后切換回到radial_gradient圖層。
13 切換到漸變工具 (g). 設(shè)置漸變模式為 徑向(圓形)漸變。點擊漸變條打開漸變面板。
14 在漸變面板中，選擇 前景色-透明。確定左邊的顏色為淺綠色 #b8cf69。
15 確定圓角矩形的選區(qū)始終存在，選中的圖層為 radial_gradient。確定標(biāo)尺已經(jīng)打開，點擊漸變，從圖層頂部開始拖拽，結(jié)束點在選區(qū)往下30px的位置上。
16 調(diào)整該圖層的透明度為80% 。
|||
創(chuàng)建翻轉(zhuǎn)的按鈕
17 分別復(fù)制圖層 idle 和 radial_gradient。
18 移動這兩個復(fù)制的圖層，到畫布的下半部分。重命名這兩個圖層，idle copy 命名為 rollover ，radient_gradient layer命名為 radial_gradient_rollover 。
調(diào)整翻轉(zhuǎn)按鈕的樣式
19 我們保持所有的設(shè)置不變，只更改顏色。雙擊 rollover 圖層打開圖層樣式面板。在內(nèi)陰影里面，改變顏色為淺藍(lán)色#839dbf。在漸變疊加中，改變顏色為深藍(lán)色#0f2557 和淺藍(lán)色 #245293。最后，改變描邊的顏色為深藍(lán)色 #0f2557。
20 我們將在圖層radial_gradient_rollover上添加一個顏色疊加。雙擊該圖層打開圖層樣式面板。添加顏色疊加，設(shè)置顏色為深藍(lán)色#5c737c。
添加文字
21 在這個例子中，我們用一種簡單的字體: arial。 你可以使用任何你喜歡的字體，不過在這個例子中，建議使用粗的字體。
22 添加文字 (t)，設(shè)置字體為 arial，字體加粗 bold，字體大小為 16px, 反鋸齒效果 smooth，顏色設(shè)置為白色 (#ffffff). 在按鈕中輸入你想要的文字。
|||
給字體添加陰影
23 雙擊字體圖層打開圖層樣式面板，點擊外陰影。設(shè)置渲染模式為 正常normal, 顏色設(shè)置為深綠色 (#618926)，透明度為 100%，不要選中全局光，設(shè)置角度為 -60%, 尺寸和距離均設(shè)為 1px。
設(shè)置字體和圖層對齊
24 ctrl + 單擊圖層 idle 制作選區(qū)。確定字體圖層是選中的圖層。
25 點擊 圖層>將圖層與選區(qū)對齊> 垂直對齊，設(shè)置文字垂直對齊。
26 點擊 圖層>將圖層與選區(qū)對齊> 水平對齊，設(shè)置文字水平對齊。
復(fù)制字體圖層為翻轉(zhuǎn)按鈕
27 保持字體的圖層始終未選中狀態(tài)，單擊該圖層然后選擇 復(fù)制圖層 。移動到下半個按鈕上面。
28 ctrl + 單擊 rollover圖層，創(chuàng)建一個選區(qū)。按照25/26步驟，進(jìn)行字體和選區(qū)的對齊。
改變字體圖層樣式
29 雙擊字體圖層，打開圖層樣式圖層。保持其他設(shè)置不變，更改顏色為深藍(lán)色 (#0f2557)。
好了，photoshop部分的東西就做完了!
如果你一直按照步驟來做，那么你的最后的效果應(yīng)該和下圖一樣。
|||
現(xiàn)在開始學(xué)習(xí) html 和 css 的部分。
30 保存圖片為 campaign-monitor-button.png.
31 創(chuàng)建一個 html 文檔。和圖片campaign-monitor-button.png 放在同一個文件夾中。
html的部分
基本的工作原理很簡單，一個鏈接在一個一個段落標(biāo)記。我選擇用一個段落標(biāo)記<p>作為包裝/容器，因為我覺得請<a>內(nèi)容不應(yīng)獨立。如果沒有<p>它將不會作用。
css的部分
css的部分就是圖片翻轉(zhuǎn)的技巧。
最后看一下效果：
[ctrl+a 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
新聞熱點
疑難解答
