banner图设计（BANNER图设计表现手法有哪些比较好）

本文目录

• BANNER图设计表现手法有哪些比较好
• banner设计有哪些细节需要注意
• 怎样设计出好看的banner
• 关于banner设计
• 优雅banner图设计有什么技巧

BANNER图设计表现手法有哪些比较好

当下的banner图大概有两大类，一类高饱和高亮度的卡通矢量风格，另一类比较品质感的路线，没复杂的合成，没灵活的字体设计，却用有非常舒服的视觉效果。对比现在大部分综合电商的争芬斗艳风格，我个人更喜欢后者这种“简单”的banner类型。今天总结出7大banner基本手法，希望和小伙伴们一起设计更得心应手。
一、杂志风格
商品/人物放在非常显眼的位置，背景是非常平面的纯色，文案“形乱神不乱”地灵活围绕在主角周围，因为是杂志风格，所以和杂志一样有经久不衰的时尚感。
更多平面UI设计知识，请咨询华南电脑学校。
二、文案做主角
一半以上的篇幅放置巨大的文案，商品和配图围绕摆放，特别适合平台电商商品品类很多的的活动广告。这时文案的排版就非常重要了，通过文字粗细，大小来排成一个图形。迎合市场都觉得用点英文瞬间高大上起来的癖好，中英结合呗，再加点阿拉伯数字，就VERY GOOD了。
三、文案和图片有明显的分区
虽然有点死板，可人家成熟稳重呢！文案更加清晰显眼，适合商品图形象图整张展示更好看的时候，当然你如果没时间抠图的话……或者抠图技术太差，抠出来很多锯齿瞬间拉低品牌档次的时候，就用这种排版手法吧。这类也分两种形式，明显的分区和羽化色块分区。
四、我又来说几何边框了，说多了不好意思了
的确用上就高大上起来了嘛，和网页排版一样，banner图也很爱用，框起来就是焦点，无论文案/商品，另一类是在大图上加个透明的几何图形，让文案更加清晰。说了很多次，几何图形是永恒的装饰品哦。
五、文案融合进摄影大图
摄影图一用立刻就高大上了…不用设计不用排版就已经吸引眼球了，当然是说好看的大图。这种手法文字要看清楚就需要很注意了，以及大图的选用也要非常认真，还要加上色调调整，意境要靠色调和明暗调出来，靠感觉和经验了。当然，最简单是选用比较干净不杂乱的底图。
六、构造故事性的场景
我一直很欣赏这种电商banner图，设计师的脑袋儿灵气棒棒哒！特别是专题页就很有必要这样做，故事性的场景图，除了有效牵动顾客情感，还让品牌在顾客脑袋瓜里深深扎根了，品牌和销售就哗啦啦地上升啦！不过这种风格需要手绘能力较强的设计师才能完美表达。
七、色块背景上文案&商品左右摆放
很容易产生单调的感觉，所以背景添加图案图形，渐变色，商品阴影等，再为商品加点相关的小配物，让画面充实起来吧。

banner设计有哪些细节需要注意

banner设计需要注意的细节如下：
一、banner图的风格
网站banner图风格不止一种，banner图的风格一定要根据网站的风格来设计，如果网站是清新风格，你的banner图一定不要设置为复古风格，这样会让用户阅读起来感觉很不舒服。
清新风：就是清爽、唯美，轻盈色调跟自然系，让人感觉十分的清丽和透亮。
复古风：是传统元素和复古图案。
简约风：是极简主义、大空间，banner没有任何过多的装饰元素 ，整体感觉就是非常的透气。
二、banner图的排版
在banner布局上调整位置、大小，让布局看起来更加舒服，更加漂亮。
一）设计banner图要记住这几点：
1、不要让banner图密密麻麻，要留出一定的空间，这样会使用户减少许多压迫感，又可以突出重点。
2、颜色、字体、图片不要过多，设计banner图时要注意整个网站的连贯性，不要出现不同的元素和风格。
3、加大不同元素的视觉差异、相关的内容要对齐，这样方便用户视线快速移动，又突出了视觉重点，方便用户一眼浏览到重要的信息。
结束
配色的话，要看你网站是什么颜色，尽量符合网站的颜色，因为不同的配色会带给人完全不同的心里感受，如果把一个网站弄成五颜六色，阅读起来就会觉得特别晕眩眼花等，这你就要考虑符合网站的色调了，尽量一致网站的色调，这样的banner图看起来都会觉得特别舒服，其实设计一张banner图也是seo优化技术里面的一部分，因为图片让用户看起来很舒服，你网站的跳出率就会降低，如果图片搭配的特别压抑，用户会瞬间关闭你的网站，这样你的跳出率就会提高、用户体验感不行、网站排名也会随着下降。

怎样设计出好看的banner

