网店美工赢家宝典(第5章)

TransitionPage过渡页1赢赢家家宝宝典典网店美工赢家宝典TransitionPage过渡页2店铺诱导之最炫海报图第第55章章Areyouready?ContentsPage目录页第5章店铺诱导之最炫海报图动人的海报构图手把手教你做全屏海报三大设计技巧5.15.25.34动人的海报构图5.1第5章店铺诱导之最炫海报图海报与店铺的跳失率、转化率息息相关。在淘宝网店主要出售的就是图片，没有好的图片视觉，很难做到一“页”成名。做一张精致、吸引买家的海报需要花很多心思，有时候甚至几天才能做完一张海报图。但是，在淘宝网店台上，很少有人会停下来欣赏你呕心沥血的作品。因此，在注重效率的同时要与质量结合，学会快速制作出一张能够打动人心的海报，这样遇到没有灵感的时候，只需要根据固定的模式换一下背景图，简单做一下字体设计就能相对轻松地做出一张海报图了。5第5章店铺诱导之最炫海报图5.1行行式式排排版版5.1.15.1.1动人的海报构图行式排版是最常见的排版方式之一，图片与文字分别占海报的相等区域。这样排版的文案要能高度概括活动主题，不然就没有看点；缺点在于略显呆板，缺乏变化，容易千篇一律。行式排版行式排版效果效果6第5章店铺诱导之最炫海报图5.1行行式式排排版版5.1.15.1.1动人的海报构图示例的两张海报都是左文右图式，海报左边的文案排版是常见排版，主要字体使用粗体文字，促销文字部分使用字号较小的文字，上下主次分明，形成鲜明对比。一般来说，在海报中，文案需要含有以下信息主标题、副标题、附加内容，共3部分。设计的时候可以分成3段，段间距要大于行间距，上下左右适当的留出空隙。行式排版结构7第5章店铺诱导之最炫海报图5.1行行式式排排版版5.1.15.1.1动人的海报构图添加相关的文字内容可以方便买家视线快速移动，一眼看到最重要的信息，使整体文字架构非常稳重和衡。8第5章店铺诱导之最炫海报图5.15.1.25.1.2动人的海报构图纵纵列列式式排排版版纵列式排版也是最常见的排版方式之一，图片与文字在海报上分秋色，只不过海报的主标题是以纵向排版的方式呈现。与行式相比，优点是增加层次感和丰富感；缺点是容易造成画面的比例失衡，头重脚轻。纵列式排版纵列式排版效果效果9第5章店铺诱导之最炫海报图5.15.1.25.1.2动人的海报构图纵纵列列式式排排版版示例的两张海报都是左图右文式，海报右边的文案排版以纵列排版为主，在纵列排版中文字使用复古风格的字体，会使海报整体看起来很有韵味。同行式排版相同，在海报中文案需要含有主标题、副标题和附加内容，共3部分。将3个部分进行合理的排版，不但可以营造视觉层次感，还丰富了海报的设计感觉。行式排版结构10第5章店铺诱导之最炫海报图5.15.1.25.1.2动人的海报构图纵纵列列式式排排版版纵列式排版常见于包含一个产品或者一个模特的海报中，一般是文字的整体高度小于模特高度使其产生对比和呼应。11第5章店铺诱导之最炫海报图5.15.1.35.1.3动人的海报构图对对称称式式排排版版对称式排版对称式排版效果效果对称式排版从视觉上给人稳重、大气的感觉。它具有很强的设计感和艺术表现力，在海报中经常被采用，优点是即能提升视觉表现又能增加动感和观赏度。12第5章店铺诱导之最炫海报图5.15.1.35.1.3动人的海报构图对对称称式式排排版版对称式排版结构示例的两张海报都是两边图片中间文字的表现手法，海报两边的商品图呈不同大小排列，从视觉上营造商品的远效果。文案包含主标题、副标题和附加内容3部分。在海报中利用居中排版，可以给人大气、高端、有品质的感觉。13第5章店铺诱导之最炫海报图5.15.1.35.1.3动人的海报构图对对称称式式排排版版文案的远排列和两边的产品营造出一前一后的层次感，加上一些飞舞的花瓣会让整张海报画面空间感得到提升。145.15.1.45.1.4第5章店铺诱导之最炫海报图动人的海报构图纵纵列列式式排排版版纵列式排版纵列式排版效果效果纵列式排版也适用于活动海报中，将产品进行有序地排列并作为海报的背景，然后在空白处添加促销信息，调整文字排版就可以了。155.15.1.45.1.4第5章店铺诱导之最炫海报图动人的海报构图纵纵列列式式排排版版纵列式排版结构示例的两张海报都是两边图片中间文字的表现手法，海报两边的多个商品图呈大小一致并纵向排列，从视觉上营造整体统一的效果。但是又从图片中的不同形态对比，达到同中存异，打破呆板，丰富画面的目的。文案包含主标题、副标题和附加内容，共3部分。165.15.1.45.1.4第5章店铺诱导之最炫海报图动人的海报构图纵纵列列式式排排版版当海报上需要放置过多的促销产品时，可以采用这种排版，中间做一个半透明的框输入文案。175.2三大设计技巧第5章店铺诱导之最炫海报图随着淘宝不断地成长和改进，淘宝的海报图也从原来的初级草根风格变得越来越高大上，海报在满足传递信息的同时，从视觉体验的角度为买家带来轻松、愉悦的美感。从目前来看，排除品牌商自身定位的独特风格设计，比较主流的海报设计有3种技巧，分别是用好配色、好图配好文和留白效果，熟练运用这些技巧将会极大地提高工作效率。185.25.2.15.2.1第5章店铺诱导之最炫海报图三大设计技巧用用好好配配色色刚开始做美工除了海报排版让人头疼，另外一个难题就是设计配色了。关于配色的技巧有很多，在1.1.3节中我们讲过同色或邻色搭配、间隔色搭配、撞色搭配和暗色调+高纯度撞色搭配四种配色方法，海报设计也可以采用这四种配色方法。但是，我们这里讲解一个更简单、更快捷的搭配方法，可以更加快速地设计出海报，那就是产品取色法和配色比例法。195.25.2.15.2.1第5章店铺诱导之最炫海报图三大设计技巧用用好好配配色色产品取色法产品取色法指的是在Photoshop中直接用拾色工具选择产品的颜色进行海报设计。从右图可以看出，商品主题颜色为红色和浅黄色，其中文字颜色为红色，背景颜色为浅黄色，并在背景上用跟模特服装相同的樱桃点缀，不但在图片和文字上不断提升专业水准，也使配色做的更为出色。如果我们在已经有商品图的情况下，可以根据模特服饰的颜色来确立背景色和文案颜色，模特都是浅色系衣服，背景颜色可以直接用浅色，但是要与商品图区别开。其次模特身上的点缀颜色为红色，那主标题可以采用红色，促销文案也可以采用同一系列的颜色。主体模特、背景与文案三者的颜色相互呼应，做到你中有我，我中有你。205.25.2.15.2.1第5章店铺诱导之最炫海报图三大设计技巧用用好好配配色色配色比例法配色比例法某国设计师曾经针对色彩的配色提出比例原则70%，25%与5%的配色比例方式，其中背景颜色为大面积使用的底色，而主色与强调色则是可以利用互补色的特性，来衬托及强调部分文字。从右图中可以看出，模特和背景都是一个色系，属于背景色，文案的部分属于主色，剩下5%的强调色是强调重点文案部分。上文介绍的产品取色法和配色比例法有利有弊，弊端就是模特身上的颜色有局限性，读者也可以根据自己的喜好对文案部分进行发挥。215.25.2.15.2.1第5章店铺诱导之最炫海报图三大设计技巧用用好好配配色色白色是万能搭配色，如果色彩过多，可以采用白色或灰色、黑色作为海报的背景颜色或者文字颜色。225.25.2.25.2.2第5章店铺诱导之最炫海报图三大设计技巧好好图图配配好好文文有句古谚语叫“好马配好鞍”，在淘宝上也有句谚语叫“好图配好文”，因为淘宝是一个不折不扣“以貌取人”的地方，所以一定不能缺少充满营销话术的文案。先来看下淘宝官方首焦图（首页焦点图）的设计，真正达到了看一眼就记住的效果。235.25.2.25.2.2第5章店铺诱导之最炫海报图三大设计技巧好好图图配配好好文文从左边的两幅图中可以看出，结合电影热点，多用网络词语，足以吸引买家的眼球，也能喊出响亮的口号，因为淘宝是一个人气聚集的台，多用网络用语可以让买家产生共鸣心理，从而提升点击率。图示淘宝淘宝首焦图首焦图245.25.2.25.2.2第5章店铺诱导之最炫海报图三大设计技巧好好图图配配好好文文还可以选择一些容易引起共鸣的文案，道出买家心声，既可以增加趣味性，又可以引起人点击购买的欲望，当然也要结合产品的卖点。好的文字设计绝对不是一股劲就能设计出来的，一定要在开展工作之前就了解好买家的需求，这样能避免做很多无用功。图示趣味文案趣味文案255.2高高大大上上的的留留白白效效果果5.2.35.2.3第5章店铺诱导之最炫海报图三大设计技巧海报设计留白是海报构图的重要组成部分，适当的留白能让文字便于阅读，让海报页面的元素得到很好地区分，不但使买家对海报页面的设计通俗易懂，也提升了海报页面的品质感。265.2高高大大上上的的留留白白效效果果5.2.35.2.3第5章店铺诱导之最炫海报图三大设计技巧在海报周围大面积留白，并结合简洁的排版，让页面模块之间区分明显，视觉集中，能很好地给买家引导，给人一种精致和轻松感。图示留白效果留白效果275.2高高大大上上的的留留白白效效果果5.2.35.2.3第5章店铺诱导之最炫海报图三大设计技巧可以想象一下，当画面里所有人物都静止时，有动作的那个人更惹人注目。相似的，当一个商品占据了画面的一部分，另一部分做留白处理，只写上聊聊几个字或者一句话时，留白处的文案信息就会成为整个页面的焦点，能够把买家的视觉都集中到这一处显眼的地方。总体来说，千万不要把海报内容排得密密麻麻，要留出一定的空间，这样既减少了海报的压迫感，又可以引导买家视线，突出重点内容，给人留下回味、想象的空间。图示留白效果留白效果28手把手教你做全屏海报5.3第5章店铺诱导之最炫海报图根据5.1和5.2节的介绍，大家对海报设计已经有了初步的了解，下面我们直接进入正题，教大家做全屏海报。29第5章店铺诱导之最炫海报图5.3准准备备素素材材5.3.15.3.1手把手教你做全屏海报准备素材的阶段是最为重要的阶段，首先要找下参考的资料，给自己一些灵感。在这里给大家推荐几个网址：https:/店铺诱导之最炫海报图5.3准准备备素素材材5.3.15.3.1手把手教你做全屏海报城市线条文案样式图示参考资料参考资料31第5章店铺诱导之最炫海报图5.3准准备备素素材材5.3.15.3.1手把手教你做全屏海报在这里给大家推荐几个网站：昵图网、大图网、千图网和素材中国。找完参考图以后，脑海中对海报就会有一个基础的框架图，可以在脑海中把框架图勾勒一下，完成对海报的初步模拟，然后根据自己的模拟想法在素材网上寻找需要的素材。图示所需素材所需素材32第5章店铺诱导之最炫海报图5.3准准备备素素材材5.3.15.3.1手把手教你做全屏海报在制作之前先来看下全屏海报设计的最终效果，整体海报设计采用5.2.3中所讲的留白效果，背景和文案采用第5.2.1中介绍的产品取色法和配色比例法。图示全屏海报全屏海报整体效果整体效果33第5章店铺诱导之最炫海报图5.3准准备备素素材材5.3.15.3.1手把手教你做全屏海报操作步骤步骤步骤1执行【文件】丨【新建】命令，新建一个名称为海报设计，尺寸为1920700像素的空白文档，然后为背景图像填充颜色，色值为【#e5ecf1】。新建文档并填充颜色34第5章店铺诱导之最炫海报图5.3准准备备素素材材5.3.15.3.1手把手教你做全屏海报操作步骤步骤步骤2执行【视图】丨【标尺】命令启动标尺，快捷键为【Ctrl+R】，然后分别在300像素、960像素、1700像素的地方创建垂直参考线，将文案和商品图设计在文档中间的1400像素的位置，可以防止电脑显示器过小而导致两边内容显示不全面的情况发生。创建垂直参考线35第5章店铺诱导之最炫海报图5.3准准备备素素材材5.3.15.3.1手把手教你做全屏海报步骤步骤3打开本书配套素材【1.jpg】文件，并将城市线条图像拖动到【海报设计.psd】图像窗口中。操作步骤复制素材36第5章店铺诱导之最炫海报图