8.2 任务二  海报的设计方法

8.2.1  任务目标

       

知识目标	技能目标
● 能记住海报设计的方法；   ● 能熟悉海报版面和结构的设计思路；   ● 能了解海报版面不同文字元素的不同设计方法。	● 能运用海报的设计技巧完成海报；   ● 能运用不同的海报展示方式，制作不同类型的海报；   ● 能根据设计要求独立完成海报，包括页面结构、展示内容和文字元素的排版。

 

8.2.2  任务知识链接

对于网店而言，最常用的宣传营销手段之一就是海报。网店海报的设计，是我们该掌握的重要一课。对不同的商品，海报的设计就有不同要求。本章节我们学习的内容，就是掌握海报设计所包含的基本组成要素。

海报也叫做Banner，主要起宣传推广的作用，海报有多种展现方式，可以放在网店最显眼的地方，第一时间被消费者关注到。海报也可直接连接到客户，针对用户画像分别发放不同促销海报，获得更多流量。还可以用海报来讲故事讲感情，把要传达的信息放进海报，这就是一种有趣而且实用的展现形式。

下面带同学们来学习一下海报设计的五个技巧：

一、呈现清晰的内容

海报设计要强调展现内容，确保消费者在看到海报即刻明白，这张海报传递的信息，企业名称、品牌、优惠或活动等。通过海报能清晰的读取其中的内容，这些内容包括商品图片、企业品牌和文字等。海报能够承载的内容很多，如果不能让客户清晰识别海报内容，无法正确表达有关信息，那么海报就无法起到宣传、推广和促销的作用，所以在海报设计时，海报的文字排版、文案内容和视觉内容都要清晰的展示出来，给大家留下深刻印象。

文本的打造可分三个层次，标题、细节和其他文本细则。

1、标题

标题是海报最醒目的文本设计元素，一般标题字体都比较大，人的视觉可以很快被标题所吸引，它是整个海报设计的主要框架，是整个海报视觉的说明，人在阅读时，也会下意识的首先注意标题的文字内容，所以在选择字体大小和字体形式的时候，最好选用可读性较好的字体，或者可自行设计字体，让标题字体造型突出，让人容易识别。

2、细节

海报中除了标题以外需要呈现的主要文本内容，例如时间、地点和促销信息等，这些都需要通过文字去展现细节和详细的文字说明。考虑如何将这些文本元素放进海报里，文本的大小、颜色、对比度和排版等，通常细节文本元素的大小都比标题小，在海报里控制文本层次结构和框架对比，一般除标题外的文本元素都属于辅助性文本，也涉及文案的编写，文案内容的好坏，也影响着海报的好坏。

3、其他文本细则

这通常指的是海报中相对次要的文本内容，细则内容通常都会用于修饰海报的结构，对主要文本内容的进一步说明，相对来说字体会更小，感兴趣的客户可以停留仔细看，不会影响主要内容。例如下图海报（如图8-21所示），标题、细节和其他文本细则排版结构层次明显，内容清晰易懂，文字与图案搭配相得益彰，客户第一时间就能明白海报展示的内容。

图8-21 鲜花定制海报（来源网络）

二、运用对比度

运用强烈的色彩对比度，浓重而强烈的色彩总是很容易吸引注意力。浅色温柔的颜色让海报看起来自然舒服，大胆的彩色和夸张的文字元素更适合应用于促销阶段的海报，表达更多的促销信息。明显的颜色对比，增强海报认知度，运用明亮的色彩搭配给人以视觉上的冲击，如图8-22所示。

图8-22 对比度强的海报

三、制作一个系列的海报版本

海报制作一个系列不同内容的版本，基于一定基本元素再展开设计，这种方法使得用户在短时间内多次接触某一商品或品牌的海报，但看到的海报版面设计都不一样，无意识下就记住了展示内容，相当是一个不断强化商品或品牌的过程，如图8-23所示。也可把多个版本的海报分别投放在不同的平台，区分投放有针对性的文字元素或者商品元素，也可根据自己的商品特点，制作有故事情节或者不同人群的海报，能够更有效投放到目标客户群当中。例如天猫店投放新品海报，引导潮流；拼多多平台投放换季商品折扣海报，分流不同层次的网络购买者。

