淘宝最全面的模板教程（完整版）！（新手卖家必看）

好开心呀，变红了，庆祝下，谢谢亲爱的朋友们。

      我的小铺：倾城:：从创店到现在，就快要三个月的时间了，，，但，就象大家看到的一样，还只是一个信用等级及其低的小铺。这样的一个事实，对于我这样的全职卖家来说，并不是个很好的开始。呵呵，话虽如此，但从开店以来的这段时间，我每天都在淘宝上游戏人生，学习，交流，思考，反省一直就像我的好朋友一样伴随着我。。。
        好了，话不多说，是无关要紧的话不多说了。我写这篇帖子的直接目的，就是希望能用自己的经验来帮助每天都可能进入淘宝的新手卖家们，希望他们在淘宝大学里，只要通过一篇精华帖就能顺利的完成宝贝模板的全部制作，也但愿看过这个帖子的卖家，能举一反三的做出更多更好的宝贝模板和写出更多更好的精华帖子。
       申明：我也是个新手卖家，但是个全职的，从对PS(photoshop)的一窍不通，到现在已经有一定的基础，不管经过了多少的困惑，才敢下手来写这么一篇帖子。所以，精通网页设计的朋友们也来帮个忙。把我“多此一举”地方作些修正，谢谢了。
因为我本来对【PS】所知无几，所以，在一定程度上，我能发现许多的专业人士在写帖的时候容易遗漏的地方。
话多了，听的人累，没关系，现在开始吧。。。

1. 也许你偶尔看到某副漂亮大图片，以此，你可能就收藏了起来。很好，这种思想对我们之后的设计有巨大的帮助。当然，没有这种习惯，也没有关系。
要做佳肴，必需厨具，对吧。。。
http://61.129.76.80/down?cid=7EC06AD48115A90772DAC4021D9101CE14B56160&t=302&fmt=-   

（注意：有不少的新朋友对这个链接有疑问，请将上面的链接复制，在打开的新窗口中粘贴打开）

http://61.129.76.80/down?cid=4A8804B603F41BE18789C36983730D779E754255&t=2&fmt=-
    这是PS的下载地址，大家可以用迅雷下的。。。DO IT NOW!
   
2. 打开PS，好了，现在你就会明白为什么说1中的那种习惯对我们有帮助了 。你可以直接把你心动已久的图片直接从PS打开。要是没有准备图片，那就到百度，去找个喜欢的图片回来。（注意：1用来做模板的图片尽可能选择大图，因为大图变小容易，且不失真，小图变大，那就难了；2 尽量使用静态图，也就是JPG格式，而不要用GIF格式的，以为直接从PS打开GIF图片，一般只能获取第一张图片，即使从IMAGEREADY里打开，也会复杂得多。）
如图
 
想自己动手做模板的朋友，一定是有IDEA主意的便宜。好的构思，是模板的精华。
如果找不到合你心意的图片，那就和我一样，去学学嫁接技术了。
3． 你可以使用一些简单的图案，来设计厨一副心中的蓝图。例如，你想简约，但不单调。那么，可以选择这样的两张图片：图3.1
 图3.2
4． 我们到PS中来做些修改。
a: 打开图3.1，如果跑这个对话框出来，直接确定就好了 。

b: 接下来，选中屏幕右下角图层上的“背景”图层，然后按住：ctrl+j,复制背景图层

删除背景图层。理由：在背景图层上无法直接删除白色背景，通过复制的图层却可以，删除白色背景后则变透明，如下图
 

5. 那么如何删除白色背景呢 ？
我们可以使用PS上的魔棒工具来完成。
 

6. 我们再以同样的方法来制作筐内的部分
a: 不用保存已经做好的图片，直接打开图3.2就可以了。如下图6.1
 

b: 裁减大小后，记得要复制图层，再使用与图3.1相同的方法来删除白色背景（也可以用魔棒工具一小片，一小片的删，如果按shift则可以全部要删除的部分都选中了一起删）。得到如下图

 
好了，到现在为此，单独的图片都处理好了，现在我们就要去“接木”了

