教大家用Photoshop制作網(wǎng)站頂部導航(5)

來源:作者:佚名 來源:網(wǎng)頁教學網(wǎng) 作者:admin 學習:797人次
我又來教大家用Photoshop了,今天的實例是用ps制作網(wǎng)站,上次教了做模板,今天我們就來學ps頂部導航,網(wǎng)站的頭部大多是最值得設計的地方,因 為頭部往往包含導航與LOGO,作為一個網(wǎng)站的門面,頭部也起到很關鍵的作用,可以說一個網(wǎng)站的頭部好壞往往覺得了這個網(wǎng)站設計的成功與否,本文使用PS 來設計一個比較簡潔的網(wǎng)站頭部效果。最終效果:

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

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



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

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

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

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

為滑桿添加漸變樣式



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

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

復制之前做的橢圓陰影

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

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

完成后的效果圖



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

填充顏色#e6e0d5

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

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




學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!