淘宝怎样制作个性店铺店招和导航栏

淘宝怎样制作个性店铺店招和导航栏

店铺导航是店铺的一个关键部分，很多新开淘宝店铺的都很头疼店招的制件，购买现成的又不想花钱的，谁都想让店铺更有特色，那么这就需要自己设计，自己制作的，下面的文章是小编亲自折磨出来的，希望对大家有帮助。下面就来介绍下如何自己制作个性店铺店招和店铺导航。　

首先，用AdobePhotoshopCS2设计一张自己满意的底图。图片尺寸是1500*150的下面是我设计好的底图（宽度建议为1500以上，因为现在很多电脑都是宽屏的，如果太小了，两边会出现背景的填充了，拼色就不好看了）。以下是PS处理图片。

新建一个图层，之后按照矩形居中的大小裁剪，裁剪出950*150的效果图，这是店招所需的图片。

下面就按照自己的意思去设计自己喜欢的导航栏，导航标签内容自己定，你不喜欢首页按钮，不做就可以了，分别打上文字，我输入的是（全部宝贝、镇店坚果、蜜饯果脯、糕点糖果、大大礼包、新疆特产、其他爆款）内容效果可以根据自己的喜好，加上阴影，描边等等。以下就是我完成的效果图。

下一步是利用PS的切片工具分别将导航中的每一块按钮都分别切开，切好效果如下：

然后分别右击每个小切片，弹出的窗口“切片选项”页面中，确定好名称，最好是用方便下面制作透明文件对应该文件名称。URL栏里填上自己店铺所需页面网址，复制粘贴即可。

接下来我们就点击菜单栏的文件→ImageReady中编辑，打开页面后，选择菜单栏上的文件→将优化存储为，在弹出的窗口中，文件类型选HTML和图像（*.html）,然后储存。储存结果有两个文件，一个是网页文件，一个文件夹，images文件夹里面就是切开好的图片。如图。

下一步是用PS新建透明文件，按ImageReady文件夹里面对应的文件大小，新建，设置大小，背景色为透明。如图：

接下来我们就保存它，选择PS菜单栏上的文件→储存为Web所用格式（快捷键：shift+ctrl+aly+s），名称一定要记住所对应的ImageReady文件夹里面对应的文件名称，在弹出的窗口中，格式选选择PNG！

单击下面的“储存”，在弹出的窗口中，将格式选为“HTML和图像”然后再保存！

将images文件夹里的图片上传到淘宝的图片空间里！名字不要改！

我们用记事本工具打开.html文件（网页文件）

我们可以看到一些代码，看到这些先别头疼，其实很简单的，按照我说的做就可以了！

将代码中红线标出的本地图片链接换成刚刚上传上去的图片代码，一个个替换，记得对应的文件名字。换的时候只要刚才保存的透明文件对应的名字去换就不会错了，比如images/店招_01.jpg就换成图片空间里“未标题-1”的图片，这样我们PS中要做的事情就全部做好了。

下面就要到自己的店铺里去装修了！先打开装修页面

我们先设置店招，选为“自定义招牌”，然后按下工具栏中的“源码”按钮，之后将刚刚我们修改好的代码全部复制到编辑框内！还有将高度设置为“150”！ 保存。

所有工作完成之后，在卖家中心里点击查看我的店铺，即可以看到自己制作的漂亮图片了。