店鋪導(dǎo)航是網(wǎng)店的一個(gè)關(guān)鍵部分，誰(shuí)都想讓店鋪導(dǎo)航有特色，那么這就需要自己設(shè)計(jì)，自己制作了，今天我們就來(lái)介紹下如何自己制作店鋪導(dǎo)航。　

一、我們現(xiàn)在去找一張圖片，就是要做成底圖的圖片，寬度建議為1500以上，因?yàn)楝F(xiàn)在很多電腦都是寬屏的，如果太小了，兩邊會(huì)出現(xiàn)背景的填充了，我找到的是下面這張圖片！這張圖片命名為1

二、以下是PS處理，懂的可以了解下，不懂的可以跳過(guò)！

1、用PS打開這張圖片

2、然后新建一個(gè)圖層，畫一個(gè)950PX*150PX的矩形！并靠頂部居中！

3、用裁剪工具剪下上面部分

4、裁剪好的圖片尺寸是1500*150的，然后將那塊紅色的矩形隱藏（不要?jiǎng)h除，后面還有用），保存圖片就得到了下面這個(gè)圖片，你將它命名為2

5、接下來(lái)將隱藏的矩形顯示，之后按照矩形的大小裁剪，裁剪出950*150的效果圖

6、裁剪好的圖片效果就是下面這張了！將其命名為3

7、現(xiàn)在就按照自己的意思去設(shè)計(jì)自己喜歡的導(dǎo)航咯，內(nèi)容自己選，你不喜歡首頁(yè)按鈕，不做就可以了，你如果需要聯(lián)系QQ的按鈕也都可以自己加進(jìn)去的，我現(xiàn)在做了的分別有（首頁(yè)、寶貝分類、關(guān)于我們、店鋪動(dòng)態(tài)、友情鏈接和收藏）

效果如下

7.1、以上效果做的過(guò)程為，先畫一個(gè)矩形，用編輯→變形→傾斜效果將其做成傾斜的，透明度為44%，陰影顏色跟前色相同，達(dá)到以下效果

7.2、在加上斜線和文字就完成效果了！

8、接下來(lái)就是最重要的步驟了，想學(xué)的要耐心看下去哦！利用PS的切片工具將導(dǎo)航中的每一塊按鈕都分別切開，切好效果如下

9、接下來(lái)我們就保存它，選擇PS菜單欄上的文件→儲(chǔ)存為Web所用格式（快捷鍵：shift+ctrl+aly+s），在彈出的窗口中，格式選為jpeg品質(zhì)為最高100！

10、單擊下面的“儲(chǔ)存”，在彈出的窗口中，將格式選為“HTML和圖像”然后再保存！

11、保存下來(lái)有一個(gè)images文件夾，還有一個(gè)網(wǎng)頁(yè)文件！

12、images文件夾里面就是切開的圖片！

13、我們用記事本工具打開3.html文件（網(wǎng)頁(yè)文件）

14、我們可以看到一切代碼，看到這些先別頭疼，其實(shí)很簡(jiǎn)單的，按照我說(shuō)的做就可以了！

14.1、先刪除

14.2、后面以后的內(nèi)容也刪除掉，也就是最后的3行代碼！

14.3、剩下的就是我們需要的代碼！

14.4、現(xiàn)在先將images文件夾里的圖片上傳到淘寶的圖片空間里！名字不要改！

14.5、將代碼中紅線標(biāo)出的本地圖片連接換成剛剛上傳上去的圖片連接！

14.6、換的時(shí)候只要對(duì)應(yīng)的名字去換就不會(huì)錯(cuò)了，比如images/3_01.jpg就換成圖片空間里3_01的圖片，全部換好后的效果如下

15、這樣我們PS中要做的事情就全部做好了，接下來(lái)就要到自己的店鋪里去裝修了！先打開裝修頁(yè)面

16、我們先設(shè)置店招，選為“自定義招牌”，然后按下工具欄中的“源碼”按鈕，之后將剛剛我們修改好的代碼全部復(fù)制到編輯框內(nèi)！還有將高度設(shè)置為“150”！

18、然后在點(diǎn)店鋪編輯，選中“首頁(yè)”圖片

19、再按下工具欄中的“插入連接”，輸入你的店鋪地址，按確定！

20、這樣做好之后，首頁(yè)按鈕就起作用了，其它分類都是這樣添加就可以了！，找連接的方式很簡(jiǎn)單，只要你在原來(lái)的店鋪中單擊相應(yīng)的按鈕，打開頁(yè)面后復(fù)制那個(gè)地址就對(duì)了！，比如“寶貝分類”，你單擊一下寶貝分類之后就會(huì)進(jìn)入寶貝分類的頁(yè)面，然后復(fù)制地址欄里的連接，拿來(lái)做超鏈接就可以了！

是不是很簡(jiǎn)單，大家只要按照教程自己操作一遍就會(huì)了。

樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來(lái)源： 如何自己制作個(gè)性店鋪導(dǎo)航條