Photoshop繪制質感的立體按鈕的處理教程

　　前言：做網頁效果圖時經常遇到要做按鈕，為了讓效果更逼真，讓老板更直觀看到結果，肯定不會放過按鈕這個細節。當然，如果要自定義更讓人有點擊欲望的按鈕，那就直接用背景圖吧。這里僅討論不加修飾，系統默認狀態下的按鈕效果。

　　正文：

　　以我的習慣，拿到一個東西會先把玩，然后拆解，最后重組，這樣，才會讓自己覺得摸透了這個東西。

　　對于按鈕也一樣。

　　第一步，認識按鈕。按鈕有三種狀態，正常（normal），鼠標懸浮（hover），按下（active）。

　　第二步，拆解分析。先對懸浮時的狀態分析吧。

　　主要元素有：藍色邊框，淺色內發光，內部漸變，左右兩側的光澤。從大的開始：

　　①內部漸變，主要是兩種顏色，解決方案有兩種，一種是變化不大的漸變，加上柔光模式的內陰影，但其缺點是，內陰影的覆蓋度是固定的，按鈕高度變化時不會跟著變化。另一種方案是兩種主色的漸變，中間交界可以保持在高度50%的位置，也就是中間位置。

　　②藍色邊框，這個簡單，一個內描邊解決掉。

　　③淺色內發光，直接使用內發光，降低擴散度的方法是把阻塞的滑塊往右拉。

　　④光澤，角度為0的光澤樣式就可以了。

　　以上四種圖層樣式組合，就可以搞定這個按鈕了。使用時很簡單，拷貝圖層樣式，粘貼圖層樣式即可。

　　對于正常狀態下的按鈕樣式，跟懸浮狀態比較可以發現，少了色相，這個可以通過添加一個灰色的效果來實現，方法是增加一個混合模式為“飽和度”的灰色顏色疊加，然后再修改邊框顏色，去掉光澤樣式，再微調下內部的大漸變就可以了。

　　按下時的狀態，則是增加一個內陰影的樣式，角度無所謂，把距離調為0就行，調節陰影大小而已。

　　第三步，重組。

【Photoshop繪制質感的立體按鈕的處理教程】相關文章：