Photoshop設(shè)計(jì)精致的網(wǎng)站導(dǎo)航(4)
來源:
作者:
學(xué)習(xí):5754人次
作者:m4er 來源:藍(lán)色理想
設(shè)計(jì)工具為PS CS3,先看做好的效果圖:
設(shè)計(jì)步驟如下:
第一步:
用形狀工具或者選框工具設(shè)計(jì)出菜單的背景來,如下圖:
第二步:
新建一個(gè)圖層,用縮放工具放大到1000%,用畫筆在這個(gè)新建圖層上畫出一條適當(dāng)長(zhǎng)度的1px豎線,顏色為#ffffff;如下圖:
第三步:
給這個(gè)圖層加"漸變疊加"這個(gè)混合選項(xiàng),設(shè)置如下:
1處的顏色為白色豎線的下端附近的背景顏色值,2處的顏色為白色豎線的上端附近的背景顏色值,3處的顏色為#d7d7d7。
效果如下:
第四步:
復(fù)制這個(gè)圖層,用箭頭工具將復(fù)制的圖層向左移動(dòng)1px,修改漸變參數(shù),如下圖:
效果如下:
100%比例下的效果如下:
剩下的工作就是加上文字與復(fù)制圖層及排版的問題了,這里不細(xì)說了。
設(shè)計(jì)工具為PS CS3,先看做好的效果圖:
設(shè)計(jì)步驟如下:
第一步:
用形狀工具或者選框工具設(shè)計(jì)出菜單的背景來,如下圖:
第二步:
新建一個(gè)圖層,用縮放工具放大到1000%,用畫筆在這個(gè)新建圖層上畫出一條適當(dāng)長(zhǎng)度的1px豎線,顏色為#ffffff;如下圖:
第三步:
給這個(gè)圖層加"漸變疊加"這個(gè)混合選項(xiàng),設(shè)置如下:
1處的顏色為白色豎線的下端附近的背景顏色值,2處的顏色為白色豎線的上端附近的背景顏色值,3處的顏色為#d7d7d7。
效果如下:
第四步:
復(fù)制這個(gè)圖層,用箭頭工具將復(fù)制的圖層向左移動(dòng)1px,修改漸變參數(shù),如下圖:
效果如下:
100%比例下的效果如下:
剩下的工作就是加上文字與復(fù)制圖層及排版的問題了,這里不細(xì)說了。
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類陰影教程
- banner教程,設(shè)計(jì)一個(gè)簡(jiǎn)單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁常見的圖片投影效果
- 網(wǎng)頁圖片,設(shè)計(jì)一個(gè)網(wǎng)頁登陸框圖片教程
- 設(shè)計(jì)知識(shí),新手詳情頁制作誤區(qū)
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁面圖片
- banner教程,超簡(jiǎn)單三步設(shè)計(jì)一個(gè)BANNER
- 圓角教程,教你制作網(wǎng)頁常用的圓角矩形邊角
推薦教程
- 多管齊下 打造賞心悅目博客頁眉
- ps打造簡(jiǎn)潔的新聞欄目網(wǎng)頁設(shè)計(jì)制作教程
- Photoshop在設(shè)計(jì)商業(yè)數(shù)碼類網(wǎng)站的應(yīng)用實(shí)例
- 用ps制作訂閱徽章
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁面圖片
- 利用PS制作網(wǎng)站的基本流程
- ps設(shè)計(jì)游戲網(wǎng)頁頭版教程
- Photoshop教程:制作做乳白色導(dǎo)航效果
- Photoshop教程:設(shè)計(jì)簡(jiǎn)單又酷的登陸框界面
- Photoshop教程:輕松繪制黑色風(fēng)格導(dǎo)航條文字
關(guān)注大神微博加入>>
網(wǎng)友求助,請(qǐng)回答!