插画排版设计图片-横幅设计插画风格还有哪些其他风格？

[img] 横幅设计插图还有哪些其他风格？

Banner设计风格：1.时尚风格卡通人物，2.复古风格，3.清新风格插画排版设计图片，4.炫酷风格，5.简约风格，

横幅设计组件/类型/样式/设计步骤清单

对于设计师来说，Banner绝对不是一个陌生的词。 目前各个行业中，基本都会涉及到横幅要求。 无论是在网页端还是移动端，我们随处可见banner的影子，所以要掌握好它。 Banner设计是每个设计师必备的技能！

横幅（和横幅广告）是网络广告最早的形式，也是目前最常见的形式。 横幅广告，也称为横幅广告，是跨越网页的矩形公告板。 当用户点击这些横幅时，他们通常会链接到广告商的网页。 它是表达商家广告内容的图片，放置在广告商的页面上。 它是互联网广告中最基本的广告形式！

下面我们将从这几个方面来讲解banner：

1：横幅的组成部分

2：横幅类型

三：Banner样式选择

四：Banner设计步骤

1：横幅的组成部分

以下是横幅主要组成部分的简要总结：

而Banner的主要元素是：文案+元素+背景

元素可以细分为：元素=产品+型号+logo+点缀（这里的元素需要根据banner的实际情况来选择，可选）

如图所示：

（来自花瓣）

2：横幅类型

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

01：产品促销横幅（新品、热销产品）

02：活动横幅（节日活动促销、产品促销）

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

对于产品促销横幅来说，我们最重要的是突出产品的特点。 因此，我们Banner设计最需要的元素一定是产品和简短的文案介绍。 至于点缀元素，我们也可以根据实际产品来设计。 特点：选择合适的元素，或者不需要点缀。 背景肯定是少不了的！

01：产品宣传横幅：

产品+文案+背景

例如：

（来自花瓣）

以上案例均为产品宣传横幅的设计风格。 它们的一个共同点就是将产品放大再放大，充分展示产品的特性。 简洁的文案介绍和大量的留白凸显了产品的特点，让产品更加突出。 用户的目光不由自主地被产品本身吸引

产品促销横幅：

产品+文案+元素+背景

例如：

（来自花瓣）

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

那么问题来了

什么情况下适合在产品banner设计中添加元素？ 什么情况下最好不要添加元素？

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

第二：对于简单的产品，我们最好不要修改或添加装饰元素。 大量留白更适合简约产品的风格。

02：活动横幅

产品+文案+元素+背景

例如：

（来自花瓣）

对于活动横幅设计，我们大多数人都会选择明亮多彩的颜色，搭配饱和且有冲击力的图像，以营造活跃的氛围。 元素的添加也是必不可少的，因为对于活动banner设计来说，画面越生动，就会显得活动的强度越大，也就越能吸引用户。 活动的标题也应该尽可能的突出！

2：Banner样式选择

横幅的样式也有很多种，但是不同性质的横幅所选择的样式的判断也是不同的。 不同的横幅、不同的风格会给人们带来完全不同的视觉效果。 只有适当的搭配才能让Banner更好地表达其特点和目的

例如：

01：简约产品首页横幅的促销横幅更适合简约、优雅、干净的风格。

（来自花瓣）

02：高端科技产品横幅，选择有科技感的风格。

（通过技术图形和颜色反映）

（来自花瓣）

03：时尚服装横幅适合选择时尚图片的风格。

（通过独特的形状和风格、图形、颜色等体现）

（来自花瓣）

04：高端奢侈品牌横幅适合高端、优雅的风格搭配。

（通过高端颜色黑红、黑金等体现）

（来自花瓣）

05：女孩儿童可爱风格横幅，适合搭配可爱风格元素

（通过可爱的元素体现：插图、线条、气球、心形、圆形字体、鲜艳的色彩等）

（来自花瓣）

06：民族风格/文化/节日横幅更适合选择具有文化气质的元素。

（通过中国式书法和中国古代元素：印章、山水画、墨迹、扇子、剪纸、园林窗花、古代图案、祥云、京剧、卷轴等）

（来自花瓣）

2：Banner设计步骤

01：了解并确定横幅的设计要求

02：明确横幅设计的目的

03：根据获得的banner设计要求确定banner设计风格

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

05：选择搭配元素装饰banner整体效果（根据实际需要添加）

06：配色选择

01：了解并确定横幅的设计要求

对于设计需求的这种理解，无论做什么设计，前提都是不可或缺的一步，也是最关键的一步。 如果不清楚设计需求，设计结果肯定达不到要求。 实际需要

