淘宝旺铺促销模板详细制作过程（多图）

首先看看效果图。 怎么样。还可以吧。这个模板的制作相对来说还是比较简单的。现在就一步一步的来看看，怎么才能做出这个模板。 首先第一步。制作模板必备的软件： 第一个：PS地球人都知道，处理图片离不开他^_^ 第二个：GIF Animator v5.05 汉化版，这个软件是用来制作GIF动画的。 第三个：ISEE。这个软件功能很多。可以批量处理压缩图片。在线DIY字体，批量加水印，         可以说这个软件对淘宝的卖家帮助很大。在这里。我们要用到他的DIY字体。因为初学      者电脑中不一定安装了各种字体。所以，用isee来做字体比较方便。 第四个：Frontpage 2003这个是网页制作软件。制作模板必不可少的软件。 以上软件在百度和各大软件下载站都能搜索到。在这里就不多说软件的下载问题了。 下面我们开始制作模板。O(∩_&capo.. 第一步。到网上去寻找素材。百度搜图片，找到你自己喜欢的就可以。我在百度上找了这个图片 找到图片素材之后就可以开始抠图了。如下图。把你选好的素材在PS里面打开，然后放大。在工具栏选择多边形套索把人物从背景中抠出来。放大到300%后进行抠图。如图。人物轮廓的虚线。这样就选定了人物。然后Ctrl+C复制。然后Ctrl+N。这个是PS的新建图片快捷键。弹出对话框 新建一个735x500的图片，背景内容选透明，然后按确定。（735x500是旺铺促销栏的尺寸） 新建图层之后。再复制一个图层如图选择图层副本。然后选择渐变工具----->在这里你可以选择编辑自己喜欢的渐变颜色。然后在图层副本上进行渐变得到这样的图片。用来作为背景。 接下来。我们回到刚刚抠的人物图片。把抠好的人物图片Ctrl+C复制。然后Ctrl+V粘帖到背景图片， 如图所示。粘帖到你想要放的位置。然后在图层窗口中选择刚刚粘帖的人物图层 如图所示。选择的是刚刚粘帖上去的图层。然后鼠标右键----->混合选项。弹出窗口中选择外发光打钩得到图片 接下来选择图层1右键复制图 如图所示。得到图层副本2.然后用鼠标拖到渐变色背景上面如图然后再次复制图层副本2得到图层副本3.然后。我们开始在这个图层副本3上面制作公告栏。和宝贝展示栏这些都是在副本3上面完成的。 下面我们来做这些小框框。首先在工具栏的设置前景色为白色如图。然后选择圆角矩形工具如图。在上面 这里半径填写60。（具体数值多少可以自己选择。数字越大。做出来的圆角越大） 如上图所示。在图层副本3上面用鼠标拖出这样一个圆角矩形。（大小形状和位置可以自己随意选择。自己喜欢就可以）下一步鼠标放在白色矩形上面，右键---->混合选项---->单击描边，前面的框选购。如下图： 如图所示做好宝贝展示栏。接下来用相同的方法做公告栏。和收藏等如图所示 上图就是这张模板的基本排版方式。让我们再来看看图层窗口 被选定的6个图层就是刚刚做的排版。。（亲们如果不喜欢这个排版的话。可以自己来排一下。关键要自己喜欢就可以。）下一步。如上图所示，把这6个图层选定后鼠标单击右键----->栅格化图层。得到结果如下图： 然后继续单击右键--->合并图层得到结果如图： 合并之后。刚刚所有的矩形框都合并到一起了。然后点击工具栏的魔术棒工具 用魔术棒把刚刚矩形框的白色部分选出来。。按住Shift键不放开。然后用魔术棒单击白色部分。可以把白色部分都选定。如下图： 选定之后按DEL键把白色部分删除。得到下图： 然后点击工具栏矩形选取框，键盘的快捷键是M。然后如上图。还有虚线的话就鼠标单击下虚线的选取部位。取消选取。然后鼠标右键--->混合选项--->如下图所示设置 在投影，斜面和浮雕，纹理。3个选项前面的框打钩就可以。得到如下图： 看下放大后的图片OK。大概的排版就到这里。亲们只要按照这个步骤下来。。一定可以做成这样的。现在来给背景图片添加几朵玫瑰花。。添加玫瑰花。就需要用到PS的笔刷，笔刷在网上有很多地方可以下载的。我的是在PS联盟下载的。地址是：http://www./gongju/想要什么笔刷在上面搜下。具体安装方法在这个网站也有说明。这里就不详细说明了。下面我们来给背景添加几朵玫瑰。点缀一下。在图层窗口中选前面我们复制的图层副本2如图： 其实直接用笔刷。刷到背景上面也是可以的。为了方便修改。所以另外复制了图层副本2.^_^ 单击工具栏的笔刷工具在图片单击右键弹出窗口中选取玫瑰花笔刷。如下图 把前景色设置成自己喜欢的颜色，如图：然后就可以在图层上随意的添加玫瑰花了。看看下图的效果： 比没有玫瑰花要好多了吧。。下一步。我们来给图片添加上闪亮的星星。这一步也要用到PS的笔刷。闪亮星星的笔刷在PS联盟也有下载。亲们自己去搜索下。这里不详细叙述了。和添加玫瑰花的步骤一样。在窗口里面选取闪亮星星的笔刷 如上图所示。星星的大小和玫瑰的修改方法一样。然后把前景色修改成白色如图然后在图片的随意位置点上闪亮的星星。注意。这里的星星不要点的太大。如下图： 这样点缀一下。要好看多了。下一步我们来做字体。电脑里面装了各种字体的。可以直接在里面添加自己。如果没有。又不想装的。就要用到ISEE这个软件。他有一个在线DIY功能。可以设置很多种字体。还有动画效果。不过。我们这里用不到他的动画效果。下面我们来看看。怎么用ISEE来做艺术字体。先打开ISEE。在首页如图 点击isee部落 跳出窗口免费注册一下就可以登陆了。登陆之后。在首页的上方有个在线DIY按钮。点击。进入在线DIY网页如图： 点击后。进入DIY网页。选取自己喜欢的字样如下图 在这里。我选择了闪闪字。（在这里我们不需要他的动效文字。只要字体就可以了）进入闪闪字效果选择。亲们可以选择自己所喜欢的效果颜色。如下图： 随意选择一种。（这里我选择了黑色的闪闪字，这样便于在PS中把字体抠出来）进入下一步骤，按照下图所示就可以作出漂亮的字体了： 按上图步骤。就可以作出自己喜欢的字体了。。很简单吧。也不用在WINDOWS里面安装字体。对于不熟悉windows的亲们来说。。这个软件的确很有用。下面我们来处理做好的字体，用PS打开字体图片。因为PS只能读取GIF动画的一个帧。所以。读取字体时弹出窗口点击确定。然后用魔术棒工具进行抠图，把字体抠出来。魔术棒放在黑色字体上单击。选定黑色字体。然后鼠标右键--->选取相似。这样。黑色字体就全部选出来了。如下图： 选定之后。调节前景色调节出你自己喜欢的颜色。我这里选择白色，然后Alt+Del填充的快捷命令，将刚刚设置的前景色填充到刚刚选定的字体中。改变字体的颜色。如下图： 看。。字体变成白色的了。只有虚线还在。下一步。按Ctrl+C复制命令----->Ctrl+V粘帖到刚刚我们制作的模板上面如下图： 下一步。在工具栏点击矩形选取框。在字体上点击右键--->自由变换，如下图所示。把字体缩小到合适的大小。并拖放到模板的相应位置： 好了。到这一步。相应的字体做法都一样。亲们可以根据上面的步骤。把所需要的字体都做出来。然后放到相应的位置。如下图所示： 到这里。模板就大部分完成了。接下来就是切图部分。在切图之前。先把做的这个模板保存一下。 文件----->存为WEB所用格式--->保存为JPEG格式图片。图片质量选择为最佳，保存。就OK了。保存的这张图片在最后要要用来做GIF动画。也就是大家看到的闪闪的星星的动画。O(∩_&capo... 好了。。下面我们来切图。点击工具栏上面的切片工具图标切图。最重要的部分就是要把写公告和放促销图片。逛逛小店。等这些按钮要单独切出来。如下图所示： 看一下切图的细节部分。这些都是要单独切出来的。看看下图： 上面的空白出是用来写联系方式的。下面的店铺收藏。和逛逛小店。信用评价。都是要单独切出来。在最后做成按钮。公告栏和宝贝促销栏都要单独切出来。如下图： 切片完成之后。点击文件--->保存为WEB所用格式--->点击存储，弹出窗口中选择自己所要保存到的文件夹。如下图所示： 好了。。到了这一步。模板已经完成了90%了。下一步。。我们先把闪闪的星星做好。GIF动画说白了也很简单。一个一个单独的图片。连续播放就能产生动画效果。这种闪闪的星星制作起来是最简单的一种。。下面我们来看看如和做出闪闪星星。首先。打开刚刚上面保存的JPEG图片。不是切图的那张。。是在切图前保存的那张。如下图： 这张图片上面原先点的小星星。这时候要派上用场了。点击工具栏的笔刷按钮选择上面点小星星用过的那个笔刷。在上图第一次点的小星星上面再次点上小星星。这里要注意，星星是点在原先点的小星星上面。盖住原先的星星。这次点的小星星的大小。要比第一次点的稍大一点点。（如何调节大小。在上文中讲过。可以查看上文。）不要全部都点上。只要随意的点上几个。自己满意就好。点过之后。就保存为JPEG格式图片。然后在历史记录窗口点击打开。这时候。刚刚点的星星就全部消失。回到刚刚打开这张图片的时候， 然后重复上面点星星的步骤。这次点的星星要和上一次点的位置不一样。也是随意点几个。然后保存为JPEG格式图片。图片质量选择最佳。这样重复几次。作出3--4张不同的图片就可以了。下一步。我们用这几张星星位置不同的图片来做一个闪闪的星星动画。 首先打开GIF Animator v5.05 汉化版这个软件。这个软件是专门用来制作GIF动画的。很好用的一个软件。还自带了多种动画效果。。不过。这里我们用不到这些动画效果。 打开软件--->文件-->打开图像--->你的图片保存的位置---->打开刚刚保存的星星图片其中一张。 下一步是添加帧，也就是要把剩余的几张图片添加进去。步骤。 快捷键Ctrl+Alt+F，（插入帧的快捷键）------>按INS键。插入图片----->Ctrl+Alt+F，（插入帧的快捷键）------>按INS键。插入图片。。。重复上面的步骤。直到把刚刚保存的几张图片全部添加进去为止。如下图： 这里我添加了5个不同的闪亮星星图片。点击播放按钮。就可以预览动画效果。如果觉得闪动的速度过快。可以按住Ctrl键。然后点击鼠标把5个图片全部选定。在单击右键----->画面帧属性 把延迟改为15，具体数字更具自己喜好。数字越大。播放速度越慢，如下图： 下一步可以保存了。。文件----->另存为------>GIF文件---->选择你的保存路径保存就OK了。这样就做好了一个GIF的动画。。很简单吧。。。接下来。把这张GIF动画图片上传到网络相册，网络相册必须要支持GIF动画。百度中搜索下。有很多这种网络相册。这里就不多讲了 这里还要补充一下。。还有3个图片也要上传到网络相册。在保存切片的文件夹中找到这3个图片。一会做按钮的时候要用到。 好了。下一步。我们要用到Frontpage 2003这个网页制作软件。首先打开Frontpage 2003------>文件--->打开---->找到刚刚保存切片的文件夹。里面有个HTML文件如图 双击打开这个文件。在Frontpage 2003的窗口中会显示出切好的模板。鼠标单击图片。会发现。这些图片是完全分开的。这就是切片的效果。。其实。我们平时上网看到的网页上的一些图片都是这种小块的图片拼接起来的。鼠标单击后。小块图片的边上会出现小点。按下DEL键。全部删除这些图片。一个不留。全部删除了。只留下那些虚线的框框如下图： 然后鼠标单击右键---->表格属性（不是单元格属性。不要弄错了^_^）----->弹出窗口如下图： 这里说明一下。上图的地址就是刚刚上传的GIF的动画地址。也就是说，把刚刚做的GIF动画当做模板的背景用，点击应用。Frontpage 2003会从网络相册读取图片。得到图片如下图： 上图中的虚线不用去管他。。上传后就没有了。。下一步。制作按钮。逛逛小店，店铺收藏，信用评价，这些都是按钮，把光标移到逛逛小店的单元格中然后点击上面工具栏中插入图片按钮。弹出窗口如下： 这里的文件名填写刚刚上传图片的外链接地址。注意图片对应好了。店铺收藏和信用评价的图片插入方法相同。。按照步骤重做一遍就可以了。完成后。给这3个按钮添加超链接。方法如下 点击逛逛小店按钮边上出现小点后。鼠标右键--->超级链接属性--->单击弹出窗口。窗口设置如下： 添加完成后。点击确定。就可以了。。。其他2个也是相同的做法，，只要换下地址就可以了。具体地址。可以打开你的浏览器。打开相应的网页。在浏览器的地址栏中查看。复制。粘帖就好了。。O(∩_&cap o...其实这也不是很难的。多做几次就熟练了。下一步。我们来做公告中的滚动字幕。方法也不难。首先，鼠标移动到写公告位置。点击上面工具栏的WEB组件。弹出窗口： 动态效果----->字幕------>点击完成。弹出窗口如下设置： 按上图设置。完成后确定。现在的字幕不是向上滚动的。在这里需要修改一个代码才能让他向上滚动。步骤：单击设置好的字幕如图显示。单击后会有6个小点在边上。下一步点击左下角的拆分窗口分两部分显示。上面的是代码。下面的是图片。刚刚单击的字幕。在上面的代码中显示为如下图 如上图所示right改为up符号不要改。字幕就会向上滚动了。 这里补充一下。点击字幕这里鼠标放在中间的小点上面。按住鼠标左键，拖动小点。放大字幕框到合适的大小。不放大的话。字幕就只能同时显示一行字了。地方太小。想显示多也不行啊。看小点的位置。拖动到和虚线差不多的位置就可以了。这样就能多显示几行了。^_^好了。。到这里。模板制作的差不多了。。最后别忘了在这里添加上你的联系方式 当然。你也可以把这个框里的字设置成滚动字幕。方法一样。边上的宝贝促销栏中可以放2个170x170的图片。把你最好的宝贝放上去。一定很抢眼。。。O(∩_&capo.. 最后点击代码。窗口中显示的代码全部复制。用记事本保存。到这里。模板就算制作完成了。^_^

本帖链接