網(wǎng)頁設(shè)計(jì)實(shí)例:女性購物網(wǎng)站導(dǎo)航條制作
這一個(gè)商品類網(wǎng)站的教程,發(fā)給大家一起學(xué)習(xí)。注:學(xué)習(xí)本教程請用PSCS2。
效果圖:
1.新建一文檔,寬度自己可以選擇,我設(shè)為500*110大小。建立一個(gè)和畫布一樣大小的圖層,用純色填充背景
2.用矩形工具繪制一個(gè)矩形
3.選擇上面的添加形狀按鈕,用橢圓形工具建立一個(gè)橢圓形.
4.用矩形工具建立一個(gè)垂直的比較窄的矩形
5.按Ctrl J 和Ctrl T鍵向又移動(dòng)幾個(gè)像素.重復(fù)按Ctrl J 和 Ctrl T鍵得到如圖所示的圖形.(注:這里按Ctrl J的意思是復(fù)制圖層,這里的Ctrl T只是代替了移動(dòng)鍵“V”鍵)
6.選擇并合并這些窄的圖層.命名為“l(fā)ine”把圖層樣式改為overlay.中文意思“疊加”
7.Ctrl 單擊
8.把該圖層把透明度調(diào)為20%
9.用自定義圖形 畫一個(gè)方框.
注:如果你的自定義圖形中沒有這個(gè)圖形,可以通過以下方法加入。
按Ctrl T.又擊選擇歪曲(英文為warp).右擊選擇弓形設(shè)置如圖所示的參數(shù)
復(fù)制圖層,按Press Ctrl T.右擊選擇垂直翻轉(zhuǎn),變成如圖所示的形狀
按上面的方法做你需要的按鈕
把要鏈接的名字打在按鈕上
右擊文本層,選擇弓行文本,設(shè)置如下圖所示參數(shù):
用同樣的方法在其他的按鈕上寫上相應(yīng)的文字,調(diào)節(jié)文本的彎曲度和按紐的彎曲度相同
在槽部和頂部插入我們要的文字或圖片
還是選用自定義圖形建立一個(gè)大的正方框旋轉(zhuǎn)45°
把圖層模式改為overlay降低透明度為30.
把圖層復(fù)制兩次,如圖把圖層按比例縮小
插入一幅漂亮的圖片或者是公司的產(chǎn)品
在右側(cè)底部插入公司的logo
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- Photoshop制作網(wǎng)頁搜索條
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- 用ps制作豎列導(dǎo)航
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- banner教程,用ps制作960*90的廣告圖片
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- 陰影效果,教你制作各類陰影教程
- Photoshop制作網(wǎng)站導(dǎo)航圖