- 相關(guān)推薦
Photoshop繪制質(zhì)感的立體按鈕的處理教程
前言：做網(wǎng)頁效果圖時(shí)經(jīng)常遇到要做按鈕，為了讓效果更逼真，讓老板更直觀看到結(jié)果，肯定不會(huì)放過按鈕這個(gè)細(xì)節(jié)。當(dāng)然，如果要自定義更讓人有點(diǎn)擊欲望的按鈕，那就直接用背景圖吧。這里僅討論不加修飾，系統(tǒng)默認(rèn)狀態(tài)下的按鈕效果。
正文：
以我的習(xí)慣，拿到一個(gè)東西會(huì)先把玩，然后拆解，最后重組，這樣，才會(huì)讓自己覺得摸透了這個(gè)東西。
對(duì)于按鈕也一樣。
第一步，認(rèn)識(shí)按鈕。按鈕有三種狀態(tài)，正常（normal），鼠標(biāo)懸�。╤over），按下（active）。
第二步，拆解分析。先對(duì)懸浮時(shí)的狀態(tài)分析吧。
主要元素有：藍(lán)色邊框，淺色內(nèi)發(fā)光，內(nèi)部漸變，左右兩側(cè)的光澤。從大的開始：
�、賰�(nèi)部漸變，主要是兩種顏色，解決方案有兩種，一種是變化不大的漸變，加上柔光模式的內(nèi)陰影，但其缺點(diǎn)是，內(nèi)陰影的覆蓋度是固定的，按鈕高度變化時(shí)不會(huì)跟著變化。另一種方案是兩種主色的漸變，中間交界可以保持在高度50%的位置，也就是中間位置。
�、谒{(lán)色邊框，這個(gè)簡(jiǎn)單，一個(gè)內(nèi)描邊解決掉。
③淺色內(nèi)發(fā)光，直接使用內(nèi)發(fā)光，降低擴(kuò)散度的方法是把阻塞的滑塊往右拉。
�、芄鉂�，角度為0的光澤樣式就可以了。
以上四種圖層樣式組合，就可以搞定這個(gè)按鈕了。使用時(shí)很簡(jiǎn)單，拷貝圖層樣式，粘貼圖層樣式即可。
對(duì)于正常狀態(tài)下的按鈕樣式，跟懸浮狀態(tài)比較可以發(fā)現(xiàn)，少了色相，這個(gè)可以通過添加一個(gè)灰色的效果來實(shí)現(xiàn)，方法是增加一個(gè)混合模式為“飽和度”的灰色顏色疊加，然后再修改邊框顏色，去掉光澤樣式，再微調(diào)下內(nèi)部的大漸變就可以了。
按下時(shí)的狀態(tài)，則是增加一個(gè)內(nèi)陰影的樣式，角度無所謂，把距離調(diào)為0就行，調(diào)節(jié)陰影大小而已。
第三步，重組。
【Photoshop繪制質(zhì)感的立體按鈕的處理教程】相關(guān)文章：
使用PhotoShop制作斜紋質(zhì)感網(wǎng)頁導(dǎo)航按鈕教程06-03
PhotoShop打造立體質(zhì)感磚塊UI圖標(biāo)教程07-07
Photoshop鼻子繪制教程09-03
繪制星空,photoshop教程10-23
繪制打火,photoshop教程10-02
制作photoshop金屬質(zhì)感按鈕的方法10-30
photoshop繪制酒杯教程參考09-25