《网店视觉营销》第九章　网店商品促销海报的营销设计方法

第九章网店商品促销海报的营销设计方法９.１网店商品促销海报设计的基本知识９.２网店促销海报设计的表现手法９.３网店促销海报的设计方法９.４网店商品详情页促销引导海报的设计方法返回９.１网店商品促销海报设计的基本知识传统意义上的海报的英文是“Ｐｏｓｔｅｒ”，又称海报画，《牛津字典》里的解释是“ＰｌａｃａｒｄｄｉｓｐｌａｙｅｄｉｎＰｕｂｌｉｃＰｌａｃｅ”，意思是展示在公共场所的告示，通常印刷在纸或其他材料上。传统的海报是贴在街头墙上、挂在商店橱窗里的大幅画作，以其醒目的画面引起路人的注意。它是一种分布在街道、影剧院、展览会、商业闹市区、车站、码头、公园等公共场所“瞬间”的速看广告和街头艺术。因此，也有人把海报叫作“招贴”。无论是促进一种产品的销售，还是宣布一项事物或是表达一种情感，海报必须能够像“闪电一样”快速抓住人们的视线，准确无误地传达出它所承载的信息。传统海报通常为招引注意而进行张贴，起到广而告之的作用。下一页返回９.１网店商品促销海报设计的基本知识由于海报相比其他广告具有画面大、内容广泛、艺术表现力丰富、远视效果强烈的特点，因此在宣传媒介中占有很重要的位置。海报是一种信息传递艺术，传统意义上的海报是人们极为常见的一种招贴形式，多用于文艺演出、运动会、故事会、展览会、家长会、节庆日、竞赛游戏等，同时也能为企业单位或个人进行宣传。特别是由于市场经济的出现和发展，商业海报也越来越重要，越来越被广泛地应用。海报设计总的要求是使人一目了然。一般的海报通常含有通知性，所以主题应该明确显眼、一目了然，接着以最简洁的语句概括出如时间、地点、附注等主要内容。海报设计必须有相当的号召力与艺术感染力，要调动形象、色彩、构图、形式感等因素形成强烈的视觉效果；它的画面应有较强的视觉中心，应力求新颖、单纯，还必须具有独特的艺术风格和设计特点。上一页返回９.２网店促销海报设计的表现手法海报是一种非常经济的表现形式———使用最少的信息就能获得良好的宣传效果。网店促销海报的设计最主要的元素是商品图片的选择、海报背景的选择、海报促销文字的设计等方面，其中商品图片的选择可以说是成败的关键，图片的作用是简化信息———避免过于复杂的构图。图片通常说明所要表现的产品是什么，由谁提供或谁要用它。图片能够使难以用文字表达的内容变成简短清晰的信息，有时海报设计师会被要求减少文字内容，将其他文字转换成视觉元素，有时整张海报仅利用一些独特的字体设计。因此，网店海报的设计手法是多种多样的，具体的设计表现要根据网店以及所销售的商品的属性与风格来进行设计，要结合所设计的海报的作用与功能来进行设计，而不能千篇一律。但大致上网店商品促销海报的设计方法有以下原则与方式。下一页返回９.２网店促销海报设计的表现手法１.结构分割上注意比例应用２.充分重视文字的设计与排版３.注意运用一致性原则４.要注意运用关联性原则５.注意运用重复原则６.注意运用协调原则上一页返回９.３网店促销海报的设计方法本书结合上述海报的基本设计原则，讲解一网店在季节转换时期，网店商品降价促销海报的设计，具体方法如下。（１）新建文件，设置文件大小为７５０×３９７像素，具体如图９.８所示。（２）输入促销广告文字，运用工具设置文本的大小与位置，字体设置为“微软雅黑”，加粗，颜色为红色，如图９.９所示。（４）设计说明性文本，字体设置与文字大小、位置、颜色等如图９.１１所示。（５）运用选择工具绘制一个圆形选区，把即将要填充的图层移动到文字的下方，然后选择红色进行填充，效果如图９.１２所示。下一页返回９.３网店促销海报的设计方法（６）运用路径工具绘制路径，如图９.１３所示，要运用字体的笔画来绘制，路径控制节点为４个。（７）运用视图放大工具放大图形，如图９.１４所示，并用增加节点工具增加２个节点。（８）运用路径节点编辑工具移动节点，形成一个箭头形状，如图９.１５所示。（９）建立一个新的图层，对新创建的路径造型进行颜色填充，如图９.１６所示。（１０）继续运用路径造型工具，绘制如图９.１７所示的造型，注意节点不能太多。上一页返回下一页９.３网店促销海报的设计方法（１１）使用路径编辑工具中的直线与曲线转化工具，对上面绘制的直线路径曲线化，如图９.１８所示。（１２）再次新建一个图层，为上一步绘制的路径造型填色，如图９.１９所示。（１３）运用钢笔路径工具，绘制执行路径，并对路径进行描边，最后效果如图９.２０所示。上一页返回９.４网店商品详情页促销引导海报的设计方法