图8-23 充电器系列海报

四、突出的视觉效果

每一张好的海报会有自己的核心关注点，核心关注点可以是商品图片、文字排版或故事插画等内容，核心关注点不能太多太复杂，它是海报最关键最突出的部分，与主标题设计一样，消费者看到的海报最留意的位置，就是海报最突出明显的表达内容。人在浏览某个画面时，会形成集中关注的聚焦点，以此为根据调整海报的核心画面，让消费者第一眼看到的就是我们想要展示的内容。

在海报设计的时候，可以采用放大的商品部分、有质感的特写、有针对的插画、特殊的文本字体等，用来聚焦整张海报的画面，就是海报最夺人眼球的部分，确定为主视觉，其他部分注意层次结构，形成一定的对比度，合理干净的排版，不抢主视觉的部分，确保最优的视觉效果如图8-24所示。

图8-24 突出主视觉效果的海报

五、适当的留白

海报的适当留白，留给大家很大的想象空间，更加突出主视觉的内容，为海报制造视觉上的聚焦点，所有目光都会集中在某一处，所以海报中有适当的留白，都是为了创造最佳的视觉效果，如图8-25所示。

图8-25 留白类型的海报

海报设计中，控制适当的留白部分，突出主视觉而画面而不显得突兀，有以下五个注意事项。

1、字母和文字之间的间距不要太近太紧，适当的增加空间感；

2、字母和文字之间的排版不要太生硬，不用平均排列，可以以错落有致的排列方式制造画面层次感；

3、海报上下左右靠近边缘处都要留有一定的空间，不要把文字、图片或商品等把整张海报对齐填满；

4、不同设计元素之间也要有一定的距离，让用户清楚看见各个设计元素表达的内容；

5、留白部分不可过多，明确整张海报主视觉焦点集中在什么位置，第一时间想让用户看到的是什么内容，利用留白强调视觉效果。

8.2.3  任务知识拓展

展示不同文字排版的海报，带大家理解海报设计过程中，文字元素排版的方法和技巧，重视文字排版在海报中的作用，优秀的文字排版结构能提升海报整体气质。

一、海报文字排版的基本规则

海报文字排版通常使用的对齐方式有左对齐、居中对齐和右对齐集中方式。通过一系列海报文字元素排版的情况，分析文字对齐方式，了解不同的对齐方式在海报中的作用。

1、海报图中，文字放在商品的左侧（如图8-26所示），文字排版比较随意，上下文字不对齐，各有各的方向，视觉上比较混乱。

图8-26 文字不对齐

2、把左侧的文字部分调整为右对齐（如图8-27所示），即是横排文字最后一个字或者字母按照垂直方向排列。右对齐能让文字都统一在某个位置上，在这张海报中，右对齐的排列方式使得海报左侧留白部分显得较为凌乱。

图8-27 文字右对齐

3、把文字排列方式换成左对齐（如图8-28所示），即文字或字母最左边的第一个字沿着垂直方向对齐。海报中左侧留白比较干净，但文字元素右侧和展示商品之间形成凹凸的空白区域，让文字元素和商品元素之间存在着较大的距离感。

图8-28 文字左对齐

    4、使用文字居中对齐的方式（如图8-29所示），文字部分仍在海报左侧，商品在右侧，文字部分居中对齐，这种排版方式让商品图片和文字都比较规范，画面不会因为文字而凌乱，海报也显得比较板正。

图8-29 左侧文字部分居中对齐

5、人的视觉主线一般是从左到右的方向，为了突出商品的主体位置，更换商品图片和文字部分两者的位置（如图8-30所示），并且把减少文字层次，配合商品属性展现“简约”风格的主题，调整后，从视觉上首先可以看见商品，文字部分左对齐，将不规则的留空部分对外，画面显得干净整洁，同时也能凝聚主视觉焦点。

