检查横幅设计的组成部分& # 47；类型& # 47；风格& # 47；完整的设计步骤集合

banner对于一个设计师来说绝对不是一个陌生的词。目前banner的需求基本涉及到所有行业。无论是在网页上还是移动端，我们都能看到banner的影子，所以掌握banner的设计是每个设计师必备的技能！

Banner(以及banner广告)是网络广告最早的形式，也是目前最常见的一种。横幅广告，也称横幅广告，是横跨网页的长方形公告板。当用户点击这些横幅时，他们通常可以链接到广告商的网页。是展示一个商家广告内容的图片，放在广告主的页面上，是互联网广告中最基本的广告形式！

这里我们将从这几个方面来解释横幅:

1.横幅的组成部分

二:横幅的类型

三:横幅的风格选择

四:横幅设计步骤

1.横幅的组成部分

横幅的主要组成部分简要总结如下:

而banner的主要元素是:文案

元素

背景。

元素还可以细分为:元素=商品

模特

logo

点缀(这里的元素需要根据banner的实际情况来选择，可选)

如图所示:

(来自花瓣)

二:横幅的类型

我这里总结的banner类型主要分为:

01:产品推广横幅(新产品、热销产品)

02:活动横幅(节日促销、产品促销)

这里把banner简单分为两种，因为不同的banner有不同的效果和用途，所以我们需要设计不同风格的banner。

banner在产品推广中最重要的就是突出产品的特色，所以我们对于banner设计最需要的元素一定是产品和简短的文案介绍。至于有点缀的元素，我们也可以根据实际产品的特点选择合适的元素，也可以使用没有点缀的元素，背景肯定是必不可少的！

01:产品推广横幅:

产品

文案

背景

例如:

(来自花瓣)

以上案例都是产品推广的横幅设计。它们有一个共同的特点，就是把产品放大再放大，表现出产品的特点。简洁的文案介绍和大量的空白突出了产品的特色，让用户的目光不由自主地被产品本身吸引。

产品推广横幅:

产品

文案

元素

背景

例如:

(来自花瓣)

这种banner的特点是除了产品本身之外，还加入了一些其他的元素作为banner的点缀效果，让画面显得更加饱和或者说让画面有了动感的效果！

那么问题来了

什么情况下产品横幅设计加入元素好？什么情况下不加元素好？

第一，在极度需要展现产品特性的时候，我们最好选择不添加干扰产品的元素。

第二，对于简单的产品，最好不要加入装饰的元素。大量留白更适合简约产品的风格。

02:活动类横幅

产品

文案

元素

背景

例如:

(来自花瓣)

对于活动类的banner设计，我们大多会选择色彩鲜艳、图像饱和有冲击力的那种，以此来营造活泼的氛围，这对于元素的添加也是必不可少的，因为对于活动类的banner设计来说，图像越活泼，活动强度越大，会吸引更多的用户，活动的标题也要尽量突出！

二:横幅的风格选择

横幅的样式有很多种，但是不同的横幅选择的样式肯定是不一样的。不同风格的banner给人的视觉效果是完全不同的，恰当的搭配可以让banner更好的展现其特点和目的。

例如:

01: banner，简单产品的宣传家居banner，比较适合简单干净的风格。

(来自花瓣)

02: banner，高端科技产品，选择有科技感的款式。

(通过科技的图形和色彩体现)

(来自花瓣)

03:时尚类banner适合选择时尚图片的风格。

(通过独特的造型和风格、图形和色彩等体现。)

(来自花瓣)

04: banner，高端奢侈品牌，适合高端大气上档次。

(以黑红、黑金等高档色彩体现。)

(来自花瓣)

05:女生& # 92；儿童可爱风横幅适合可爱风元素的选择。

(通过可爱的元素:插图、线条、气球、爱情、圆形字体、充满活力的颜色等。)

(来自花瓣)

06:国风/文化/节日的banner更适合选择有文化气质的元素。

(通过中国风书法，中国古代元素:印章，中国山水画，水墨，扇子，剪纸，园林窗格，古代图案，祥云，京剧，卷轴等。)

(来自花瓣)

二:横幅的设计步骤

1.理解并确定横幅的设计要求。

02.阐明横幅设计的目的

03:根据获得的横幅设计要求，确定横幅的设计风格。

04.选择合适的横幅设计布局结构。

