第二章 网店的店标与分类导航

网店店标有什么作用

店标就是你的网店页面头部左上角的图片标识，是消费者打开你的网店首页时最先看到的地方，也是最醒目的地方。它的功能不止是突出显示店名、装饰店铺这么简单。小小店标里有深层的意义。

从店标的演变过程可以看到店标艺术风格、特点的变化。现代店标设计的信息化、视觉化、现代化是当前的世界潮流。当然，对于多数店主来说，这个要求是比较高的，因为一个优秀的店标需要一个很好的创意和艺术家的妙手才能够打造出来。

当然我们也不用害怕，自己可以尝试着去制作店标，这样能够在制作的过程中捕捉创意的灵感。店标的首要任务就是向消费者传达信息，最终目的是让消费者记住自己的网店，使网店区别于其他网店。

一、店标向消费者告知的信息

店标也叫店标图片，是网店形象识别系统的重要组成元素之一，是网店特色和内涵的集中体现。一个好的店标图片可以让消费者浏览网店时体会到店主的良苦用心，从而会对网店产生比较深刻的印象，这样就有增加交易的可能了。

店标设计是一种特殊文字或图像组成的大众传播符号，它的基本功能是以图形传达信息，表现其内在的质量、特点，而以之作为沟通的媒介。它借鉴和运用原始符号，并赋予原始符号以更高的艺术高度。网店店主一定要开动脑筋多想想，让店标成为诠释网店服务的媒介。

二、如何打造极具吸引力的店标

要制作出一个好店标，绝非一朝一夕的功夫。因为这个小小的店标牵涉到人文、科技及一个人的美学修养等方面。店主要在非常短的时间里制作出优秀的店标，是件难事，但是在头脑中勾画出店标的大体样式是比较容易的。这样，店主可以选择把自己的想法告诉专业的标志设计人员，请他们将你的想法用图像表现出来。

制作网店店标的方法

店标设计是一种乐趣，更是一种艺术创造，每一种艺术创作都有相应的理论作为指导，因此掌握好店标的设计标准，对店标的设计还是有一定指导意义的。对于淘宝网店的店标，按照其存在的状态可以分为：动态店标和静态店标。

一、制作店标前的准备

制作店标需要捕捉艺术创作灵感。灵感来自于哪里呢？

许多人抱怨自己没有艺术细胞，其实只是自己没有仔细观察罢了。要制作店标离开对生活素材的积累是不行的。因此倘若网店店主想制作出优秀的店标，必须多积累些生活素材。

二、简易静态店标的制作

对于大多数能够使用电脑的人来说，修改一张静态图片使之成为自己网店的店标并非是件困难的事。一般来说，一个静态店标由文字、图像构成，静态店标有纯文字店标、纯图像店标、文字图像混合店标。网店店主可以使用名牌产品标志作为自己的店标，这样店主只要把产品标志扫描下来即可。采用这类方法制作店标简单、快捷。网店店主也可以自己先用铅笔在稿纸上设计好草图，再用扫描仪扫描下来，最后使用Photoshop处理。

三、简易动态店标的制作

动态店标就是一小段由图像文字构成的gif动画。接下来重点讲述如何使用Photoshop来制作具有动态效果的网店店标。

图片制作工具：Photoshop软件。

动态店标简易制作流程：

安装并启动ps（photoshop的缩写）软件。

建立图层，并在图层里粘贴图片或输入相应的文字。

转到ps动画编辑窗口。

修改动画参数，预览后再反复修改。

保存后，上传到淘宝网店的店标区域。

网店的商品分类

如果买家进入店铺后，点击相应的分类却提示“没有相应宝贝”，不仅会让买家失望，而且会让买家觉得店主没有用心经营，这样买家对店主的印象就会不好。因此，店主应及时为自己的商品进行分类。给商品分类能够提高店铺的形象，也能够提高交易率。给商品分类能给买家带来许多方便，服务于买家，其实最终是为店家自己服务。下面以在淘宝网上的店铺为例，告诉新手们制作商品分类的技巧。

一、制作商品分类导航

商品分类导航可分成文字分类与图片分类两种。文字分类：进入“我的淘宝”—“我是卖家”—“店铺管理”—“店铺装修”—“店铺类目”—进行宝贝类目的分类。

二、对宝贝进行分类

对商品进行基本分类的步骤是：进入“我的淘宝”—“我是卖家”—“店铺管理”—“店铺装修”—“店铺类目”—“宝贝分类”—“未分类宝贝”—按下图进行放置。为方便买家购买，店主应及时为你的商品分类。

三、调整分类顺序

调整分类顺序的步骤是：进入“我的淘宝”—“我是卖家”—“店铺管理”—“店铺装修”—“店铺类目”—“宝贝分类”—对相应类目排序号进行修改并按后面的“修改”键保存。

