經(jīng)常看到很多店鋪的背景和店招是同一張圖片，感覺渾然天成，羨慕那些自定義的個性化的店招，經(jīng)常被小而美的店鋪很所吸引，不用懂網(wǎng)頁設計、html代碼也可以裝修成這樣的店鋪。開始之前來看看對比效果。
設置之前
裝修完成之后：
店招和頁面背景是同一張圖片，風格也統(tǒng)一。（為了體現(xiàn)導航欄是自己制作的，所以我呈現(xiàn)得比較大，自己在制作的時候可以根據(jù)店鋪的風格適當?shù)陌褜Ш綑诓糠挚s小）。
一、PS處理
1.自己找一張或者是用PS制作一張背景圖， 圖片色彩最好跟店鋪風格一致或者呈現(xiàn)相應的節(jié)日氣氛的圖片，寬度建議1500px以上。因為現(xiàn)在很多電腦都是寬屏的，如果太小了，兩邊會出現(xiàn)本來背景的填充，根據(jù)這個店鋪是賣卡通服飾，并且在夏天，所以我找了色彩亮一點的圖片，把它另存為1。
2.以下是需要用PS進行處理，啟動PS軟件，打開這張圖片 。
新建一個圖層，畫一個950px*150px的矩形，并靠頂部居中。居中方式可以建參考線，我的背景圖片大小是1500px，建參考線1500-950=550,所以建一條距離左邊225px的參考線將矩形左邊與參考線對齊。
3.用剪裁工具剪下上半部分。
4.剪裁好的圖片是1500*150px，將藍色區(qū)域那塊隱藏（不要刪除，后面需要用到），保存圖片之后就得到如下圖，保存命名為2。
5.接下來將隱藏的藍色區(qū)域顯示，之后按照矩形的大小剪裁，剪裁出950*150px大小的圖
6.剪裁好之后隱藏藍色區(qū)域圖層，并將此圖片保存命名3
7.現(xiàn)在就可以按照自己的思路去設計導航欄了，內(nèi)容自選！如果不需要首頁的按鈕就不加進去，如果喜歡QQ圖標也可以自己加進去。也可以根據(jù)自己店鋪所銷售的產(chǎn)品添加，不同的季節(jié)也可以換不同的導航按鈕進去（我加了首頁、夏短袖純棉款、反季清倉、兒童款、成人款、收藏）。填充同色系的顏色。
8.加上文字和斜線，加上店鋪的名稱以及其他的一些信息。
9.接下來是最重要的，請耐心的看下去哦！
接下來我們利用PS中得切片工具將按鈕切片
10.接下來我們保存文件，選擇PS菜單欄上的存儲為Web和設備所用格式（快捷鍵：Shift+Alt+Ctrl+S），在彈出的窗口中格式選擇JPEG，品質(zhì)為100，保存的時候選擇HTML和圖像。
保存完畢之后查看是一個文件夾還有一個網(wǎng)頁文件。
11.images文件夾里就是用切片工具切開的圖片。（不同的按鈕最后行成的圖片數(shù)量不一樣）
12.接下來用記事本打開3.html文件。
13.打開記事本之后在里看到的是代碼。看到這些先別傻眼，你不需要認識它們。按照以下的操作就很簡單。
14.先刪除<table 以上的內(nèi)容，7行代碼
15.后面的table>也刪除
16.剩下就是我們需要的代碼了。
17.現(xiàn)在先將images文件夾里的圖片上傳到圖片空間，注意不能修改圖片的名稱。
18.現(xiàn)在講以下畫紅色部分的代碼替換為剛剛上傳到圖片空間里對應圖片的地址。
19.換的時候只要對應的名字沒有錯就不會出錯了！例如 images/3_01.jpg就換成圖片空間里3_01的地址就可以了！
20.到此為止，我們在PS里的工作就完成了，接下來就是到自己的店鋪裝修中去了。先打開裝修頁面。
21.我們先設置店招，選“自定義店招”，將我們剛剛修改好的代碼復制到編輯框里，還要將高度設置為150px。
22.點擊保存之后店招的效果就出來了。
23.繼續(xù)點店招編輯，選中 “首頁”圖片，點擊編輯，在鏈接網(wǎng)址后面填寫上店鋪首頁的地址。
25.首頁的鏈接做好之后，其他的分類也按照同樣的方法去做。查找分類鏈接的方法可以到店鋪左側的分類導航里點擊相應的按鈕，在地址欄復制做相應的鏈接。
二、完成店招導航，繼續(xù)設置背景。
1、鼠標移到“裝修”上面，選擇“樣式編輯”。
2、選擇背景設置。
3、在頁頭設置上傳圖2，就是我們在PS中處理存儲尺寸為1500*150的圖片2。選擇不平鋪，居中。
4、在“頁面背景”選項卡內(nèi)上傳圖1，就是我們一開始做到的那張原圖。
5、之后將頁面背景設置為白色，如果是其他顏色就設置為其他顏色，顯示前面的復選框需要打上勾！
6、系統(tǒng)到導航欄在裝修的時候是顯示的，發(fā)貨之后就看不到了。最終效果就完成了哦！一張圖片做了從店招到頁面的背景了。
注意：此時頁面背景只鋪滿了網(wǎng)頁的上半部分，也就是圖片高度的部分，如果想讓圖片鋪滿首頁所有的地方那么第四步的時候選擇“背景顯示”為縱向平鋪就可以。
設置之前
裝修完成之后：
店招和頁面背景是同一張圖片，風格也統(tǒng)一。（為了體現(xiàn)導航欄是自己制作的，所以我呈現(xiàn)得比較大，自己在制作的時候可以根據(jù)店鋪的風格適當?shù)陌褜Ш綑诓糠挚s小）。
一、PS處理
1.自己找一張或者是用PS制作一張背景圖， 圖片色彩最好跟店鋪風格一致或者呈現(xiàn)相應的節(jié)日氣氛的圖片，寬度建議1500px以上。因為現(xiàn)在很多電腦都是寬屏的，如果太小了，兩邊會出現(xiàn)本來背景的填充，根據(jù)這個店鋪是賣卡通服飾，并且在夏天，所以我找了色彩亮一點的圖片，把它另存為1。
2.以下是需要用PS進行處理，啟動PS軟件，打開這張圖片 。
新建一個圖層，畫一個950px*150px的矩形，并靠頂部居中。居中方式可以建參考線，我的背景圖片大小是1500px，建參考線1500-950=550,所以建一條距離左邊225px的參考線將矩形左邊與參考線對齊。
3.用剪裁工具剪下上半部分。
4.剪裁好的圖片是1500*150px，將藍色區(qū)域那塊隱藏（不要刪除，后面需要用到），保存圖片之后就得到如下圖，保存命名為2。
5.接下來將隱藏的藍色區(qū)域顯示，之后按照矩形的大小剪裁，剪裁出950*150px大小的圖
6.剪裁好之后隱藏藍色區(qū)域圖層，并將此圖片保存命名3
7.現(xiàn)在就可以按照自己的思路去設計導航欄了，內(nèi)容自選！如果不需要首頁的按鈕就不加進去，如果喜歡QQ圖標也可以自己加進去。也可以根據(jù)自己店鋪所銷售的產(chǎn)品添加，不同的季節(jié)也可以換不同的導航按鈕進去（我加了首頁、夏短袖純棉款、反季清倉、兒童款、成人款、收藏）。填充同色系的顏色。
8.加上文字和斜線，加上店鋪的名稱以及其他的一些信息。
9.接下來是最重要的，請耐心的看下去哦！
接下來我們利用PS中得切片工具將按鈕切片
10.接下來我們保存文件，選擇PS菜單欄上的存儲為Web和設備所用格式（快捷鍵：Shift+Alt+Ctrl+S），在彈出的窗口中格式選擇JPEG，品質(zhì)為100，保存的時候選擇HTML和圖像。
保存完畢之后查看是一個文件夾還有一個網(wǎng)頁文件。
11.images文件夾里就是用切片工具切開的圖片。（不同的按鈕最后行成的圖片數(shù)量不一樣）
12.接下來用記事本打開3.html文件。
13.打開記事本之后在里看到的是代碼。看到這些先別傻眼，你不需要認識它們。按照以下的操作就很簡單。
14.先刪除<table 以上的內(nèi)容，7行代碼
15.后面的table>也刪除
16.剩下就是我們需要的代碼了。
17.現(xiàn)在先將images文件夾里的圖片上傳到圖片空間，注意不能修改圖片的名稱。
18.現(xiàn)在講以下畫紅色部分的代碼替換為剛剛上傳到圖片空間里對應圖片的地址。
19.換的時候只要對應的名字沒有錯就不會出錯了！例如 images/3_01.jpg就換成圖片空間里3_01的地址就可以了！
20.到此為止，我們在PS里的工作就完成了，接下來就是到自己的店鋪裝修中去了。先打開裝修頁面。
21.我們先設置店招，選“自定義店招”，將我們剛剛修改好的代碼復制到編輯框里，還要將高度設置為150px。
22.點擊保存之后店招的效果就出來了。
23.繼續(xù)點店招編輯，選中 “首頁”圖片，點擊編輯，在鏈接網(wǎng)址后面填寫上店鋪首頁的地址。
25.首頁的鏈接做好之后，其他的分類也按照同樣的方法去做。查找分類鏈接的方法可以到店鋪左側的分類導航里點擊相應的按鈕，在地址欄復制做相應的鏈接。
二、完成店招導航，繼續(xù)設置背景。
1、鼠標移到“裝修”上面，選擇“樣式編輯”。
2、選擇背景設置。
3、在頁頭設置上傳圖2，就是我們在PS中處理存儲尺寸為1500*150的圖片2。選擇不平鋪，居中。
4、在“頁面背景”選項卡內(nèi)上傳圖1，就是我們一開始做到的那張原圖。
5、之后將頁面背景設置為白色，如果是其他顏色就設置為其他顏色，顯示前面的復選框需要打上勾！
6、系統(tǒng)到導航欄在裝修的時候是顯示的，發(fā)貨之后就看不到了。最終效果就完成了哦！一張圖片做了從店招到頁面的背景了。
注意：此時頁面背景只鋪滿了網(wǎng)頁的上半部分，也就是圖片高度的部分，如果想讓圖片鋪滿首頁所有的地方那么第四步的時候選擇“背景顯示”為縱向平鋪就可以。
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務權威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
本文來源： 淘寶店鋪裝修之店招導航欄個性化設置
