Photoshop制作瑩光網(wǎng)站導(dǎo)航條(7)
來源:未知
作者:admin
學(xué)習(xí):380人次
1.首先讓新建一個(gè)大小為700像素×300像素文件。
2.將背景色改為#19191b 。
3.接下來,讓我們使用圓角矩形工具,設(shè)置半徑為10px ,畫一個(gè)圓角矩形:
4.設(shè)置這個(gè)圖層的混合選項(xiàng):顏色疊加#19191b;描邊:大小1px;內(nèi)部;不透明度3%;填充類型漸變;有白到黑反向;線性;
5.描邊:
6.畫小導(dǎo)航用圓角矩形工具,設(shè)置半徑為10px ,畫一個(gè)圓角矩形;如下所示:
7.設(shè)置這個(gè)圖層的混合選項(xiàng):
8.下一步,我們要添加一個(gè)漸變給它。我用圓角矩形工具,半徑為10px, 畫一個(gè)圓角矩形;如下所示。
9.設(shè)置透明度到22 % ,并設(shè)置圖層樣式為柔光。
10.現(xiàn)在可以添加一些文字鏈接,當(dāng)前鏈接使用#01c6fd 。 所有其他的鏈接,請(qǐng)使用此文字顏色#8e959d 。
11.文字層加入投影,輸入下面的混合選項(xiàng):
12 .接下來我們要做的就是添加一些鏈接分割線,使用選框工具創(chuàng)建一個(gè)2px寬矩形;填充黑色:
13.給分割線輸入下面的混合選項(xiàng):
14.降低不透明度至50 %
15.接下來復(fù)制分割線,并將其放置在每一個(gè)鏈接之間
16.用多邊形套索工具并創(chuàng)建一個(gè)選擇區(qū)如下所示。箭頭表明當(dāng)前鏈接:
17.創(chuàng)建一個(gè)新層和填補(bǔ)#ffffff ,然后給這層輸入下面的混合選項(xiàng),
18.您的結(jié)果將如下所示:
19.為當(dāng)前鏈接做閃光效果,我們需要使用橢圓選框工具并且羽化15px,并填充顏色#01c6fd :
20.現(xiàn)在,我們要?jiǎng)h除導(dǎo)航框以外的閃光。 找到導(dǎo)航框?qū),用CTRL +鼠標(biāo)左鍵點(diǎn)擊來選擇它;氐介W光效果層 然后->選擇>反向,然后->編輯>清除:
21.現(xiàn)在降低透明度31 %左右,就完成了:
2.將背景色改為#19191b 。
3.接下來,讓我們使用圓角矩形工具,設(shè)置半徑為10px ,畫一個(gè)圓角矩形:
4.設(shè)置這個(gè)圖層的混合選項(xiàng):顏色疊加#19191b;描邊:大小1px;內(nèi)部;不透明度3%;填充類型漸變;有白到黑反向;線性;
5.描邊:
6.畫小導(dǎo)航用圓角矩形工具,設(shè)置半徑為10px ,畫一個(gè)圓角矩形;如下所示:
7.設(shè)置這個(gè)圖層的混合選項(xiàng):
8.下一步,我們要添加一個(gè)漸變給它。我用圓角矩形工具,半徑為10px, 畫一個(gè)圓角矩形;如下所示。
9.設(shè)置透明度到22 % ,并設(shè)置圖層樣式為柔光。
10.現(xiàn)在可以添加一些文字鏈接,當(dāng)前鏈接使用#01c6fd 。 所有其他的鏈接,請(qǐng)使用此文字顏色#8e959d 。
11.文字層加入投影,輸入下面的混合選項(xiàng):
12 .接下來我們要做的就是添加一些鏈接分割線,使用選框工具創(chuàng)建一個(gè)2px寬矩形;填充黑色:
13.給分割線輸入下面的混合選項(xiàng):
14.降低不透明度至50 %
15.接下來復(fù)制分割線,并將其放置在每一個(gè)鏈接之間
16.用多邊形套索工具并創(chuàng)建一個(gè)選擇區(qū)如下所示。箭頭表明當(dāng)前鏈接:
17.創(chuàng)建一個(gè)新層和填補(bǔ)#ffffff ,然后給這層輸入下面的混合選項(xiàng),
18.您的結(jié)果將如下所示:
19.為當(dāng)前鏈接做閃光效果,我們需要使用橢圓選框工具并且羽化15px,并填充顏色#01c6fd :
20.現(xiàn)在,我們要?jiǎng)h除導(dǎo)航框以外的閃光。 找到導(dǎo)航框?qū),用CTRL +鼠標(biāo)左鍵點(diǎn)擊來選擇它;氐介W光效果層 然后->選擇>反向,然后->編輯>清除:
21.現(xiàn)在降低透明度31 %左右,就完成了:
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 導(dǎo)航條
- Photoshop制作
- ps瑩光網(wǎng)站
- ps瑩光導(dǎo)航條
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
- ps設(shè)計(jì)游戲網(wǎng)頁頭版教程
- ps設(shè)計(jì)粉色漂亮播放器按鈕
- Photoshop制作非常大氣的特色產(chǎn)品網(wǎng)頁
- ps玻璃網(wǎng)頁教程
- ps設(shè)計(jì)網(wǎng)頁進(jìn)度條教程
- ps設(shè)計(jì)橙色RSS玻璃圖標(biāo)
- ps設(shè)計(jì)倒計(jì)時(shí)數(shù)字圖片
- ps制作window7移動(dòng)導(dǎo)航網(wǎng)頁界面設(shè)計(jì)教
- ps制作立體效果的網(wǎng)站導(dǎo)航教程
推薦教程
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- Photoshop制作網(wǎng)頁搜索條
- banner教程,用ps制作960*90的廣告圖片
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- 陰影效果,教你制作各類陰影教程
- 用ps制作豎列導(dǎo)航
- Photoshop制作網(wǎng)站導(dǎo)航圖
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
關(guān)注大神微博加入>>
網(wǎng)友求助,請(qǐng)回答!