如何制作宝贝橱窗式展示图超详细图文教程.docx
《如何制作宝贝橱窗式展示图超详细图文教程.docx》由会员分享，可在线阅读，更多相关《如何制作宝贝橱窗式展示图超详细图文教程.docx（29页珍藏版）》请在冰豆网上搜索。
如何制作宝贝橱窗式展示图超详细图文教程
如何制作宝贝橱窗式展示图（超详细图文教程）
时间：
2012-01-1621:
30:
59 来源：
作者：
淘宝商城，卖家的宝贝都很漂亮的展示在首页。
小卖家进不了商城如何把自己店铺打造的如同商城呢？
今天淘宝学堂地瓜就和大家来分享一下如何制作宝贝橱窗式展示图，让你的店铺瞬间变身华丽商城。
7Fw摩伊时尚女性资讯网
淘宝商城只所以吸引人就是因为显得大气。
大气的网店装修不仅可以让买家的停留时间加长，而且买家也会更加信任你的店铺，觉得店铺做的这么漂亮，店家肯定很正规，从而增加信任感，从而提高成交转换率。
既然我们舍不得花钱请专业的网店装修设计师来帮我们设计网店，那么为何我们不自己动手制作宝贝橱窗式展示图呢？
下面淘宝学堂跟大家一起学习如何制作宝贝橱窗式展示图。
7Fw摩伊时尚女性资讯网
先给大家看下宝贝橱窗式展示图整体效果吧。
你可以做好多这样的条，然后把代码粘帖到自定义里，这样就有好多排，很是漂亮哦。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
第1节，首先你需要把要进行橱窗展示的宝贝，先做成这样的小块。
这个步骤的目的是把各个宝贝做成同宽高的大小，方便下一步作图。
第一步完成是这样的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
第2节，然后再把他加上文字说明，标题和价格啦。
第2节完成是这样的7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
第3节，宝贝都做成这样的后，就可以进行大整合了。
最终图片完成是这样的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
首先你先要确定好你一排做几个橱窗宝贝，确定他们之间的间距，才可以确定小方块，的宽度和高度。
是不是会算的有点晕呢，先不想这么多，你可以拿我的帖子练习一番，之后你要多宽多高就也好算了。
7Fw摩伊时尚女性资讯网
我的是拓展版，我要做950宽的，亲们如果是标准版的话就做750宽的哈，算好了就。
我是一排放4个宝贝，两边，还有四个宝贝这间的三条间隔，我需要50像素的位置做间隔（也就是留白哈），950减50，还剩下900给宝贝，900除以4，每个宝贝宽度225，。
这样我的小方块的宽度就是225了。
高度可随意，个人觉得225宽，300高是比较美观的。
7Fw摩伊时尚女性资讯网
下面我们来完成如何制作宝贝橱窗式展示图第一节，7Fw摩伊时尚女性资讯网
首先，点文件—新建，新建一个空白文档，宽225，高300，你可以命名为小方块模板7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
再打开一张宝贝图片。
把它拖动小方块模板这个文档里。
然后按CTRL+T键，调整大小及位置。
调整好后按ENTER键确定。
然后另存为JPEG格式的图片。
可以改名为1号宝贝，方便识别7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
至此一个小方块完成了，你把其它宝贝也这样做。
你还需要存一份PSD格式的，这样可以当模板用，方便日后增加新品时直接用。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
下面开始如何制作宝贝橱窗式展示图第二节7Fw摩伊时尚女性资讯网
前面的小方块，是225宽，300高的，这次的大方块，也是225宽，但高必需大于300，留出位置做宝贝标题及价格说明。
我这里做225宽，380高，比较合适。
7Fw摩伊时尚女性资讯网
新建一个225宽，380高的文档，取名为大方块模板。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
接下来我们需要新建参考线，上面是要小方块宝贝，下面要放标题及价格。
第一条参考线的高度就是小方块的高度，也就是300，先做水平的，第一条参考线300，第二条310，这处是为了美观空出来的，还剩70哈，分为两块，一块是宝贝标题，一块是价格，所以第四条是345。
7Fw摩伊时尚女性资讯网
不知道如何新建参考线？
7Fw摩伊时尚女性资讯网
视图—新建参考线。
之后会弹出一个窗口，要你选择水平或者垂直的，有个数字框，你可以在里面填上参考线的位置。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
参考线建好了，这里我给大家看一下框架，哪里放什么，大家好有个数，清楚为什么要这些参考线。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
下面来做一下放标题和价格的那块。
选择距型选框工具，把放价格和标题的位置全框选起来，再新建一个图层。
图层命名为价格及标题背景色。
再按ALT+BACKSPACE键，填写充前景色。
之后再按CTRL+D键，取消选区7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
下面要建一条垂直参考线了，位置为113，正中间的位置。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
再选择距型选框工具，这回需要调下他的样式，样式为等比例。
框一个小框，然后新建一个图层，命名，小尖顶。
再按CTRL+BACKSPACE键填充背景色。
注意这里是填背景色。
再按CTRL+D键取消选区，然后再按CTRL+T键，调整那个小尖顶图层的位置，噢，要注意的是，你调整时还得按住CTRL键调整，这样方块不会变形。
是等比例缩小或放大的，使其四方形的一角刚好落在在中间的参考线上，并且这个角要伸出到空白的位置一点，注意也不要顶到放宝贝的那块，留一点点。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
将“小尖顶”图层和“标题加价格背景”图层合并，按CTRL键，选中这两个图层，然后右击选择合并图层，不是合并可见图层哈，那样会将全部图层合并的。
不需要那么做的哈。
合并后它的名字变成了小尖顶，一般合并后都是以之前最上面的图层命名的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
OK，现在我们来调小尖顶图层的颜色，还有描边，双击小尖顶图层。
7Fw摩伊时尚女性资讯网
选择“颜色叠加”，混合颜色为“正常”，再点那个色块，选颜色，我们选白色。
再选择描边，大小为1，位置为内部，混合模式正常，透明度100%，再点击色块那，咱们要灰色的。
当然您可以根据自己的喜好，选择颜色。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
我去除一下参考线给您看下效果哈，您不用做这步的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
下面来做宝贝标题的背景。
用距型选框工具，之前好象调了样式为固定大小，这次要调回来的哈。
调成正常。
框出那块后，新建一个图层，命名宝贝标题背景，按ALT+BACKSPACE键，填充前景色，CTRL+D取消选区。
你可以事先将前景色，设成你想要的宝贝标题那块的颜色，不过之前没调也不要紧，你可以双击图层那来调的。
我这里选淡玫红色，宝贝的衣服，粉粉的，可爱点7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
再打开之前做好的小方块图片，就是这个啦，然后把宝贝拖到这大方块这，调整好位置，上面有留他的位置的哈，别越界。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
放上宝贝图片后，把这个宝贝图片图层加上一下描边哈，距离1，混合模式为内部，再在下面，白色处打上宝贝价格，红色处打上宝贝的标题。
完成后是这样的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
然后存储为JPEG格式，这里我命名1号宝贝大方块。
并且存一份PSD格式的。
作为模板。
然后你把其它宝贝也这样做，你完全可以打开刚刚存储的PSD格式的模板，只需要再打开一张宝贝图，把宝贝叠加上去，然后改下文字部分及价格，、不需要这第2节全部重复。
存为JPEG后是这样的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
把你需要做橱窗展示的宝贝成完第2节后。
就可以做第3节了。
7Fw摩伊时尚女性资讯网
如何制作宝贝橱窗式展示图第3节7Fw摩伊时尚女性资讯网
之前说过我是拓展版，950的宽，两旁加四个宝贝中间3个间隔，一共5个空位，每个10象素，刚刚第2节的大方块高度是380，我们需要新建一个宽950，高400的文档，因为上面和下面都要留10象素。
7Fw摩伊时尚女性资讯网
好了，开始，7Fw摩伊时尚女性资讯网
新建950*400的文档，再新建两条水平参考线，距离分别为10和390，再来新建8条垂直参考线，位置依次为，10，235，245，470，480，705，715，940。
这次就不载如何新建参考线的图了哈，大家看前面的。
7Fw摩伊时尚女性资讯网
建完参考线后是这样的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
咱们现在把宝贝依次放上来，看我看的位置放的哈，不要放到留白处哈。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
图片部分完成是这样的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
当然你可以自由发挥想象，不一定要这么规规矩矩的一排四块的框架。
例如也可以这样。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
下面为讲下图片切片，上传至图片空间，然后添加宝贝链接，复制代码粘帖到自定义那。
之后发布，就大功告成了。
这里需要用到DREAMWEAVER，这个软件。
7Fw摩伊时尚女性资讯网
首先在PS里将刚刚做好的整体图片进行切片。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
切4块哈，一定切好，之前留白处一起切进去，不用单独切的。
下面我用截图工具框给大家看下哈，你们切片时边框不是红的哈，我这是为了让大家更清楚些，而截图框的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
切片完后，存储为WEB和设备所用格式，大之后弹出的窗口中，保存格式一定要是HTML和图片。
这样会生存一个图片夹和一个网页文件。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
接下来就要用到DEARMWEAVER这个工具了。
当然你得先安装下这个软件哈。
找到之前你存存储“存为WEB和设备所用格式”的两个文件。
把IMAGE文件夹里的图片全部上传到图片空间，然后再找到另一个网页文件，右键点击鼠标，选择打开方式，然后选择DREAMWEAVER。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
点设计模式，再把图片空间的图片复制下链接，“源文件”处放图片链接，“链接“处放宝贝链接，然后四块图片都要放上宝贝链接和图片链接的哈，你要放哪个的要点下哪个，不然你会无从下手的。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
现在进入店铺装修，添加一个宝贝自定义，然后打开，点代码模式，粘帖了刚刚复制的代码，保存，再发布店铺，大功告成。
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
7Fw摩伊时尚女性资讯网
升级会员 