那么对于Banner我们需要明确哪些具体的设计要求呢？

第一点：确定banner设计文案

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

第一点：确定banner设计尺寸及投放平台

文案确定后，我们还需要知道banner的平台和位置，大小，是否需要适配各个平台的展示。

02：明确横幅设计的目的

在设计横幅的时候，在设计这个横幅之前，你必须要达到一定的目的。 因此，在设计横幅之前，你必须清楚地了解这个横幅设计的目的是什么，例如：是为了推销产品还是为了推销产品，两者的本质是完全不同的。

03：根据获得的banner设计要求确定banner设计风格

对于横幅的设计风格，我们可以从横幅文案要求中找到关键词进行定位，如：全语音智能操作车载A5

从这个主题文案中我们可以得出的关键词是：全语言、智能

当理解这样的关键词时，我们肯定会首先想到科技智能时代的形象，所以我们选择了这里的风格！

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

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

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

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

05：选择搭配元素装饰banner整体效果（根据实际需要添加）

关于横幅的装饰元素，我们也需要根据实际情况和产品横幅的特点做出适当的选择。 例如，简单的产品横幅不需要装饰元素，而需要选择针对女孩和儿童的活动横幅或可爱的横幅设计。 装饰元素比较合适，不同形状的横幅选择的装饰元素也不同（之前已经简单介绍过，这里不再重复）

06：配色选择

颜色的选择也非常关键。 不同性质的横幅选择的颜色组合也不同。 适当的色彩组合会让产品更加突出或者让画面更加显眼，给人不同的感受。

例如：

* 黑金与黑红的搭配会给人一种高级感

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

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

* 黑、白、灰的搭配会给人一种冷漠、难以接近的感觉，比较适合大品牌的风格选择

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

实际案例：

文案写作要求：

全语音智能操作车载A5

挥手并服从语音立场

采用科大讯飞AIUI人机交互解决方案表情包设计，智能驾驶就像张嘴一样简单。

设计尺寸：1920x650px

设计目的：我们根据需求获得的Banner设计目的是为了宣传新产品车载支架A5

第1步：我们将文案信息和提供的产品放入画布中

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

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

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

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

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

第六步：调整整体位置和色彩搭配。 我们还将文本标题处理成不同的层次结构，使它们更加突出。 字幕文案也根据画面整体风格稍加处理，让文案和画面更加生动。 和谐统一，包括需要处理产品周围的光的影响。

最终我们得到了上面的banner效果！ 一个简单的科技横幅现已设计完成！

好的！ 今天的知识有点多、更全面了！ 希望你喜欢！

往期推荐文章

—

布局设计——7种简单的图像布局方法

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

2个技巧教你配色技巧，摆脱配色难！

[创新]海报设计思路

详细描述APP Banner设计技巧

确定风格

构图/布局

颜色

1-1. 我们先来详细阐述一下文本字体处理的第一个方面：

文字切割，这种处理方式一般是对字体的某些部分/连接进行切割，或者在切割的地方添加一些元素； 这样处理的好处是，让字体更有艺术感，画面更有空间感插画排版设计图片，横幅给整体增添了几分文艺或者神秘的气息；

字体变形处理； 让我们看一下图 1-3，其中字体是扭曲的。 图1-5是设计者对字体端点的细节处理； 或者改变字体粗细和笔画的形状，这里就不一一举例了，这种处理方式让文字“活了”，更贴合文案的语义；

对字体笔画进行模糊/擦除/透明/色差处理。 一般是将字体笔划模糊或透明，或者用画笔擦除字体的一部分，或者改变某个笔划的颜色。 总之，加工方法多种多样，但都是相似的。 ；这种处理方式让字体看起来更有立体感或者更贴合背景；

在字体中添加“突出显示/投影”。 这种方法是在字体中添加一些高亮元素，或者在字体后面添加一些线性或曲面的“投影”元素，使字体看起来更有立体感，并与背景融为一体。 非常合身；

1-2. 上面我们讲完了字体的几种常见的处理形式，我们再来说说横幅文案的几种常见的排版风格；

横向排版，这种排版风格比较常见，一般用字体大小/粗细/类型/颜色来分隔主内容和次内容。 这种排版显得层次分明，一目了然；

倾斜排版，这种排版一般用于冲击感较强的页面，比较动感、有活力。

竖式排版，这种排版方式适合文案内容比较少的排版，多用于比较古典文艺、清新的页面；

交错排版，这种排版看起来交错排列，比较美观、有气势，但是这种排版也仅限于文案内容比较少的横幅。

波浪排版，这种排版比较少见。 我就在这里说说吧。 这种排版方式主要用于节日活动页面。 比较热闹，可以烘托气氛；

