無論是在旺鋪還是在普通店鋪中，店鋪的分類導(dǎo)航都是非常重要的，對(duì)于一家店鋪而言，合理的商品分類十分重要。分類導(dǎo)航可運(yùn)用簡(jiǎn)單的文字展現(xiàn)，也可以使用獨(dú)具特色的圖片來展現(xiàn)，從而讓店鋪更加吸引人。若使用文字分類，則導(dǎo)航的大小與顏色都是不能變的。如果店主想讓自己店鋪的分類導(dǎo)航顯得與眾不同，則可將各項(xiàng)分類導(dǎo)航制作成圖片。對(duì)圖片的高度沒有嚴(yán)格的要求，只需合適就行，但圖片的寬度最好不超過180像素。
店主若想讓自己的分類導(dǎo)航給進(jìn)入店鋪瀏覽的買家留下一個(gè)深刻的印象，就需要自己動(dòng)手進(jìn)行設(shè)計(jì)了。
分類導(dǎo)航一般包括歡迎圖片與商品分類圖片兩種。可在歡迎圖片上加入聯(lián)系方式、營業(yè)時(shí)間等信息。
一、制作分類導(dǎo)航模板
在photoshop軟件中制作分類導(dǎo)航模板的具體操作步驟如下：
一般來說，網(wǎng)上搜集到的圖片很難與所要求的圖片尺寸完全相同，因此要調(diào)整搜集到的圖片尺寸。打開photoshop軟件，選擇菜單“文件”一“打開”命令，打開已搜集的兩幅素材圖片，可以看到兩幅圖片的樣式非常接近要制作的歡迎圖片和商品分類圖片，
但它們的尺寸并不合適，因此要對(duì)圖片進(jìn)行修改。
開始制作歡迎圖片，素材圖片的尺寸是200像素×200像素，要把它的寬度修改為160像素。選擇菜單“文件”一“新建”命令，打開“新建”對(duì)話框。設(shè)置 “寬度”為160像素，“高度”為200像素，“分辨率”為72像素/英寸。單擊“確定”按鈕，在photoshop軟件編輯窗口中新建一個(gè)空白圖片文件。
切換到素材圖片，選擇菜單“選擇”一“全部”命令，然后選擇菜單“編輯”一“拷貝”命令復(fù)制圖像。單擊新建的空白圖片，選擇“粘貼”命令將圖片粘貼過來。
在工具欄中單擊“移動(dòng)工具”按鈕，水平移動(dòng)圖層至右側(cè)。在工具欄中單擊“縮放工具”按鈕將圖片放大，接下來調(diào)整圖片大小。在工具欄中選擇“矩形選框工具” 按鈕，在圖層右側(cè)從頂部到底部拖出一個(gè)矩形區(qū)域。在應(yīng)用移動(dòng)工具水平移動(dòng)圖層時(shí)，圖層會(huì)自動(dòng)和邊框?qū)R，就像被吸附住一樣，這一功能有利于準(zhǔn)確的調(diào)整、定位圖層位置。
因?yàn)樵瓉硭夭妮^寬，要將其變窄，所以單擊“移動(dòng)工具”按鈕，向左水平拖動(dòng)選擇的區(qū)域。選擇菜單“選擇”一“取消選擇”命令取消區(qū)域選擇。使用移動(dòng)工具將圖層移動(dòng)到中間位置。此時(shí)如果寬度沒有調(diào)整到位，可以重復(fù)上面的步驟，直到調(diào)整為合適的邊框。
選擇菜單“文件”一“保存”命令，彈出“存儲(chǔ)為”對(duì)話框，將圖片保存為“歡迎.psd”。
新建一個(gè)尺寸為155像素×72像素的空白文件，將另一幅素材圖片用同樣的方法粘貼到新建的空白文件中。將圖片放大到300010，并移動(dòng)到右對(duì)齊的位置。使用“矩形選框工具”按鈕選擇矩形區(qū)域。
在工具欄中單擊“移動(dòng)工具”按鈕，然后按下alt鍵的同時(shí)拖動(dòng)圖片上的矩形選區(qū)，即可在同一圖層中對(duì)選擇區(qū)進(jìn)行移動(dòng)，如果圖片上有文字可將其覆蓋。
按照以上的方法能夠?qū)D片的寬度變大。
圖片的高度可以按照統(tǒng)一的方法進(jìn)行處理，但要注意與右側(cè)的花朵圖標(biāo)的鏈接。圖片寬度和高度調(diào)整完成后，將圖片保存為“按鈕2.psd”。
二、為分類導(dǎo)航添加文字
店主可按照自身需要來制作商品分類圖片上的文字?？稍跉g迎圖片上標(biāo)注聯(lián)系方式、
工作時(shí)間和店鋪名稱等內(nèi)容，在商品分類圖片上則可標(biāo)注不同商品的名稱。在歡迎圖片與商品分類圖片上制作文字的具體操作步驟如下：
打開“歡迎.psd”圖片，在工具欄中單擊“橫排文字工具”按鈕輸入店鋪名稱“隨心設(shè)計(jì)”。
雙擊選中文字，在“選項(xiàng)”面板中將字體設(shè)置為“方正準(zhǔn)圓簡(jiǎn)體”，設(shè)置字體大小為“18 點(diǎn)”，設(shè)置消除鋸齒的方法為“平滑”，設(shè)置文本顏色為“水紅色”。
選擇菜單“圖層”一“圖層樣式”一“描邊”命令，打開“圖層樣式”對(duì)話框。在左側(cè)“樣式”列表中選擇“描邊”選項(xiàng)，在右側(cè)的“大小”文本框中輸入1像素。單擊填充類型的“顏色”按鈕，選擇填充顏色為“藍(lán)色”。
單擊“確定”按鈕后，為文字增加了藍(lán)色的描邊。
在店鋪名稱下輸入工作時(shí)間與聯(lián)系方式，而文字樣式則延續(xù)了前面的設(shè)置。
接著修改剛才輸入的字體樣式與顏色。雙擊選中榆人的文字，在“選項(xiàng)”設(shè)置字體為“漢儀凌波體簡(jiǎn)”，字體大小為“14點(diǎn)”，單擊填充類型“顏色”按鈕，選擇填充顏色為“梅紅色”單擊“確定”按鈕。
設(shè)置行距為18點(diǎn)，設(shè)置消除鋸齒的方法為“平滑”，然后將文字移動(dòng)到圖片中間位置，并為文字加上1像素灰色的描邊效果。
根據(jù)前面的方法，給商品分類圖片添加文字。打開商品分類圖片“按鈕.psd”，設(shè)置字體為“漢儀方隸簡(jiǎn)”，字體大小為“18點(diǎn)”，設(shè)置消除鋸齒的方法為“平滑”，設(shè)置文本顏色為“粉色”，然后輸入商品分類名稱，如“普通店鋪裝修”，并設(shè)置位置為2像素的白色描邊。
三、制作分類導(dǎo)航動(dòng)畫
給店鋪設(shè)置分類導(dǎo)航是為了讓買家能清晰地了解店鋪中的各類商品，因此制作鮮明的分類名稱是十分重要的。而突出效果的最好方法便是使用動(dòng)畫方式。下面教你如何使用之前制作好的歡迎圖片與商品分類圖片制作動(dòng)畫效果。
打開photoshop軟件，打開兩幅圖片“歡迎.psd”和“按鈕.psd”。先單擊“歡迎.psd”文件，由于圖片中沒有特殊的圖案，可復(fù)制一些心形圖案以便制作動(dòng)畫效果。
合并心形圖案的幾個(gè)圖層，在“圖層”面板中單擊“圖層2”將其選中。單擊工具欄中的“魔棒工具”按鈕，在打開的“選項(xiàng)”面板中設(shè)置容差為2，并取消“消除鋸齒”、“連續(xù)”和“對(duì)所有圖層取樣”多選框。在心形圖案的中間位置單擊，就能夠選中所有顏色相同的區(qū)域。
在“圖層”面板中單擊“創(chuàng)建新圖層”按鈕，然后選擇菜單“編輯”一“填充”命令，打開“填充”對(duì)話框，在“使用”下拉菜單中選擇“白色”選項(xiàng)。單擊“確定”按鈕后，圖層中被選中區(qū)域填充為“白色”，在圖層右上角設(shè)置不透明度為50%。
在“圖層”面板中單擊背景圖層前面的“眼睛”圖標(biāo)，將其隱藏。選擇菜單“窗口”一“動(dòng)畫”命令，打開“動(dòng)畫”面板，單擊“復(fù)制當(dāng)前幀”按鈕。
在“動(dòng)畫”面板中單擊第1幀，在“圖層”面板中將圖層3設(shè)置為隱藏，在“動(dòng)畫”面板中單擊第2幀，在“圖層”面板中將圖層3設(shè)置為顯示。然后，選中第1幀和第2幀，單擊“動(dòng)畫”面板“0秒”，在打開的菜單中選擇延遲時(shí)間“0.5秒”。
單擊“動(dòng)畫”面板中的“播放/停止動(dòng)畫”按鈕，就可以查看動(dòng)畫顯示效果。選擇菜單“文件”一“存儲(chǔ)為Web和設(shè)備所用格式”命令，彈出“Web和設(shè)備所用格式”對(duì)話框，在“品質(zhì)”下拉列表中選擇“兩次立方”。
單擊“存儲(chǔ)”按鈕，彈出“將優(yōu)化結(jié)果存儲(chǔ)為”對(duì)話框，在對(duì)話框中設(shè)置文件名為“huanying.gif"。單擊“保存”按鈕完成gif動(dòng)畫的保存。
商品分類按鈕動(dòng)畫的制作方法，與歡迎圖片的制作方法類似，需要把分類文字設(shè)置為閃動(dòng)。其具體操作步驟如下：
選擇“按鈕.psd”圖片，在“圖層”面板中隱藏背景圖層。
選中文字圖層，把它拖動(dòng)到“創(chuàng)建新圖層”按鈕處，就可以復(fù)制一個(gè)相同的文字圖層。
雙擊新復(fù)制圖層右側(cè)的圖層效果標(biāo)志，打開“圖層樣式”對(duì)話框，在“描邊”設(shè)置中把填充顏色調(diào)整為“藍(lán)紫色”。
單擊“確定”按鈕，剛復(fù)制的圖層中文字描邊顏色從白色變成了藍(lán)紫色。在“動(dòng)畫”面板中單擊“復(fù)制當(dāng)前幀”按鈕，選中第1幀時(shí)，設(shè)置顯示原來的文字圖層，隱藏復(fù)制的文字圖層;選中第2幀時(shí)，設(shè)置顯示復(fù)制的文字圖層，隱藏原來的文字圖層，
單擊“動(dòng)畫”面板上的“0秒”，將兩個(gè)幀的延遲時(shí)間都選擇為“1.2”秒。
選擇菜單“文件”一“存儲(chǔ)為Web(超文本)和設(shè)備所用格式”命令，彈出“存儲(chǔ)為Web和設(shè)備所用格式”對(duì)話框，在“品質(zhì)”下拉列表中選擇“兩次立方”。單擊“存儲(chǔ)”按鈕，彈出“將優(yōu)化結(jié)果存儲(chǔ)為”對(duì)話框，在對(duì)話框中設(shè)置文件名為“menul.gif”。單擊“保存”按鈕完成gif動(dòng)畫的保存。
接下去再制作兩個(gè)按鈕“旺鋪裝修”和“個(gè)性化裝修”。在Photoshop軟件中打開“按鈕.psd”，分別修改兩個(gè)文字圖層中的內(nèi)容，按照上面的步驟進(jìn)行操作即可。完成后分別保存為“menu2.gif'’和“menu3.gif'’。
四、將分類導(dǎo)航應(yīng)用到淘寶網(wǎng)店中
接下來以淘寶店鋪為例，介紹怎樣把已經(jīng)制作好的分類導(dǎo)航圖片應(yīng)用到店鋪中，具體的操作步驟如下：
按照前面章節(jié)介紹的方法將圖片上傳到已有的空間中。
登錄“我的淘寶”，進(jìn)入“我是賣家”頁面，單擊“店鋪管理”下的“店鋪裝修”鏈接，進(jìn)入“店鋪裝修平臺(tái)”頁面。接著單擊“店鋪類目”右側(cè)的“編輯”鏈接，轉(zhuǎn)入“編輯分類”頁面。
單擊“添加新分類”按鈕，在“分類名稱”文本框中輸入“歡迎圖片”。
單擊“添加圖片”鏈接，彈出“圖片地址”編輯框。
在“圖片地址”中輸入圖片“huanying.gif'’的地址，單擊“確定”按鈕。單擊“保存按鈕，完成操作。
通過上述方法，可繼續(xù)在店鋪中添加新分類或給原有分類添加圖片。店鋪類目設(shè)置完成后單擊保存按鈕，單擊“查看我的店鋪”按鈕，會(huì)發(fā)現(xiàn)店鋪的分類已經(jīng)發(fā)生了大變化。
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來源： 淘寶店鋪如何制作分類導(dǎo)航？
