您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> ps教程 >> 瀏覽設計教程

Photoshop設計網站頭部導航效果

 

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

第一步建立新文件,設置如下圖

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

下一步設置前景色為#e6e0d5,背景色為#cec5af

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

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

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

開始設計導航按鈕,新建圖層,使用矩形工具,制作如下圖形

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

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

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

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

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

為滑桿添加漸變樣式

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

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

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

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

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

復制之前做的橢圓陰影

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

 

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

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

為白色的輪廓添加內陰影樣式

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

完成后的效果圖

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

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

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

填充顏色#e6e0d5

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

復制圖層,并將它移動到如下箭頭位置,設置不透明度為20%

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

最后將LOGO標志放入,一個完整的網站頭部導航設計就完成了

Photoshop設計網站頭部導航效果,PS教程,Photoshop教程

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