淘宝店铺关于怎么做好分类导航的四大步骤及其具体流程详解

店主若想让自己的分类导航给进入店铺浏览的买家留下一个深刻的印象，就需要自己动手进行设计了。下面我们来了解学习下淘宝店铺关于怎么做好分类导航的四大步骤及其具体流程吧。

分类导航一般包括欢迎图片与商品分类图片两种。可在欢迎图片上加入联系方式、营业时间等信息。

一、制作分类导航模板

在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'’的地址，单击“确定”按钮。单击“保存按钮，完成操作。

通过上述方法，可继续在店铺中添加新分类或给原有分类添加图片。店铺类目设置完成后单击保存按钮，单击“查看我的店铺”按钮，会发现店铺的分类已经发生了大变化。

淘宝店铺关于怎么做好分类导航的四大步骤及其具体流程，小编就给大家介绍到这了。如果店主想让自己店铺的分类导航显得与众不同，则可将各项分类导航制作成图片。