立體感的水晶按鈕

1、水晶按鈕：下面我們放大來(lái)看這個(gè)水晶按鈕由哪些結(jié)構(gòu)組成。按鈕構(gòu)成圖：按鈕橫截面光線圖：1、任何光滑的東西都會(huì)產(chǎn)生鏡面反射，水晶按鈕當(dāng)然不會(huì)例外。2、要讓按鈕浮出畫(huà)布，陰影是少不了的。有了正確的陰影，人們感覺(jué)才會(huì)更逼真。3、這個(gè)水晶按鈕是紫色的，但不是平板、呆板的平紫色，而是一個(gè)從紫紅到粉紅的漸變色，為什么會(huì)這樣？因?yàn)樗峭该鞯?，光線從上到下投射下來(lái)的時(shí)候，由于下部的角度問(wèn)題，產(chǎn)生的反射越來(lái)越多（這部分可參考物理學(xué)知識(shí)），所以下面的顏色會(huì)較淺。（注：我們假設(shè)光源在正上方）4、按鈕是扁圓的，到了邊緣，這個(gè)曲度發(fā)生較大的變化（大家可以想象一下這里的橫截面），因此邊緣會(huì)變暗，于是會(huì)有這一點(diǎn)點(diǎn)的陰影。5、

2、原理如4，但這里的陰影更大，為什么？大家想想一個(gè)玻璃杯在單光源照射下的情景：如果不是有反射的話(huà)，整個(gè)杯子就會(huì)在背景中消失，對(duì)不對(duì)？因?yàn)樗峭该鞯?，光線在上面不留痕跡（除了反光），因此這里為什么暗，是因?yàn)樗峭该鞯?，把后面的陰影也透射出?lái)了。這里要說(shuō)明一點(diǎn)，如果要把現(xiàn)實(shí)中的水晶按鈕的光線反射等等完全搬過(guò)來(lái)是行不通的，不是不能做到，而是對(duì)于這樣的一個(gè)小按鈕成本太大了。我們只需要稍稍模擬得更接近就行了，因此又有一個(gè)題外的原則，對(duì)效果，要適當(dāng)取舍。思考：如何把這些部分畫(huà)出來(lái)，并且組合起來(lái)？ 部分1：高光讓我們產(chǎn)生這個(gè)物體很光滑的感覺(jué)。但要實(shí)現(xiàn)很容易，我們畫(huà)一個(gè)這種形狀的白色塊，然后以一定的透明度疊加在

3、下方的按鈕實(shí)體上面就行，這個(gè)問(wèn)題解決了，我們需要的是一個(gè)新圖層，一個(gè)以白色填充的圓角長(zhǎng)矩形。具體步驟先不急，我們先要知道我們要些什么。部分5：對(duì)于下面的大圓角矩形，上部以及邊緣會(huì)發(fā)暗。如何才能讓這個(gè)大圓角矩形的上部以及邊緣有點(diǎn)暗呢？這里列舉兩種做法。一種是用羽化的選區(qū)把按鈕矩形的邊緣變暗。變暗有什么好辦法？色相/飽和度工具，此法用在這里有點(diǎn)小題大作，此外這種方法是一次性的，不能再調(diào)整的，也就是說(shuō)當(dāng)你確認(rèn)修改后，下次要改回來(lái)可就不那么容易了。那么我們選擇第二種做法，圖層樣式。記得圖層樣式里面有一個(gè)“內(nèi)陰影”嗎？對(duì)，內(nèi)陰影 內(nèi)陰影除了能干內(nèi)陰影這件事之外，也能讓邊緣變暗我們只要讓陰影在邊緣停留就好

4、了嘛。看圖：看看第三個(gè)就是，參數(shù)怎么調(diào)整？這里先不說(shuō)，大家可以根據(jù)上面的那個(gè)圖自己調(diào)整一下方向、距離與大小，試試看。這里還有一個(gè)值得注意的是，為什么用內(nèi)陰影更好，是因?yàn)榇蠹野l(fā)現(xiàn)沒(méi)有，雖然說(shuō)第三個(gè)內(nèi)陰影效果是邊緣變暗，但這個(gè)暗又是上下不同的，上面的陰影寬些，下面的陰影窄些，這正是第5部分需要的效果。內(nèi)陰影是有方向與距離控制的，因此我們可以把那個(gè)陰影調(diào)節(jié)得上寬下窄。這就是我們選擇內(nèi)陰影樣式的理由。有了這種特殊的陰影，按鈕會(huì)產(chǎn)生一定的立體感了。部分4：這里還有一個(gè)較窄的、細(xì)細(xì)的邊緣變暗。因?yàn)槲覀儎倓傄呀?jīng)采用了內(nèi)陰影來(lái)制作按鈕的立體感，難道再增加一個(gè)內(nèi)陰影效果嗎？PS里面不允許說(shuō)一個(gè)圖層加幾個(gè)同樣類(lèi)型

