5分钟内设计师响应
十年专注设计领域
费用最多可节约50%
相关“情人节banner”178 张图片
相关素材精精精精精5060708090100每页显示已成功添加收藏红动创办于2005年，老品牌值得信赖
在线客服 :
客服热线 :网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
七夕情人节banner广告设计欣赏2
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章： 没有了
网友评论：还没有任何记录...
怎么设计出漂亮的有创意的网页Banner？
作者： 番茄果果
点的聚合、线的流动、面的分割、有机形的柔和与美、偶然形的独特魅力、预留大面积的Banner空间创作、有效的措辞与行为导向按钮
　　当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得到什么有用的信息，因此网页Banner设计在这里起到了至关重要的展示作用，特别是对于首页Banner，有效的信息传达让用户和文字之间的互动变得生动而有趣，下面就让我们通过大量优秀的设计案例走进Banner设计，走进设计师们的灵感挥洒空间。
一.Banner的构成与设计形态分解
　　自然界的万物形态构成都离不开点、线、面。它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同Banner的情感诉求。
a.点的聚合
　　点的排列所引起的视觉流动，引入了时间的因素,利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画面。点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。点的密集排列构成面，同样，点的距离越近，面的特性就越显著。
无数图形的点聚合在一起，增强画面的韵律感
b.线的流动
线分为四类：直线、曲线、折线以及三者的混合。直线又有水平线、垂直线、斜线三种形式。其中，水平线给人平静、开阔、安逸的感受；垂直线给人崇高、挺拔、严肃的感受；曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或摆动。&
http://www..cn/3Ddrive/&&
&严谨的线条，使页面稳重富有理性&
c.面的分割
　　面在设计中的概念，可以理解为点的放大，点的密集或线的重复。Banner元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一&
清晰突出的图片所产生的第一视觉点
http://www.cult-f.net/
色块与线条间不同比例的分隔画面，使页面具有形式美感
&二.Banner设计的形式美法则
　　在banner设计中采用特殊的形式结构，会使网页变得个性十足并很好的区别于同类产品，让人记忆深刻。
a.有机形的柔和与美
　　有机形是由一定数量的曲线组合而成，是自然物外力与内力相抗衡而形成的形态。有机形富有内在的张力，给人以纯朴、温暖而富有生命力的感觉。&
曲线与个性化的插图形成强烈的对比。
http://www.wildaboutgardening.org/
b.偶然形的独特魅力
　　偶然形是力的作用下随机形成的图形，它具有天然成趣的效果，利用偶然因素提炼美的方法，让Banner设计更加与众不同。
偶然形使页面产生趣味性
三.有效的设计创意方法
a.预留大面积的Banner空间创作
　　Banner设计占用很大的空间，且占用的空间是重要而有价值的面积，那么你需要万分小心的去处理，但是如果处理的好的话，它将会事倍功半，而且信息传达非常有效。
b.有效的措辞与行为导向按钮
　　在banner设计中通过真实产品的展示，并配以鼓动人心的措辞口号及醒目的可以直接诱导用户点击的行为导向按钮，让网页获得更多的用户点击和关注目光。
c.插图及清新手绘让页面倍感亲切
http://srburns.es/
http://www.hdlive09.co.uk/
d.引入肢体语言让画面变得生动&
http://www.kompakt.cz/
e.丰富的产品展示组合效果
　　用堆积这种效布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服力，丰富而富有层次感。
/journal/articles/dynamic-columns/
f.特殊肌理的组合
　　适当的运用肌理以及拼贴效果，让画面变得有质感且意味深长，是让Banner与众不同的好办法之一。
http://www.foxie.ru/
g.让资讯循环动起来
　　使用滑动效果来将更多信息填进到Banner区域。这对于有很多特性和丰富产品线的网站很有用，通过一些很有用的库及其插件，让这类效果更加活灵活现。
http://glue.be/en/
本文链接：/design/shejibanner.html
怎么设计出漂亮的有创意的网页Banner？由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
(责任编辑：懒人建站)
怎么设计出漂亮的有创意的网页Banner？-相关文章
来自百度的搜索推荐
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）六个步骤细说电商banner图设计之色彩的奥秘 -TB前卫网TB前卫网店铺大全为您精选最好的精品店铺导航，欢迎您。上一篇：当前位置：>>写在前面 咱们往往会说到做设计需要了解三大形成（颜色形成／平面形成／立体形成），设计又可以分许多个种别，譬如网页设计／UI设计／电商设计／室内设计／工业设计等等，那至于电商设计有无专门的三大形成呢？至今好像没有看到，所以我想尝试着梳理一下我脑袋里的知识点，专门讲授一下三大形成在电商设计中的应用，而今天我先从颜色在电商设计中的应用开始说起。内容对比多，所以我先给大家列一个大纲：一、先知道普遍意义上的颜色是指啥？二、再回顾一下banner的组成要素有哪些？三、banner的作用作用是啥？四、在Banner设计中影响到信息转达的有哪些因素呢？五、颜色在banner设计中所起到的作用六、如何在Banner设计中使用颜色列完大纲后，接下来咱们进入正题，一个一个知识点去剖析：一、先知道普遍意义上的颜色是指啥？（我讲这些理论的时候大家别睡着了，答应我，由于后面会愈来愈精彩????～～）简单点来讲，颜色即色彩，色彩可以分成有彩色以及五彩色两大类，看有彩色主要看色相／纯度／明度三个方面的属性，无彩色也就是白色／黑色／各种深浅不同的灰色，也能够说无彩色是饱以及度为零颜色。色相，便可以明确表示色彩色别的名称，譬如红橙黄绿蓝靛紫：颜色有冷暖之分，我大致用温度的概念标注一下，其中“0”是指中性色，“－0”是指中性偏冷，“＋0”是指中性偏暖（这里的温度是我自我为了具体化冷暖的概念而标记的，主要是利便大家理解，所以不用去纠结这个数值准不许确哈哈，你明白他们代表很冷／很热／一般冷／一般热就行了！～）明度，就是指颜色的明亮程度（通俗点讲，在某种颜色里添加的白色越多就越明亮，添加的黑色越多就越暗）。纯度（饱以及度），就是指颜色的纯净度，以红色举例：如果大家想看更为原理理性的关于颜色的解说，可以自行去baidu或者google哟，在这篇文章里大家只需要知道上面几个知识点就好啦。 接下来我掐指一算????，要想做好电商设计，最基础学问最大确当属Banner设计了，所以咱们仍是从Banner设计开始说起，先回顾一下banner是由哪些部份组成的。二、再回顾一下banner的组成要素有哪些？Banner组成要素包括4个方面：案牍 、商品／模特、背景、装点物三、banner的作用作用是啥？宣扬／展现／广而告之／准确转达信息四、那末在Banner设计中影响到信息转达的有哪些因素呢？1／总体画面的气质是不是对路2／信息之间的层级关联是不是准确3／是不是考量了Banner所投放的环境接下来，咱们针对上面3个因素一个一个来说解：1／总体的画面气质是不是对路这里指的画面气质就是指给人传递出一种啥样的感觉，譬如说用户看了你这个banner以后会感觉它很热烈／很素雅／很高冷／很年青有活气／很潮／很压制／很恐怖／很高贵等等这些感觉，那末下面我举几个例子：Banner举例：很热烈的画面气质（症结词：低价促销／周年庆／节假日促销等弄流动的性质）&大家可能注意到上面两个Banner看起来特别热烈喜庆，是对比常规的热烈促销Banner，除各种元素情势的动力感给画面增添了热烈感觉意外，最首要的事大面积的暖色给人热血沸腾的感觉。咱们举个例子，将这些Banner扭转色相，得到下面2张图：总结察看：画面由暖色变成冷色后，会发现热烈的画面气质锐减，所以在表现热烈气质的Banner设计中，除画面情势对比活泼或动感之外，咱们也常借助大面积的暖色（红／橙及左近区域）来渲染热烈氛围，让人感觉喜庆或热血沸腾，然后节制不住就买买买～Banner 举例：很素雅&（症结词：森女系／棉麻类／文艺类／性冷漠风）除大面积留白给人素雅的感觉外，画面里的色彩都是是对比安静干净的灰色调，给人舒适素雅无欲无求的感觉，令人感到舒心：假设我给它调剂饱以及度，使之更为鲜艳：察看总结：大家感觉有啥变化没？是否感觉变年青活气了？不是那末沉稳以及素雅了？恍如一个祥和的35岁女人立马变为了20岁小姑娘～下面是几种常见的素雅的／森女系／文艺范色调举例：Banner举例：很高冷&（症结词：新品发布／国际大牌和一切渴想表现自我性冷漠以及竭力想要装B高冷一回的画面。。。）画面中除了去大面积留白之外，颜色上也是对比倾向于灰色调，且基本不会呈现饱以及度特别高或特别跳跃的色彩，浅灰色调同色系用色占多数。大家可以提取色彩看下： Banner举例： 年青活气（症结词：夏季主题／开学主题／校园主题／针对风潮小年青的促销流动等等）颜色丰厚多样，饱以及度偏高，用色勇敢，在这里，咱们就不怕您用色超过3个色，只要你敢用想用，多少色均可以（迷之微笑～）。大家可以提取色彩看下，其中天蓝色是主色调，用大面积的冷色加之少许的暗色调作装点，同时维持各个元素摆放方向有秩序不杂乱，才能兼容得下这么多种色彩而使得全部画面看起来不腻歪：Banner举例：很潮&（症结词：潮牌主题／动漫主题／街头hip-hop主题／年青爱玩／放荡不羁爱自由主题等等）在这类类型气质的Banner设计中，除了去一些小图形设计使画面看起来对比有设计感之外，很首要的一点就是善用大面积的明亮高纯度颜色搭配黑色使用，之所以这样的目的我料想是由于这类潮牌针对的是对比年青但又寻求一点特立独行或耍酷感觉的一个群体，如果全是一些明亮颜色会给人感觉对比幼稚以及低龄化，加点黑色后就立马打破了这类印象，恍如年青可爱中又带了一点耍酷与放荡不羁爱自由的味道，所谓混搭咯,可以去知道一下街头文化，哈哈哈～ Banner举例：华美&（症结词：上流社会／欧式／虚夸主题／位高权重／颁奖仪式／对比隆重的发布会等）体现华美高贵主要就是黑色与金色／银色等金光闪闪的色彩和与暗色系色彩的搭配（由于暗色系给人感觉沉稳沉着成熟的感觉，同时为了避免那末烦闷，画面中又会带点高光或者金光闪闪的感觉色彩搭配）。 & & & & &大家可以提取色彩看下， 注意事项：这类Banner气质的画面千万不要把画面堆得太满，必定要记得留白以及搭配俊雅纤细些的文字（有衬线或无衬线字体都可），或对比有文化底蕴的毛笔字，千万不要用五大三粗的文字或把画面塞得满满的，为何要注意这个？你们想象一下丰腴肥臀的一些满身穿金戴银的爆发户作风就了解了，自行想象一下画面，我就不配图了（迷之微笑～）2/信息的层级关联 咱们了解一个banner包括有好几个部份，案牍／模特或者商品／背景／装点物，而终究他们组合成为一个banner，其层级是存在主次之分的，可以分为下面几种情况：（一）以产品或者模特为主角（主要凸起产品或者模特）（二）以流动标题为主角（三）以利益点为主角而背景以及装点物永久不多是主角，他们只能是配角，同时在这里色彩不是一个独立的分析要素存在，它应当是伴同着平面的知识点来讲，所以这里我也会顺带一点平面方面的知识点，举几个例子：（一）以产品或者模特为主角（主要凸起产品或者模特& &），咱们有三个方向可以去施展：（1）让商品（模特）的色彩与背景色彩绝对地区别开来，让它成为天空（画面）中最闪亮的一颗星～也就是咱们说的颜色对照，颜色对照又包括三种：明度对照／饱以及度对照／色相对于比，假定下图中的圆就是商品或者模特，举个例子：咱们再去色看一下对照的效果，以下图（去色是咱们经常使用的一种查看信息是不是凸起的策略，令外还有一种距离察看法查看对照效果，譬如你也能够离屏幕站远一点查看，或人维持不动缩小画布查看）：这样看，哪一个对照效果好些？是否一目了然了？无非仍是要说明一点，明度饱以及度里任何一项要素产生扭转，其他要素也是随着扭转的，譬如说你增添了一个色彩的明度，代表你在这个色彩里增添了白色，那末相对于应的这个色彩的纯度饱以及度确定也就降落了，不了解我说这些你们明白了没有？（默默点根烟～惆怅脸～）偶对了，我还要在这里继续插一句嘴：颜色对照不会单独存在，它的应用永久是依附于下面两种方式存在的（增大商品模特面积或增添商品模特数量）：（2）通过留白或大小对照的方式让商品（模特）体积或者面积足够大。（3）通过必定的摆放规律，让商品（模特）数量足够多，由于数量多了总面积自然也就大了嘛～。（二）以流动标题为主角&跟上面的道理相似，可以应用增大标题面积或同时结合颜色对照的方式使标题凸起成为主角：
（三）以利益点为主角&道理同上（有时候咱们做Banner会直接用利益点作为大标题，这类就会使Banner的低价促销的气味会更浓郁些）总结来讲，但咱们讲颜色的时候，其实也是在讲平面形成，当咱们在讲颜色三要素（明度／纯度／色相）的其中一项的时候，其实也象征着在同时斟酌其他要素，由于颜色不会单独存在，颜色要素也不会单独存在（我重复这么多遍，也是操碎了心呢～～）。3/是不是考量了banner所投放的环境当咱们讲到环境的时候，常常会讲到外部环境以及内部环境，也就是站在全局去斟酌问题以及站在自己的角度去斟酌问题，如果你是要在某平台投放 Banner，那末这个平台对你来讲就是大环境，具体到你投放的那一小块banner位置就是小环境。 （1）从平台设计师的角度动身，她确定是但愿你所有的Banner放在这个平台页面里，总体是融会的，不突兀的&，譬如下面的万件好礼免费送以及专属流动这块的小Banner，用不同色相表示不同会场或者主题，然而每个颜色的明度饱以及度是类似的，设计情势也同样都有自我的规范，这就给人总体统一调和的感觉：
（2）那从商家的角度动身，商家固然是但愿 自家的banner图是最凸起的，最亮眼的，最容易被用户发现的，所以设计师需要把自家的图片设计得让人面前一亮，脱颖而出，这个又要回到前面如何应用对照去凸起某个信息的问题了，不清楚的话可以回头看看上面那个关于信息层级的知识点： 譬如，上面这些商品图，我用距离察看法，第一眼就看到了左下角的这个巧克力了，为何呢？由于周围的图片基本是白底或对比明亮的色彩，而只有他使用了深色背景，明暗对照以后，一下子就出来了（你也能够触类旁通去应用，get到了吗？）其实不管是商家／企业仍是个人，都是需要斟酌这类banner投放的外部环境以及内部环境的，除了非你是在平台工作的设计师，许多时候咱们更多的是需要站在个人利益的角度去斟酌问题，咱们需要让自我的图片更容易被人发现。所以咱们会看到，某8design的各种培训广告（我成心隐约了它们，由于不想打广告～），永久都是花花绿绿，争相斗艳，但却不知，当他人都花花绿绿的时候，你不用太花枝招展反而更容易凸起：所以咱们会想到，设计师在发布自我的设计作品到设计论坛或者网站的时候，无妨先去看下周围环境都是怎样样的，再去做自我的展现Banner图，这样有益于使自我的作品得到更多的展示机会，譬如下面这个，一眼就会看到的是那个玫红色的Banner图片，而其他的都只会匆匆带过，由于在这个环境里，玫红色是最凸起的一种色彩（事实证明，除了去dribble这个词对比知名之外，玫红色封面Banner图的浏览数确切也远超其他的作品，你们get到了嘛？）：五、颜色在banner设计中所起到的作用1/装点作用（渲染氛围用）2/凸起主体（梳理信息层级）3/平衡画面（总体视觉调和）4持续作风（触及到作风统一调性的时候）5/塑造画面气质（传递恰当的情绪给用户）就以上五种作用，我在下面会分别举例说明：1／装点作用（渲染氛围用）&当你做了一个冷色调的页面拿给你的主管或者需求人看，他说画面太冷清的时候，而你又懒得改色彩改情势等等，总之你特别懒不想动，那末无妨试下下面这样周围装点些暖色的方式（颜色依附的形状以及大小面积你自我考虑咯～只需要记住装点物是配角，他是烘托气氛用的，永久不要抢了主角的风头，要不然导演不给你这配角支配角色了，怕不怕？）当你明明做了一个自认为特别热烈促销的页面后，你们主管或需求人依然觉得画面太冷清不够热烈而你又不想大改动的时候怎样办？道理同上，Give him or her some color to see see（迷之微笑～）。2／凸起主体（梳理信息层级）&这个通过颜色对照来凸起信息层级的作用其实我在前面的知识点里已讲了哦，翻回到前面去看下吧，我就不继续说一遍了。 3／平衡画面（渐变色使得总体视觉调和） &讲这个知识点的以前，我觉得又有必要插几句嘴了，先要知道一下面几个概念：邻接色相对于比：色相环上相邻的二至三色对照，色相距离大约30度摆布，为弱对照类型相似色对照：色相对于比距离约60度摆布，为较弱对照类型中差色对照：色相对于比距离约90度摆布，为中对照类型对照色对照：色相对于比距离约120度摆布，为强对照类型补色对照：色相对于比距离180度，为极端对照类型咱们有时候会看到一些Banner强调的是总体画面的调和感觉，其实不会重点去凸起强调啥，全部画面给人感觉尤其舒服，那是由于他们常常采取的是相似色对照或临近色对照，亦或是采取类似明度以及饱以及度的不同色相的渐变协调。Banner举例（以下图Banner给人感觉是总体画面特别柔美调和统一，强调统一感觉）：固然，以上也能够结合起来应用（应用渐变色＋对照）&4／持续作风（触及到作风统一调性的时候）&通过颜色来持续作风的作用常常在平台做一些对比大型的流动，触及到多个不同品类不同分会场的时候会应用到，我看到一些店铺电商品牌也渐渐规范化了以后也会用到这类方式以维持品牌统一调性性，也就是维持设计作风一致，颜色的明度纯度接近，只是扭转色相，以不同的色相接替不同的品类或分会场来设计Banner图，以下图所示：5/塑造画面气质（传递恰当的情绪给用户）譬如咱们前面提到的很活气／很可爱／很高贵／很素雅等等，我这里也不继续描写了哦，文章开头都有提到过的。 （华美高贵）（高冷大牌）（很潮）（年青活气）（森女系素雅）（热烈促销）六、如何在Banner设计中使用颜色颜色不会独立存在，他一定是依附于其它形成以及表现情势而存在，譬如平面形成、立体形成等，所以我将从下面几个方面来阐述：（1）当颜色应用在不同的面积&（2）当颜色应用于不同的形状（3）当颜色应用在不同的肌理&（4）当颜色应用于不同的颜色&（5）当颜色应用于不同的主题（6）当颜色应用于不同的环境由于我对比喜爱红色（一个特别热闹的色彩，跟我的内心同样炙热，跟我的头像同样红火），所以我就拿红色来举个栗子吧，其他色彩的应用道理是同样的：（做设计的面条独家头像，咳咳～～）（1）当红色应用在不同的面积，他的视觉感受是很不同样的，当外部背景尺寸不变，红色区域面积越大越让人感觉眼睛发胀，恍如都要跑到你胸（眼）前同样，这就是近大远小的道理咯。（1/2/3红色区域哪一个更吸引你眼球？谁更让你躁动不安？）Banner举例（看红色区域）：（2）当红色应用于不同的形状，个形状让你感觉最不不乱？哪一个形状让你感觉更活跃？哪一个形状让你感觉更流行？（3最不不乱，1最规矩，5最不规则，1-9均可以很流行，主要在于如何去搭配其他元素）Banner举例（看红色区域）：
（3）当他应用于不同的肌理，看下图所示，红色色块叠加肌理后以及没叠加肌理对照有啥不同？红色块叠加不同肌理后又有啥不同？（任何你能想到的物体均可以叠加视作肌理，譬如人／图片／文字／字母／发丝／各种形状／软硬粗拙或者平滑材质等等）（图6是没有叠加任何肌理的红色，显得更为清淡，其他红色块叠加了肌理后使得画面更佳丰厚，给红色增添了更多感情颜色，或者是活泼或者是奇异或者是热烈等等，只要你能想到的均可以去尝试）Banner举例（看红色区域）：（4）当红色应用于不同的颜色&，大家会看到相同面积的红色圆放在不同的颜色上呈现了大小不一或者明暗不一的错觉，由于红色是暖色，所以依据冷暖对照，红色放在冷色或者中性色 （黄色绿色）上可以对比凸起，依据色相对于比，红色属于有彩色，有彩色放在无彩色（黑白灰）上也能够对比凸起，然而红色放在临近色（譬如偏冷的紫色以及偏暖的橙红色）上就显得尤其弱，由于色相太接近了。Banner举例（看红色区域应用在不同色彩的背景上）：（5）当红色应用于不同的环境，前面咱们前面讲了，环境分为外部大环境以及内部环境，有人所站的角度是要保证平台上所有Banner色彩总体看融洽统一，雨露均沾，而有的人所站的角度是要保证自我的Banner图是最凸起最吸引眼球的，前者为了融洽统一&，后者是为了竟争为了凸起自我&（讲到环境其实也就是前面几种情况的综合讲授以及斟酌，即颜色／形状／肌理／面积等的结合使用才形成了所谓的环境），譬如：当红色色块放置在纯度明度相近的不同色相的色块里，它是融洽的融入的总体的：当红色色块放置在临近色色块里，它跟总体环境看起来也是对比融洽统一不突兀的：当一样是红色，然而她的形状／面积大小以及其他的不同样，那末她是会对比凸起的，也就是所谓的特异：当一样面积的色块，只有一块是有彩色红色，其他都为黑白灰无彩色，那末在这个环境里，那末红色块是最凸起的：当一样面积的色块，只有一块是暖色红色，其他都为冷色，那末在这个环境里，那末暖色系的红色块是最凸起的，也就是冷暖对照：Banner举例（看红色区域）：（由于明度纯度接近的缘故，红色Banner在这个环境里还算对比融入的，尽管周围冷色系Banner过量）（调剂了饱以及度以及明度以后，红色Banner在这个环境里变得特别凸起，变成了主角）总结回顾一下上面讲的几点： 一、先知道普遍意义上的颜色是指啥？二、再回顾一下banner的组成要素有哪些？三、banner的作用作用是啥？四、在Banner设计中影响到信息转达的有哪些因素呢？五、颜色在banner设计中所起到的作用六、如何在Banner设计中使用颜色以上我就写到这里了，咱们需要了解颜色是一种情绪的表述，或许要学会触类旁通（譬如上面我只举了红色的例子，其他色彩可以以此类推不管），此外不管是有彩色仍是无彩色它们都不会独立存在，他一定是依附于其它表现情势而存在，譬如与平面形成、立体形成结合应用，下期咱们再继续谈电商Banner图设计之平面形成的奥秘（为了避免再打脸，所以我只能说时间待定，目前没法给出具体时间，想起来我特么还有一个店铺分析没写完????。。。。）------------------这里是面条分割线-----------------本文为TTTing原创，转载须注明下列信息我就想看看，等我写够999篇的时候，会遇见啥。
【公众号】：学ui网
【微信号】：xueuiwang
【微宣言】：学UI网是一个发布高质量设计教程和分享设计经验的UI学习平台！每周的萌芽专访，带来满满的正能量；每日话题讨论，和大家一起解答疑惑；每周六晚上免费的YY公开课（），给大家提供更多学习机会。
下一篇：随意看看推荐文章声明：TB前卫（）所有信息来源于网络，转载的文章、图片、数据等内容版权均属于原网站、原店铺、原作者等拥有，如有意见、反馈或投诉等情况请联系站长:TB前卫汇集精品店、旗舰店网址/店铺信息/商品展示，并不售卖任何商品，展示信息仅供参考，购买商品均在点击链接后到淘宝/天猫商铺成交，故安全可靠。.Copyright & &&/&&珠海博爱心理咨询有限公司旗下All Rights Reserved&&云主机支持：&&|&&|&&|&&|&&|&&|&&|&&&&&Processed in 0.0028 second(s)　 　 　 　 　 　 　
设计师如何设计出优秀大气的Banner广告
本篇帮你解析Banner 中的构成元素，包括版面分割、版面布局、文案排版、配色和细节表现。每个方面都有丰富的案例和实战操作方法，特别实用的电商设计好文，一起来学习吧。
本篇帮你解析Banner 中的构成元素，包括版面分割、版面布局、文案排版、配色和细节表现。每个方面都有丰富的案例和实战操作方法，特别实用的电商设计好文，一起来学习吧。
案例来源于网络。
Banenr 五重奏
1-版面分割
2-版面布局
3-文案排版
5-细节表现
一、版面分割
什么是版式分割
版式分割是指在有限的版面空间里用图形或图片把整个版面分割为2个或者多个部分(列如上下或左右)并分别在左或右配置人物或标题等，把构思与计划以视觉形式表达出来，这样会让你的设计更有创造性。
在设计中的作用
将呆板单独的一个版面分割为多个版面，在视觉上面有了一定的引导性，同时通过各个版面的面积大小也可以明确当前设计的主次，更具有对比性，并且使得画面感性而有活力。
平时看到或用到哪些版面分割形式
以下几种类型的分割都是由一个形状通过面积和位置的变化使分割版面的。
分割形式都是由直线构成、它让设计严肃、理性起来，但有时也显得呆板生硬。
不知道大家有没有注意2015年京东的双11设计就是直线分割形式，让人非常的理性。
下面都是倾斜的分割，倾斜的角度和位置变化都会给视觉不同的感受：
倾斜分割让版面更具速度和动感 在运动/促销/游戏设计中常使用，倾斜的方向不同也会给人有下滑或上升的感受。
由三角形的面积、位置、数量的变化分割成不同版面：
三角形是一个具有稳定性的形状，同时也具有一定的视觉引导。通常会给人时尚的、尖锐的、暴力刺激等感受
由圆形来分割版面，圆形使版面Q版、欢乐：
不同于尖锐三角形的圆形它外形光滑饱满会让人感觉可爱、灵动，让画面更有亲和力。通常在母婴、欢乐这种主题较为常见。
分割在设计中的应用
通过对版面的分割并且采用了倾斜性的分割形式，然版面立刻活跃起来、更加有节奏感。另外通过2快几乎相等的面积的对比色配色更大的加大了画面对视觉的冲击。
上面的设计通过圆的外形来分割页面，文案和画面信息我们能知道这是有关于宝宝的促销设计。圆的外形更容易给人亲和力，使人更容易接纳。它的细节更在于在于圆本身的细节把圆形更生动和具有层次感，而不单单只是一个简单的形状。
不规则的形状分割版面比单纯的几何形状分割更有创造力，它营造的氛围十足。所以大家常常会看到优秀的设计中会出现书本、盒子等。
如果没有了版面分割
通过对图片版面分割的还原，我们不难发现没有版面分割的图片失去了对比、节奏感、氛围这些方面的视觉感受。即使它在标题排版上很优秀，但版面分割能让它表达的更好。
采用三角形的分割形式让版面更具有刺激和对立的感觉，在失去了版面分割之后变成了普通的一个设计，所以这就是版面分割带来的作用和价值。
具象的版面分割
案例中的盘子、黑板让版面产生了分割，只是不像几何那样更加纯粹的分割版面。但是我们也不能忽视它在设计种分割版面的作用。即使设计师但是没有这个考虑，我们也要记住每个元素在画面中都会有它的作用。而不单单只是表面上面的盘子、黑板。
直线分割案列：
倾斜分割：
三角分割：
圆形分割：
版面分割回顾总结
1-版面分割使设计有层次、活跃、节奏感
2-版面分割不单单只是几何形式
3-具象的物体分割版面会更具有趣味性和创造力
优秀的设计案例还有很多这个需要大家平时的采集和观察，更多的思考你会发现更多的空间
下面我们来看下日常设计中的版面布局
二、版面布局
什么是版面布局 ?
将你确定需要放置的文案、人物、产品安排到版面上的某一块区域。另外可视化信息元素在版面布局上调整位置、大小，使版面达到美观的视觉效果。在布局过程中，我们可以遵循的常见原则，正常平衡&亦称&匀称&，多指左右、上下对照形式。
注意，这里我们必须遵循突出重点、平衡谐调的原则
布局我们需要注意哪些事情?
归纳&&将内容分成几个区域，相关内容都聚在一个区域中。之后就按照你布局去寻找符合版面布局的方向、空间，比如人物的姿势、产品的的角度。
留白&&不要把Banenr 排得密密麻麻，留出一定的空间。减少压迫感，毕竟Banenr 图片本身就不大。
平时看到或用到哪些版面布局方式：
设计万千，变化的只是它的色调、品质、纹理、细节、角度等。
左右结构的布局，文字在左或右。它是在Banenr 版面布局中经常出现的，其主要的特点是视觉上面比较清晰容易分辨、清爽直白。
左中右的版面布局相比左右布局来说是丰富了许多、层次感也从2到3，不过左右是文字还是人物和产品要注意的是一定要保证信息的可正常阅读，不要影响信息的传达。
上下结构从案例中大家能看的出来，模特不怎么符合这种版面布局。相对于商品而言就显的合适多了。上下布局通常也是比较少见，因为比较难掌控。
中心布局视乎在今年比较流行，可能是因为它比较容易出效果，也比较容易才受到很多设计师的喜爱。与其它版面布局不同，它以中心开始布局向外扩张。而且大多数这类布局的中心是模特。可能会跟左中右布局混淆，左中右是3个区域都是各自对应的内容，而中心布局则都是以版面中心点居中布局。
日常版面布局
我们可以看出案例采用了左中右的版面布局，而且模特的大小对比很大，人物的局部放大冲击力也很大。这样更容易创造出空间感，而且人物、文字、背景分割之间都有一个前后的关系哦。
大家第一眼容易认为这是左中右布局，其实它跟左中右的布局还是有很大差别的。它的大标题都是中间加模特或者产品，有点像一些logo中图片当字母的手法。会比单独使用文字的效果更好些。
案例欣赏-左右布局：
案例欣赏-左中右布局：
案例欣赏-上下布局：
案例欣赏-中心布局：
版面布局回顾总结
1-常见布局有 左右、左中有、上下和中心
2-不同的布局不用的需求，大家多尝试不是件坏事
3-版面的布局的有不同，合适才是最好的
下面我们来看下日常设计中的文案排版
三、文案排版
文案排版要遵循的规律
我们视觉阅读的习惯是从上至下、从左至右的顺序，除了根据特别板式需要的倾斜、透视等排版方式。大部分情况下还是使用左对齐、居中、对齐排版方式。不管什么排版方式，只要适合你版面走向的就可以尝试。
很多设计师习惯是边加内容尝试找到合适的排版，这样很容易导致一个问题，就是我们需要用大量的时间来调试各种各样的排版方式。这点大家应该深有体会，我们的时间很多时候都花在元素位置的摆放、大小调整、颜色调配上了。
我经常是根据先前思考的版式分割和版面布局来决定排版方式的。
平时看到或用到标题排版方式
以下几种常见的标题文案排版方式：
排版在Banenr 的应用
通过画的线来看，案例用到了右对齐排版，使得画面左边的视觉整齐一致，由于画面右边的内容随意性，所以在文案的大小和长短根据右边视觉配合图像走势，充分的融入版面设计中去。
为了让大家看的更清楚，我把排版还原到未倾斜时。我们可以容易的看成它是居中排版，所以不管是向左上角倾斜还是右上角都是为了让设计更有创造力，但排版的本质不变。
倾斜角度不要超过45&，否则影响视觉效果。
自由型的排版方式会更容易有效果和趣味性，不走平凡路。但是会容易制造出&空&。大家看那几个黄色圆，用来填补制作出来的&空&。所以每一种方式都不是完美的，需要我们设计师去完善它。
案例欣赏-左对齐
案例欣赏-右对齐
案例欣赏-居中对齐
案例欣赏-自由型
文案回顾总结
1-排版方式要符合画面的走向
2-文字倾斜角度不要超过45&，否则影响视觉效果
3-排版方式要充分的融入画面中去
下面我们来看下日常设计中的配色。
在这里只是大概的说下我平时的配色方法和案例解析，大家真的想要学好色彩搭配，建议大家去买本色彩相关的书看。会更加的详细，有些东西不是几个案例几句话就能明白的，更重要的是大家平时工作的尝试。
我常用配色工具：
工具路径：ps&&窗口&&扩展功能&&kuler
ps自带的配色工具，有时候实在想不出怎么用什么色搭配另外一个颜色的时候，可以试试。
当然工具是我纠结和搭配不好另外一个颜色的时候用的，效果还不错哦。主要还是参考优秀的作品配色
常见配色技巧
常用配色技巧&&对比
在12色相环上面，一种色相与其补色左边或右边的色相构成对比色关系。如黄色与蓝色和红色，这样的配色比补色搭配的排斥感要弱一些，显得较为和谐。
其它的色系分类就不细说了，还是建议大家通过书籍了解会更加详细。
看看对比色案例：
我的对比色案例解析：
1. 分割版面，左边的设定蓝色以及相关素材
2. 加入对比色红色以及相关素材，记得要有颜色不同明度和纯度的层次哦
3. 加入文案和人物，也同为对比色素材
4.加上头部顶光提高亮度和相关点缀，左边的是蓝色右边色红色
配色回顾总结
1-色调有明度和纯度的变化更有层次
2-多观察和采用优秀的设计上面的配色
3-大师不是一日练就，要不断学习
下面我们来看下日常设计中的细节
五、细节表现
我们日常在浏览页面时，经常会为一些优秀作品的细节所惊叹。这些细节表现有的看似非常不起眼，但是设计作品之间的差距，有时往往就是这些不起眼的细节决定的。
&细节决定成败&这句名言所有人都听过不论是任何行业，设计工作当中更是不变的真理，需求方的眼睛和感觉总是非常敏锐的，一个页面没有得到需求方的认可，但他们又说不出什么理由，这个时候就是细节问题了。
那么什么是细节呢?
我们平时口中或者他人口中念叨的细节：
细节表现01-字的领域
在前面我们已经讲过了文案的对齐方式，所以在设计当中我们一定要严谨。通过看蓝色条文案另外一行与一行的间距要把握的得当，它们的间距是几乎相等的。要留有呼吸的节奏。这就是我们细节的表现。
标题的颜色与文字统阴影
1.标题黄色与背景粉红色是明显的一个对比色的搭配，只是颜色的纯度稍弱一些。所以在工作中标题颜色的搭配我们不妨尝试用主色调的对比色、互补色、近似色调配试试。
2.阴影让文字更加的立体有层次感了，处理文字在页面设计的时候任何元素都是需要加阴影让它们更加的生动又生命力，即使在小的元素。
细节表现02-层次
页面设计需要有层次感，如果设计中缺乏层次感的时候就会显的单调或无力。层次感有很多，例如模特一大一小、远景近景、色彩的层次等。
中心正面的人物与背面的人物形成了鲜明的层次对比关系，另外飘絮这些也有大有小拉开了层次关系。
模糊的东西总会给人一种很远的感觉，所以案例的背景稍作模糊处理，与标题人物都拉开了很大的层次。
不管是在图形上面的层次和颜色上面的层次都做的很好。红色和蓝色是决定的对比色所以层次明显。
另外要说的就是颜色的冷暖对比，蓝色冷而红色暖，所以颜色对比非常好。
细节表现03-质感
有时候我们会形容一个优秀的设计它很有质感，大家有没有想过这些质感是表现在哪里?质感难道就只是说是杂色么?
通过上面的4个案例来看，无论是文字上面的木纹、像素格叠加还是背景上面图案叠加它们都是质感细节的一种表现手法。如果去掉了这些纹理、图案，那它不就只是一个纯色了么那还谈什么质感呢。顶多是一个渐变。
细节表现04-光影
光影可能很多人都掌握的不熟练，有光的地方就有影。有逆光、环境光这些都让我们的设计更加的自然和真实。正确的理解和使用光影就很重要了。
熟练的运用光影会对我们的页面才更高的效果提升。
注意的是光影的颜色一定要与页面的颜色来选取不然就会很花哨。
细节表现05-留白
关于留白大家都很清楚，做设计千万不要把页面上面都填的满满的否则会一点呼吸空间都没有。
你可以把用元素的大小对比来丰富空间，但是绝不是越多越好。
全部回顾总结
1-什么样的版面分割来搭配什么样的画面布局和排版都需要，大家多在工作中碰撞和尝试，世上没有一个绝对做设计的公式和流程。
2-不管是什么文章和教程都只是温习或提示你，真正的学习是通过书籍和自身的经历来提高自己。
3-内容我们一时无法消化和运用，但是可以多尝试。我也在不断的尝试着、思考着如何有突破，不管是在版面、排版、细节等方面。谢谢大家!
欢迎关注我的个人公众号&三根设计骨&
加入和大家一起交流,相互学习,共同提高.
　下一篇：
相关文章和赞助商广告
赞助商信息