四、关于一级分类与二级分类

目前，一些网站如淘宝网只支持一级分类，但可以利用空间错位法来达到级别分类的效果，这样能给买家在视觉上做出一级与二级分类。

五、制作相同名称的二级分类（技巧）

如卖包的店，可以将斜挎包为一个一级分类，单肩包为一级分类，但在各个分类下均有相同的风格，即均含有比如淑女风格与手绘风格两种。

制作网店的分类导航

店铺中的分类导航即店铺类目，不论是在普通店铺中还是在旺铺中其均在店铺左侧显示，作用是显示商品的分类。

对一家店铺而言，所售商品分类是否合理是十分重要的。分类导航可运用简单的文字展现，也可使用独具特色的图片来展现，从而让店铺更加吸引人。若使用文字分类，则导航的大小与颜色都是不能变的。如果店主想让自己店铺的分类导航显得与众不同，则可将各项分类导航制作成图片。对图片的高度没有严格的要求，只需合适就行，但图片的宽度最好不超过180像素。

店主若想让自己的分类导航给进入店铺浏览的买家留下一个深刻的印象，就需要自己动手进行设计了。

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

一、制作分类导航模板

在photoshop软件中制作分类导航模板的具体操作步骤如下：

一般来说，网上搜集到的图片很难与所要求的图片尺寸完全相同，因此要调整搜集到的图片尺寸。打开photoshop软件，选择菜单“文件”—“打开”命令，打开已搜集的两幅素材图片，可以看到两幅图片的样式非常接近要制作的欢迎图片和商品分类图片，但它们的尺寸并不合适，因此要对图片进行修改。

开始制作欢迎图片，素材图片的尺寸是200像素×200像素，要把它的宽度修改为160像素。选择菜单“文件”—“新建”命令，打开“新建”对话框。设置“宽度”为160像素，“高度”为200像素，“分辨率”为72像素/英寸。单击“确定”按钮，在photoshop软件编辑窗口中新建一个空白图片文件。

切换到素材图片，选择菜单“选择”—“全部”命令，然后选择菜单“编辑”—“拷贝”命令复制图像。单击新建的空白图片，选择“粘贴”命令将图片粘贴过来。

在工具栏中单击“移动工具”按钮，水平移动图层至右侧。在工具栏中单击“缩放工具”按钮将图片放大，接下来调整图片大小。在工具栏中选择“矩形选框工具”按钮，在图层右侧从顶部到底部拖出一个矩形区域。在应用移动工具水平移动图层时，图层会自动和边框对齐，就像被吸附住一样，这一功能有利于准确的调整、定位图层位置。

因为原来素材较宽，要将其变窄，所以单击“移动工具”按钮，向左水平拖动选择的区域。选择菜单“选择”—“取消选择”命令取消区域选择。使用移动工具将图层移动到中间位置。此时如果宽度没有调整到位，可以重复上面的步骤，直到调整为合适的边框。

选择菜单“文件”—“保存”命令，弹出“存储为”对话框，将图片保存为“欢迎．psd”。

新建一个尺寸为155像素×72像素的空白文件，将另一幅素材图片用同样的方法粘贴到新建的空白文件中。将图片放大到300%，并移动到右对齐的位置。使用“矩形选框工具”按钮选择矩形区域。

在工具栏中单击“移动工具”按钮，然后按下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和设备所用格式”对话框，在“品质”下拉列表中选择“两次立方”。单击“存储”按钮，弹出“将优化结果存储为”对话框，在对话框中设置文件名为“menu1.gif”。单击“保存”按钮完成gif动画的保存。

接下去再制作两个按钮“旺铺装修”和“个性化装修”。在Photoshop软件中打开“按钮．psd”，分别修改两个文字图层中的内容，按照上面的步骤进行操作即可。完成后分别保存为“menu2.gif”和“menu3.gif”。

四、将分类导航应用到网店中

接下来以淘宝店铺为例，介绍怎样把已经制作好的分类导航图片应用到店铺中，具体的操作步骤如下：

按照前面章节介绍的方法将图片上传到已有的空间中。

登录“我的淘宝”，进入“我是卖家”页面，单击“店铺管理”下的“店铺装修”链接，进入“店铺装修平台”页面。接着单击“店铺类目”右侧的“编辑”链接，转入“编辑分类”页面。

单击“添加新分类”按钮，在“分类名称”文本框中输入“欢迎图片”。

单击“添加图片”链接，弹出“图片地址”编辑框。

在“图片地址”中输入图片“huanying.gif”的地址，单击“确定”按钮。单击“保存”按钮，完成操作。

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