图8-30 突出主视觉的海报排版

小贴士：不同的海报选择的文字对齐方式不同，例如海报的尺寸，横版或竖版海报的文字部分，采用的对齐方式各不相同，根据商品和海报结构进行调整。

二、主标题、副标题及其他文字元素

文字元素排版的技巧就是分清主、副标题和其他文字元素，大小、颜色和字体之间的关系。主标题使用大字体和粗字体，比较醒目，能够第一时间辨别出来，副标题可以和主标题使用用同一种字体，较主标题略小略细，便于阅读。其他文字元素在字体上可以使用辨识度较高，清晰一些的小字体。尽可能选择能看懂的字体作为主副标题，比较特异或者看不懂的字体尽量不使用。以下图为例进行讲解，如图8-31所示。

                                  

                      图8-31 剃须刀海报                                 图8-32 文字部分

1、海报中存在一些初学海报设计的同学容易犯的错误，首先是这张海报的主标题，一般主标题字体设置为最大，文字排版应基于商品文案的基础上进行设计，如图8-32所示。

“超级特惠夏不为利”这几个字在海报中最大，表明将这几个字设置是海报的主标题，但是它们的辨识度比较低，因为使用的是“方正舒体”，比较随性飘逸，作为小家电产品的主标题字体不易用户阅览，无法在短时间内清晰辨认文字，如果在短时间内读不懂海报的大标题内容，用户几乎就会放弃这张海报。

    2、主标题文字设置的前提，是商品文案想对消费者表达的主体思想，品牌需要传达的主要内容。一般会把海报中商品名称、商品优势特点、促销活动名称、店铺名称之类的重要信息作为主标题，这是一个剃须刀的海报，应该也要把剃须刀优势特点展现出来，作为主标题会更好，“全身水洗顺丰包邮”这几个字作为副标题，把二者的关系调整一下，确定好主副标题以后，适当的调整文字的大小和结构关系。

3、“锋过无痕高效强劲”这组文字元素用的是矩形外框的文字结构，用形状作为装饰，把文字放进矩形，这种修饰形式很常用，但这组文字使用填充的矩形更佳。使用形状为文字做装饰或搭配时，尽可能不要多个形状堆叠，多个形状同时作用在文字上，会让文字显得是蜷缩在一个有限制的框格里，文字显得比较拥挤。

4、海报里面如果有价格或其他重要的促销信息，应该尽量调整得清晰醒目，提醒消费者价格可享受优惠，也可用区别与其他文字字体的颜色，同样有提醒的作用。

根据以上四点的描述，把海报的文字排版按照刚才提到的问题进行修改，优化海报的画面结构，如图8-33所示。

图8-33 修改后海报

5、区分主副标题，在海报画面中把视觉集中的区域留给主标题和商品展示部分，主副标题区分不明显，海报无法突出文案主体内容，造成画面主次不清，宣传信息传达不够明确，如图8-34所示。

  

图8-34 主、副标题调整前后对比图

6、在文字排版过程中，还要注意尽量文字不要使用多种颜色，海报会显得杂乱，如果使用形状作为背景修饰文字，在形状内的文字可以跟背景一个颜色，或者使用与背景相近的颜色，否则画面整体效果显得跳脱，通过以下文字色彩调整前后对比为例，如图8-35所示。

 

图8-35 文字颜色调整前后对比图

三、善用主标题

海报排版的文字元素一般都会以主标题为“排头兵”，主标题文字在海报中所占长度作为其他文字元素排版的宽幅，相当于海报文字部分的主视觉标准篇幅。

1、主标题过长（如图8-36所示），视觉上画面整体拉长，上下留白过多，排版结构协调；

2、其他文字元素宽幅都以主标题的宽幅为标准（如图8-37所示），即两端对齐，海报文字会显得很生硬且臃肿；

