網頁設計實例:女性購物網站導航條制作

2022-12-26 14:02:17 來源/作者: / 己有:18人學習過
網頁設計實例:女性購物網站導航條制作

這一個商品類網站的教程,發(fā)給大家一起學習。注:學習本教程請用PSCS2。

效果圖:

按此在新窗口瀏覽圖片

1.新建一文檔,寬度自己可以選擇,我設為500*110大小。建立一個和畫布一樣大小的圖層,用純色填充背景

按此在新窗口瀏覽圖片

2.用矩形工具繪制一個矩形

按此在新窗口瀏覽圖片

3.選擇上面的添加形狀按鈕,用橢圓形工具建立一個橢圓形.

按此在新窗口瀏覽圖片

按此在新窗口瀏覽圖片

4.用矩形工具建立一個垂直的比較窄的矩形

按此在新窗口瀏覽圖片

5.按Ctrl J 和Ctrl T鍵向又移動幾個像素.重復按Ctrl J 和 Ctrl T鍵得到如圖所示的圖形.(注:這里按Ctrl J的意思是復制圖層,這里的Ctrl T只是代替了移動鍵“V”鍵)

按此在新窗口瀏覽圖片

6.選擇并合并這些窄的圖層.命名為“l(fā)ine”把圖層樣式改為overlay.中文意思“疊加”

按此在新窗口瀏覽圖片

7.Ctrl 單擊 

按此在新窗口瀏覽圖片

8.把該圖層把透明度調為20%

按此在新窗口瀏覽圖片

9.用自定義圖形 畫一個方框.

按此在新窗口瀏覽圖片

注:如果你的自定義圖形中沒有這個圖形,可以通過以下方法加入。

按此在新窗口瀏覽圖片

按Ctrl T.又擊選擇歪曲(英文為warp).右擊選擇弓形設置如圖所示的參數(shù)

按此在新窗口瀏覽圖片

按此在新窗口瀏覽圖片

復制圖層,按Press Ctrl T.右擊選擇垂直翻轉,變成如圖所示的形狀

按此在新窗口瀏覽圖片

按上面的方法做你需要的按鈕

按此在新窗口瀏覽圖片

把要鏈接的名字打在按鈕上

按此在新窗口瀏覽圖片

右擊文本層,選擇弓行文本,設置如下圖所示參數(shù):

按此在新窗口瀏覽圖片

按此在新窗口瀏覽圖片

用同樣的方法在其他的按鈕上寫上相應的文字,調節(jié)文本的彎曲度和按紐的彎曲度相同

按此在新窗口瀏覽圖片

在槽部和頂部插入我們要的文字或圖片

按此在新窗口瀏覽圖片

還是選用自定義圖形建立一個大的正方框旋轉45°

按此在新窗口瀏覽圖片

把圖層模式改為overlay降低透明度為30.

按此在新窗口瀏覽圖片

把圖層復制兩次,如圖把圖層按比例縮小

按此在新窗口瀏覽圖片

插入一幅漂亮的圖片或者是公司的產品

按此在新窗口瀏覽圖片

在右側底部插入公司的logo

按此在新窗口瀏覽圖片