商品详情页促销引导海报一般都是在商品详图前面，其作用是一步一步引导消费者对商品产生兴趣，引导消费者进一步去详细了解商品的属性与特征，所以在商品详情页上的商品引导促销广告图也是非常重要的。不同的商家对商品促销广告图的重视程度不一样，有些商家设计了多张商品引导促销广告图，有些商家就设计了一张商品引导促销广告图，有些甚至没有。当然商品引导促销广告图的设计要看商家的整体规划，而且对于不同品类的商品、不同用途的商品，甚至不同的销售平台，其商品引导促销广告图的设计方式与风格也是不一样的，需要具体情况具体分析，要符合整体的设计与布局。下面本书对商品引导促销广告图（１）的设计过程展开讲解，具体如下。返回下一页９.４网店商品详情页促销引导海报的设计方法

（１）启动Ｐｈｏｔｏｓｈｏｐ软件，新建一个高度与宽度为９５０×３９５像素，分辨率为７３像素／英寸，背景色为白色，一般情况下商品广告促销图的尺寸要与平台上规定的尺寸相一致，本案例是一个真实的案例，为了能在多个平台适用，所以把尺寸宽度设计为９５０像素，而非７５０像素，如图９.２４所示。（２）首先在软件工具箱里选择画笔工具，准备为商品广告促销图设计背景，背景的设计应与商品主题图的风格一致，要有利于突出商品的主题图，做到详略得当、主次分明，背景的设计方法和手段有很多，设计人员可以根据不同的商品、不同的销售要求开展设计工作，背景也可以利用一些素材图进行设计，但素材的选取要合理，要与商品主题图的风格一致。图９.２５所示是选取一种ＲＧＢ（２５３、２３４、２１５）的粉色为背景设计的颜色基调。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

（３）这是一个实际应用的案例，背景的设计没有应用外部图像，而是用软件的画笔填色工具来设计背景，Ｐｈｏｔｏｓｈｏｐ软件中画笔是一个很不错的工具，有各种画笔造型，可以自定义画笔形状，可以引用外部笔尖形状来创作出各种背景纹理，来满足烘托各品类商品的需要。下面是选择了一个硬度为０的，即边缘羽化的笔尖形状，同时把笔尖大小设计为１９３像素，这个笔尖大小要根据图像大小的具体情况来定，如图９.２６所示。（４）在设计时不但要考虑一个特定商品的属性信息展示图的整体设计，确保同一个商品的各类信息展示图之间关联亲密，形成一个和谐的整体。把画笔的不透明度设计为４８％，便于掌控颜色的用量，如图９.２７所示。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

（５）用上面设计好的画笔工具与选择好的颜色，对背景进行不均匀上色，在上色的过程中要调整不透明度的大小，形成一种若隐若现的淡淡的背景效果，如图９.２８所示。（６）由于上述背景设计比较单一，使整个画面不够丰富饱满，本步骤将用软件的选择工具，可以是椭圆形选择工具，也可以是多边形选择工具，设置适当的选区羽化值，任意在商品拍摄图中选取一块“蝴蝶结”图像，因为“蝴蝶结”是这款商品的一个特征，商家是根据这一特征为促销宣传的一个点，最后如图９.２９所示。把选择好的图像拖移到画面中，然后用“自由变换”工具把选用的图像的大小与位置调整到最适合的位置。这一工作中关于这类修饰性、美化性的素材的选区是比较重要的，可以就地取材，也可以精心准备。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

