無論是在旺鋪還是在普通店鋪中，店鋪的分類導航都是非常重要的，對于一家店鋪而言，合理的商品分類十分重要。分類導航可運用簡單的文字展現，也可以使用獨具特色的圖片來展現，從而讓店鋪更加吸引人。若使用文字分類，則導航的大小與顏色都是不能變的。如果店主想讓自己店鋪的分類導航顯得與眾不同，則可將各項分類導航制作成圖片。對圖片的高度沒有嚴格的要求，只需合適就行，但圖片的寬度最好不超過180像素。

　　店主若想讓自己的分類導航給進入店鋪瀏覽的買家留下一個深刻的印象，就需要自己動手進行設計了。

　　分類導航一般包括歡迎圖片與商品分類圖片兩種。可在歡迎圖片上加入聯系方式、營業時間等信息。

　　一、制作分類導航模板

　　在photoshop軟件中制作分類導航模板的具體操作步驟如下：

　　一般來說，網上搜集到的圖片很難與所要求的圖片尺寸完全相同，因此要調整搜集到的圖片尺寸。打開photoshop軟件，選擇菜單“文件”一“打開”命令，打開已搜集的兩幅素材圖片，可以看到兩幅圖片的樣式非常接近要制作的歡迎圖片和商品分類圖片，

　　但它們的尺寸并不合適，因此要對圖片進行修改。

　　開始制作歡迎圖片，素材圖片的尺寸是200像素×200像素，要把它的寬度修改為160像素。選擇菜單“文件”一“新建”命令，打開“新建”對話框。設置 “寬度”為160像素，“高度”為200像素，“分辨率”為72像素/英寸。單擊“確定”按鈕，在photoshop軟件編輯窗口中新建一個空白圖片文件。

　　切換到素材圖片，選擇菜單“選擇”一“全部”命令，然后選擇菜單“編輯”一“拷貝”命令復制圖像。單擊新建的空白圖片，選擇“粘貼”命令將圖片粘貼過來。

　　在工具欄中單擊“移動工具”按鈕，水平移動圖層至右側。在工具欄中單擊“縮放工具”按鈕將圖片放大，接下來調整圖片大小。在工具欄中選擇“矩形選框工具” 按鈕，在圖層右側從頂部到底部拖出一個矩形區域。在應用移動工具水平移動圖層時，圖層會自動和邊框對齊，就像被吸附住一樣，這一功能有利于準確的調整、定位圖層位置。

　　因為原來素材較寬，要將其變窄，所以單擊“移動工具”按鈕，向左水平拖動選擇的區域。選擇菜單“選擇”一“取消選擇”命令取消區域選擇。使用移動工具將圖層移動到中間位置。此時如果寬度沒有調整到位，可以重復上面的步驟，直到調整為合適的邊框。

　　選擇菜單“文件”一“保存”命令，彈出“存儲為”對話框，將圖片保存為“歡迎.psd”。

　　新建一個尺寸為155像素×72像素的空白文件，將另一幅素材圖片用同樣的方法粘貼到新建的空白文件中。將圖片放大到300010，并移動到右對齊的位置。使用“矩形選框工具”按鈕選擇矩形區域。

　　在工具欄中單擊“移動工具”按鈕，然后按下alt鍵的同時拖動圖片上的矩形選區，即可在同一圖層中對選擇區進行移動，如果圖片上有文字可將其覆蓋。

　　按照以上的方法能夠將圖片的寬度變大。

　　圖片的高度可以按照統一的方法進行處理，但要注意與右側的花朵圖標的鏈接。圖片寬度和高度調整完成后，將圖片保存為“按鈕2.psd”。

　　二、為分類導航添加文字

　　店主可按照自身需要來制作商品分類圖片上的文字。可在歡迎圖片上標注聯系方式、

　　工作時間和店鋪名稱等內容，在商品分類圖片上則可標注不同商品的名稱。在歡迎圖片與商品分類圖片上制作文字的具體操作步驟如下：

　　打開“歡迎.psd”圖片，在工具欄中單擊“橫排文字工具”按鈕輸入店鋪名稱“隨心設計”。

　　雙擊選中文字，在“選項”面板中將字體設置為“方正準圓簡體”，設置字體大小為“18 點”，設置消除鋸齒的方法為“平滑”，設置文本顏色為“水紅色”。

　　選擇菜單“圖層”一“圖層樣式”一“描邊”命令，打開“圖層樣式”對話框。在左側“樣式”列表中選擇“描邊”選項，在右側的“大小”文本框中輸入1像素。單擊填充類型的“顏色”按鈕，選擇填充顏色為“藍色”。

　　單擊“確定”按鈕后，為文字增加了藍色的描邊。

　　在店鋪名稱下輸入工作時間與聯系方式，而文字樣式則延續了前面的設置。

　　接著修改剛才輸入的字體樣式與顏色。雙擊選中榆人的文字，在“選項”設置字體為“漢儀凌波體簡”，字體大小為“14點”，單擊填充類型“顏色”按鈕，選擇填充顏色為“梅紅色”單擊“確定”按鈕。

　　設置行距為18點，設置消除鋸齒的方法為“平滑”，然后將文字移動到圖片中間位置，并為文字加上1像素灰色的描邊效果。

