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

【转】淘宝店铺模板制作教程 首先大家需要准备的软件：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.产品位做好后，我们现在来制作公告位，并加入一些文字，新建图层，选择画笔工具，对画笔工具属性进行修改，虚线的调节方法请按照图片操作 附店铺英文对照：Bsell wellT 热销Weekly每周Special Shop 特别商品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.现在，我们将在公告栏文字中加入移动代码，：MARQUEE scrollAmount=1 direction=up width=21* height=121插入到文字的前面/MARQUEE插入到后面 代码为：MARQUEE scrollAmount=1 direction=up width=21* height=121文字?? /MARQUEE width=（宽） height=（高） 高和宽根据亲公告栏的大小来调节 2*.公告栏做好后，现在来做产品栏，在产品栏文字后面点击下鼠标。再选择插入----图像，插入产品后（先插入一张），将文字删除。 2*.将图片全部更换成网络上的链接。 2*.修改好后，点击拆分，将图片中红线框住的部分改为 DIV align=centerTABLE he