巧用PS製作淘寶通欄店招--店招導航欄製作(二)?

Tags: 淘寶, 店招, 通欄,

前兩篇分享了通欄店招的頁頭背景圖片的製作和上傳方法,這篇我們繼續分享店招通欄導航欄的製作與上傳方法。

方法/步驟

在店招通欄背景中我們截取一張1920*30的矩形圖片,並填充我們自己想要的顏色。為了達到立體效果,我用漸變填充的顏色。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

在製作出的導航條中編寫我們需要編寫的導航菜單。請注意,因頁頭背景不能自適應頁面,所以要將導航條略靠內一點,以免筆記本電腦展示不全。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

選擇切片工具,切出圖片。將製作好的全圖存儲為html格式。即“文件-存儲為web所用格式-存儲”,然後將格式類型存儲為html格式(如不清楚,詳細做法請參考《如何將圖片存儲為html格式》)。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

把每一個導航塊切下來,保存並上傳淘寶空間備用。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

在切好的圖片上點擊右鍵,在彈出的界面中選擇“編輯切片選項”。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

在新彈出的界面中即可直接輸入圖片地址和鏈接目標,然後保存。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

在dreamweaver中打開我們前面保存的html文件,拷貝代碼,返回店鋪裝修,刪除默認導航模板-新建自定義模板-拷入代碼-保存-發佈,即可成功!

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

也可以使用dreamweaver編輯的方式,進行鏈接和目標位置的添加,上傳代碼的方式與上述部分完全相同。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

如果想更多地瞭解圖片存儲為html文件的方法,以及在淘寶首頁實現自動跳轉的話,請繼續關注《如何將圖片存儲為html格式》和《淘寶等網頁輕鬆實現跳轉的方法》。

巧用PS製作淘寶通欄店招--店招導航欄製作(二)

相關問題答案