立體感的水晶按鈕

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

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

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

4、能讓邊緣變暗一一我們只要讓陰影在邊緣停留就好了嘛。看圖：國角矩形色塊圓角矩形色塊-系統(tǒng)默認(rèn)的內(nèi)陰影效果圓角矩形色塊經(jīng)過調(diào)整的內(nèi)陰影效果看看第三個就是，參數(shù)怎么調(diào)整？這里先不說，大家可以根據(jù)上面的那個圖自己調(diào)整一下方向、距離與大小,試試看。這里還有一個值得注意的是，為什么用內(nèi)陰影更好，是因為大家發(fā)現(xiàn)沒有，雖然說第三個內(nèi)陰影效果是邊緣變暗，但這個暗又是上下不同的，上面的陰影寬些，下面的陰影窄些，這正是第5部分需要的效果。內(nèi)陰影是有方向與距離控制的，因此我們可以把那個陰影調(diào)節(jié)得上寬下窄。這就是我們選擇內(nèi)陰影樣式的理由。有了這種特殊的陰影，按鈕會產(chǎn)生一定的立體感了。部分4：這里還有一個較窄的、細(xì)細(xì)的邊

5、緣變暗。因為我們剛剛已經(jīng)采用了內(nèi)陰影來制作按鈕的立體感，難道再增加一個內(nèi)陰影效果嗎？PS里面不允許說一個圖層加幾個同樣類型的樣式。那我們要換一下口味了。這個較黑較細(xì)的邊緣，應(yīng)該對整個按鈕都是均勻的。整個按鈕具有變暗的模糊邊緣用色相/飽和度工具當(dāng)然可行，但不能事后調(diào)整一還是用樣式吧，什么樣式呢，內(nèi)發(fā)光。內(nèi)發(fā)光不僅能發(fā)“亮”光，也能發(fā)“暗”光?？磮D：4 / 12立體感的水晶按鈕圓角矩毯色塊圓角矩形色塊-系統(tǒng)默認(rèn)的內(nèi)發(fā)光效果圓角矩形色塊-經(jīng)過調(diào)整的內(nèi)發(fā)光效果第三個色快產(chǎn)生了邊緣變暗的效果，如何做到的呢？看看具體的參數(shù)設(shè)置:對，混合模式發(fā)生了變6 / 12化，原本系統(tǒng)默認(rèn)的是“濾色”，現(xiàn)在我們把它改成

6、“正常"，當(dāng)然用“正片疊底”也是可以，但用正常我們可調(diào)整的就更多。我們選取一種比原來的桔色暗些的顏色作為“暗”光，因此最后出來了這種效果。部分2,3：部分2就是簡單的陰影樣式了，沒什么好說的：部分3就是一個漸變，樣式里也有漸變覆蓋，輕松做到。這里都略過。好，至此，是我們應(yīng)該組合這些效果的時候了?？磮D：10I正常 不|不透明度;Ho。% EJ 鎖定；.為 e lioo% kJ匚二1： =圖層2 0勺內(nèi)陰影SSS 漸變疊加I背景a大家注意到我原本的色塊是綠色的沒有？因為有了漸變疊加，原來用什么顏色都無所謂。我這里一開始就是亂選了一種顏色填充圓角矩形，反正到后面都能調(diào)整，方便得很反思一下剛

7、剛得步驟與結(jié)構(gòu)，究竟是那些步驟讓我們產(chǎn)生了按鈕得立體感？投影樣式能讓物體浮出畫布；內(nèi)陰影樣式能讓物體產(chǎn)生玻璃般的透明立體感；一內(nèi)發(fā)光能讓玻璃的邊緣更加真實（我們感覺到這個按鈕的橫界面下邊緣必定是圓滑的）；一漸變疊加樣式能讓按鈕的反光更為真實，也讓整個按鈕的色彩層次感更豐富,不死板；思考了這些以后，如果要做別的按鈕可以嗎？我要怎么產(chǎn)生立體感呢？金屬的和玻璃又有什么相同和不同之處呢？還有其他的樣式，比如斜面與浮雕、光澤能做些什么嗎？這些在我接下來的后面說金屬立體感的時候就會說到，但在此之前，大家都可以先自己思考一下。好了，我們先把這個按鈕完善下吧。基本的圖層樣式已經(jīng)做好，我們以后再要做這種按鈕可就

8、方便了。看圖：立體感的水晶按鈕復(fù)制圖層 刪除因?qū)?-因?qū)訉傩?混合選項啟用圖層裝版冊格化圖層拷貝因?qū)訕邮秸迟N圖層祥耳。回將圖層樣式粘貼到鏈接的圖層一I清除閡層樣式看,，各種形狀都行，只要我們復(fù)制、粘貼圖層樣式。然后大家注意到樣式產(chǎn)生了立體感與按鈕的折射與陰影，但高光還是要自己做的。上圖中圓形按鈕與長圓角按鈕就加了高光，高光怎么做，已經(jīng)不用我再補(bǔ)充了吧。但有個東西需要提醒，就是高光也有層次感，注意看下圖：閡層10 / 12營 I I囪層4副本左邊是平色不透明度為100的白色快，當(dāng)然不像高光了。右邊的就不同，白色塊是透明的，而且有上下漸變的變化。這里用的辦法是為高光加一個蒙版，然后在蒙版里使用黑白

9、漸變，使得白色塊的不透明度降低并且產(chǎn)生上下漸變的層次變化，更為逼真。下面我們再把這個按鈕變得更完美些吧。既然是水晶按鈕，那就是透明的。如果我們在底下墊一層網(wǎng)格，那就應(yīng)該會透出一些來。看圖，我們在底下加上網(wǎng)格。首先我們把按鈕的混合模式改成“柔光、柔光能讓我們的按鈕以種透明模式覆蓋在圖案上，但又能保留陰影與立體感。但要讓它透明，還要花點小功夫：首先要想它為什么原來不透明？是漸變疊加那里，它是一個不透明的漸變色，于是讓按鈕不透明了°打開樣式的漸變疊加對話框,是100%,我們下降到56%看看效果如何？對，有個不透明性。原來看看參數(shù)有什么可變化的:果然，整個按鈕透明了。這個時候有人會問，為什么不把那個按鈕層全層下降不透明度呢？我們來看看比較好了。個圖層的不透明度下降后，的確是透明了，但邊緣也模糊了，讓人覺得立體感就沒有了。原因就在于那些產(chǎn)生立體感的樣式：內(nèi)陰影、內(nèi)發(fā)光、陰影也一并透明了，因此效果就下降了。我們看第二行第個按鈕，是有顏色的水晶按鈕，立體感仍在。把漸變樣式變成完全透明又如何呢？這里還要記住，那個內(nèi)陰影是有顏色的，我們把漸變色去掉之后，也要把內(nèi)陰影變成灰色（灰色就是中性色，不帶色相的），這就產(chǎn)生了無色彩的透明玻璃按鈕，第二行第二個。追求完美的人可能會說，玻璃會有折射的吧，下面的網(wǎng)格不應(yīng)該是平的才對。這是對的，但