如何做得一个好的Banner--三千网
如何做得一个好的Banner
有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。
一 思考专题定位·顾及需求方的频道定位
因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。
/女人频道的定位是知性 ，所以这个banner设计风格也是很贴切的。
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
·顾及此专题的定位
专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。
/女人频道下的一个怀旧感的专题，所以画面做出了一些怀旧的感觉。
/数码频道的一个和某手机赞助商的活动，所以banner也表露出一定的商业感
二 明白文字在Banner中占主导地位
从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。
/banner文字阐述专题主题，是绝对的主角。
·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。图6
/对主标题的断词比较巧妙，文字集中，主次明显，且文字与辅助图案相互呼应，统一感很好。
/banner 赞助& 淑华·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。
/长标题的时候，如果把‘征集各种端午风俗’排成一行，就会显得没有主次，也很有吸引力。我这里把‘端午’这个最重要的信息提出来，让用户很容易进入环境，然后让他们继续了解更多的信息。这里还要说一个小技巧，我这里‘征集各种’、‘端午’、‘风俗’这三个词虽然分别用了3种字体，但还是能读出‘征集各种端午风俗’这是一断话，因为同一个红色起到了很大的作用。·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。
/这个banner附加了一些英文来丰富画面，让画面充满丰富的同时，充满生气。
三 构建辅助视觉
一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。
3种文字和辅助视觉常见的搭配方式：
1，&& 文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。
文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。
&主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。
图13&图14&图15
创造力对主题的艺术化表现1，严肃话题也能做出新感觉
做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。
/主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。&图17
/因为是做夏季高温的专题，所以在处理画面的色彩时候我对比度做的比较弱，就如同烈日下看东西的感觉。&图18
/这是春运的专题，我在处理画面用了很多斜的构成，因为斜的东西学构成的时候表达那种不安感是比较贴切的。拥挤的人群、阴霾的天空，不安中带着希望，当一张小小的火车票就能映出当回家的曙光时候，我想，或许这就是很多人对于春运的感觉吧。回头看看其他门户的专题，光艳无比，一股社会主义的优越感油然而生的感觉，不知孰对孰错，再想时，我已迷失。2，轻松话题可以做出幽默感
有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。&图203，作品也能带点小情调
有时候来一些小的创意也会让banner增色不少。
/摇滚的不是乐器，还是文字
/banner 赞助 竆&图22
/冰雪也的不仅仅是车，还是文字&后面的话
有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。
浏览：1499
关注84，粉丝68，人气152
升级还需12分,！
作者其他博文
输入视频的地址，目前仅支持优酷/土豆
支持4M以内的jpg、jpeg、png、bmp图片
合作网站帐号登录：
还没有三千网帐号？
粤ICP备号-11如何快速设计一款好Banner？6个步骤帮你速成！
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
如何快速设计一款好Banner？6个步骤帮你速成！
世界看脸，网站看，门面当然要漂亮，不过很多同学以为做是门技术活儿，自己学艺不精做不了。如果你看了今天这篇文，就会明白，技术于Banner，就像刀法于人，虽有招式，但无内功支撑，久战必败。而这篇好文，就是Banner的内功修炼心法，按6个步骤来，速成可待。
（阿里巴巴资深交互设计师） ：团队小伙伴问到这个问题，发了一封邮件分享自己的思路，顺便贴过来。
适用前提：
非专业视觉设计师
没太多空闲时间去做。
为什么要做banner？
banner是用来传达信息的。一切不以传达有效信息、有效传达信息的banner都是yy.
baner是用来促使用户行动的，也即Call To Action。无法让用户产生你所期望的banner都是无效的。
所以，先摆脱一个错误的认识：banner仅仅是用来装饰用的，仅仅是为了吸引人注意啥的想法。
所以，我们既然是非专业设计师，就要回归到做banner的本源，为了达到以上效果，同时兼顾美观、大方、好看。
大方和好看的banner未必需要高深的视觉技巧，和繁琐的PS功能，但是要兼顾视觉的几个原则，我稍后会列出。
第一步：定义要传达什么信息
这一步，和视觉、审美什么的都没关系。
比如，半月谈，我们要传达的信息有：
品牌LOGO，让用户一眼就知道哪里出品，下次形成条件反射，所谓的视觉认知是需要一定的重复的，只有不断重复才能加深用户印象。
子品牌LOGO，让用户知道我们出了什么东西，并且有系列感。
以上就是我们要传达的核心信息了。你也可以认为这就是一个BANNER，只是——看起来没那么好看而已。
但是，我们发现信息还不够，我们还想要传达：
我们的内容大概是什么，从而让用户形成期待
既然是系列，我们希望用户能够知道这是第几期，从而当他们想要从某一期有兴趣时点击到全部，也有地方去。
所以，我们把信息又放出来。现在我们有4类信息。
第二步：定义信息的优先级
虽然我们有4类信息，但是优先级肯定不一样的，所以对应到设计上，我们给它放的版块的大小、颜色的突出是不一样的。
第三步：考虑用户视觉路径
也即你想引导用户先看哪里，再看哪里，然后再做什么。
通常，用户的阅读从上到下，从左到右边，所以一般重要的内容会放到左上角。
不过这个规则可以用醒目的图片、刺眼的颜色轻易打破，但是我建议你不要轻易这么做，所有的图片和颜色都要有意义，为什么要用这个图片为什么要用这个颜色。
确保用户一开始有视觉中心，如果用户一眼不知道先看什么，那么这个banner就是失败的。
有了视觉焦点后，你可以从视觉焦点引申开来，使用视觉里的亲密性原则（把内容相近的地理位置靠近一些、对比原则等等），引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。
第四步：考虑标准识别颜色
既然我们要传达品牌形象，请确保用色从我们的标准VI色盘中选择，而不要随便用。
我是配色弱怎么办？有这3个板斧打遍天下：
记住，品牌传达，重复性很重要。就像我们看到红、黄、白配色会想到麦当劳，看到绿和黑就想到星巴克一样。
第五步：做视觉的排版
（不要考虑太多设计技能，否则就陷入到：我不是专业的，所以我不会做设计上）
排版上，信息已经完整，优先级已经出来，无非就是把它变得好看一些而已。
让banner好看的几个要诀：
很好办吧，让内容纵向、横向都有一条线，可以对齐。要么居中，要么底部。尽量确保页面上不要有一个元素，没有任何元素和它能够形成对齐的关系。
不要让所有内容都没有聚集地堆在一起，让那些关系比较亲密的内容聚合成一个区域，不要让一个banner上的区域超过4个。
3. 简单质感：
千万不要加任何PS的滤镜、阴影、能不渐变就不渐变，因为已经不流行了，不要盲目使用各种样式。
4. 如果要用图标，尽量选择样式统一，且能够保持你的优先级次序的图表。比如我们引导用户先看左边，再看右边，结果你在右边的图标里选择了一个血红的，可能用户的视线立马被吸引过来了。
5. 不要让字体超过3种。尽量用宋体、黑体、方正黑体，不要用什么魏碑体、行楷等，一看就比较山寨。
第六步：做更多的美化
如果你不想做，其实上面也可以了。
想做的话，我们可以：
比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点，不要为了装饰而装饰，所有的装饰都要有意义~
让背景更加有质感。比如加点磨砂感觉。
比如，你还可以适当变换下别的排版，比如：居中的排版，更容易引导用户从上到下的阅读视角，也是很多人偷懒比较喜欢的排版风格。
综上所述，做banner有一大半的精力是梳理信息、设定优先级、设定用户浏览次序，和PS的技能没有太多关系，所以，每个人都可以去尝试做好一张看似很有设计感，但是实际上又没花什么精力的banner。
Banner设计武功秘笈：
打好基础功，先看几点要素：
跟对名师，省力省时！
武林为之变色！Banner大杀器！
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量75万的人气微博 ，欢迎关注获取资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注鸣谢 南京-王欢 的提供出学习方法，大家鼓掌！
培训 如何做一个切题的好Banner
参与打分美编34人：沈阳-张鑫、成都-张科曦、东莞－林伟芝、长沙-朱林文、扬州-周楠、嘉兴-周霏、郑州站-赵敬阳、唐山-王雪巍、上海-宋玲玲、厦门-施木钦、成都-胡扬、烟台-邵晶琳、扬州-宦莹、呼市-于晓光、邯郸-李兰、广州-黄文昌、佛山―朱想、成都--李月、长春-刘雪松、恩施-谭敏、广州－丘雯茵、南京-汪习琴、沈阳-蔡斯嘉、昆山-许俊、昆明-郭靓、太原--孙丹丹、石家庄-檀鹏、郑州站-吴静静、苏州-于艳华、南宁-杨倩、苏州―范晓丽、北京-徐景亮、青岛-宫晓庆、北京-陈书
实用性：非常好的头图设计思路经验，对平日工作很有用　　　　可读性：设计思路清晰，按步骤讲解，通熟易懂　　　　美观性：手法专业/注重细节/页面美观人人网 - 抱歉
哦，抱歉，好像看不到了
现在你可以:
看看其它好友写了什么
北京千橡网景科技发展有限公司：
文网文[号··京公网安备号·甲测资字
文化部监督电子邮箱：wlwh@··
文明办网文明上网举报电话： 举报邮箱：&&&&&&&&&&&&& 正文如何做好一个网站Banner？一、我该继续做网页设计吗？（奕暄）
我现在快毕业一年了，专业是软件工程，很不喜欢这个专业，所以当时就没有选择本专业的工作，可是我很喜欢做设计，喜欢漂亮的图片，实习的时候开始做网页设计，做了三个月，是个很一般的设计，网站的div+css也是在学校学过的，后来经朋友介绍到一家游艇公司做平面设计，现在是做了8个月了，设计水平做企业内部的一些东西还是很一般的。我现在准备辞职了，我是觉得没有方向了，很迷茫，不知道接下来找个什么样的工作，我的设计水平不高，很想培训一下或者其他，平时工作挺忙的，也没什么时间学习，所以现在对这个职业规划直接就断了。我想请您给我指一条路，我是继续做网页设计呢，还是直接转行了，需要再深造吗？
答复：这个我不能断言你到底该做哪一行，因为个人的实际情况只有自己最清楚，也不是你上面那一段文字能说得明白的，但是我想你如果真的喜欢网页设计，就不要轻易的丢掉它，不管你以后是否从事和设计相关的工作，是否靠它吃饭，哪怕从事和设计完全搭不上界的工作，也可以把网页设计作为一个个人爱好坚持下来，这个爱好就像有些人喜欢打篮球、打网游、搞搞户外活动一样，没什么区别。为什么要坚持？有一句话话糙理不糙&有钱难买爷高兴！&，难得我们自己还有个兴趣爱好啥的，人生也就多了些乐子，既然喜欢，就抽出些时间精力弄一弄，别的不说，自己快乐也不挺好吗？很多人会说工作太忙没有时间，我觉得这不能成为一个理由，唯一的一个理由就一个字：懒。我分析你目前的迷茫和纠结主要是设计上长时间没有提高造成的。解决这个问题一是自己挤出时间加强平时的学习，二是如果条件允许，让自己充个电再开始工作，也没什么不可以，具体的情况自己拿主意。我也只能给你这些建议，能对你有一丁点的用处，那就再好不过了。
二、如何让嘈杂背景上的文案显眼？（稻草人）
如果做一张广告图，都是原图背景比较花，有哪几种办法可以把广告词的字让他比较显眼呢？比如下面这样的一张图，差不多就只有右上角有一定的位置来排放文字但是整体颜色都偏暖了，鞋子本身就不突出，而且可以排放文字的位置也小，感觉处理背景或者说给文案加纯色背景都不好处理。
文案内容：头层牛皮99元，新款
答复：如何让嘈杂背景上的文案突出，这个要看具体的案例，一般的处理方式有：1、处理背景，高斯模糊、叠加图案，通过渐变遮挡部分背景；2、处理文案，给文案添加纯色背景，将其与背景隔离开。就这个按理来说，首先是分析信息，明确哪个是需要突出的重要信息。就你所言，是要突出头层牛皮这个卖点，那么完成后的效果如下图所示，供你参考。
三、如何完成一个Banner的设计？（静忆云熙）
下面是我做的一个Banner，请大家点评，不知道该怎么设计好看。
答复：我只能说说大的设计步骤，具体设计还要你来做。从你这个设计可以看出你的思路没有打开，完全被策划图限制死了。就你这个按理来说，设计的步骤应该如下：首先提取文案中的关键词，这里应该是&合作&，&赢&两个词，然后围绕这两个词展开联想，把你能想到的图像记下来，最好简单画出草图；然后进一步评估你的可选方案，选择你认为准确的，最能体现关键词的图像，进一步画出草图、注意和网站整体风格的搭配，以及布局、视觉层次、色彩方案的搭配，初步做到目标明确，心中有数；最后选取素材，进行设计，设计的过程中不断评估设计，不断改进设计，直到完成。下面的设计案例你可以参考：四、如何做好这个Banner？（石头）细节方面无从下手，请群主点评。
答复：整体的气氛感觉是清新、阳光的感受，但文字使用的偏暗的蓝色和红色没有和整体的气氛契合，色彩上不搭，给人一种脏脏的感觉。最重要问题是主视觉部分不够饱满，看上去压不住整体的气氛，显得有些单薄，文字的间距太大，看上去过于松散，细节也不够。创建这样的3D文字，可以用illustrator来做，再拷贝到ps中进行细节的刻画。根据质感注意表现出高光、亮部、暗部、阴影、反光等几个调子。一般的方法是：1、先做出3d文字的基本样子；2、用钢笔抠出每一个面，添加样式；3、叠加一些质感。
下面几个3D文字的设计案例，供你参考。
五、关于中英文字体在设计中的应用（囧捷风囧）
就是现在很多的一些网页，特别是国外的网页，你看去很好看，简约大气上档次，当然其中包含很多细节的处理，但我在想如果将英文换成中文就不那么好看了，当然可能跟我接触使用的字体比较少有关吧
中文字体的使用有什么心得呢群主。。。
答复：如果换成中文字体是会受一定的影响，一是英文的字体节奏感和中文不一样，英文单词有长有短，整体感比单个单个的中文字体要强，二是英文字体比较多，可选择的范围较大，中文字体相对来说要少得多，所以在设计上限制也较多。关于字体的使用，中文字体和英文字体一样，分衬线和非衬线两种，非衬线字体适合简约、干净的设计风格，而衬线字体例如宋体，更适合中国风等艺术感较强的设计。平时能看到很多这样的好的设计，比如下面的这个设计就是使用宋体的好范例。
以及下面的这个设计中使用的中文字体：
其实字体的应用只是网页设计中的一个方面，只要在可读性上和风格应用上契合整体的设计就可以了。
来源：/how-to-do-a-banner/&下一篇：上一篇：&