网店美工 全省一等奖

赢家宝典网店美工赢家宝典视觉陈列之商品布局第6章Areyouready?第6章视觉陈列之商品布局打造爆款推荐模块制作关联推荐，提升店铺销量优化商品陈列模块6.16.26.3淘宝爆款也就是店铺的人气宝贝，众所周知，拥有了爆款商品就拥有了流量提升的利器，淘宝网店转化率也将不再是难题。于是，各位卖家每天都费劲心思地打造爆款，但是淘宝爆款的打造远没有想象的简单，在打造爆款之前做好店铺首页爆款推荐模块，这才是成功的基础。我们都知道，一个店铺的自然流量中80%都是来自爆款，所以，在没有高额广告费用投入的情况下，做好店铺首页的爆款推荐就成了重中之重。那么，爆款推荐模块究竟是如何炼成的呢？每一个爆款都有其生命周期，针对不同的客户群体，更要合理地把握好这个周期，为店铺赢得流量，因此，我们要遵循以下三大设计原则。通过突出销量可以赢得新客户的信赖，也让新客户不难看出这款宝贝正处于销售热潮阶段，是当季的热卖款。突出销量销售折扣是一种促销手段，通过突出折扣不但可以赢得老客户的回头率，还可以有利于扩大商品的销路，增加产品的销量，提高店铺的整体盈利水平。突出折扣商品需要通过主推爆款商品和潜在爆款商品来设计商品陈列，这样布局能有效地解决店铺跳失率的问题，从保持主推爆款大于潜在爆款的模式，到商品的文字细节，一方面可以引导买家浏览体验，另一方面也可以避免让买家产生视觉疲劳，分不清主推产品是哪款。分清主次6.1.1节我们讲解了爆款推荐模块设计的三大原则，大部分卖家的爆款推荐模块只占其中之一，接下来我们要做的是将三大设计原则融合到一个模块中。从右图可以看出该模块以7款产品的设计为例，1款主推爆款商品，2款潜在爆款商品，3款热销商品进行设计布局，具体操作步骤如下：操作步骤步骤1执行【文件】丨【新建】命令，新建一个名称为爆款推荐模块，尺寸为950×1050像素的空白文档，然后为背景图像填充颜色，色值为【#f3f3f5】。新建文档并填充颜色操作步骤步骤2打开本书配套素材【1.psd】【2.psd】【3.psd】，将其中的商品图拖到【爆款推荐模块.psd】图像窗口中并进行布局，将主推爆款商品放在中间，潜在爆款商品放在两边，营造出层次感。复制素材文件操作步骤步骤3按【Ctrl+R】组合键启动标尺，在590像素的位置创建水平参考线。创建水平参考线操作步骤步骤4在工具箱中选择【矩形选框工具】，根据参考线所示位置在图像上按住鼠标并拖动，框选多余的商品图片，选好后按【Delete】键删除多余部分。删除图像多余区域注意：因三幅商品图在不同图层上，所以先选中目标图层再进行框选和删除操作。操作步骤步骤5选择工具箱中的【矩形工具】，然后在图像上绘制一个颜色色值为【#f0000】的矩形，再复制出两个矩形，并利用【横排文字工具】依次输入商品原价、折扣价、销售量和商品文字信息。绘制矩形并输入文字字体：方正兰亭中黑；大小：12点操作步骤步骤6在工具箱中选择【椭圆工具】，设置前景色的色值为【#272727】，按住【Shift】键的同时拖动鼠标绘制正圆形，利用【横排文字工具】在正圆形上输入【>】符号。字体：方正兰亭中黑；大小：12点绘制正圆形并输入符号操作步骤步骤7在【图层】面板中创建新图层，快捷键为【Ctrl+Shift+Alt+N】。在工具箱中选择【矩形选框工具】，框选水平参考线以下的部分，设置前景色值为【#026b32】，按【Alt+Delete】组合键为选区填充前景色。绘制矩形选区并填充颜色操作步骤步骤8在工具箱中选择【矩形工具】，在工具选项栏中设置填充色的色值为【#ffffff】，在【W】编辑框中输入【236像素】，在【H】编辑框中输入【437像素】，然后在图像上点击，弹出【创建矩形】对话框，点击【确定】按钮，创建矩形。将矩形复制出3个，并均匀排列。绘制矩形操作步骤步骤9在【图层】面板中选中【矩形2】图层。打开本书配套素材【4.jpg】文件，将其中的商品图拖动到【爆款推荐模块.psd】图像窗口中最左侧矩形的上方，执行【编辑】丨【自由变换】命令，显示自由变换框，按住【Shift】键的同时，在角控制点上拖动鼠标，调整图像到合适大小。复制素材文件并调整大小操作步骤步骤10在【图层】面板中，选中商品图所在的【图层5】，点击鼠标右键在弹出的菜单中选择【创建剪贴蒙版】命令。创建剪贴蒙版操作步骤步骤11在工具箱中选择【矩形工具】，然后在商品图下方绘制颜色值为【#ffdf00】和【#d40108】的矩形，利用【横排文字工具】输入文字信息。绘制矩形并输入文字字体：方正兰亭中黑；大小：13.5点；颜色值：#ffffff字体：方正兰亭中黑；大小：13.5点；颜色值：#cd0210字体：方正兰亭黑；大小：12点；颜色值：#cd0210字体：方正兰亭黑；大小：12点；颜色值：#000000操作步骤步骤12利用步骤9～11中的操作方法完成其他3张商品图的制作，其中素材分别为【5.jpg】【6.jpg】【7.jpg】。制作其他商品图操作步骤步骤13经过以上步骤的操作完成最终效果。按【Ctrl+S】组合键保存图像，按【Ctrl+Shift+S】组合键将其存为JPEG格式文件。爆款推荐模块效果在6.1.2节中已经利用Photoshop制作了爆款推荐模块，那么如何为其添加对应的链接，并展示给买家呢？本节主要教大家如何用Dreamweaver软件为制作好的爆款推荐模块添加商品超链接。操作步骤步骤1打开Dreamweaver软件，在【文件】面板中新建文件，并将文件重命名为【6-18.html】。步骤2双击打开新建的文件，点击【表格】按钮，在打开的【表格】对话框中编辑表格内容，点击【确定】按钮，关闭对话框。步骤3根据【爆款推荐模块.psd】的制作尺寸，在【属性】面板中表格【高】编辑框中输入对应的高度数值【1043像素】。步骤4根据步骤3中的操作，建立了一个和图片尺寸一模一样的表格，点击【图像】按钮，在弹出的对话框中选择【爆款推荐模块.jpg】，依次点击【确定】【否】和【取消】按钮完成插入。操作步骤插入图像步骤5点击【图像】按钮右侧的下拉三角按钮，在打开的下拉列表中选择【绘制矩形热点】命令。操作步骤选择【绘制矩形热点】命令步骤6点击【图像】按钮右侧的下拉三角按钮，在打开的下拉列表中选择【绘制矩形热点】命令。操作步骤创建热点区域步骤7点击创建好的热点区域，在【属性】面板中添加商品的超链接地址，然后选择【目标】为【_blank】。操作步骤步骤8利用步骤5～7中的操作方法，为爆款推荐模块中的其他商品添加商品的超链接地址即可完成案例操作。爆款推荐模块的代码制作好后，如何将代码放入店铺展示给买家呢？具体操作步骤如下：步骤1在Dreamweaver操作页面中点击【代码】按钮，就可以找到要放入店铺展示所需的代码。操作步骤步骤2在代码中将所有【Map】属性改成自己喜欢的属性名字，如将【Map】改成【zs01】，因为淘宝系统网站有【Map】属性，所以属性不可以跟淘宝系统属性重复，如果重复会导致页面无法显示。步骤3按住鼠标左键并拖动，将【Map】区域内的代码全部选中，按【Ctrl+X】组合键，再按【Ctrl+V】组合键，将代码粘贴到【img】段落后面。操作步骤剪切代码粘贴代码步骤4将【table】区域内所有的代码全部选中并复制。操作步骤复制代码步骤5进入淘宝【店铺装修】页面，新建【自定义内容区】模块，点击该模块右上角的【编辑】按钮，在打开的【自定义内容区】对话框中点击【源码】按钮，然后将复制好的代码粘贴到自定义模块中的代码编辑区域内，点击【确定】按钮完成操作。步骤6点击【发布】按钮将爆款推荐模块展示给买家。操作步骤最终效果优化商品陈列模块与一个店铺的定位与视觉的重点相关联，商品陈列模块作为销售的表现形式，同样具有重要的营销属性。在某种程度上，商品陈列模块决定着视觉的表现形式及其方向。当然，商品陈列模块有很多表现形式，在这里我们主要以标题分隔模块、海报分隔模块、商品摆放模块为例进行讲解，更多是从风格以及买家这两个角度入手，并非营销所涉及得那么全面。具体操作步骤如下：商品陈列模块最重要的就是标题分隔模块，辅助视觉不但起着烘托标题文字的作用，也引导买家了解该标题模块下主要展示的商品有哪些，让买家对店铺有一个初步的了解。标题分隔模块步骤1执行【文件】丨【新建】命令，在打开的【新建】对话框中设置属性，点击【确定】按钮，新建文档。操作步骤步骤2打开本书配套素材【8.psd】文件，将抠好的墨迹图像拖到【标题分隔模块.psd】图像窗口中。操作步骤打开素材文件并复制步骤3在【图层】面板中选中墨迹图像所在的【图层副本】图层，点击【添加图层样式】按钮，在弹出的菜单中选择【颜色叠加】命令。操作步骤选择【颜色叠加】命令步骤4在弹出的【图层样式】对话框中设置属性，点击【确定】按钮，关闭对话框。操作步骤设置颜色叠加属性#c0ebcf步骤5打开本书配套素材【9.psd】文件，将其中的棉花图像拖至【标题分隔模块.psd】图像窗口中。在工具箱中选择【横排文字工具】，分别输入【棉】和【麻】文字内容。操作步骤字体：华文行楷；大小：72点；颜色值：#ea4808字体：书体坊赵九江钢笔行书；大小：40.76点；颜色值：#ea4808复制素材并输入文字步骤6在工具箱中选择【椭圆工具】，按住【Shift】键的同时绘制两个色值为【#9f1218】的正圆形，并输入【春】和【之】文字信息。操作步骤字体：方正楷体简；大小：11点；颜色值：#ffffff绘制正圆形并输入文字步骤7在工具箱中选择【横排文字工具】，在图像上输入【春天是一本彩色的书-黄的迎春花，红的桃花，绿的柳叶，白的梨花……】文字信息。读者也可以在百度上搜索一些关于春天的诗句，添加到图像上。操作步骤字体：楷体；大小：10点；颜色值：#7fb090字体：楷体；大小：10点；颜色值：#ffffff输入文字步骤8在工具箱中选择【直线工具】，在工具选项栏中设置前景色色值为【#a9d6b5】，【粗细】为【1像素】，然后在图像上按住【Shift】键的同时绘制2条直线。至此，本案例就制作完成了，按【Ctrl+S】组合键将文件保存。操作步骤绘制直线具体操作步骤如下：海报分隔模块与标题分隔模块有很多相似之处，不同的是海报分隔模块能够将店铺的整体风格和表现力体现得淋漓尽致，也是淘宝首页中效果最好的，应用最广泛的一种形式。海报分隔模块步骤1执行【文件】丨【新建】命令，新建一个名称为海报分隔模块，尺寸为950×385像素的空白文档。为图像背景填充色值为【#8fe3ff】的颜色。操作步骤新建文档并填充背景颜色步骤2打开本书配套素材【10.psd】～【13.psd】文件，将其中的人物图像拖动到【海报分隔模板.psd】图像窗口中。操作步骤复制素材文件步骤3在工具箱中选择【横排文字工具】，在工具选项栏中设置【字体】为【BauerBodniBT】，【文本颜色】色值为【#fffffff】，然后在图像上输入【2015S/S，DRESS】文字内容。操作步骤输入文字步骤4在工具箱中选择【矩形工具】，在工具选项栏中设置【填充颜色】的值为【#ffffff】，【描边】为【无】，然后在图像上绘制矩形。在【图层】面板中设置该矩形所在图层的【不透明度】为【50%】。操作步骤绘制矩形并调整不透明度步骤5利用【矩形工具】在图像中的矩形上绘制一个尺寸小一点的矩形，然后在工具选项栏中设置【填充颜色】为【无】，【描边颜色】的值为【#ffffff】，【粗细】为【1像素】。操作步骤绘制矩形步骤6在工具箱中选择【横排文字工具】，输入分区的文字内容，如在此海报分隔模块下边我们准备放连衣裙，就输入与连衣裙相关的文字内容，再用英文点缀，能够让模块看起来更有感觉。操作步骤输入文字字体：方正兰亭细黑；大小：6点；颜色值：#000000字体：方正兰亭细黑；大小：22.38点；颜色值：#000000步骤7在工具箱中选择【直线工具】，在工具选项栏中设置【填充颜色】的值为【#b2b2b2】，然后在两行文字之间绘制1条直线，完成海报分隔模块的制作，按【Ctrl+S】组合键，保存文件。操作步骤绘制直线具体操作步骤如下：商品摆放模块有很多种形式，主要根据首页要放入的产品数量而定，在这里采用一排一个商品的形式进行讲解。商品摆放模块步骤1执行【文件】丨【新建】命令，新建一个名称为商品摆放模块，尺寸为950×690像素的空白文档。在工具箱中选择【渐变工具】，在打开的【渐变编辑器】对话框中设置颜色参数，完成后点击【确定】按钮。操作步骤操作步骤步骤2由左上角向右下角拖动鼠标，绘制渐变效果。步骤3打开本书配套素材【16.psd】文件，将其中的云彩图像拖动到【商品摆放模块.psd】图像窗口中。操作步骤步骤4打开本书配套素材【14.psd】【15.psd】文件，将其中的商品图像拖动到【商品摆放模块.psd】图像窗口中，并放置在如右图所示的位置上。复制素材文件操作步骤步骤5将【16.psd】图像窗口中的云彩素材反复拖动到【商品摆放模块.psd】图像窗口中，并将商品图像的下半部分用云彩图像遮盖住。复制云彩图像操作步骤步骤6在工具箱中选择【圆角矩形工具】，在工具选项栏中设置【填充颜色】的值为【#ae0d06】，【半径】为【6像素】，然后在图像上绘制一个圆角矩形。绘制圆角矩形操作步骤步骤7在工具箱中选择【横排文字工具】，在图像上输入如右图所示的文字。字体：方正兰亭中黑；大小：17.54点；颜色值：#ffe403字体：方正兰亭黑；大小：14点；颜色值：#670286字体：Impact；大小：29.81点；颜色值：#ffffff字体：方正兰亭中黑；大小：17.54点；颜色值：#670286操作步骤步骤8利用【横排文字工具】在文字之间输入【-】符号，在工具选项栏中设置【字体】为【宋体】，【字体大小】为【5像素】，【设置消除锯齿的方法】为【无】，【文本颜色】的值为【#b4abff】，从而制作虚线效果。制作虚线效果操作步骤步骤9利用步骤6～9中的操作方法，输入另外一组商品的文字信息。绘制圆角矩形、输入文字并制作虚线操作步骤步骤10经过以上步骤的操作，商品摆放模块已经基本完成了，为了使模块更加丰满，可以打开本书配套素材【17.psd】文件，将其中的图像拖至【商品摆放模块.psd】图像窗口中，为商品营造一种在云端的感觉。复制素材文件商品陈列模块所选用的尺寸均为950像素，在这里可以按照全屏海报的尺寸进行制作，这样制作出的商品陈列模块在首页就会以全屏的效果进行展示。随着淘宝网店的发展，卖家们最关心的就是如何引入更多的流量，如何把引入的流量进行最大程度的转换？在淘宝首页巧妙利用搭配套餐模块，就能为我们的买家提供更多便利和选择，以提升店铺的销量，使卖家和买家达到共赢的状态。具体操作步骤如下：在淘宝所有的促销活动方式中，搭配套餐是比较常见的促销方式，这个方式如果使用得当可以为店铺带来极大的销量，那么应该如何为商品进行搭配呢？第一：选择成套的商品进行搭配首先选择店铺每天有较稳定销量的宝贝作为主要的搭配单品，如该商品为上衣，那么可以根据商品之间的相关性选择裤子或者裙子进行搭配。搭配时眼光很重要，可以参考当季的流行趋势，满足不知道如何搭配的买家的需求。成套商品搭配参考第二：根据色系和风格进行商品搭配大部分买家对色系会有倾向性，将同一颜色不同风格的T恤进行搭配，如果买家同时看上两件都想买，但是又觉得贵，这时一个搭配套餐8折优惠，可谓是雪中送炭，也能更好地促进转化率。根据色系和风格进行搭配第三：根据价格进行商品搭配一款高价商品搭配一款低价商品，折扣后相当于高价商品+N元换购低价商品的效果，买家会明显感觉优惠了很多，这不但满足了买家占便宜的心理，也促进了店铺的转化率。根据色系和风格进行搭配同一个店铺可以采取一种或者多种商品搭配的形式，请卖家选择根据店铺所需选择最适合自己的商品搭配形式，总之，无论如何搭配请注重商品的关联性。具体操作步骤如下：对于商品搭配的关联性我们已经有了基础的了解，接下来就是选取商品制作搭配套餐模块。搭配套餐模块操作步骤步骤1执行【文件】丨【新建】命令，新建一个名称为搭配套餐，尺寸为950×690像素的空白文档。执行【视图】丨【标尺】命令启动标尺，然后在图像中心位置创建垂直参考线。新建文档并创建参考线操作步骤步骤2在工具箱中设置前景色的色值为【#f8f8fa】，选择【矩形工具】，然后在图像上绘制8个矩形。绘制矩形操作步骤步骤3打开本书配套素材【18.jpg】【19.jpg】文件，将其中的模特图像分别拖入到【搭配套餐.psd】图像窗口中的矩形模块1和矩形模块5上，变换其大小后，得到如右图所示的效果。复制素材操作步骤步骤4打开本书配套素材【20.jpg】～【23.jpg】文件，将对应的商品图像分别拖动到【搭配套餐.psd】图像窗口中矩形模块2，3，6，7上，变换其大小后，得到如右图所示的效果。复制素材文件操作步骤步骤5在工具箱中选择【横排文字工具】，在图像上分别输入商品文字信息以及价格。输入文字字体：方正兰亭细黑；大小：12.53点；颜色值：#000000字体：方正兰亭细黑；大小：9.85点；颜色值：#868686图字体：方正兰亭中黑；大小：12.53点；颜色值：#a10000操作步骤步骤6在工具箱中设置前景色的值为【#b30000】，选择【矩形工具】，在图像上绘制一个矩形，然后利用【横排文字工具】分别输入套餐价格、立省价格和原始价格。字体：方正兰亭中黑；大小：12点；颜色值：#000000字体：方正兰亭中黑；大小：12点；颜色值：#000000字体：方正兰亭特黑；大小：15.64点；颜色值：#000000绘制矩形并输入文字操作步骤绘制矩形并输入文字步骤7利用步骤6中的操作方法，输入另外一组套餐的文字信息，完成搭配套餐的最终效果。按【Ctrl+S】组合键，保存文件，按【Ctrl+Shift+S】组合键，将文件存为JPEG格式。具体操作步骤如下：商品搭配模块已经制作好了，接下来利用Dreamweaver软件为搭配套餐模块添加超链接，并且生成代码。操作步骤步骤1进入Dreamweaver软件，在【文件】面板中新建文件，并将其重命名为【商品搭配.html】。新建文件并重命名操作步骤步骤2双击打开【商品搭配.html】文件，点击【代码】按钮，并删除代码编辑区域内所有代码。删除所有代码操作步骤步骤3点击【设计】按钮，回到Dreamweaver软件操作页面，点击【表格】按钮，在弹出的