本教程主要使用Photoshop通過圖層樣式制作立體效果的網(wǎng)頁按鈕，非常漂亮的一組網(wǎng)頁按鈕，喜歡的朋友讓我們一起來學(xué)習(xí)吧。
先看看效果圖
LV. ★
初入設(shè)計(jì)，學(xué)做按鈕。只會(huì)套個(gè)底色，加個(gè)陰影，字體純白，小聰明的弄個(gè)圓角。
LV. ★★(描邊、字體、內(nèi)陰影)
看了很多案例，學(xué)會(huì)了一些小技巧，內(nèi)描邊1PX深色描邊，使效果有所提升。注意描邊要貼近按鈕色，不要用純黑和純白。
其次，字體的顏色也同樣不要用純白，要用貼近按鈕色的單色最佳。
當(dāng)學(xué)會(huì)了內(nèi)陰影這項(xiàng)技能后，你就發(fā)現(xiàn)高光的按鈕看起來非常美好。
LV. ★★(漸變疊加)
漸變疊加可以讓按鈕產(chǎn)生更多de的質(zhì)感效果，多多嘗試，會(huì)有新的發(fā)現(xiàn)。
LV. ★★★(1像素的高光)
如果這是漸變的一種，明暗清晰。其次，這里要說的是利用矢量圖做出1px的高光，伴起左、右、上，讓按鈕質(zhì)感更加強(qiáng)烈。
LV. ★★★(疊加的模糊光)
這是常用的一種網(wǎng)頁按鈕，很懂看起來絢麗的高光，如此技法。甚至在紅色的按鈕疊加黃光，黑色的按鈕疊加紫光等等，具體大家自由發(fā)揮。
LV. ★★★(圖案疊加)
圖案疊加更多的是加強(qiáng)紋理，比如貼上皮革、金屬、木紋等素材，強(qiáng)調(diào)按鈕的與眾不同。這里的疊加，擴(kuò)展了紋理。
LV. ★★★★(外發(fā)光)
利用文字的外發(fā)光，讓按鈕看起來更富有光感，注意發(fā)光de的顏色要貼近按鈕色，不要有太大的差異。
LV. ★★★★(投影)
不要總使用默認(rèn)的投影，多嘗試他們的數(shù)值，會(huì)有不一樣的感覺。還有在字體上加入1px的內(nèi)陰影，讓字體更加凸起。
LV. ★★★★(1px的內(nèi)陰影和投影)
了解了內(nèi)陰影和投影的使用，就多玩玩1px的威力。它會(huì)讓你的按鈕看起來凹陷感更強(qiáng)烈。
LV. ★★★★(逆漸變)
大部分的這種技能用在按鈕觸碰效果，使其和靜態(tài)按鈕擁有很大的反差，提醒用戶鼠標(biāo)懸浮于此。
LV. ★★★★★(斜面和浮雕)
這個(gè)技能用得好也是一神技，他能讓按鈕效果片刻出結(jié)果，也同樣能制作金屬質(zhì)感，當(dāng)然，這需要調(diào)整它的曲線，你可以試試。
LV. ★★★★★★(外圍輔助)
這種外圍的輔助，讓按鈕看起來更是掉到了坑里。更加的吸引眼球，引起注意。其次注意這個(gè)按鈕PSD的漸變，不是圖層疊加而是直接漸變。
LV. ★★★★★★(厚度)
這種按鈕的現(xiàn)在用的非常多，加上一層使其空間感更加強(qiáng)烈，很多的手機(jī)應(yīng)用下載按鈕就是用到了他。注意PSD中它的陰影使用。
LV. ★★★★★★(透明)
外圍的輔助，也有這樣的功能，調(diào)整它的填充或者透明度，這樣的按鈕在有背景的頁面里效果尤為突出。
之前我們說過的光疊加，也可以這樣疊加。
LV. ★★★★★★★(內(nèi)發(fā)光)
內(nèi)發(fā)光的按鈕，不好掌握很容易出丑，如果用的好，也為自己的設(shè)計(jì)提分。內(nèi)發(fā)光不限于亮光，也適用于暗光。
LV. ★★★★★★★(細(xì)節(jié))
到這里，就沒有太多可以注解的技能可以說了。唯一要注意的，就是細(xì)節(jié)。
比如做2px的圓角，比如字體顏色再藍(lán)一些，比如陰影的明暗再舒服些，比如描邊可以用漸變，更比如，之前的文字沒有劇中對齊，把它調(diào)整好。
所有的一切，就是一個(gè)細(xì)節(jié)。
最開始我們用1分鐘做一個(gè)按鈕，到我們用30分鐘甚至1個(gè)小時(shí)去思考，去調(diào)整，去嘗試。
LV. ★★★★★★★★★★★★★★★★(扁平不平，無限可能)
現(xiàn)在流行扁平化設(shè)計(jì)，讓人感覺它非常容易入門，而且簡單。
其實(shí)并非如此，扁平不平，暗藏殺機(jī)，它降低了一切光影質(zhì)感，盡量減少到最小甚至感覺不到它的存在，如此來提高它的美感。
現(xiàn)在設(shè)計(jì)一個(gè)按鈕，你會(huì)想什么?
讓我們回顧一下這一切按鈕的變化史，你是否從中受益了呢?
更多的美好設(shè)計(jì)，我期待與你一起探討!