7. 
看完图，就知道我要说的了吧。。^_^，看来我不用多说了
 

b : 呵呵，先别乐，要是出现了筐大了，而筐里的小了怎么办？？？？头疼呀。。。。。。
没关系。。。。。不管你是吧筐拖到树枝上，还是吧树枝拖到筐里，你只要按住ctrl+t，这样，你就可以调整大小了。调整后，别忘了按下左边的随便一个工具栏，选择应用按钮，这样才能结束刚才的图片调整动作。将得到下面的图案。
 
C , 你一定又要说了 ，这样不行呀，树枝都跑在筐上面了，多难看呀，，，，是呀，，不过，现在，我们就去看看 整个屏幕右下脚的图层吧。按住图层2，往下拉，你就能发现，现在图像正常了也，是的，图层越在这个表的上面，表示的是，它处于整副加工图片的最外层，，，，，PS就是把图片分层来做的。。。
 

8. 初步的偷梁换柱完成了。记得保存下了。我这常断电，可吃够了这样的苦。。 ，呵呵 ，休息下把，自己要做模板，其实是很累的。。。这需要你很大的耐心，要不。。。。。。还是请淘宝的设计家们去做吧，自己做呢，能学到些东西，又能做出独特的东西。。。所以，我才用了一天的时间来做这篇教程，希望大家给点鼓励的掌声，让我又支持下去的动力。

由于菜鸟我想做个详细的模板教程，把一些细节都写的很清楚了，难免有些罗索。。。。。
教程比较长，所以就分篇来写。。。。。请大家谅解。

回帖需要里有么？不需要麽？你的回答呢？

菜鸟力做淘宝最全面的模板教程，望护法亲临！（新手卖家必看）

二

9.       感觉，只有个中间的树架，有些空洞的说，那么，我又找来了个象筐，是一般人都看不上眼的东西

用剪切工具吧图片的边缘去掉了，要是忘了怎么做，没关系，温故而知新嘛。。。。。

a :用PS打开上张图，

B :多运用矩形工具，对相册做精细调整。至图下

10.       将图片拉到之前做好的图片中，如下

调整大小（大小刚好的就调整位置）注意整体布局。注意：鼠标移动的距离比较大，可以用键盘方向键来微调。后面做的筐是用来展示图片的，宽度在500左右，高度无限，可以通过制作网页时来自动伸缩。

11.       休息会，小累中，我去买晚饭了。。饿死了，最近都没有生意，每天都在挨饿中，三天了，每天都吃稀饭，没啥菜，没啥营养，，，，，，，，，，，，待会回来

12.       终于吃过了顿饱的，好开心呀，，，不过，给他洗了三十几个碗。。。

上面说过了，之前完成的只十用来做宝贝图片展示的部分

至于其他买家须知之类的，都在现在来完成：：：：

将之前做的所有图层合并成一个图层，如图中1所示，选择：合并所有可见图层，之后，在右下角的图层栏中将变成只有一个图层。

13．  

在出现的对话筐中，

14.

用矩形工具筐选上图蓝色矩形部位，再选择左边工具栏里的移动按钮，然后按Alt键，点击拖动鼠标，将复制所选取的内容，先后分别复制三个横的筐，再筐选竖的外筐进行复制两个，调整位置，后如图所示。

调整位置，，，再用赭石色左边画笔工具给各个边框加上几笔，类似于绳子一样，把下面的框架吊住。。。。

15.       好了，，，宝贝的基本框架的制作就基本介绍到这里了。最后就在模板里添入必要的字或店铺标志就可以了。。。。。

 对了，如果你喜欢，可以在图片上做些变化，我现在只是做个基本的教程，所以，不免有所粗糙的地方，请谅解，但不是死教材，大家可以创新的。。。。。

PS模板终图如下哦。。。

目前，我自己的店铺里所使用的就是这个宝贝模板，http://shop34409818.taobao.com，大家进来就可以看到了，加上一些效果后，是很漂亮的。。。所以我在模板上还打上了“designed by qingc”的字眼，防止被盗用，，，，其实，这个也很容易盗用的，呵呵，，，我是正当生意人，虽然知道怎么去做，但是套用别人的东西，还是觉得有点可耻的，所以说，真正的“乾坤大裸移”的绝招就不使出来了。。。。。。^_^。。。。。。。

