淘宝店铺模板免费

【转】淘宝店铺模板制作教程

首先大家需要准备的软件：photoshop，iSee，fireworks*，Dreamweaver*。这

些软件你可以上网站去下，这里就要靠大家去软件网站上下载了。

模板的素材方面，可以直接上百度，里面的图片多着呢。

只要有好的构思，漂亮的素材，都可以制作出好的模板效果图。

选择2-3张风格一样的图片，我们现在就选择最后2张，就可以开始制作啦

1.将2张图片用PS（photoshop）打开

2.新建一个*3*x*00的图片，背景内容选透明，然后按确定。（*3*x*00是旺铺

促销栏的尺寸）

3.将2张图像拖进新建的图片中，，选择移动工具，选择需放入的图片，点击鼠

标左键按住不放进行拖拽，拖拽到新建图片中

4.如图片方向与构思相反的话，先选择图层，再选择编辑中的变换---水平翻转。

*.这里就要发挥大家的想象力了，图片如何摆放，摆放好图片后，新建一个图层，

再用吸管工具，找到图片背景颜色相近的地方进行吸取颜色，吸取颜色后点击新

建的图层进行填充

*.填充后效果如下

*.颜色如果和背景色有差别，我们选择有差别的图层，将图片模式修改为正片叠

底

*.图片感觉还是有些地方颜色不协调的地方，我们用可以模糊工具进行调节。

*.调节好图片色彩我们开始制作放产品的地方。新建一个图片高度1**宽度4*0

（这个根据情况而定）填充成灰色（其他颜色也行），将新建好的图片拖模板图

片中，到放产品的地方。

10.现在我们来给产品位添加一个边框，选择矩形工具，在产品位外拉一个框，

用渐变工具进行填充

11.产品位做好后，我们现在来制作公告位，并加入一些文字，新建图层，选择

画笔工具，对画笔工具属性进行修改，虚线的调节方法请按照图片操作

附店铺英文对照：BsellwellT热销

Weekly每周

SpecialShop特别商品

WELCOME欢迎光临

NOTICE公告

NEWS信息

12.做好公告栏和文字后，现在我们做一些按钮，选择圆角矩形工具，画一个框，

再选择钢笔工具右键选择建立选区，出现虚线后使用渐变工具进行填充，然后在

图标上打上文字。

13.到这一步，图片基本做好了，保存图片。

14.将做好的图片用iSee打开，进行修整，保存。

1*.图片做后，现在我们来做动态的图片，为图片添加一些星光，用PS打开修改

好的图片

，新建图层，选择画笔工具，找到星星的画笔（星星画笔可以在网上下载，也可

以去我小店买个Q币（0.**元一个，每人限购一个）画笔在小店的礼品中的赠品），

随意在几个位置上点击几下。然后保存名字我们暂时取为“模板1”

1*.再新建一个图层，在原有星星的位置上选择星星画笔，调节大一点点，点一

次。保存为“模板2”

“

1*.用fireworks将“模板1”打开，选择帧并添加一个帧。

1*.点击新建，选择导入，将”模板2“导入到帧2中

1*.插入好图片后，将帧延时进行修改，并预览动态效果，如”模板1“和"模板

2"在动态预览中出现晃动，可用选定“模板2”用键盘中的方向键进行调整位

置。

1*.动态预览满意后。选择另存为---动画GIF----选项---抖动（打勾），确定

保存。

20.这样一个动态图片做好了，关键的地方来了，得开始制作网站模板了。用

fireworks将制作好的动态图片打开，选择切片工具，将公告、产品、按钮的地

方切出来

21.切好后，在电脑里新建个文件夹，选择文件----导出。导出到亲刚才新建的

文件夹中。

22.导出后，将fireworks关掉，我们可以进入刚新建的文件夹中，里面有个动

态模板的网页文件，可以先打开欣赏一下。

到这还没完哦。将新建文件夹中的图片上传到空间中，重复的删除掉。（这个就

不用教大家了吧）

现在要用到Dreamweaver*了。用Dreamweaver*将网页文件打开。选择布局中的

扩展。将公告栏和产品栏中的图片先删除掉，再将淘宝空间中的图片地址复制到

背景里面。

23.背景插入好后，将公告栏和产品栏打上几个字，打好后点击布局。

24.现在，我们将在公告栏文字中加入移动代码，：

direction=upwidth=21*height=121>插入到文字的前面插入到后面

代码为：

文字

width=（宽）height=（高）高和宽根据亲公告栏的大小来调节

2*.公告栏做好后，现在来做产品栏，在产品栏文字后面点击下鼠标。再选择插

入----图像，插入产品后（先插入一张），将文字删除。

2*.将图片全部更换成网络上的链接。

2*.修改好后，点击拆分，将图片中红线框住的部分改为

border=0>

2*.替换好后，选择产品图片，插入产品滚动代码

src="图片地址"width="1*0"height="1*0"/>

2*.最后插入音乐代码：

loop=infinite>

loop可改成数字,代表播放多少次

现送上本例子中的素材：

最后亲保存一下，再把代码全部复制到淘宝店铺中就行啦，一些店铺中的链接设

置小末就不在这讲了，写了一天了，又是做图又是打字，最无语的就是做了一半

了居然内容丢失，小末真是欲哭无泪啊，亲们支持一下留个言贝！！！