装修高手教你如何玩转旺铺.docx

装修高手教你如何玩转旺铺.docx

《装修高手教你如何玩转旺铺.docx》由会员分享，可在线阅读，更多相关《装修高手教你如何玩转旺铺.docx（25页珍藏版）》请在冰豆网上搜索。

装修高手教你如何玩转旺铺

装修高手教你如何玩转旺铺

大多数卖家都想给自己的店铺弄点属于自己的风格的装修，但是每次在选择banner的时候，总是觉得标准版和扶植版太小了，总是把一张好看的图片裁成一条长长的。

我刚开始也是这样，后来经常跑论坛多了，学会了一些美工的基础，现在分享给大家。

希望大家能够有所收获。

分解步骤的图片可能有点多，如果想学的话，耐心的看完吧。

普通旺铺标准版最终效果展示

 在发一个扶植版的效果

 保证你看完之后。

就算你一点都不会，都敢自己动手操作一下。

一、准备篇章（所谓磨刀不误砍柴工）

具体操作如下：

图文介绍，不要怕不会，也许你的一小步会成为以后的一大步。

首先需要准备两个软件，

一个是PHOTOSHOP

一个是Dreamweave

需要装修的话，这两个软件是必须具备的，而且现在有他们的合集下载。

AdobeDesignPremiumCS3，这里面包括了所有Adobe的软件。

不要怕麻烦，如果想自己能简单弄一下的话，去下载一个装好，以后什么事都可以自己动手操作一下了，我也是从一个菜鸟，自己慢慢的开始实践出来的。

二、图片处理篇（简单的操作，无限发挥出你的灵感）

1、打开

，先选择一张自己喜欢的图片，大小都没有限制，反正你觉得适合你就可以了，装修出自己的风格来。

选择裁剪工具，把宽度设置成为950px（一定要写px，要不它默认是cm的，那就大的老火了）高度设置成为600px（根据个人的爱好）。

2、把图片完整的裁剪成为950*600的大小，因为淘宝拓展版以下的banner都是950*150的

 3、继续选择裁剪工具，设置宽度为950px高度为150px。

从上到下按照图片最大范围，裁剪出一个150px高的图片出来。

然后我们点另存为950.jpg，这个950的图片一会在来编辑。

4、在历史记录这里返回到我们裁剪到600px的那一个步骤。

5、现在我们在裁剪一张950px*450px的图片出来。

 6、这次从下面开始拖，就不会和我们的刚才裁剪的150px的图片有重合的地方。

7、接着我们按照淘宝的尺寸规则，裁剪一块750px*450px的图片。

因为标准版我们不能自定义950px这么大小的，所以就只有把950*450的图片裁剪成2块。

一块是750*450大小的，另外侧边的那块是200*450的（扶植版的话就只要裁剪750的就可以了，因为不能自定义侧边，裁剪好750*450的图片后，就点另存为750.jpg）

8、标准版的，把200px*450px的那张图片另存为200.jpg

三、图片装饰篇（美工不会，打字会吧）

9、打开我们刚才保存的950*150大小的图片，这个就会作为我们店铺首页的banner条。

我们在上面简单的写上自己需要的文字，如果想做高级一些的可以到阿里妈妈的广告设计里面去自己设计一个。

这样可以加上一些别的动画。

10、这里我们就例举仅仅写文字的banner条，加上文字以后，在文字图层点右键，混合选项，随便加点效果。

我这里是加了一个阴影和描边

11、扶植版的可以跳过这一步，或者开通标准版。

现在开通旺铺是50元一个月，如果开通一个季度的话是90元。

消保的都是30元一个月。

标准版的亲们，因为可以自定侧边200px大小的图片，所以我们把刚才保存的200.jpg的图片打开到PS里面，进行编辑。

我这里就不做复杂的操作，就是简单的把文字打上。

  12、接着我们把刚才保存的750.jpg的图片打开。

在合适的位置用矩形形状画几个形状出来，形状工具在文字工具的下面。

画好的三个形状，我们留下来写店铺信誉，买家必读，反正这个你可以自由发挥的。

四、PS切片应用（重点就是这里）

13、重点的步骤，就是ps的切片了，因为有了这个切片，我们就可以把他作为一个网页代码来操作，那样做什么都很方便了。

先选择切片工具，因为我们这里是简单的示范，所以就不会切那么多。