（７）从上图可以看出，所选择的素材图像在整个图中过于突出，不利于整体风格的表现，所以要进行适当的调整，方式是首先要选择图像所在的图层，设置图层面板上的不透明度数字，以调整图像的透明度，使之完全融合到背景中去，如图９.３０所示。（８）通过上述工作过程，把背景图像处理好以后，一般不再做大的调整，为了防止对图像进行不必要的编辑，可以选择背景图像所在的图层，并在图层面板锁定像素。接下来是把核心表现的商品主体引入图中，选择已经处理好的商品图片，商品图片必须抠好图，不能有背景存在，然后用图像编辑工具编辑商品主体造型图的大小与位置，效果如图９.３１所示。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

（９）由于上图中商品的位置是根据商品本身的方向设计的，造成图的右边结构偏重，所以应选择另外一张相关的商品图放在左边加以平衡，同时要调整好图的大小、位置与方向，使整体协调统一，效果如图９.３２所示。（１０）商品引导促销广告图中能影响整体效果的是文案的设计与文字造型的设计，文案的设计应根据商品的特征、风格、内涵、适应对象、功能等主要的卖点来进行描述，要用一定具有煽动性的、略带夸张的语言，简洁明了地进行文案叙述，重点突出商品独有的卖点，以最大限度地引起消费者的注意，触动消费者的心理。所以文案的设计是商品引导促销广告图的灵魂所在。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

有了比较好的文案内容以后，还必须对文字的外观造型进行设计，文字的外观造型应与商品的外观造型、背景等相互匹配。图９.３３与图９.３４所示是一组文案的字体选择与颜色设计。颜色Ｒ、Ｇ、Ｂ的数值分别是１８３、１３７、１０４。（１１）当文案的内容、字体、颜色设计好以后，还要对其大小、位置进行调整，如图９.３５所示。颜色稍微突出背景，字体较小，属于装饰性文案。（１２）继续对商品引导促销广告图中的文案进行设计，相对重要的文案字体要大，造型要经典，使人过目不忘，才算是成功的设计。如图９.３６所示，“ＢＥＡＵＴＩＦＵＬ”的字体设计为华文仿宋，颜色要超出背景颜色的深度，也比上一组文案的颜色要深，可见其重要程度。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

（１３）选择这组文案的字体颜色为Ｒ、Ｇ、Ｂ分别是１７７、１１７、７４，可以直接在相应的参数设置框中输入数据，如图９.３７所示。（１４）运用移动工具调整文字的位置，如图９.３８所示，必须与上一组文字对齐。（１５）接下来设置具有点睛性的文案，字体选用相对较粗、比较浑厚的“微软雅黑”，显示方式为“Ｒｅｇｕｌａｒ”，字体大小设计为３０点，粗细状态为“加粗”，如图９.３９所示。颜色选择Ｒ、Ｇ、Ｂ为１０３、６０、４３，相对较深，如图９.４０所示。字体设计总体上显得明显、粗壮、稳重。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

（１６）调整文案在图中的位置，可以先启用软件中的辅助工具参考线，用移动工具从标尺中分别拖出水平方向与垂直方向的参考线，使三行文本左对齐参考线，如图９.４１所示。（１７）设置修饰性的段落文本，操作方法是从工具箱中选择文本工具，然后在图像画面的一定位置单击鼠标进行拖动，形成一个框形区域，然后输入段落文本，如图９.４２所示。（１８）设计段落文本的字体与颜色，因为是英文而且是装饰性的，所以选择笔画较细的字体“华文细黑”，不加粗，大小为１２点，特别要注意设置文本的显示方式为“犀利”，文本的显示模式有“锐利”“犀利”“正常”“平滑”等几种方式，其中犀利与锐利用得较多，分别如图９.４３与图９.４４所示。返回上一页下一页９.４网店商品详情页促销引导海报的设计方法

（１９）用同样的方法设置段落文本的位置，为右对齐，如图９.４５所示。（２０）最后设计价格文本，价格文本是依情况来定的，因为要用于多个平台，所以设计了价格文本，有些商品引导促销广告图中价格文本也可以不出现。其字体、字体大小、字体颜色如图９.４６所示，最终的设计效果如图９.４７所示。返回上一页图9.8返回图9.9返回图9.11返回图9.12返回图9.13返回图9.14返回图9.15返回图9.16返回图9.17返回图9.18返回图9.19返回图9.20返回图9.