淘宝店铺装修之店招导航栏个性化设置

经常看到很多店铺的背景和店招是同一张图片，感觉浑然天成，羡慕那些自定义的个性化的店招，经常被小而美的店铺很所吸引，不用懂网页设计、html代码也可以装修成这样的店铺。开始之前来看看对比效果。
设置之前
装修完成之后：
店招和页面背景是同一张图片，风格也统一。（为了体现导航栏是自己制作的，所以我呈现得比较大，自己在制作的时候可以根据店铺的风格适当的把导航栏部分缩小）。
一、PS处理
1.自己找一张或者是用PS制作一张背景图， 图片色彩最好跟店铺风格一致或者呈现相应的节日气氛的图片，宽度建议1500px以上。因为现在很多电脑都是宽屏的，如果太小了，两边会出现本来背景的填充，根据这个店铺是卖卡通服饰，并且在夏天，所以我找了色彩亮一点的图片，把它另存为1。
 
2.以下是需要用PS进行处理，启动PS软件，打开这张图片 。
新建一个图层，画一个950px*150px的矩形，并靠顶部居中。居中方式可以建参考线，我的背景图片大小是1500px，建参考线1500-950=550,所以建一条距离左边225px的参考线将矩形左边与参考线对齐。
3.用剪裁工具剪下上半部分。
4.剪裁好的图片是1500*150px，将蓝色区域那块隐藏（不要删除，后面需要用到），保存图片之后就得到如下图，保存命名为2。
5.接下来将隐藏的蓝色区域显示，之后按照矩形的大小剪裁，剪裁出950*150px大小的图
6.剪裁好之后隐藏蓝色区域图层，并将此图片保存命名3
7.现在就可以按照自己的思路去设计导航栏了，内容自选！如果不需要首页的按钮就不加进去，如果喜欢QQ图标也可以自己加进去。也可以根据自己店铺所销售的产品添加，不同的季节也可以换不同的导航按钮进去（我加了首页、夏短袖纯棉款、反季清仓、儿童款、成人款、收藏）。填充同色系的颜色。
8.加上文字和斜线，加上店铺的名称以及其他的一些信息。
9.接下来是最重要的，请耐心的看下去哦！
接下来我们利用PS中得切片工具将按钮切片
10.接下来我们保存文件，选择PS菜单栏上的存储为Web和设备所用格式（快捷键：Shift+Alt+Ctrl+S），在弹出的窗口中格式选择JPEG，品质为100，保存的时候选择HTML和图像。


保存完毕之后查看是一个文件夹还有一个网页文件。

11.images文件夹里就是用切片工具切开的图片。（不同的按钮最后行成的图片数量不一样）
12.接下来用记事本打开3.html文件。
13.打开记事本之后在里看到的是代码。看到这些先别傻眼，你不需要认识它们。按照以下的操作就很简单。
14.先删除<table 以上的内容，7行代码
15.后面的table>也删除
16.剩下就是我们需要的代码了。
17.现在先将images文件夹里的图片上传到图片空间，注意不能修改图片的名称。
18.现在讲以下画红色部分的代码替换为刚刚上传到图片空间里对应图片的地址。
19.换的时候只要对应的名字没有错就不会出错了！例如 images/3_01.jpg就换成图片空间里3_01的地址就可以了！
20.到此为止，我们在PS里的工作就完成了，接下来就是到自己的店铺装修中去了。先打开装修页面。
21.我们先设置店招，选“自定义店招”，将我们刚刚修改好的代码复制到编辑框里，还要将高度设置为150px。
22.点击保存之后店招的效果就出来了。
23.继续点店招编辑，选中 “首页”图片，点击编辑，在链接网址后面填写上店铺首页的地址。
25.首页的链接做好之后，其他的分类也按照同样的方法去做。查找分类链接的方法可以到店铺左侧的分类导航里点击相应的按钮，在地址栏复制做相应的链接。


二、完成店招导航，继续设置背景。
1、鼠标移到“装修”上面，选择“样式编辑”。
2、选择背景设置。
3、在页头设置上传图2，就是我们在PS中处理存储尺寸为1500*150的图片2。选择不平铺，居中。
4、在“页面背景”选项卡内上传图1，就是我们一开始做到的那张原图。
5、之后将页面背景设置为白色，如果是其他颜色就设置为其他颜色，显示前面的复选框需要打上勾！
6、系统到导航栏在装修的时候是显示的，发货之后就看不到了。最终效果就完成了哦！一张图片做了从店招到页面的背景了。
注意：此时页面背景只铺满了网页的上半部分，也就是图片高度的部分，如果想让图片铺满首页所有的地方那么第四步的时候选择“背景显示”为纵向平铺就可以。

本文地址：http://www.mybaibao.com/share/clipart/132.html

• 上一篇：店铺装修常见的七宗罪（淘宝店误区）
• 下一篇：百宝教育教你让图片会“说话”