3、宽幅不以主标题为标准进行排版（如图8-38），每组文字篇幅长短区分明显，海报画面就会显得脱节，文字组之间互相没有关系，文字元素杂乱无章。                  

      图8-36 主标题过长                    图8-37 文字两端对齐              图8-38 不限其他文字宽幅

4、当主标题超过8个字，文字组显得过长，可以将主标题分段分层次排版，其他文字元素在这个宽幅标准下进行调整，文字组宽幅尽量不要过长过短，文字字体大小不超过主标题文字大小。

以下图海报为例（如图8-39所示），主标题有8个字，在海报中排版显得过长，画面上其他文字元素和主标题脱节，文字结构有比较多的空白处。

把8个字的主标题分段，放大优惠的价格信息，画面填满了不会很空，通过改变文字的字体与商品匹配，强调“热卖”优惠文字，做好文字元素的层次感，在视觉上让用户可以第一时间看到关键词语如图8-39所示。

图8-39 海报主标题过长

图8-40 优化海报主标题

5、很多初学者已经知道了主标题的作用，制作会重点突出主标题，为了让主标题“显而易见”，把主标题的字体放在文字元素排版的第一行或者开头，虽然能够突出主题，赢得第一视觉效果，但是会有一种头重脚轻的感觉，画面看起来结构不稳，文字元素排版多以副标题或者其他细节字体开头，接下来才是主标题，这种排版方式会让画面更加和谐，不产生压迫感，以下图为例（如图8-41所示），同学们可以尝试调整一下。

图8-41 主标题过重

6、海报主标题字数略少，分别把主标题每一个字单独放置一个图层，通过改变文字的大小、粗细、旋转、叠加或排列等方式灵活运用主标题，制造错落有致的层次感，必要时可附带特效，如图8-42所示。

图8-42 字少的主标题设计

四、文字元素的行距与间距

1、海报文字间排版的行距与间距，是文字排版中很重要的一步，它控制海报的整体协调程度，行距和间距的节奏是否合理，直接影响海报画面的空间感。下图海报里的文字排版行距（如图8-43所示），都是同等距离，文字组之间排列显得紧密呆滞，显得并不生动。

                               

图8-43 等行距排版

2、把文字元素之间的行距适当调整，将小字体和大字体上下行距稍微拉开，在视觉上形成一个上窄下宽的效果，不让开头文字形成头大尾小的氛围。所有的文字元素必须当成一个整体去调整，不要过多分块分段，文字元素的分布散乱，视线不容易集中，一般情况下，可以把文字组分成2-3块就可以了，在整体文字元素中做行间距的调整，如图8-44所示。

图8-44 行距调整后

3、Photoshop文字工具，一般使用默认文字间距，不会出太大的问题，根据需要调整文字间距来配合其他文字组，从而达到更加美观的目的，我们看下图的“时尚潮流新品”这几个字，为了衬托上排文字的强调作用，适当的拉伸这组文字间距，让上下文字展现出更好的效果，需要注意的是，文字间距的大小，不要让拉开超过当前一个字体大小的距离，那样文字就会散乱，如图8-45所示。

   

图8-45 文字间距的调整

4、文字间距过大，可增加其他的小元素来填补过大的空白，在视觉上丰富文字效果，如图8-46所示。

图8-46 丰富字间距效果 

5、文字由英文或者拼音组成，一般会将英文字母当做装饰，更多情况下会使用大写字母而不是小写字母，因为小写字母有高有低，排版的时候凹凸不平，视觉上不是很规整，很容易干扰画面结构，大写字母的高度相同，尽可能的减少这种视觉上高低起伏程度，如图8-47所示。

图8-47 大小写字母排版

6、文字排版切记不要使用通用标点符号，例如逗号、句号或感叹号等，通用标点符号让画面衔接不美观，画面显得不专业，影响整体视觉效果，将通用标点符号换成空格或其他装饰元素，如图8-48所示。

    

图8-48 多种文字排版