（6）选择菜单"文件"-"存储为Web和设备所用格式"命令，弹出"存储为Web和设备所用格式"对话框，在"品质"下拉列表中选择"两次立方"。单击"存储"按钮，弹出"将优化结果存储为"对话框，在对话框中设置文件名为“menu1.gif”。单击"保存"按钮完成gif动画的保存。
（7）接下去再制作两个按钮"旺铺装修"和"个性化装修"。在Photoshop软件中打开"按钮.psd"，分别修改两个文字图层中的内容，按照上面的步骤进行操作即可。完成后分别保存为“menu2.gif”和“menu3.gif”。
4、将分类导航应用到网店中
接下来以淘宝店铺为例来介绍怎样把已经制作好的分类导航图片应用到店铺中，具体的操作步骤如下：
（1）按照前面章节介绍的方法将图片上传到已有的空间中。
（2）登录"我的淘宝"，进入"我是卖家"页面，单击"店铺管理"下的"店铺装修"链接，进入"店铺装修平台"页面。接着单击"店铺类目"右侧的"编辑"链接，转入"编辑分类"页面。
（3）单击"添加新分类"按钮，在"分类名称"文本框中输入"欢迎图片"。
（4）单击"添加图片"链接，弹出"图片地址"编辑框。
（5）在"图片地址"中输入图片“huanying.gif”的地址，单击"确定"按钮。单击"保存"按钮，完成操作。
（6）根据上面的方法，可继续在店铺中添加新分类或给原有分类添加图片。店铺类目设置完成后单击保存按钮，单击"查看我的店铺"按钮，会发现店铺的分类已经发生了大变化。
网店商品描述模板包括哪些内容
制作商品描述模板的目的是为了展示店铺里的商品，它包括宝贝描述，宝贝展示、买家须知、联系我们与邮资说明等板块。
商品描述模板能对商品起到装饰与衬托作用，同时还可以提高店铺商品的人气。一般来说，商品描述模板有宽版与窄版两种形式。普通店铺通常采用的是宽版样式设计，而在旺铺中由于左侧有能够显示掌柜档案、店铺类别等隐藏/显示侧栏，所以店主要根据不同的默认设置来选择商品描述模板是用宽版还是窄版。通常而言，宽版商品描述模板宽度不得大于930像素，窄版商品描述模板宽度不得大于710像素，而高度都是没有限制的。
关于商品描述模板，有这样几条建议：
在制作商品描述模板前，可以先去看看其他卖家的模板吸取一些经验，将好的借鉴到自己的店铺中来使用。
如果你的商品描述模板不适宜用在你的店铺中，就先不要使用模板。
为突出店铺中的商品图片，商品描述模板上其他的内容一定要简单明了，以免次要部分太过花哨而无法突显商品图。
商品描述里最基本的信息包括商品名称、具体的尺寸和价格等，也可以将优惠信息或是邮费信息加进去。如果有条件可找个服务器将图片上传，接着将图片的地址添加至商品描述中，买家看到实物图还有细节图会更有兴趣看下去，这样就能提高交易率了。
通常来说，制作商品描述模板包含下面几部分内容：
店铺公告，与普通店铺中的公告类似，一般以滚动字幕的方式显示。
新品推荐，把新商品的图片制作成滚动方式显示。
宝贝展示，用来展示当前商品的细节、大图等，图的数量可根据实际情况来定，可以是单图也可以是多图。令宝贝描述，对商品进行文字描述。令买家须知，可以在这里输入一些注意事项。
联系方式，可以显示手机号码、旺旺、MSN、QQ和E-mail等联系方式。
邮资说明，也就是关于商品邮寄资费的说明。
怎样制作宽版商品描述模板
宽版商品描述模板所包含的栏目信息比较多，如商品分类、店铺公告、最新推荐和更多推荐，以及最关键的商品描述、商品展示、联系方式、邮资说明和买家须知等内容。
在本节中以“随心饰品”为主题的宽版商品描述模板设计与制作，具体操作步骤如下。
1、制作商品描述模板
在设计描述模板前要先在网络中搜集一些相关的素材图片，来作为顶部背景与店铺公告装饰图片。在photoshop软件中设计商品描述模板，各个栏目之间要注意合理布局，具体操作步骤如下：
（1）打开photoshop软件，选择菜单"文件"―“新建”命令，弹出“新建文档”对话框，设置宽度为，930像素，高度为300像素， 接着在工具栏中将前景颜色设置为"白色"（#ffffff），背景颜色设置为“淡紫色”（#ecdff5）
（2）在工具栏中单击“渐变工具”按钮，接着在“选项”面板中单击“点按可编辑渐变”按钮，打开“渐变编辑器”对话框，在“预设”区域中单击第1个选项。选择“图层”―“新建”―“图层”命令，创建一个新图层，然后在图片中从上至下填充渐变颜色。
（3）打开素材图片，将其拖动至已创建的图片中，并使用"编辑"菜单中的“自由转换”命令，来调整图片尺寸，调整到合适大小后将图片移动到左侧。
（4）打开另一幅素材图片，作为公告图片。因其背景为透明，所以可直接复制粘贴到“银质项链.psd”图片中，调整大小与位置。
（5）在工具栏中单击“橫排文字工具”按钮，在“选项”面板中将字体设置为"方正流行体简"，字体大小为36点，设置取消锯齿的方法为"浑厚"，设置文本颜色为"白色"。接着在图片中输入店铺名称"随心饰品"，并对文字进行描边样式设置。
（6）在右侧顶部制作几个按钮，在工具栏中单击"圆角矩形工具"按钮，在"选项"面板中设置半径为"5px"，设置新图层样式为"无样式"，设置新图层颜色为"白色"（#ffffff）。在图片中拖动鼠标绘制出一个圆角矩形框。在新增加的形状图层中，添加图层描边样式，设置2像素的淡紫色描边。
（7）在"图层"面板中再复制3个形状图层，然后使用键盘上的箭头按钮将4个按钮移动至水平位置。利用素材图像在每一个按钮前添加一只蝴蝶图案进行装饰，要注意统一位置。
（键盘上的箭头按钮一次只能移动1像素，而使用箭头按钮"则可一次移动10像素，这样能够快速把图层移动到相应的位置。这里使用箭头按钮进行移动图层，而不用鼠标进行直接拖动图层元素，是为保证移动对象能够水平对齐。）
（8）在工具栏中单击"橫排文字工具"按钮，然后分别在4个按钮中输入文字"我的店铺、信用评价、个人空间和加入收藏"，在打开的"字符"面板中设置字体为"方正黑体简体"，字体大小为14点"，设置消除锯齿的方法为"浑厚"，设置文本颜色为"紫色"（#4d067e）设置字间距为70。
（9）在按钮文字下方制作"最新推荐"栏目，首先输入文字"最新推荐"，并设置相关字体、颜色、描边等样式。然后使用前面介绍的圓角矩形工具，绘制出一个白色背景、粉红色沟边的矩形区域。在其中将制作滚动图片的效果。
（10）选择菜单"图像"―"画布大小"命令，弹出"画布大小"对话框，在其中将高度修改为1060像素，然后在"定位"中单击第1排中间的方块。单击"确定"按钮，图片的高度变为1060像素。
接下来对画布扩展后的图片的下半部分进行设计与制作，具体操作步骤如下：
（1）单击"矩形选框工具"按钮，在图片下半部分拖出一个矩形区域，并采用淡紫色进行填充。
（2）在工具栏中单击"圆角矩形工具"按钮，分别在填充的淡紫色区域中绘制出左右两个背景为白色的矩形框。在左侧制作"商品分类、更多推荐"栏目，在右侧制作"宝贝展示、宝贝描述、买家须知、邮资说明和联系方式"栏目。
（3）需要在左侧区域制作两个栏目按钮"商品分类"与"更多推荐"，单击"圆角矩形工具"按钮，在左侧区域中拖出一个圓角矩形框，这时的矩形框采用了前景颜色填充。复制圆角矩形框并移动到下方，分别输入两个按钮的名称。
（4）在右側制作其他相关栏目，这里可运用一些恰当的花边进行装饰，并在中间输入标题名称。
（5）根据同样的方法，再将其他几个栏目的标题名称制作出来，由于它们是并列一起的，可以统一风格，只需修改标题文字即可。
（6）"银质项链.psd"商品描述模板图片制作完成后，将其直接保存。
2、制作闪光动画
在前一节中制作完成的商品描述模板，只是静态的，还不够美观，而若想生成的网页更加绚烂，就需增加一些动画效果。给模板制作闪光动画的具体操作步骤如下：
（1）打开photoshop软件，打开上一节中保存的图片"银质项链.psd"。
（2）绘制一个闪光的图案。新建一个图层，在工具栏中单击"椭圆选框工具"按钮，在任意位置拖出一个椭圆形选框。选择菜单"编辑"―"填充"命令，使用深紫色进行填充。
（3）在工具栏中单击"移动工具"按钮，按下alt键后拖动鼠标复制一个相同的深紫色椭圆形。选择菜单"编辑"―"自由变换"命令，对图形进行位置调整，将其移至与第1个椭圆形相交的位置。
（4）按下回车键确定完成调整。接着在"图层"面板中选中这两个图层，并单击右上角的箭头按钮，在弹出的菜单中选择"合并图层"命令。
（5）选择菜单"编辑"―"自由变换"命令，按住shift键进行等比例缩小闪光图形至合适的大小，最终设计成小星星的形状。
（6）将闪光点复制到所有希望看到闪动的位置，然后根据实际情况调整它们的大小、角度等。如可在"最新推荐"的旁边复制一些，店名旁复制一些等。
（7）选择菜单"窗口"―"动画"命令，打开"动画"面板。单击"复制当前帧"按钮，就能在"动画"面板中显示一个新的帧。
（8）在"动画"面板中选中第2帧，然后在"图层"面板中分别选中每1个闪光图案所在的图层，将它们的透明度分别设置为50%。
（9）完成设置后，选中两个帧，将延迟时间都设置为0.2秒。单击"播放/停止动画"按钮就能显示制作完成的动画效果。最后将图片保存成gif动画格式即可。
3、裁剪和保存描述模板
在本节中将对怎样将制作好的图片裁切成适合制作网页的元素做一个介绍，具体操作步骤如下：
（1）打开photoshop软件，打开上小节设计好的描述模板图片，选择菜单"视图"―"标尺"命令，显示图片标尺，并保证“视图”―“显示”―“参考线”为选中状态，接着从标尺的位置拖出参考线。
（2）根据上面的方法再拖出几条参考线。参考线的作用是标注裁切成最终图片的位置，因而要注意尽量将有动画效果的部分放置在一个区域里，这样存储成一个gif格式的动画即可。另外，还要注意裁切的图片尽可能保持高度相同，不然会给图片拼接造成麻烦。
（在拖出参考线时，如果看不清楚具体的位置，可将图片放大显示，这样能让参考线的位置更加准确。像关联性不是太强的按钮以及最新推荐等标题，可不用参考线来定位，直接裁切后保存成图片就行了。）
（3）在工具栏中单击"裁切工具"按钮，拖动鼠标选中左侧的一列。这列中没有动画效果，因而可将其制成一张图片。在选中区域双击鼠标左键，完成图片裁剪。
（4）选择菜单"文件"―"存储为Web和设备所用格式"命令，弹出"存储为和设备所用格式"对话框，单击"四联"按钮，图片显示四联，分别显示了不同颜色状态下图片保存后的大小，在不失真的情况下可以选择第3个。
（5）单击"存储"按钮，弹出"将优化结果存储为"对话框，在对话框中选择要保持的文件夹，将文件命名为“top-1.gif”，单击"保存"按钮，完成图片保存。
（6）选择菜单"窗口"―"历史记录"命令，打开"历史记录"面板，在历史记录列表中选择"裁剪"的前一条记录，图片将返回裁剪前的状态。
（7）单击"裁剪工具"按钮，拖动鼠标选中相应区域。
（8）根据前面同样的方法单击"四联"按钮，在其中选中32颜色选项的图片，将其存储为“top-2.gif”。
（9）继续按照上面的方法裁切保存其余未裁剪的gif图片动画，左侧上半部分的图片被切割成以下几个部分。
（10）接下来开始裁剪右侧上半部分的按钮和最新推荐等内容。从标尺中拖出一些参考线用来划分按钮，这里不再赘述裁剪方法。相对而言，保存下半部分的图片元素比较简单，只需把圆角区域与按钮都保存成单独的图片就可以了。
4、制作宽版描述模板网页
在运用描述模板前，要先将其生成HTML代码，然后才可以应用到网上店铺中。
可使用Dreamweaver软件将描述模板生成HTML代码。在Dreamweaver软件中，主要是采用层“DIV”，或表格来控制文字与图片元素，对于不熟练的人来说'采用表格布局会更简便些。使用Dreamweaver软件生成网页代码的具体操作步骤如下：