经典干货！让大神传授你Banner设计中的“辟邪剑谱”
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
Alisa_四爷
经典干货！让大神传授你Banner设计中的“辟邪剑谱”
作者： 前淘宝北京UED资深视觉设计师。从小喜欢画画，泥塑，电脑游戏。毕业于北京电影学院（动画学院）15岁组装了自己的第一台电脑（后成为硬件发烧友，精通软硬件）16岁开始学习传统动画，CG绘画等。17岁接触互联网，并成立个人网站SixDogsNet（99年互联网春天一片大好，做过GUI外包也做过资讯频道编辑）18岁本来想出去工作，考了个Adobe平面设计师认证（ACCD）19岁但后来还是考上了自己梦寐以求的学校……99年成立了个人网站SixDogs’Home，00年注册了国际域名SixDogs.Net后来以SixDogs这个网名混迹至今。
期间的作品，网站被《漫友》、《大众软件》、《HOPE》、《电脑报》、《计算机应用文摘》等杂志发表和推荐收录。可能老一批网虫对我的这个名字有点印象。
05年后因为全职工作就消声觅迹了。
2005年—悲剧至今(你们都懂的) 全身心专注于GUI、Web等视觉、交互设计。
先后服务于：新浪UC、猫扑、中国雅虎、淘宝网。
接下来，进入主题。
微盘打包下载→
好文推荐：
其实是我们接触互联网工作后，最常见最普及的一种工作。
它就像主食一样，支撑着一个项目，一个公司，一个网站的运转。
也是多数新产品，新事物，各种优惠活动呈现给用户和消费者的主要第一途径。
什么是Banner？
Banner的核心使命其实是吸引用户关注，然后被点击。
所以它会是主题性明确，突出关键内容并有效抓住用户眼球的一种广告。
通常穿插在页面中。当然在有效吸引用户的前提下，能跟不同页面融为一体是最好的境界。
大家可以看到上图中首焦Banner。
粗略一看我知道是卖服装的，39块包邮的T恤。
仔细看下，他们专注做T恤17年，但我看到左边的T恤时，我真不觉得他们这17年有在用心做（笑）另外似乎是新品上市的样子……还是国货（信息量好大）其实用户并不太需要一次性了解这么多信息，过多的信息反而无法让用户集中于一个重点信息上。
这也是需求方经常范的通病—填鸭式Banner
举一个正面例子。
这个banner其实很暴力，百张影票，明星道具1元拍。
这个文案很给力，也很直接。另外注释是构想私藏张学友演唱会等。
目标群很明确。简单直接明了，这种banner在轮播中更容易被用户关注和点击。
结论：其实的初衷还是被点击。
那么所有的设计和创意都是围绕着吸引用户来进行的。
简洁有效的文案，有时候是需要设计师自己去理解需求并提炼的。
但是最后我们呈现出来的结果，一定要有重点，一个核心内容，几个围绕说明会变成一种成功率很高的套路。其实很多时候。设计师是可以控制文案质量的。但是通常我们拿到的文案不是很理想（甚至很糟糕）
那么在淘宝网的Banner需求中，我们的流程大致是这样的。
其实从图片上的流程可以看出来，沟通的过程会消耗掉一部分时间，然后就是初稿后的跟进。
后面的反复修改我并没有写出来。因为随着设计师经验的积累，偏离核心目标和反复修改的次数会越来越少
淘宝的流程不一定适用于全部企业或者公司。但是当量级达到一定程度后。这种项目流程的元素会越来越多。也是为了纵向管理。
在淘宝，我们是禁止使用一些未授权字体的（因为字体公司会来讨伐）
所以在不能使用微软雅黑的前提下，我们通常使用“方正兰亭黑简”来达到相似效果。
在一个Banner中，尽量避免使用2种以上字体。
字体清晰好辨认为佳。
变形申拉什么的在保证品质的前提下可以有，但要符合需求本身的风格。
字体方面的风险
方正》微软》各种倒闭了的字体公司》无版权字体&
图片的质量会影响到一个Banner的好坏及品相。
那么其实大致需要注意的有3点：
1. 图片的清晰度辨识性（模糊的图片会给人以不精致的感觉）
2. 卡通素材的使用（谨慎）通常卡通素材是有版权的，另外就是跟Banner内容的风格是否一致。例如我曾经接手的保险类推广专题，我就严厉禁止使用卡通人物做推广。同样金融线的Banner也不适合，因为涉及到钱，保障的时候。卡通形象容易给人不严谨的感觉
3. 再有就是图片内容的比例一定要保持1:1伸缩。细微的比例失调都容易给用户一种山寨出品的感觉。
通常Banner背后会有一个推广活动，企业站点，或热销产品去支撑。
那么我们需要切记Banner需要和推广主题或点击进去的内容有继承性。
也就是点之前看到的是个美女，点进去是卖鞋的。这样就不好了。
Banner与主题的不一致性会给用户带来欺骗感。
这是淘宝内部的Banner规范产出物
标注的会很细，这样的好处是类似流水线。
用同一种规范产出的Banner风格样式会非常统一。
在页面长期更新时，可以有效的保证Banner质量。
当我们在一个业务或者项目做了半年左右后，统计日常需要的Banner数量，就可以抽时间完成一个Banner的小规范。把自己的理解和自己总结的东西都写进去。这样在工作交接或者来新帮手传承时，可以给自己节省很多时间。
一些错误的实例，和正确的实例进行对比。会让别人更容易理解。
淘宝TMS这个是淘宝内部的Banner上传系统。
大概就是统一管理这部分的数据，然后会严格限制各种尺寸下的KB数。然后以这种方法节省服务器空间。不过通常设计师有个常识就可以，例如多大的banner最好不要超过100kb
举一个实例……
但这好像不是正规banner的，但我感觉也挺合适
首先我的想法是，希望在这个推广上有游戏点卡实物的感觉。
那么我在聚划算的设计规范上看到他们的图片是长方形的。我尝试加入黑色底色，然后把点卡图片区域用带有圆角的图形圈出，这样在实际图片放上去的时候，会有点卡实物圆角边的感觉。
然后我选了一张WOW现在版本“大灾变”比较有代表意义的图片素材。
考虑到实际Banner放置位置的周围环境。
我决定把文字信息放在下面以减少附近内容带来的干扰。
安排文案过程中其实跟运营同事商讨过几次文案的主要信息。
最后经过几次优化，最终放上来的内容如图。
并且强烈要求附带合作伙伴支付宝的logo（其实我不想加，加了不好看呢）
结合上述工作，最后完成了这个Banner的设计。效果如图
另外就是跟banner有关的图片格式的一些知识普及
JPG是我们最常用的格式，它的好处是在真人，风景素材的压缩比会比较好，但是缺点是因为算法的问题，会出现特有的JPG噪点。随着压损比提高。这种噪点会越来越严重。但是正因为有噪点的存在。这也是我们最简单的判断网络上移花接木照片的方法。去看噪点是否平滑规律。JPG的硬伤是 K数小 噪点就多。 噪点少，就只能放宽KB数。
另外就是GIF。
网络暴力煽动广告的代表格式。这种格式的优点在于素材如果是像素类，或颜色数量比较少时。它的KB会很少。并且不受到图片尺寸的影响。
另外就是PNG了，随着IE6的没落，现在PNG的广告形式也渐渐多了。
PNG的好处主要是可以做透明和A通道。
最后就是Flash格式了。
这也是现在媒体广告的主力军。
这是最后的总结。一个好的Banner需要以上9点来支撑~
微盘打包下载→
原文地址链接：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。
设计微博：拥有粉丝量65万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注怎么样才能学好网页设计？求大神！_百度知道
怎么样才能学好网页设计？求大神！
笔者曾经是一个网页设计的菜鸟，经过自己不断的摸索和实践，现在已经可以独立制作一个完整的静态站点，并且给学校的N个部门、院系和外面的公司做网站，虽然不是一个完全意义上的Web Designer（网页设计师），但是完成一些不专业的要求，是可以的。所以自封为准Web Designer！ 　　循序渐进学知识 　　先学一学HTML，找本自己能看懂的教材，浏览为主，不用记住所有的概念，只要记住使用原理就行了，这一阶段，估计三天就够了；然后用两天时间学CSS，方法同上；进而再花些时间了解一下JavaScript。 　　然后就可以用记事本尝试写几个网页，记住这时千万不要用那些可视化工具，比如FrontPage、Dreamweaver（那些以后再学）。 　　有一个提高自己“写网页”的捷径，就是上各大网站，把网页保存下来（什么？你说你不会保存网页？就是“文件→另存为”），然后打开保存下来的网页，点击右键→查看源文件，看看人家的网页是怎么写的，然后模仿他们的写法，不断规范自己的代码。 　　接下来该学一下Fireworks了。建议一开始就到网上找些实例教程，这些实例教程一般都介绍得很详细，跟着它一步一步做下来，每学会一个实例就掌握了几项操作，而且也有了自己的作品，很有成就感的，长期积累下来对自己的提高很有帮助。 　　这时还可以结合Dreamweaver进行学习，你就可以体会到Dreamweaver和Fireworks的无缝集成了。 　　要是想让你的网页多一些炫目的效果，建议你学一下Flash，难度并不大，而且要是前面的JavaScript基础打得好的话，学到Flash中ActionScript时，就会简单很多。 　　到这时，相信你就可以真正领会到“网页三剑客”的威力了。 　　在实践中不断提高 　　要是每天能拿出两个小时来学习，完成以上这些学习估计只要20天就差不多了。要是天赋高的话，那需要的时间就更少了。接下来该实习了，找个地方锻炼一下自己，比如可以去一些公司干干兼职，或是给自己的单位设计一下主页等。 　　最好是能进入一个正规的开发团队，你就会学会如何以团队合作的方式开发网站，特别是怎样和程序组合作，把页面与后台程序数据库配合起来。 　　我特别感谢我们学校的学生在线网站给了我一个机会。有一天正赶上应聘，我拿着自己做的两个Flash作品就去了，没想到面试还通过了，于是我就这样有了在专业开发团队中实践的机会，通过自己的不断努力以及向高手的不断提问，水平飞快提高，两三个月后，就可以独立完成一些站点了，当然只是静态的。 　　到此，你就基本可以称作是一个“准Web Designer”了，不过要从根本上提高自己，最好去学学美术，这是当一个网页设计师的基本功。
其他类似问题
按默认排序
其他2条回答
主要是先学习好html基础语言，之后多看网页，各行各业的网站，同时学习DW、PS等网站常用软件。最后多多的实践。
多简单啊，多学多练呗。
网页设计的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