在Banner海报中的视觉构图实训案例

活动背景

小可通过学习和小练习，掌握了一定的美工设计视觉构图的方法和技能，接下来即将开始针对店铺首页Banner设计进行练习和学习。Banner海报是店铺首页的关键展示区域，能够决定整个店铺首页给消费者的初印象。要达到这样的效果，海报上的营销信息要快速、正确地传递给消费者，因此海报构图的布局与设计尤为重要，接下来我们就和小可一起来学习吧！

知识窗

1.初识Banner海报

首页轮播海报也叫Banner海报，一般位于店铺首页导航的下方，占有较大的面积，是消费者进入店铺首页中看到的醒目区域。利用好轮播广告图，不仅能带来视觉效果的震撼，还能使消费者第一时间了解店铺的活动信息。

店铺Banner海报的常见尺寸：因受首页装修模块的影响，Banner海报的宽度一般是950 px，高度尺寸可以自定。但是要注意首屏的完整展示，尽量不要将海报高度设置超过首页第一屏的高度，以免影响重要营销信息的展示。

店铺Banner海报从内容上区分主要有以下几种：

①品牌宣传型广告，如图2.3.25所示。

图2.3.25

②店铺整体活动广告，如图2.3.26所示。

图2.3.26

③具体产品打折促销、新品上市广告，如图2.3.27所示。

图2.3.27

2.Banner海报的设计要点

①店铺轮播海报的设计制作需要有个主题。无论是新品上市，还是活动促销，主题确定后，才好围绕这个方向确定海报的文案、信息等。

②合理运用构图方式。海报的构图就是处理好图片、文字之间的位置关系，使其整体和谐，并突出主体。

③配色。海报的配色十分关键，画面的色调会营造出一种氛围。在配色中，对重要的文字信息用醒目的颜色进行强调，以清晰的明暗对比传递画面信息。

④视觉冲击力。Banner海报作为首页的焦点图，目标是要从整个首页中脱颖而出。重点在于对排版和配色的把握，加强色彩和空间的对比，才能让海报视觉冲击力发挥出作用。

活动目标(www.xing528.com)

了解店铺Banner广告的设计内容，掌握店铺Banner海报的构图和设计方法。

活动实施

设计步骤参考如下：

（1）新建文档，设置合适的尺寸950 px×500 px，填充背景色（R：255， G：205，B：69）如图2.3.28所示。

图2.3.28

Banner设计

（2）设计好背景，计划好构图方式（中间结构），放置商品图片（项目2→2.3.3素材3、2.3.3素材4）在合适的位置，绘制中间文字底色块造型，颜色搭配选择与橙色背景对比强烈的补色——紫色，增强视觉对比效果，突出中间的营销文字部分，如图2.3.29所示。

（3）输入广告文字内容，布局好位置，调整文字属性，如图2.3.30所示。

（4）调整重点营销信息文字的色彩、细节样式设计，添加优惠券、点击按钮设计，增强视觉营销效果，如图2.3.31所示。

图2.3.29

图2.3.30

图2.3.31

活动评价

Banner广告的设计评分见下表：

活动拓展

尝试为商品制作两张不同风格Banner广告，要求运用不同的构图方法，形成店铺首页轮播广告。