05:选择匹配元素装饰横幅整体效果(根据实际需要添加)

06:配色选择

1.理解并确定横幅的设计要求。

对于理解设计需求，无论设计的前提是什么，都是必不可少的一步，也是最关键的一步。如果连设计要求都不知道，设计结果肯定达不到实际要求。

那么，我们需要对banner的设计要求做哪些具体说明呢？

要点1:确保横幅设计的文案。

对于文案来说也是非常重要的一点。设计师可以根据文案信息找到设计灵感，也可以知道设计风格的大致走向。

要点一:确定banner的设计尺寸和投放平台。

文案确定后，我们还需要了解banner的投放平台和位置，大小，是否需要适应各个平台的展示。

02.阐明横幅设计的目的

对于设计一个横幅来说，在设计横幅之前你想达到某种目的是肯定的，所以你一定要清楚这个横幅设计的目的是什么，比如你是想推广产品还是推广产品，两者的性质是完全不同的。

03:根据获得的横幅设计要求，确定横幅的设计风格。

Banner的设计风格我们可以从banner对定位的文案要求中找到关键词，比如:全语音智能操作的车载支架A5。

从这个话题文案中我们可以提出的关键词是:全语，智能。

对于这类关键词的理解，我们首先肯定会想到科技智能时代的画面，所以这里有一个风格的选择！

04.选择合适的横幅设计布局结构。

Banner的设计布局结构大致可以分为:

中心结构、左对齐结构、右对齐结构

不同要求的banner结构需要根据实际情况选择！

05:选择匹配元素装饰横幅整体效果(根据实际需要添加)

对于横幅的装饰元素，我们也需要根据实际情况和横幅产品的特点来选择合适的元素。比如简单产品的横幅就不需要更好的装饰元素，而活动类或者少女儿童等可爱类的横幅设计就需要选择更合适的装饰元素。而且不同形状的条幅的装饰元素的选择也是不同的(前面已经简单介绍过了，这里就不赘述了)。

06:配色选择

颜色的选择也很重要。不同属性的banner配色也不同。恰当的色彩搭配会让产品更加突出或者让画面更加显眼，给人不一样的感觉。

例如:

*黑金和黑红会给人高级感。

*蓝、黑、紫等冷色搭配，画面给人硬朗的感觉。空的感觉，速度和力量更适合科技感。

*红、橙、黄、紫的搭配会营造出温馨的氛围，更适合时尚和活动。

*黑白灰的搭配会给人一种冷得不敢靠近的感觉，比较适合大牌的风格选择。

*白色和灰色的搭配会给人一种宁静、文艺、气质和简约优雅的感觉，比较适合选择简约的产品。

实际案例:

文案要求:

   全语音智能操作的车载支架A5

声音代表挥手和服从

使用讯飞AIUI人机交互解决方案，智能驾驶一下子就能来。

尺寸:1920x650px

设计目的:根据需求，我们得到的横幅设计旨在推广新产品A5。

第一步:我们将副本信息和提供的产品放入画布。

第二步:明确我们的主标题“全语音智能操作车载支架A5”

所以我们放大主标题来突出它。

第三步:选择banner的风格，因为我们这里需要的是产品的智能化，所以我们的风格可以定义为科技感。

第四步:选择布局结构。这里选一个简单的左右结构吧！

第五步:选择装饰元素。装饰元素也要根据科技的效果来选择，可以从文案中提取。比如这里我们可以提取:科技线条和图形，语音图形等。

第六步:整体位置调整和配色。我们还用不同的层次结构来处理文本标题，使它们更加突出。字幕文案也是按照整体风格画面略加处理，让文案和画面更加和谐统一，包括周围因光线影响需要处理的产品。

最后我们得到上面的横幅效果！😂设计了一个简单的科技感横幅！

好吧！今天的知识有点多，也比较全面！希望你喜欢！🙃

往期好文章推荐

—

布局-简单的7种图片布局方法

10个创意线条图形海报设计

教你调色技巧，摆脱调色困境！

【创新

PS设计banner常用的尺寸是多少？一般画布建立多大？

横幅尺寸4m*1.2m，PS新建画布尺寸 4m*1.2m，分辨率72像素，需要用的照片的分辨率也只要72就行了 这样直接把照片拉到横幅里就能用，注意 照片先处理好再拉到横幅里