14、把刚才我们写的三个框用切片工具选择起来，就刚好选到那么大小就可以了

15、划好了切片之后，右键有一个划分切片，因为我们这里刚好是三个，就选择水平划分为3片

16、如果我们需要在这上面写上一点公告之类的，我们也可以在旁边这里用切片工具划一块区域出来。

17、做到这一步，我们基本上对图片的操作就完成了，这时候就是最关键的地方了，请仔细看，我们把刚才切片好的了图片，点“文件”-“存储为WEB和设备所用格式”。

必须是CS以上的版本才可以，因为有人问到我说自己用的7.0版本，没有存储WEB格式这个选项。

18、存储的格式，就是默认的html文件，这是一个网页文件，我们直接点保存就OK了。

五、DW代码篇

19、这时候我们会在我们保存的位置那里看到两个文件，一个是html的这个网页文件，还有一个是images的图片文件，就是刚才我们切片之后，它就会把我们那张750px的图片划分为很多小张小张的。

20、我们打开images这个文件夹，看到有很多张.gif文件名的文件，这样就是正确的。

因为我们刚才在旁边还划了一块公告的区域，所以我们现在可以把这一张图片给删除掉，或者在一会的DW里面插入文本框，为了方便，我们就删除这个文件。

21、 接下来，我们打开Dreamweaver

，把刚才保存的那个750.html文件打开，我们会看到下面这样的显示，然后我们点收藏本店这里，会发现他是一个独立。

然后我们在链接那里写上店铺的收藏地址。

22、收藏地址现在非常方便就可以找到了，直接到我们的店铺，点下最上方自己名字的那里，就会出来一个自己的信息，然后我们在收藏那个地方点右键，查看收藏的地址。

同样的，我们把信誉评价的地址也复制下来，放到相应的图片链接里面。

  23、接下来，我们点一下，代码按钮会看到这样写好的代码，千万别发昏，因为你只要修改几个地方就可以了。

我们可以看到里面有一段这样的

我用蓝色标注的这一段就是我们刚才切片的图片文件，因为我们用要自定义的代码文件来操作，所以就必须把这个图片文件上传到网络空间里面去，要不人家怎么可能访问到你单机上的图片呢。

24、把images里面的全部图片上传到一个图片空间里面，不要上QQ空间、XX空间之类的，他们禁止外链了。

最好是使用淘宝空间，因为插入图片和复制地址最方便。

我个人是喜欢FTP空间，只要把文件管理好，操作起来也是比较快的。

25、上传完了图片之后，我们把图片的地址复制下来，不用修改文件名，这样会操作快一些，把地址这里的地址换成我们网络空间http:

//开头的地址。

注意到这里我们会看到一个分隔符的图片，但是只有一个文件，同样的，我们也把分隔符的地址复制过来写在的里面。

26、弄好了图片的地址之后，点保存这个代码文件。

六、装修尝试篇

27、打开我的淘宝里面，我是卖家的店铺装修

28、先点击最上面的banner编辑，点浏览上传我们最开始裁剪出来的那一张950*150的图片点保存。

29、拖到最下面，点击添加模块，扶植版直接就显示在最上面的那个自定义内容区了，标准版的就需要自己添加两个，一个侧边的，一个右边的。

30、我们在自定义内容里面不需要写标题，如果写了标题会出现一个设置的背景底色，影响我们的整体效果。

标准版旺铺的因为在侧边可以编辑，所以我们也要把这个200px*450px的图片上传到图片空间，然后点击添加图片把地址写到里面。

注意：

淘宝里面所有的图片链接只能写淘宝的地址有效，写外部的网站是没有用的

31、编辑完了侧边的，我们就把右边这一个自定义区域编辑一下，点击工具里面最后的那个编辑HTML源码。

把刚才我们保存的那个代码文件复制进来。

弄好了之后在点击一下编辑HTML源码，就可以看到显示的效果了。

32、大功告成了，点击发布，就可以保存我们刚才做的这些操作了。

后记：

虽然大家看到我这里那么多个步骤，其实操作起来估计不需要操作5分钟就弄好了，这样的好处是，我们可以把一张完整的图片让他显示在我们自己的首页中，可以更好的展示我们的首页。

不用因为淘宝的banner条只有150px的高度而放弃了很多非常漂亮的设计。