16…..注意，注意。。。。。偶然想起，这个故事还没有完。。。。。好累好累呀，原来打算做2，3个小时就搞定的东西，没想到，用了一天还没有完。。。。。。后面还有PS最关键的部位，就是“切片”，还有，如何使用：DREAMWEAVER软件。。。。。。。

精华帖，很难写!要写下去，需要勇气，还需要你们的支持。支持。支持。支持。支持。支持。。。。。

菜鸟力做淘宝最全面的模板教程！（新手卖家必看）

三

菜鸟也是鸟，所以我们也能飞！

这篇帖子发了好多天了，看的人越来越多，关心的人也是越来越多，也有不少的朋友直接加我旺旺，呵呵，大家都在期待这后面的内容。谢谢大家的支持，有你们的关爱，再累，也坚持!

直接进入主题◎

不少的朋友问我，拿着那个框架能做什么，怎么弄到淘宝里面去？回答真是一言难尽呀。。。

总之，简单的说：我们弄到淘宝描述里面的东西，其实是“代码”，就是网页的语言。

因此，接下来的工作就是：

1.完整的图片――2.支离破碎的切片+简单的网页――3.Dreamweaver或其他网页制作工具完成之后的工作了。

OK，现在来完成1到2的转化

在这之前，我们先为这个模板加上些字组，方便之后做链接。

之后可以在剪除的矩形内添加自己想要的字组，如下图

好了，现在我们准备切片咯

我们先来整体构想下

接下来看图说话了，切片工具在左边的工具栏中

第一部分，是固定高度，不可伸长的。左边大块不需要在里面添加链接，所以可以直接切出来，右边是为以后做链接用的，因此要单独切出来。（这里切的不细，你们可切的精细点哦）

第二部分，这部分是可以根据图片的高度和数量无限延伸的，因为它在网页制作软件中只是被用做背景图片的。（被用做延伸用的背景图片在图案上要求规则，图案上下大小一致，防止拉生或重复贴片时断裂）

第三部分的高度是不变的，但和第一部分有不一样的地方就是切片8的地方可以作为模板的宝贝文字描述部分。。。也就是说切片8处也仅用做背景。

最后一部分，切片12，和切片16可以用文字填写相关内容，也可以插入滚动公告，须知等，因此，在整体上切片就不太复杂了。

好了，到现在为止，只差一布步，切片已经完成了，看看整体的图片吧

最后一步：按PS左上角“文件”――存储为WEB所有格式――跳出如下对话筐

重要补充！！！“liming880(00:32:52): 空白地方用鼠标点下,然后按Ctrl+a就OK了.” 和朋友的交流中，他发现了这个哦，就是一起更改色值的方法哦。。。

看图说话

这样就能得到一个装有所有切片的文件夹和一个网页图标

好了，切片就到这里为止，现在起，可以抛弃PS了。明天继续吧，今天的手，抬不起来了。很抱歉呀！

菜鸟力做淘宝最全面的模板教程！（新手卖家必看）

四

乘现在有时间，就快快把剩下的部分教材也做完吧。

http://61.129.76.80/down?cid=13470D27529619F8E99DACA8B882AEE65021680A&t=202&fmt=-

这是用迅雷下载DREAMWEAVER的地址，同样是复制后在新窗口打开。

好了，现在我们继续来完成“切片－到－网页”这一过程。

当我们用鼠标点击图片的时候，将发现，整副图，其实是一小片一小片的，至于小到什么程度，完全取决于你切片的多少，（一般来说，你切片越多，越细，整个网页效果就越好，也越逼真，但是相应的也会增加不少的麻烦，例如步骤之类。）

Ok，在这时需要新建一个页面。

步骤： 文件――新建――基本页――HTML――确定

现在我们可以回去看看我们的切片，从横向大方面考虑，我们把宝贝分了几层