2、上面我们讲的是文字处理和排版。 现在我们来谈谈文案和图片。 常见文案及图片

插画和图片对设计师的要求更高。 插图需要自己画，当然也可以找素材；

实物图片，一般直接使用某种产品/人物/场景的图片，但该类型对图片的清晰度和构图要求较高；

将图片转换为手绘插图。 这种处理图片的方法就是将图片转成手绘风格。 这样就解决了图片不清晰、与背景图片融合不够的问题，也更有设计感。

3、简单说一下banner背景。 常见的背景类型有4种：纯色背景、渐变背景、纹理背景、图片背景。 前两个很容易理解。 常用的纹理背景是纸张或石头/表面纹理。 或者混合颜色和纹理，图片背景对图片的清晰度和美观度有要求；

4.装饰，分为背景装饰和复制层装饰

4-1 常见的背景装饰、几何形状和带线条的发光体

4-2 文案装饰，根据文案语义环境添加的常见文案装饰线条、几何形状、画笔和图形

如何设计良好的横幅广告形象

横幅广告无处不在。 从网站首页页眉的内容推荐到侧边栏，从文章内到图库列表，几乎在每一个内容存在的地方，你都会发现它们的影子。 通常，它们看起来很漂亮，有点华而不实，并且会影响您的网络浏览体验。 尽管我们尽一切努力减少它们对用户的负面影响，但坏名声不可避免地与它们联系在一起。 一起。

事实上，Banner广告对用户的影响是巨大的，合理的使用肯定会收到事半功倍的效果。 那么如何制作一个优秀的、不烦人、转化率高的横幅广告呢？

空洞的理论可能没有足够的依据。 你不妨从以下50个案例中学习横幅广告的设计技巧。

1. 风格化的图文布局

这是《亲爱的摩登小姐》制作的一组横幅广告。 每张图在文字和图片素材上都保持了气质和风格的一致性。 图片素材中字体的形式感以及图像与图形的结合，使整个广告横幅更加强烈。 如果图片不是那么强烈的风格化，而是比较微妙的话，就应该搭配比较经典、比较醒目的字体。 原理是一样的。

2. 创建层次结构

Visa的假日广告横幅充分利用了层次结构。 照片选择了景深和食物的层次感，让人第一时间被吸引，而文字布局则遮盖了模糊的远景，保证了可读性，同时也增加了一层绘画感的传达。 信息以确保不存在混淆。 按钮放置在食物的正上方、文字的下方，恰到好处地吸引人们点击。

3.使用相关图标

谷歌的这款广告横幅通过手绘图标为人们带来了个性化的体验。

图中每个手绘图标都非常容易识别。 虽然并不复杂，但却营造出一种走遍世界的感觉。 这种难以形容却又令人感动的感觉让这则广告不仅仅是一个广告。

4.添加意想不到的元素

如何制作招聘广告？ 谷歌的这则招聘广告可以说是出人意料。 没有花哨的描述，也没有漂亮的女孩，只是一个看起来像社区布告栏上的手写小广告的涂鸦手写广告。 这样的广告并不复杂，却让人意想不到，熟悉的感觉就足够让人感动。

5.添加插图

这个案例也是谷歌的广告图片。 插画的加入让整个广告形象充满了童真和趣味。 加上扁平化的元素，整体看起来比较统一。 这种例证实施起来并不困难。 可能看起来有点粗暴，但是真的很友好。 插图与摄影不同。 它们可以赋予设计后者所不能的品质。 当然，你必须好好利用它们。

6.布局适配

FatCow的广告形象由Envato Studio设计。 为了适应不同的广告空间，整个广告制作了多个不同尺寸的版本。 设计出最常用的广告画面后，重新编辑元素，将其制作成可以适应其他广告空间的尺寸。 有些元素需要调整、删除或添加，这是可以实现的。

7.使用鲜艳的颜色

这则 Google 音乐广告使用了充满活力的粉色与同样高饱和度的蓝色搭配。 两者对比鲜明，给人留下深刻的印象。 与普通的单色横幅相比，这种多彩的多色按键更加醒目，但使用时需要多加注意，以确保可读性和协调性。

8. 保持简单

如果说有一件事情是可口可乐做得非常好的，那么保持简单的设计绝对是值得学习的众多优点之一。 这款可口可乐广告横幅设计很好地延续了这一传统：产品形象LOGO和口号的标志性配色。 虽然内容不多，但效果却很大。

充满所有信息的横幅广告不会给您带来任何好处，因为用户甚至不会看它。 只提供最重要的信息。