-
让品牌有温度、有情感
专注品牌策划15年
banner图怎么设计
发布时间：2023-04-04 17:44:21
稿源：
创意岭 阅读：
79
大家好！今天让创意岭的小编来大家介绍下关于banner图怎么设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、怎么制作banner
步骤/方法
1 首先打开软件，我们看到界面如下，左边部分是选项部分，可以切换到各种设置。
2 我们选择“尺寸&声音”选项，进行相关的设置。长宽根据自己的需求进行设置，如果想插入背景音乐的话自己设置就可以了。
3 选择“背景&设置”，我们设置一下背景为渐变色，如果需要插入图片或者其他flash元素的自己设置就行了。
4 选择“选择&设置”，进行flash背景效果的选择，这里我选择了一个飘动的蒲公英。
5 选择“文字&图像”选项，我们编辑banner上显示的文字等元素。首先我选择第一个网址，然后更改成百度经验的网址。
字体和文字的颜色可以点击下面的“编辑字体风格”进行编辑。
然后，我们改写第二行文字，把它改成“百度经验”我使用的是百度综艺体，字体和颜色设置好以后就切换到“选择&效果”选项卡，我们选择喜欢的文字效果。
切换到“位置”选项卡，我们可以调整文字在banner中的位置
分别切换到“网络链接”和“定时”选项卡，进行相关的设置
6 文本中选择第三行文字，改写成“为经验献计献策”然后设置好效果。这里我选择了一个行星闪动的效果。其他项目设置可以参照上面的讲解。
7 选择“网站&链接”选项，进行相关设置
8 选择“发布&构建”选项，点击“发布”按键输出自己设计好的flash banner。
9 弹出输出格式选择对话框，我们选择swf格式，点击“确定”
10 弹出“保存”对话框，我把这个banner命名为1，保存。
11 保存完毕以后，主界面显示红色提示语，告诉我们怎么正确使用这个banner。好了整个flash banner的制作就算是完成了。
12 为了给大家展示一下这个banner，我又另存了一份gif格式的，因为这个软件也是支持发布为gif格式的，我们来看一下效果，还是很不错的。
END
二、盘点banner设计组成要素/类型/风格/设计步骤大全
banner对于一个设计师来说，肯定不是一个陌生的词语啦，在目前的各个行业领域中基本都涉及到banner的需求，不管是web端还是移动端我们处处都能看到banner的影子，所以掌握banner的设计是我们每一个设计师必备的技能啦！
banner（及横幅广告）是网络广告最早采用的形式，也是目前最常见的形式。横幅广告又称旗帜广告，它是横跨于网页上的矩形公告牌，当用户点击这些横幅的时候，通常可以链接到广告主的网页。是表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式！
下面我们会从这几个方面讲解banner：
一： banner的组成要素
二： banner的类型
三：banner的风格选择
四： banner的设计步骤
一:banner的组成要素
banner的主要组成要素我这里简单的总结了几点：
以及banner主要的元素是：文案+元素+背景
元素又可以细分为：元素=商品+模特+logo+点缀（这里的元素是需要根据banner的实际情况选择要素，可有可无）
如图:
（来源于花瓣）
二:banner的类型
banner的类型我这里总结的主要分为：
01：产品宣传类banner（新产品、热销产品）
02：活动类banner（节日活动促销、产品促销）
这里简单的将banner分为了两种类型，因为对于不一样的banner需要实现的效果和目的是不一样的，所以我们需要设计出不一样的风格的banner
对于产品宣传的banner我们最主要的就是要突出产品的特征，所以我们对于banner的设计，需要的最主要的元素就一定是产品，以及简短的文案介绍，至于点缀的元素我们也可以根据实际产品的特征选择合适的元素，也可以不用元素的点缀，背景肯定也是必不可少的！
01：产品宣传类banner：
产品+文案+背景
例如：
（来源于花瓣）
上面的案例都是对于产品宣传类的banner的设计样式，他们有一个共同的特征就是产品放大放大再放大，尽显产品的特点，简洁的文案介绍和大量的留白更加凸显产品的特征，使用户的目光不由自主的被产品本身所吸引
产品宣传banner：
产品+文案+元素+背景
例如：
（来源于花瓣）
这类banner的特点就是除了产品本身外，都添加了一些其它的元素作为banner的一个点缀效果，使画面显得更加饱和，或使画面带有动感的效果！
那么问题来了
什么情况下产品banner设计添加元素好？什么情况下不添加元素好呢？
第一：对于需要极度显示产品的特征的时候我们最好选择不添加元素干扰产品，
第二：对于简约产品，我们最好也不要添加元素做装饰，大量的留白更加适合简约产品的风格，
02： 活动类banner
产品+文案+元素+背景
例如：
（来源于花瓣）
对于活动类的banner设计我们大多数都会选择颜色鲜艳多彩的，并且画面饱和具有冲击力的，营造出一种热闹的氛围，对于元素的添加也是必不可少的一点，因为对于活动类的banner设计，画面越热闹活动力度就会显得越大，才会更加吸引用户，对于活动的标题也要尽量的凸显！
二:banner的风格选择
对于banner的风格也是多种多样的，但是对于不同性质的banner选择的风格肯定也是不一样的，不同的banner搭配不同的风格给人的视觉效果是完全不一样的，合适的搭配才能使banner更好的表现其特征和目的
例如：
01：简约产品家居banner的宣传banner，就比较适合简约大气干净的风格
（来源于花瓣）
02： 高端科技产品banner，就选择具有科技感气质的风格
（通过科技感的图形和颜色等来体现）
（来源于花瓣）
03： 时尚服饰类的banner，就适合选择时尚画面的风格
（通过独特的造型和风格图形以及色彩等来体现）
（来源于花瓣）
04： 高端奢侈品牌类banner，就适合高端大气的风格搭配
（通过高档色彩黑红配，黑金配等来体现）
（来源于花瓣）
05:少女\儿童可爱风banner，就适合可爱风元素搭配的选择
（通过可爱元素：插画、线条、气球、爱心、 圆润的字体、活力的色彩等来体现）
（来源于花瓣）
06： 国风/文化/节日类banner，就比较适合选择带有文化气质的元素搭配
（通过中国风毛笔字、中国古有的元素： 印章，中国山水画，墨迹，扇面，剪纸，园林窗格，古纹样，祥云，京剧，卷轴等等）
（来源于花瓣）
二:banner的设计步骤
01：了解和确定banner的设计需求
02：明确banner设计的目的
03：根据得到的banner设计需求确定banner的设计风格
04：选择合适的banner设计版式结构
05：选择匹配的元素装饰banner的整体效果（根据实际需求添加）
06：色彩搭配选择
01： 了解和确定banner的设计需求
对于这了解设计需求一点来说，不管是做什么设计的前提都是必不可少的一步，也是最关键的一步，如果你连设计的需求都不明确那么做出来的设计结果肯定就不会符合实际的需求
那么对于banner的设计需求我们具体需要明确那一些呢？
第一点：确定banner设计文案
文案对于设计师来说也是一个很重要的点，设计师可以根据文案信息从中找到设计灵感，并且也可以知道大致的设计风格的走向
第一点：确定banner设计尺寸和投放平台
文案确定后我们还需要知道banner的投放平台和位置，尺寸大小，以及是否需要适配各个平台的展示，
02： 明确banner设计的目的
对于设计一张banner，肯定是想要达到某一种目的才会设计这一张banner，所以在设计banner之前一定要了解清楚这一张banner设计的目的是什么，例如：是想要宣传产品还是想要促销产品，两者的性质是完全不一样的，
03： 根据得到的banner设计需求确定banner的设计风格
banner的设计风格我们可以从banner文案需求中找到关键词进行定位，比如： 全语音智能操作的车载支架A5
从这一句主题文案中我们能够提出的关键词就有： 全语言、智能
对于这样的关键词的理解我们肯定第一就会想到科技感智能化时代的画面，所以这里的风格我们也就有所选择啦！
04： 选择合适的banner设计版式结构
banner的设计版式结构我们可以大致分为：
居中结构、左对齐结构、右对齐结构
不同需求banner的结构就需要根据实际情况选择啦！
05： 选择匹配的元素装饰banner的整体效果（根据实际需求添加）
对于banner的装饰元素我们也是需要根据实际情况和产品banner的特征采取合适的选择，比如简约产品的banner就不需要装饰元素更好，而活动类banner或少女儿童等可爱类的banner设计就需要选择装饰元素更加适合，并且不同形状banner的装饰元素选择也是不同的（前面做了简单的介绍，这里就不再重复啦）
06： 色彩搭配选择
色彩的选择也是很关键的，不同性质的banner选择的颜色搭配也是不一样的，适当的颜色搭配会使产品更加凸显或者使画面更加显眼突出，并且给人的感觉也是不同的，
例如：
* 黑金配和黑红配就会给人一种高级感
* 蓝，黑色，紫等冷色搭配，画面给人硬朗，空间感，速度和力量的感觉更加适合科技感
* 红、橙、黄、紫搭配，就会营造出一种热烈的氛围，更加适合时尚和活动类
* 黑、白、灰的搭配就会给人一种高冷不宜接近的感觉，更加适合大牌的风格选择
* 白、灰的搭配会给人一种宁静、文艺、气质、素雅的感觉，更加适合简约产品的选择
实操案例：
文案需求：
全语音智能操作的车载支架A5
挥手听话的语音支架
使用讯飞AIUI人机交互解决方案，智能驾乘张口即来
设计尺寸：1920x650px
设计的目的：根据需求我们得到的banner设计的目的是宣传新产品车载支架A5
第一步：我们将文案信息以及提供的产品放入画布中
第二步：明确我们的主标题 “全语音智能操作的车载支架A5”
所以我们将主标题放大处理，凸显主标题
第三步：选择banner的风格，因为这里我们需要体现的是产品的智能化，所以我们的风格就可以定义为科技感的
第四步：选择版式结构，我们这里就选择简单的左右结构吧！
第五步：选择装饰元素，装饰元素也要根据科技感的效果选择，以及可以从文案中提取，例如这里我们可以提取：科技感线条和图形、语音图形等
第六步：整体位置调整和色彩搭配，对于文字大标题我们也处理成不一样的具有层次结构的，使其更加凸显，小标题文案也根据整体风格画面做微小的处理，使文案和画面更加和谐统一，包括产品周围由于受到光的影响，也需要做处理
最终我们就得到上面的banner效果啦！😂一个简单的科技感banner就设计完成啦！
好啦！今天的知识有点多，也有点全面！希望你们喜欢吧！🙃
往期好文推荐
—
版式设计——简单7种图片排版方式
10张创意线条图形海报设计
2招教你配色技巧，摆脱配色困难症！
【创新】海报设计思路
三、banner设计：高手教你如何设计banner?
当然，这里的banner总文字的变形没有很多，更多展示的是不同文字的不同排版。一段文字应该怎么排版，怎么突出文案，不需要怎么变形也能做得很好！
根据文章的重点：
一 ：思考专题定位。
定位很重要，惯窃整个页面的内容。从之前看的对文字的性别、种类各种文章，对定位以及有初步的了解。接下来就是在实践中尝试和进步！
二：明白文字在Banner中占主导地位。
文字一直是重点，比较保守的做法，就是文字+背景。可文字还得区分主标题和副标题，所以文字上的排版怎么去突出，是重中之重！
三：构建辅助视觉。
这里实用性很大，有三种排版方式：
1 文字+背景陪衬。这个看似很好做，却也一直做不好。
2 文字+主体物。第1是最好做的，第二很容易做糊了整个界面。多做多尝试！
3 主体物+背景+文字。这是经常采用的方法，但经常还是做不好。
四：创造力对主题的艺术化表现。
喜欢这里第三张图，真的很好。虽然右边的人群头部抠得不是很好，但这张的意念和创意都非常棒。
banner是小小的图片，却是很讲功力的。多尝试才能多进步啊！
四、网店Banner设计与制作方法是怎样的？
好的Banner设计，虽然都是由图片加文字组成，但也绝不是“1＋1＝2”那么简单地叠加。如同一首乐曲，可以是古典交响乐，可以是流行电子乐，亦或民间小调，形式多样，手法不一。有时候需要像作诗般字斟句酌，有时候也会有妙手偶得的惊喜。受制于互联网视觉设计的特点，往往需要通过设计师的经验思考，在较短的时间内制作出能够通情达意的作品。下面为一运用Photoshop软件进行的网店Banner设计与制作方法举例。
（1）运行Photoshop软件，执行“Ctrl”＋“N”命令创建一个新文件，设置新图像文件的大小为宽度1920像素，高度为260像素（高度要根据具体情况来定），图像分辨率为72像素／英寸，颜色模式为RGB模式，背景色为白色。（2）搜索Banner设计的背景图片，注意背景图像的宽度必须大于或等于1920像素，选择好背景图像后，在Photoshop中打开图像文件。（3）将选择好的背景图像，应用软件的移动工具拖进第一步创建的Banner图像文件中，并运用移动工具进行位置的调整，把需要的部分图像放置在合适的位置。（4）在Photoshop软件的图层面板，设置背景图像所在的图层不透明度为40%，以降低图像的不透明度，使背景图像与白色的背景图层融合。（5）把事先拍摄好的、事先计划好要重点推荐与推销的商品图像在软件中打开，运用Photoshop软件中的魔术棒选择工具，先在图像的白色区域进行选择，然后执行“Ctrl”＋“Shift”＋“I”反选命令把无线路由器产品图像选中。（6）运用软件的移动工具分别把上一步选择完成的无线路由器侧面图与无线路由器背面图拖移到Banner文件中，执行“Ctrl”＋“T”命令对无线路由器图像进行大小与位置调整。（7）接下来运用文本工具添加文本，选择字体为“方正兰亭特黑”，字体大小为72点，设置字体为“斜体”，字体颜色为“蓝色”，RGB数值为（6、68、182），字体显示模式为“犀利”，输入“数码惠聚”几个字。(8)执行“Ctrl”＋“T”自由变换命令，对“数码惠聚”文字进行旋转调整，转动一定的角度。(9)继续运用文本工具输入文字，选择字体为“方正兰亭特黑”，字体大小为24点，设置字体为“斜体”，字体颜色为“蓝色”，RGB数值为（53、98、4），字体显示模式为“犀利”，输入促销文字，然后执行“Ctrl”＋“T”命令对文字的角度与位置进行调整。(10)运用上一步的方法与技巧，继续输入文本，除“1212”四个字的大小为30点，颜色为RGB（192、6、6）以外，其他文字属性与上一步相同，然后一样进行位置与角度调整。(11)继续运用文本工具输入文字，选择字体为“方正兰亭特黑”，字体大小为24点，设置字体为“斜体”，字体颜色为“蓝色”，RGB数值为（6、68、182），字体显示模式为“犀利”，输入如下图所示的促销文字，然后执行“Ctrl”＋“T”命令对文字的角度与位置进行调整。(12)运用软件的多边形选择工具，在工具属性栏中设置羽化值为0。(13)在图层面板新建一个图层，并且用RGB数值为（6、68、182）的蓝色对三角形选区进行填充颜色。并对这个图层进行图层样式设置，图层样式为“斜面与浮雕”中的“内斜面”，方式为“雕刻清晰”。(14)设置好图层样式后，执行“Ctrl”＋“D”取消选择命令。(15)把上面创建的三角形样式所在的图层进行4个复制，分别放置在如图所示的位置，同时运用“Ctrl”＋“T”命令适当调整三角形样式图像的角度、大小、位置与不透明度，完成Banner设计。
以上就是关于banner图怎么设计相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
