您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> ps教程 >> 瀏覽設(shè)計(jì)教程

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果

 

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

第一步建立新文件,設(shè)置如下圖

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

下一步設(shè)置前景色為#e6e0d5,背景色為#cec5af

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

制作頂部區(qū)域,確保之前設(shè)置的顏色正確,然后使用“濾鏡>渲染>云彩”!

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

開(kāi)始設(shè)計(jì)導(dǎo)航按鈕,新建圖層,使用矩形工具,制作如下圖形

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

再次新建圖層,制作#ac2a2a顏色矩形

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

再用單行選區(qū)工具制作按鈕鼠標(biāo)移動(dòng)上后的黃色滑桿

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

為滑桿添加漸變樣式

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

新建圖層,使用橢圓選區(qū)工具,羽化設(shè)置20px,這樣之后填充的黑色將會(huì)出現(xiàn)羽化的效果

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

為之前的橢圓選區(qū)填充黑色,然后設(shè)置圖層為"正片疊底",使用矩形選區(qū)工具刪除右邊區(qū)域,這樣看上去紅色的導(dǎo)航條上就出現(xiàn)了陰影分割效果

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

復(fù)制之前做的橢圓陰影

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

 

制作RSS破損紙張效果,制作2個(gè)圖層,用選區(qū)勾畫出紙張的輪廓,一個(gè)大的為白色,小的紅色,如果覺(jué)得效果過(guò)于平滑,可以使用濾鏡來(lái)讓其看上去更自然

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

為白色的輪廓添加內(nèi)陰影樣式

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

完成后的效果圖

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

現(xiàn)在進(jìn)行最后的修飾,使用單行選區(qū)工具

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

填充顏色#e6e0d5

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

復(fù)制圖層,并將它移動(dòng)到如下箭頭位置,設(shè)置不透明度為20%

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

最后將LOGO標(biāo)志放入,一個(gè)完整的網(wǎng)站頭部導(dǎo)航設(shè)計(jì)就完成了

Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果,PS教程,Photoshop教程

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps1465.html
一個(gè)設(shè)計(jì)師的基礎(chǔ)PS經(jīng)驗(yàn)技巧及設(shè)計(jì)心得
網(wǎng)頁(yè)P(yáng)S教程:制作晶塊炫彩背景圖(附psd下載)
圖趣網(wǎng)微信
建議反饋
×