banner设计好看的方法如下：
1、首先应该了解banner图的尺寸大小是多少，banner图的主题风格，因为这涉及到banner图制作的主视觉效果，这之中包括其结构以及颜色；
2、确定好主题风格之后，接下来就要进行素材的收集，其中包括背景图案、元素收集、文案制定等工作；
3、确定banner图的整体布局，其中包括主要元素布局的结构、文字的大小、每个小元素的占比、位置的确认等；
4、元素。大部分时候，收集上来的元素是无法直接使用的，这个时候需要对元素进行，包括图片元素的抠图；
5、对元素进行组合以及特效的，这其中包括颜色的渐变，以及对图层混合选项的操作等步骤；
6、根据banner图的用途保存成相应的格式，在网络环境下进行展示，一般都会选择保存成jpg格式的图片，但是同时建议保存一份源文件，方便以后进行修改。

关于banner设计

一个完整的banner包括了五个组成部分：文案、模特商品、背景、点缀元素、logo
点缀元素
1.点缀元素的作用：
（1）从视觉上来说，丰富了画面，使画面不再单调或看起来更加协调
（2）从营销上来说，渲染了氛围，给人愉悦或刺激感，增加用户的点击

2.点缀元素的存在形式
（1）商品本身既是主体也是点缀元素
（2）手绘图形作为点缀元素
（3）光斑作为点缀元素
（4）色块作为点缀元素
（5）各种液体、粉末作为点缀元素（如喷溅的墨水、奶、水、啤酒等）
  (6)  烟雾作为点缀元素
（7）各种纹理图案作为点缀元素
（8）人作为点缀元素
（9）logo或文字作为点缀元素
3.点缀元素的获取方法
（1）元素提取法
本身产品和素材相互呼应，或者跟产品材质相关的元素作为点缀元素
（2）联想发散法
从标题的字面含义或者深层含义去联想，从风格统一性去联想，从意境方面去联想，可爱的banner常常运用手绘简笔画等点缀元素
4.点缀元素的注意事项

点缀元素的数量要适中
图1相当于是一张没有点缀元素或者点缀元素跟背景相似的banner。图2相当于是加了跟主体相近或相关联的适量的点缀元素，对比发现，图1比较单调，图2更加饱满。
同量同色的点缀元素利用不同的处理手法带来的视觉感受是不一样的
图2/图3/图4的点缀元素数量是一样的，但是在对点缀元素运用了高斯模糊或者动感模糊等处理手法后，画面开始变得有空间层次感，也更加灵动了。
一些关于banner的文章
1.http://www.woshipm.com/ucd/623878.html   6招搞定点缀元素的运用

优雅banner图设计有什么技巧

一、双色冰淇淋渐变
首图当作全屏出血大图处理时，你可以将图片调色成为双色渐变，有点像我们吃的双色冰淇淋球，选一组你认为能激发心理氛围的配色，最好是对比色，带来强烈的视觉落差。由于要作为背景而存在，整体的色彩明度要区别于文字的颜色。这里推荐的这一方式只需要利用PS中的“渐变映射”工具，就能轻松获得。
二、线条引流
这也不失为一种设计方式。让线条来引导实现去穿越你想要焦点停留的地方。
三、动态情景
对于首图的选择，你可以焦距到动态场景。这类动态场景由于本身模特的动态造型，会调动观众的运动神经，激发页面的活力。大家可以想象，如果将首图的主角换成一个静物，效果将是不同的。这里将模特的方向加以改变后重新降低透明度的做法，带来一定的虚实结合的感受。
四、谨慎配色
我们希望大家在运用首图时，尽量不要去触屏普通的风景图。自然风光虽然好，但大片风景会表现出一团饱和的颜色堆叠，其实运用在网页设计中略显得没有重点。因为你要为最终配图运用以后所出现的颜色负责，色彩尽量控制在三种颜色之内，这条道理相信设计师们都会赞同，因此，这里的配图的色彩最好也能有所节制。
五、虚拟现实
当然，我们这里谈的不是虚拟现实，而是在首图设计时，试着将静物表现得更为“现实”，好像它们就在你的屏幕上，随手可以取到。但这个表达法，最紧要的是要为虚拟寻找出口，也就是说，不能完全写实，要让用户看出虚拟的破绽，从而让形象更为立体。这类表达技巧在首图中有手机，利用APP产品展示等最为常见。
六、文字本身的美
每张首图也许我们都希望能配上文字，其实文字本身也能成为一种风景，有时候适当运用一些具有图像风格的文字，更能传递文字本身的能量。
如果能将文字看作图像，书法文字是最合适不过了。书法本身的随意潇洒，和普通的印刷字体相比有着不可比拟的个性感。这里，运用了书法作为主角，本身书法作为传统国粹，在东方传统的行业里运用非常应景。当然，这里的书法本身还可以写得更好。
七、静止的力量
对称能带来一种庄重静止的力量，因此，在首图设计中，你不妨采用对称的布局方式来设计首图。但由于对称本身略显得静止呆板，因此在设计上更需要多一些匠心，增加一些比较能突破规则小细节。
对称的布局最好采用倒三角的构图，这样视线会更灵活，从上往下会显得更流畅，否则就会有一种滞涩不前的感受。
八、左图右文
首图的设计除了全屏展示，还有一种方式是可以放左边图片右边文字的方式，这样的网页设计技巧带来的好处就是可以分割图文，特别在图片信息也同样重要的时候，如果把图文混合，双方都不够凸显，不如左右各凸出主角，跟随先左后右的视线也能传递本身的视觉效果。