本教程是向腳本之家的朋友介紹利用Photoshop制作顏色對半透明風(fēng)格的網(wǎng)頁導(dǎo)航條按鈕過程，教程制作出來的導(dǎo)航條和普通的不太一樣，它是兩種顏色，卻分成兩種風(fēng)格。教程很不錯，推薦過來，一起來學(xué)習(xí)吧！

首先聲明，這個透明的導(dǎo)航不是我發(fā)明的，我是借鑒和學(xué)習(xí)，其次，我在做的過程中遇到很多問題，是前輩們沒有講出來的。是通過我一點點研究出來的成果，所以解決的問題是原創(chuàng)，最后，希望把東西分享給更多的人，讓大家少走彎路，多進步。

先發(fā)一組模擬的效果圖

那么接下來我們開始吧

1.

新建一個畫布(我的是1000*1000px，新手可以效仿)

背景顏色(個人喜好，我的背景是圖片模糊處理過的，我會在專門發(fā)一篇關(guān)于背景的，這次先添加顏色就好)

新建一個你認為合適的導(dǎo)航，我這里是圓角為17px / 600*80px 的圓角矩形。

2.

首先

填充為( 0 ) ，內(nèi)發(fā)光(顏色：#ffffff - 效果：疊加 - 不透明度90% - 大小12px )其余不用設(shè)置；內(nèi)陰影 (顏色：#e5e5e5 - 效果：疊加 - 不透明度45% - 距離1px 其余為0 全局光全為90度)

接下來是投影，顏色：#4c4c4c 效果：疊加 不透明度：50% 距離：2px 大?。?px 擴展：0

好，那么問題要來了

這里畫一個橢圓【做高光用】，蒙版羽化16.8PX。

效果：疊加 不透明度35% 剪切蒙版 看一下效果

橢圓并未顯示，因為這個：

我們把橢圓要剪切進去的圓角矩形，將內(nèi)部效果混合成組勾上，將剪貼圖層混合成組取消勾選，看一下效果

橢圓的效果有了，但是圓角矩形本身的內(nèi)發(fā)光效果沒了。別著急，其實很簡單，只是不想大家走進誤區(qū)，所以把這個做出來。

我們回到這步：

橢圓的羽化調(diào)好后

右鍵 - 柵格化圖層

然后點擊圓角矩形，調(diào)出選區(qū)【Ctrl+鼠標(biāo)左鍵】，點擊，然后ctrl+shift+I 反選，在點擊橢圓圖層，按Delete，看下效果吧

然后ctrl+d 取消選區(qū)，效果：疊加 不透明度：35%

效果如下：

要不要給自己點掌聲，解決了一個別人不知道的難題，別著急，還有倆圖層就好啦。堅持就是勝利，再次畫一個橢圓

做法同上一個橢圓，蒙版羽化：3px - 柵格化 - 調(diào)選區(qū) - 反選 - 刪除 - 效果：疊加 - 不透明度15%，然后給這個橢圓加一個蒙版

效果是這樣

最后一層終于到啦，還是畫橢圓，這次是在下方。

蒙版羽化 18px左右，效果還是疊加不透明度15%，效果如下：

看一下成果，美美噠有木有

、

以上就是Photoshop制作顏色對半透明風(fēng)格的網(wǎng)頁導(dǎo)航條按鈕教程，希望大家喜歡本教程！

最新評論