比如说:第一部分的切片，左边是一整块的，右面有四小块排列，而我们把他算做一层。

这里有8层，因此，在弹出的对话框里我们是这样的设置：

选取整个新建的表格，在下面的工具栏上选对齐“居中对齐”

之后把PS生成的图片一个一个的复制到新创建的表格里面。

例如：

我们在切片的时候把第一部分看做一层，好的，那我们来具体的分析下：

其实这部分，左边是一整片的，没有分割，而右边是由四小片组合而形成这样的高度的。因此，我们可以简单的认为，这部分由左右两部分组成，而右边部分又是由上下四部分组成.(这就是我们切片的思路，从大到小)

这样以来，我们就可以在新创建的第一层表格里在插入表格，为：1行2列。记住，粗细，边距，间距均为0象素，这个很重要，要不然不管你怎么最后都是破的，之后插入表格也一样。

同样的方法，在第一层第二列（右列）处插入：4行1列

。。。。。。。。

相同的方法，直到把所有的图片都插入新创建的表格里：

（秘诀是：表格套表格，就象大鱼吃小鱼一样。^_^）

创建过程中，可以按F12键来预览效果 。

现在我们开始对新创建的网页进行编辑了。我们先来修改第一部分。

第一部分做完，我们来看看第二部分。

这部分可以无限延长，也就是说高度是没有限制的，因此，我们驱除表面的图片，之后在原来放图片的地方添加背景。。。（理由：纯图片不能拉伸，而且有图片就不能在图片上添加字体或者宝贝的图片了，背景上可以）

接下来。

此时你看到的图片是并不连接的，好像会断开，而且原来有一定高度的图片变得很低了，没关系，我们到浏览里看看。

按键盘上F12,确定，这时你将看到和切片前一样的网页，说明，切片是成功的

Ok ,切完时刻按F12,去观察切片是否有问题

如果切片成功的话，我们看到的还是一个完整的图片和为切片之前一个样的。但实际上，这个完整的图中有四个切片部分并没有真正意义上的图片，而只是由背景图撑着

我们删除图片的地方做什么用呢？聪明的你早就猜到了吧，没错，就是用来放置宝贝图片和编写宝贝描述及其买家须知的。

（插入的图片宽度不能宽于删除的切片的宽度，不然就会撑破整个模板）

再接下来，我们在只有背景图的地方插入表格（表格内可装载图片或文字，且这个表格是看不见的，但可以用来约束文字编写的宽度。）

在弹出的对话筐中选择：

这个对话框里的数值很重要，要不然，会撑垮整体模板的。

分3列，中间的两个分界线用来调整放置内容的位置。

下一个背景图片添加表格

可以回到images文件夹中找到相应切片的大小

公告处与买家须知处的表格插入方法相同。

这样，我们就完成了网页的基本制作了。。。

大家可以试着在模板中加入图片或者文字，按F12试试看效果如何。

从设计转到代码，将代码复制，存储到WORD,或者TXT文档中，这就时淘宝宝贝描述时所使用的源文件，但这还只是个假文件。

假文件，要变成真的源文件，必须经过最后一个步骤，那就是，将切片成功上传到网络相册（而且相册必须能支持对外链接），因为淘宝上是不给我们地方存储宝贝图片的。把假文件中切片的地址由在本地电脑中的地址改成该图片在网上的地址就可以了。最后形成的代码，才是我们在宝贝描述时必须使用的。

关于宝贝模板上传和图片上传的问题，请到这里http://forum.taobao.com/forum-18/show_thread----10046495-.htm淘宝商家最好用的网络相册！解答宝贝描述模板，图片上传问题

最后，我们到淘宝里的宝贝描述里去看看我们的成果吧。

好了，一不小心，又弄到深夜了，我本人其实对网页制作并不在行，都是从自己在研究的过程中颠簸出来的，所以，大家也一定能看到我不少摇摆的影子，要又什么不明白的地方，那一定是我的表达不清楚了。。。欢迎大家共同交流哦。

帖子总算写完了。大家可以到我的店铺来看看效果哦 。。。