【正文】 會(huì)給你的網(wǎng)頁(yè)像水晶糖果一樣誘人。透明質(zhì)感的按鈕種類之多，制作方法之廣，無(wú)法盡數(shù)。在這里，我總結(jié)了幾種較為好看的卻又比較簡(jiǎn)單的，供大家作為參考。 Aqua按紐這是最常見的一種透明按紐了，如果運(yùn)用的好的話，效果是非常理想的。這種按紐的做法有很多種，有些真的是相當(dāng)相當(dāng)?shù)穆闊?。?dāng)然，效果也是相當(dāng)相當(dāng)?shù)钠?，漂亮到你?huì)不舍得把它用于網(wǎng)頁(yè)按鈕。實(shí)際上，如果用那種耗費(fèi)大量時(shí)間做成的按鈕裝飾網(wǎng)頁(yè)的話，需要小心喧賓奪主：游客會(huì)不自覺的把注意力集中到漂亮奪目的按紐上，網(wǎng)頁(yè)最重要的內(nèi)容卻會(huì)被忽略掉。說(shuō)了這么多，好像偷懶是理所當(dāng)然的了。那么這一次，我們應(yīng)用圖層樣式來(lái)打造這個(gè)按鈕，這樣我們就可以一勞永逸，以后都可以坐享其成了。更重要的是，我們制作的是可以裝飾你的網(wǎng)頁(yè)的按紐，它僅僅起到了點(diǎn)綴的作用，就像是做菜時(shí)使用的雞精，一點(diǎn)足以勾出鮮味，過(guò)多反而不好了。，RGB模式，白色背景。建立圖層1，設(shè)置前景色為第 2 頁(yè) RGB（51，143，206）。然后選擇圓角矩形工具，在工具選項(xiàng)中，設(shè)置繪圖方式為填充像素，將矩形的圓角半徑設(shè)為50像素，選擇消除鋸齒。點(diǎn)擊幾何選項(xiàng)，將矩形的大小設(shè)為9127像素，在畫布正中點(diǎn)擊一下，即會(huì)出現(xiàn)一個(gè)藍(lán)色的圓角矩形。（圖01）圖01 。首先選擇投影：將投影的不透明度降低為33％，取消全局光，角度為134度，距離和大小均為1像素，擴(kuò)展為0，品質(zhì)不變；然后是內(nèi)陰影樣式：將內(nèi)陰影的顏色設(shè)為RGB（0，56，113），不透明度為100％，取消全局光，角度為90度，距離為6像素，阻塞為15％，大小為16像素，品質(zhì)保持不變，這樣，按紐就具有了立體感。（圖02）圖02。選擇內(nèi)發(fā)光樣式，將混合模式設(shè)為顏色減淡，不透明度為30％，顏色為白色，方法為較柔軟，居中，阻塞為31％，大小為21像素，要特別注意等高線的形狀，打開默認(rèn)的等高線編輯器，將曲線設(shè)為圖03的形狀，選擇消除鋸齒，范圍為31％；第 3 頁(yè)（圖03，04）圖03圖04——添加強(qiáng)烈的反光效果。選擇斜面和浮雕樣式，將樣式設(shè)為內(nèi)斜面，方法為平滑，深度為81％，方向?yàn)樯?，大小?像素，軟化為1像素，陰影的角度為90度，高度為73度，高光和暗調(diào)的不透明度均為100％，暗調(diào)的模式為正常，顏色為RGB（4，126，188），這樣高光效果就出來(lái)了。但這樣是不夠的，我們希望高光效果更為貼切。選擇等高線，注意是斜面等高線，而不是光澤等高線，將等高線類型選擇為預(yù)設(shè)類型中的半圓，消除鋸齒，范圍為69％，這樣就能得到逼真的反光效果。（圖05）圖05，我們添加一些簡(jiǎn)單的陰影效果。但我們的樣式中已經(jīng)采用了投影樣式，所以要另外想辦法。按住Ctrl鍵，載入按紐的不透明度區(qū)域，從編輯菜單中選擇合并拷貝命令，在圖層1之下新建一層，按Ctrl+V，將圖像粘貼到新層中，取消選擇。合并拷貝命令可以復(fù)制選區(qū)內(nèi)所有圖層的圖像，包括圖層樣式在內(nèi)，第 4 頁(yè) 這里，我們所用這個(gè)命令就是為了拼合圖層樣式的效果。此外，在粘貼前，如果沒有取消選擇，那么圖像會(huì)粘貼入選區(qū)中，否則的話，圖像會(huì)被自動(dòng)粘貼到圖層的正中。對(duì)圖層2使用高斯模糊。再用移動(dòng)工具將圖層移動(dòng)到按紐的右下方，作為透明陰影。（圖06）圖06，在按紐上寫上文字即可。如果你更喜歡淡灰色的透明按鈕，這里有個(gè)簡(jiǎn)單的法子：打開通道面板，點(diǎn)擊藍(lán)色通道，僅顯示這一個(gè)通道的圖像，由于我們的按紐是藍(lán)色調(diào)的，所以這個(gè)通道內(nèi)的圖像最能體現(xiàn)按紐的情況。如果你的按紐是紅色調(diào)或是綠色調(diào)的，那么同樣，分別選擇紅色通道和綠色通道，就能得到灰色的透明按鈕了。（圖07）圖07 LCD風(fēng)格的按紐一般來(lái)說(shuō)，液晶顯示屏風(fēng)格很適合各種面板的制作，也可以作為各種按鈕的載體，大多數(shù)類型的按紐與之配合都會(huì)很好看。但這一次，我們要第 5 頁(yè) 來(lái)制作一個(gè)液晶顯示屏風(fēng)格的按紐。，新建RGB模式的白色背景文檔。新建圖層1，這一層我們作為按紐的基礎(chǔ)輪廓。用橢圓選框工具，按住Shift+Alt鍵，從中心向旁邊拖出一個(gè)圓形的選區(qū)。將前景色設(shè)為RGB（176，192，224），用前景色填充選區(qū)，不要取消選擇。（圖08）圖08，在這一層中制作按紐的內(nèi)陰影。復(fù)位色板，選擇描邊命令，將描邊寬度設(shè)為4像素，位置居中。取消選擇，用高斯模糊處理圖層，半徑為4像素。載入圖層1的選區(qū)，反選，在圖層2中刪除，取消選擇。將圖層的不透明度降低到28％。（圖09）圖09 ，我們要在這一層中做描邊處理。再次載入圖層1的選區(qū)，打開描邊命令對(duì)話框，將描邊寬度設(shè)為1像素，位置居中，取消選區(qū)。將第 6 頁(yè) 圖層的不透明度降低到32％，有必要的話。（圖10）圖10。新建圖層4，選擇畫筆工具中的噴槍選項(xiàng)，將畫筆大小設(shè)為200像素的柔化筆刷，將圖層的混合模式設(shè)為顏色減淡，填充不透明度為21％（不是圖層的總體不透明度），再次載入圖層1的選區(qū)，反轉(zhuǎn)色板，用白色畫筆在選區(qū)的下方點(diǎn)擊一下，畫筆范圍可達(dá)到選區(qū)的中上部；再將畫筆大小設(shè)為100像素，再點(diǎn)擊一下，加強(qiáng)效果。由于顏色減淡模式的作用，圖像會(huì)出現(xiàn)透光的效果。（圖11）圖11 ，我們來(lái)進(jìn)行最關(guān)鍵的一步——給按紐增加高光效果。首先，我們來(lái)選取高光的區(qū)域。選擇鋼筆工具，勾出一條封閉路徑，要包括按紐的上半部分，如圖12所示。（圖12）第 7 頁(yè)圖12按Ctrl+Enter，將路徑轉(zhuǎn)換為選區(qū)，再選取和圖層1相交的選區(qū)，方法是按住Shift+Ctrl+Alt鍵，點(diǎn)擊圖層1，載入圖層1和現(xiàn)有選區(qū)相交的選區(qū)，如圖13。選擇漸變工具，復(fù)位并反轉(zhuǎn)色板，選擇線性漸變工具，將漸變?cè)O(shè)為從前景色到透明，從選區(qū)的頂端到底部做出漸變，然后取消選擇。選擇高斯模糊濾鏡，模糊漸變圖層，用選擇工具將圖層向下移動(dòng)幾個(gè)像素，這樣會(huì)使效果更逼真。（圖14）圖13圖14，按紐基本上就已經(jīng)完成了。不過(guò)我們可以為它增加一些裝飾，使它看起來(lái)更漂亮。在圖層1上新建一層，為圖層6，這一層里，我們?yōu)樗黾右恍呙杈€效果?；旧蟻?lái)說(shuō)，12像素大小、上黑下透明的圖案應(yīng)該是你的Photoshop里差不多都會(huì)有的一種基本圖案。如果沒有，那么花半分鐘時(shí)間做上一個(gè)也來(lái)得及。載入圖層1的選區(qū)，打開填充對(duì)話框，在填第 8 頁(yè) 充類型中選擇圖案，找到掃描線圖案，用它來(lái)填充選區(qū)。取消選擇，將圖層的不透明度降低到8％，用模糊濾鏡稍加模糊（圖15）。圖15 如果你的圖案是上黑下白的，那么在填充以后，需要將圖層混合模式設(shè)為正片疊底，效果是一樣的。我們采用的像素字體為04b_03，大小為8點(diǎn)，如果不希望字體太過(guò)纖細(xì)，就將消除文字鋸齒的方式設(shè)為明晰。添加了字體之后，來(lái)看看效果，似乎不如想象中的好（圖16）。我們可以再來(lái)裝飾一下文字部分。在最頂層的文字層之下新建圖層7，將前景色設(shè)為白色，用矩形工具在按紐的上中部選擇一細(xì)長(zhǎng)矩形。將文字層和這一層鏈接起來(lái)，居中對(duì)齊。載入圖層1的選區(qū)，反選，刪除圖層7的多余部分，取消選擇。將填充不透明度降低為10％，圖層混合模式為顏色減淡。（圖17）圖16圖17第 9 頁(yè) 。我選擇把它放置在一個(gè)金屬面板上。首先，新建一個(gè)圖層組，將按紐相關(guān)圖層都放到圖層組中。在序列1下面新建圖層8，用橢圓選框工具選擇一個(gè)圓形，填充黑色后取消選擇。將圖層8和序列1鏈接，選擇序列1，使用對(duì)齊選項(xiàng)，將按紐和黑色圓形居中對(duì)齊，取消鏈接。現(xiàn)在，我們關(guān)閉序列1的顯示，按ShiftCtrl+Delete，用白色填充圖層8的不透明區(qū)域。打開圖層樣式，依次添加下列樣式：漸變疊加：混合模式為正常，不透明性為82％，漸變?yōu)閺幕疑玆GB（174，174，174）到白色，線性，與圖層對(duì)齊，角度為48度，縮放為70％；內(nèi)發(fā)光：混合模式為正常，不透明度為23％，顏色為黑色，發(fā)光源在邊緣，方法為較柔軟，大小為10像素，范圍為55％；斜面和浮雕：內(nèi)斜面、平滑，深度為51％，大小為8像素，陰影角度為130度，取消全局光，高度為15度，暗調(diào)的不透明度為0％，將等高線類型設(shè)為預(yù)設(shè)的半圓，范圍為53％，消除鋸齒；外發(fā)光：混合模式為正常，不透明度為15％，大小為5像素，范圍為33％；描邊：大小為1像素，描邊位置在外部，混合模式為正常，不透明度為31％，描邊顏色為黑色；內(nèi)陰影：混合模式為正常，顏色為RGB（115，115，115），不透明度為8％，角度為135度，取消全局光，距離為4像素，大小為2像素，等高線類型為預(yù)設(shè)的錐形；第 10 頁(yè) 最后是投影：不透明度為11％，角度為135度，距離為4像素，大小為1像素（圖18）。圖18 顯示序列1，這時(shí)，我們的圖像應(yīng)該像圖19一樣了。圖19 。在圖層8上新建圖層9，選擇一個(gè)比按紐稍大的圓形選區(qū)，填充白色，同樣使圓形和按紐居中對(duì)齊。對(duì)它添加圖層樣式：先是漸變疊加，混合模式為正常，不透明度為55％，反向默認(rèn)漸變，角度為90度，縮放為90％；其次是描邊，大小為1像素，位置在外部，不透明度為40％，描邊顏色為RGB（210，210，210）。這樣，這個(gè)按紐就被很合適的鑲嵌在面板上了。（圖20）第 11 頁(yè)圖20 漸變透明按鈕我知道，這個(gè)題目實(shí)在有些不合格。哪種透明效果中沒有用到漸變呢？漸變幾乎已經(jīng)成為制作透明按紐的必備過(guò)程，拿它做標(biāo)題實(shí)在有些應(yīng)付差事的感覺。但是，我實(shí)在懶得再費(fèi)心思在我們的按紐起一個(gè)響亮又貼切的名字了。（這些天來(lái)一直和按紐打交道，請(qǐng)大家原諒我的倦怠心理吧?。┎贿^(guò)，這個(gè)按紐倒真的漂亮的沒話說(shuō)，就拿它來(lái)作為小小的補(bǔ)償吧！這次的這個(gè)按紐，完全是由圖層樣式來(lái)決定的。完成之后，大家的樣式面板中又可以多一種漂亮的風(fēng)格了。，我們來(lái)新建一個(gè)透明背景的文檔，大小根據(jù)按紐的大小來(lái)定。新建圖層2，用橢圓工具選擇一個(gè)正圓形，復(fù)位色板，用背景色填充選區(qū)。不要取消選擇，按Ctrl+X將選區(qū)圖像復(fù)制到剪貼板上，刪除圖層2。在圖層1中，用Ctrl+V將白色圓形粘貼到圖層1中。這樣，白色圓形就會(huì)處于畫布的正中。（圖21）第 12 頁(yè)圖21 ，我們就開始為按紐添加了圖層樣式了。首先，我們?yōu)榘醇~添加基礎(chǔ)的顏色。選擇漸變疊加樣式，將混合模式設(shè)為正常，不透明性為100％，點(diǎn)擊編輯漸變色，將漸變的左端設(shè)為RGB（166，202，240），右端設(shè)為RGB（24，48，153），漸變樣式為線性，角度為123度，縮放為100％；（圖22）圖22 其次，我們用斜面和浮雕樣式為按紐添加光澤：樣式為內(nèi)斜面，方法為平滑，深度100％，方向?yàn)樯?，大小?8像素，軟化為3像素，陰影的角度為120度，取消全局光，高度為73，暗調(diào)模式為顏色減淡，高光和暗調(diào)的其他各項(xiàng)設(shè)定保持不變；（圖23）第 13 頁(yè)圖23 下面，我們用內(nèi)陰影模式加強(qiáng)按紐的暗調(diào)部分：將陰影顏色設(shè)為暗褐色RGB（71，41，2），混合模式為正常，不透明度為38％，角度為90度，距離為7像素，大小為5像素，品質(zhì)不變；（圖24）圖24接下來(lái)的投影和外發(fā)光，都是進(jìn)一步修飾按紐邊緣的：先來(lái)選擇投影樣式，將投影顏色設(shè)為RGB（9，66，130），不透明度為35％，角度為90度，距離和擴(kuò)展為0，大小為1像素；然后是外發(fā)光樣式，混合模式為正常，不透明度為38％，顏色為RGB（0，70，114），發(fā)光方法為較柔軟，大小為2像素；（圖25）第 14 頁(yè)圖25最后，如果你覺得按紐的顏色單薄，可以選擇內(nèi)發(fā)光樣式，混合模式為正片疊底，不透明度為39％，設(shè)置漸變發(fā)光，依圖26來(lái)設(shè)置漸變，漸變色從左到右依次為黑色、棕紅色RGB（187，83，7）、黃色RGB（255，249，157），兩個(gè)顏色中點(diǎn)的位置均為50％，發(fā)光方法為較柔軟，光源居中，大小為250像素，范圍為50％。你也可以自己設(shè)定內(nèi)發(fā)光的顏色，這樣，按紐的顏色就豐富起來(lái)。（圖27）圖26圖27第 15 頁(yè) ，我們?yōu)榘醇~加一個(gè)簡(jiǎn)單的邊框。在圖層1下面新建圖層2，載入圖層1的不透明選區(qū)，用擴(kuò)展命令將選區(qū)擴(kuò)大8像素，填充白色。（圖28）圖28我們依然用圖層樣式添加立體效果。先選擇斜面和浮雕樣式，結(jié)構(gòu)為內(nèi)斜面，方法為雕刻清晰，深度為290％，方向?yàn)樯?，大小?像素，軟化為9像素，陰影角度為90度，高度為45度，高光和暗調(diào)保持默認(rèn)；再來(lái)添加描邊樣式，大小為1像素，位置在外部，混合模式正常，不透明度100％，描邊顏色為RGB（170，170，170）。（圖29）