　　根據前面的方法，給商品分類圖片添加文字。打開商品分類圖片“按鈕.psd”，設置字體為“漢儀方隸簡”，字體大小為“18點”，設置消除鋸齒的方法為“平滑”，設置文本顏色為“粉色”，然后輸入商品分類名稱，如“普通店鋪裝修”，并設置位置為2像素的白色描邊。

######

　　三、制作分類導航動畫

　　給店鋪設置分類導航是為了讓買家能清晰地了解店鋪中的各類商品，因此制作鮮明的分類名稱是十分重要的。而突出效果的最好方法便是使用動畫方式。下面教你如何使用之前制作好的歡迎圖片與商品分類圖片制作動畫效果。

　　打開photoshop軟件，打開兩幅圖片“歡迎.psd”和“按鈕.psd”。先單擊“歡迎.psd”文件，由于圖片中沒有特殊的圖案，可復制一些心形圖案以便制作動畫效果。

　　合并心形圖案的幾個圖層，在“圖層”面板中單擊“圖層2”將其選中。單擊工具欄中的“魔棒工具”按鈕，在打開的“選項”面板中設置容差為2，并取消“消除鋸齒”、“連續”和“對所有圖層取樣”多選框。在心形圖案的中間位置單擊，就能夠選中所有顏色相同的區域。

　　在“圖層”面板中單擊“創建新圖層”按鈕，然后選擇菜單“編輯”一“填充”命令，打開“填充”對話框，在“使用”下拉菜單中選擇“白色”選項。單擊“確定”按鈕后，圖層中被選中區域填充為“白色”，在圖層右上角設置不透明度為50%。

　　在“圖層”面板中單擊背景圖層前面的“眼睛”圖標，將其隱藏。選擇菜單“窗口”一“動畫”命令，打開“動畫”面板，單擊“復制當前幀”按鈕。

　　在“動畫”面板中單擊第1幀，在“圖層”面板中將圖層3設置為隱藏，在“動畫”面板中單擊第2幀，在“圖層”面板中將圖層3設置為顯示。然后，選中第1幀和第2幀，單擊“動畫”面板“0秒”，在打開的菜單中選擇延遲時間“0.5秒”。

　　單擊“動畫”面板中的“播放/停止動畫”按鈕，就可以查看動畫顯示效果。選擇菜單“文件”一“存儲為Web和設備所用格式”命令，彈出“Web和設備所用格式”對話框，在“品質”下拉列表中選擇“兩次立方”。

　　單擊“存儲”按鈕，彈出“將優化結果存儲為”對話框，在對話框中設置文件名為“huanying.gif"。單擊“保存”按鈕完成gif動畫的保存。

　　商品分類按鈕動畫的制作方法，與歡迎圖片的制作方法類似，需要把分類文字設置為閃動。其具體操作步驟如下：

　　選擇“按鈕.psd”圖片，在“圖層”面板中隱藏背景圖層。

　　選中文字圖層，把它拖動到“創建新圖層”按鈕處，就可以復制一個相同的文字圖層。

　　雙擊新復制圖層右側的圖層效果標志，打開“圖層樣式”對話框，在“描邊”設置中把填充顏色調整為“藍紫色”。

　　單擊“確定”按鈕，剛復制的圖層中文字描邊顏色從白色變成了藍紫色。在“動畫”面板中單擊“復制當前幀”按鈕，選中第1幀時，設置顯示原來的文字圖層，隱藏復制的文字圖層;選中第2幀時，設置顯示復制的文字圖層，隱藏原來的文字圖層，

　　單擊“動畫”面板上的“0秒”，將兩個幀的延遲時間都選擇為“1.2”秒。

　　選擇菜單“文件”一“存儲為Web(超文本)和設備所用格式”命令，彈出“存儲為Web和設備所用格式”對話框，在“品質”下拉列表中選擇“兩次立方”。單擊“存儲”按鈕，彈出“將優化結果存儲為”對話框，在對話框中設置文件名為“menul.gif”。單擊“保存”按鈕完成gif動畫的保存。

　　接下去再制作兩個按鈕“旺鋪裝修”和“個性化裝修”。在Photoshop軟件中打開“按鈕.psd”，分別修改兩個文字圖層中的內容，按照上面的步驟進行操作即可。完成后分別保存為“menu2.gif\'’和“menu3.gif\'’。

　　四、將分類導航應用到淘寶網店中

　　接下來以淘寶店鋪為例，介紹怎樣把已經制作好的分類導航圖片應用到店鋪中，具體的操作步驟如下：

　　按照前面章節介紹的方法將圖片上傳到已有的空間中。

　　登錄“我的淘寶”，進入“我是賣家”頁面，單擊“店鋪管理”下的“店鋪裝修”鏈接，進入“店鋪裝修平臺”頁面。接著單擊“店鋪類目”右側的“編輯”鏈接，轉入“編輯分類”頁面。

　　單擊“添加新分類”按鈕，在“分類名稱”文本框中輸入“歡迎圖片”。

　　單擊“添加圖片”鏈接，彈出“圖片地址”編輯框。

　　在“圖片地址”中輸入圖片“huanying.gif\'’的地址，單擊“確定”按鈕。單擊“保存按鈕，完成操作。

　　通過上述方法，可繼續在店鋪中添加新分類或給原有分類添加圖片。店鋪類目設置完成后單擊保存按鈕，單擊“查看我的店鋪”按鈕，會發現店鋪的分類已經發生了大變化。

查看更多相似文章