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

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

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

那么接下來(lái)我們開(kāi)始吧

1.

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

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

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

2.

首先

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

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

好，那么問(wèn)題要來(lái)了

這里畫(huà)一個(gè)橢圓【做高光用】，蒙版羽化16.8PX。

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

橢圓并未顯示，因?yàn)檫@個(gè)：

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

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

我們回到這步：

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

右鍵 - 柵格化圖層

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

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

效果如下：

要不要給自己點(diǎn)掌聲，解決了一個(gè)別人不知道的難題，別著急，還有倆圖層就好啦。堅(jiān)持就是勝利，再次畫(huà)一個(gè)橢圓

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

效果是這樣

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

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

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

、

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

最新評(píng)論