5、的樣式。那我們要換一下口味了。這個(gè)較黑較細(xì)的邊緣，應(yīng)該對(duì)整個(gè)按鈕都是均勻的。整個(gè)按鈕具有變暗的模糊邊緣用色相/飽和度工具當(dāng)然可行，但不能事后調(diào)整還是用樣式吧，什么樣式呢，內(nèi)發(fā)光。內(nèi)發(fā)光不僅能發(fā)“亮”光，也能發(fā)“暗”光?？磮D：第三個(gè)色快產(chǎn)生了邊緣變暗的效果，如何做到的呢？看看具體的參數(shù)設(shè)置：對(duì)，混合模式發(fā)生了變化，原本系統(tǒng)默認(rèn)的是“濾色”，現(xiàn)在我們把它改成“正?！?，當(dāng)然用“正片疊底”也是可以，但用正常我們可調(diào)整的就更多。我們選取一種比原來(lái)的桔色暗些的顏色作為“暗”光，因此最后出來(lái)了這種效果。部分2，3：部分2就是簡(jiǎn)單的陰影樣式了，沒(méi)什么好說(shuō)的；部分3就是一個(gè)漸變，樣式里也有漸變覆蓋，輕松做到。這

6、里都略過(guò)。好，至此，是我們應(yīng)該組合這些效果的時(shí)候了?？磮D：大家注意到我原本的色塊是綠色的沒(méi)有？因?yàn)橛辛藵u變疊加，原來(lái)用什么顏色都無(wú)所謂。我這里一開(kāi)始就是亂選了一種顏色填充圓角矩形，反正到后面都能調(diào)整，方便得很反思一下剛剛得步驟與結(jié)構(gòu)，究竟是那些步驟讓我們產(chǎn)生了按鈕得立體感？投影樣式能讓物體浮出畫(huà)布；內(nèi)陰影樣式能讓物體產(chǎn)生玻璃般的透明立體感；內(nèi)發(fā)光能讓玻璃的邊緣更加真實(shí)（我們感覺(jué)到這個(gè)按鈕的橫界面下邊緣必定是圓滑的）；漸變疊加樣式能讓按鈕的反光更為真實(shí)，也讓整個(gè)按鈕的色彩層次感更豐富，不死板；思考了這些以后，如果要做別的按鈕可以嗎？我要怎么產(chǎn)生立體感呢？金屬的和玻璃又有什么相同和不同之處呢？還有

7、其他的樣式，比如斜面與浮雕、光澤能做些什么嗎？這些在我接下來(lái)的后面說(shuō)金屬立體感的時(shí)候就會(huì)說(shuō)到，但在此之前，大家都可以先自己思考一下。好了，我們先把這個(gè)按鈕完善一下吧?；镜膱D層樣式已經(jīng)做好，我們以后再要做這種按鈕可就方便了?？磮D：看，各種形狀都行，只要我們復(fù)制、粘貼圖層樣式。然后大家注意到樣式產(chǎn)生了立體感與按鈕的折射與陰影，但高光還是要自己做的。上圖中圓形按鈕與長(zhǎng)圓角按鈕就加了高光，高光怎么做，已經(jīng)不用我再補(bǔ)充了吧。但有個(gè)東西需要提醒，就是高光也有層次感，注意看下圖：左邊是平色不透明度為100的白色快，當(dāng)然不像高光了。右邊的就不同，白色塊是透明的，而且有上下漸變的變化。這里用的辦法是為高光加一

8、個(gè)蒙版，然后在蒙版里使用黑白漸變，使得白色塊的不透明度降低并且產(chǎn)生上下漸變的層次變化，更為逼真。下面我們?cè)侔堰@個(gè)按鈕變得更完美些吧。既然是水晶按鈕，那就是透明的。如果我們?cè)诘紫聣|一層網(wǎng)格，那就應(yīng)該會(huì)透出一些來(lái)?？磮D，我們?cè)诘紫录由暇W(wǎng)格。這里有兩個(gè)同樣的按鈕，都不透明。下面我們要把下面那個(gè)水晶按鈕變得透明。首先我們把按鈕的混合模式改成“柔光”，柔光能讓我們的按鈕以一種透明模式覆蓋在圖案上，但又能保留陰影與立體感。但要讓它透明，還要花點(diǎn)小功夫：首先要想它為什么原來(lái)不透明？是漸變疊加那里，它是一個(gè)不透明的漸變色，于是讓按鈕不透明了。打開(kāi)樣式的漸變疊加對(duì)話(huà)框，看看參數(shù)有什么可變化的：對(duì)，有個(gè)不透明性。

9、原來(lái)是100，我們下降到56看看效果如何？果然，整個(gè)按鈕透明了。這個(gè)時(shí)候有人會(huì)問(wèn)，為什么不把那個(gè)按鈕層全層下降不透明度呢？我們來(lái)看看比較好了。整個(gè)圖層的不透明度下降后，的確是透明了，但邊緣也模糊了，讓人覺(jué)得立體感就沒(méi)有了。原因就在于那些產(chǎn)生立體感的樣式：內(nèi)陰影、內(nèi)發(fā)光、陰影也一并透明了，因此效果就下降了。我們看第二行第一個(gè)按鈕，是有顏色的水晶按鈕，立體感仍在。把漸變樣式變成完全透明又如何呢？這里還要記住，那個(gè)內(nèi)陰影是有顏色的，我們把漸變色去掉之后，也要把內(nèi)陰影變成灰色（灰色就是中性色，不帶色相的），這就產(chǎn)生了無(wú)色彩的透明玻璃按鈕，第二行第二個(gè)。追求完美的人可能會(huì)說(shuō)，玻璃會(huì)有折射的吧，下面的網(wǎng)格不應(yīng)該是平的才對(duì)。這是對(duì)的，但考慮到我