Photoshop設(shè)計(jì)精致的網(wǎng)站導(dǎo)航(4)

來(lái)源: 作者: 學(xué)習(xí):5754人次
作者:m4er  來(lái)源:藍(lán)色理想

設(shè)計(jì)工具為PS CS3,先看做好的效果圖:


photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

設(shè)計(jì)步驟如下:
第一步:
用形狀工具或者選框工具設(shè)計(jì)出菜單的背景來(lái),如下圖:


photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

第二步:
新建一個(gè)圖層,用縮放工具放大到1000%,用畫(huà)筆在這個(gè)新建圖層上畫(huà)出一條適當(dāng)長(zhǎng)度的1px豎線,顏色為#ffffff;如下圖:


photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

第三步:
給這個(gè)圖層加"漸變疊加"這個(gè)混合選項(xiàng),設(shè)置如下:


photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

1處的顏色為白色豎線的下端附近的背景顏色值,2處的顏色為白色豎線的上端附近的背景顏色值,3處的顏色為#d7d7d7。
效果如下:

photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

第四步:
復(fù)制這個(gè)圖層,用箭頭工具將復(fù)制的圖層向左移動(dòng)1px,修改漸變參數(shù),如下圖:

photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

效果如下:

photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

100%比例下的效果如下:

photoshop教程:精致的網(wǎng)站導(dǎo)航設(shè)計(jì)

剩下的工作就是加上文字與復(fù)制圖層及排版的問(wèn)題了,這里不細(xì)說(shuō)了。

學(xué)習(xí) · 提示

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

關(guān)注大神微博加入>>

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