Banner设计从入门到精通优秀网页设计15期讲座Word文件下载.docx

1、所以早期做过很多尝试2005年-悲剧至今全身心专注于GUI、Web等视觉、交互设计。先后服务于：新浪UC、猫扑、中国雅虎、淘宝网。所以在7年全职设计师生涯中，积淀了一些小体会。下面跟大家分享下之前本PPT（Banner设计-从入门到精通）放出来后，很多大神跟我说，缺少设计思路，设计方法等介绍。其实我是觉得设计本身主要贯穿了3个环节：沟通；创意；实现。我个人更热衷分享实现环节的技术。不是因为另外2个不重要（如果大家有想跟我讨论另外2个环节的问题随时欢迎）而是我觉得实现的技术更通用些，大家获益的比较直接，也更容易拿到结果（设计质量提升）那接下来我们就正式开始喽华丽的分割线-Banner设计其实是我

2、们接触互联网工作后，最常见最普及的一种工作。它就像主食一样，支撑着一个项目，一个公司，一个网站的运转。也是多数新产品，新事物，各种优惠活动呈现给用户和消费者的主要第一途径。其实这个PPT最初的目的是帮助我项目线中的运营同学能够自己完成一些简单的Banner任务，来缓解我的压力（）后来随着UED的壮大，这套东西就汇总成了PPT形式，用以新员工培训。大家在优秀网页设计上下载到的是第四版。什么是Banner？Banner的核心使命其实是吸引用户关注，然后被点击。所以它会是主题性明确，突出关键内容并有效抓住用户眼球的一种广告。通常穿插在页面中。当然在有效吸引用户的前提下，能跟不同页面融为一体是最好的境

3、界。大家可以看到上图中首焦Banner。粗略一看我知道是卖服装的，39块包邮的T恤。仔细看下，他们专注做T恤17年，但我看到左边的T恤时，我真不觉得他们这17年有在用心做（笑）另外似乎是新品上市的样子还是国货（信息量好大）其实用户并不太需要一次性了解这么多信息，过多的信息反而无法让用户集中于一个重点信息上。这也是需求方经常范的通病-填鸭式Banner举一个正面例子这个banner其实很暴力，百张影票，明星道具1元拍。这个文案很给力，也很直接。另外注释是构想私藏张学友演唱会等。目标群很明确。简单直接明了，这种banner在轮播中更容易被用户关注和点击。结论：其实Banner设计的初衷还是被点击。

4、那么所有的设计和创意都是围绕着吸引用户来进行的。简洁有效的文案，有时候是需要设计师自己去理解需求并提炼的。但是最后我们呈现出来的结果，一定要有重点，一个核心内容，几个围绕说明会变成一种成功率很高的套路。那么在淘宝网的Banner需求中，我们的流程大致是这样的。其实从图片上的流程可以看出来，沟通的过程会消耗掉一部分时间，然后就是初稿后的跟进。后面的反复修改我并没有写出来。因为随着设计师经验的积累，偏离核心目标和反复修改的次数会越来越少字体方面在淘宝，我们是禁止使用一些未授权字体的（因为字体公司会来讨伐）所以在不能使用微软雅黑的前提下，我们通常使用“方正兰亭黑简”来达到相似效果。在一个Banner

5、中，尽量避免使用2种以上字体。字体清晰好辨认为佳。变形申拉什么的在保证品质的前提下可以有，但要符合需求本身的风格。图片素材图片的质量会影响到一个Banner的好坏及品相。那么其实大致需要注意的有3点：1. 图片的清晰度辨识性（模糊的图片会给人以不精致的感觉）2. 卡通素材的使用（谨慎）通常卡通素材是有版权的，另外就是跟Banner内容的风格是否一致。例如我曾经接手的保险类推广专题，我就严厉禁止使用卡通人物做推广。同样金融线的Banner也不适合，因为涉及到钱，保障的时候。卡通形象容易给人不严谨的感觉3. 再有就是图片内容的比例一定要保持1:1 伸缩。细微的比例失调都容易给用户一种山寨出品的感觉

6、。传承方面通常Banner背后会有一个推广活动，企业站点，或热销产品去支撑。那么我们需要切记Banner需要和推广主题或点击进去的内容有继承性。也就是点之前看到的是个美女，点进去是卖鞋的。这样就不好了。Banner与主题的不一致性会给用户带来欺骗感。这是淘宝内部的Banner规范产出物标注的会很细，这样的好处是类似流水线。用同一种规范产出的Banner风格样式会非常统一。在页面长期更新时，可以有效的保证Banner质量。当我们在一个业务或者项目做了半年左右后，统计日常需要的Banner数量，就可以抽时间完成一个Banner的小规范。把自己的理解和自己总结的东西都写进去。这样在工作交接或者来新帮

7、手传承时，可以给自己节省很多时间。一些错误的实例，和正确的实例进行对比。会让别人更容易理解。淘宝TMS这个是淘宝内部的Banner上传系统。大概就是统一管理这部分的数据，然后会严格限制各种尺寸下的KB数。然后以这种方法节省服务器空间。不过通常设计师有个常识就可以，例如多大的banner最好不要超过100kb举一个实例但这好像不是正规banner的，但我感觉也挺合适这是一个450x300的推广图片需求。先介绍下背景：淘宝聚划算联合我负责的项目要搞一次魔兽世界点卡的促销活动。我的产品经理找到我要求我来完成，因为他知道我是一个资深魔兽玩家他对我的要求是：让玩游戏的一看就有情景感。然后再配合活动需要放

8、上要推送的文案及合作厂商。首先我的想法是，希望在这个推广上有 游戏点卡实物的感觉。那么我在聚划算的设计规范上看到他们的图片是长方形的。我尝试加入黑色底色，然后把点卡图片区域用带有圆角的图形圈出，这样在实际图片放上去的时候，会有点卡实物圆角边的感觉。然后我选了一张WOW现在版本“大灾变”比较有代表意义的图片素材。这里有一个Photoshop的小技巧（乱入）通常我们把素材拖入banner尺寸后，要进行等比缩放。但是那样图片的精致感会下降。然后banner会有些不清楚的感觉，那样效果并不会很让人满意。一般我们对图片的优化就是使用滤镜里的锐化功能但是使用一次锐化感觉劲儿不够。第二次锐化感觉又过于锐利，

9、有一种刺眼的感觉。或者是蜡像感。所以后来我找到了一种方法。就是分成2个层。底层是锐化一次的。顶层是锐化两次的。然后对顶层的图片建立一个蒙版。使用径向渐变。人工控制两次锐化-一次锐化效果的过度。这样的好处是我可以人为意识地控制我想突出的内容.例如实例中我觉得龙头还需要加强.周围可以弱化些。那么最后通过这种方法优化过的图片。质量会比原图好了很多。俗话说图片清楚了，banner怎么做都好看：）这样的好处是我可以人为意识地控制我想突出的内容。例如实例中我觉得龙头还需要加强，周围可以弱化些。以达到更好的景深效果。这与摄影方面非常昂贵的镜头可以在同焦段营造更好的景深同理。并且两次锐化+蒙版的技法适用于所有

10、的小尺寸图片优化工作。当然还有一种摄影修片的终极大法可以用.这个咱们改日再谈：我们继续然后我们得到了一张比较不错的图片素材做背景。考虑到实际Banner放置位置的周围环境。我决定把文字信息放在下面以减少附近内容带来的干扰。安排文案过程中其实跟运营同事商讨过几次文案的主要信息。最后经过几次优化，最终放上来的内容如图。并且强烈要求附带合作伙伴支付宝的logo（其实我不想加，加了不好看呢）结合上述工作，最后完成了这个Banner的设计。效果如图其实Banner需要注意的技巧在PPT里是有总结的。并且每一条都是亲身经历过。图片格式作为设计师来说，如果更好的选用图片格式产出我们的作品是一个必经的环节。那

11、么在输出作品时更适合的格式会为我们的作品提供更好的展示效果和更小的占用KB数。JPG是我们最常用的格式。它的好处是在真人，风景素材的压缩比会比较好。缺点是因为算法的问题，会出现特有的JPG噪点。随着压损比提高。这种噪点会越来越严重。 但是正因为有噪点的存在。这也是我们最简单的判断网络上移花接木照片的方法。去看噪点是否平滑规律。JPG的硬伤是 K数小噪点就多，噪点少就只能放宽KB数。另外就是GIF。网络暴力煽动广告的代表格式。这种格式的优点在于素材如果是像素类，或颜色数量比较少时。它的KB会很少。并且不受到图片尺寸的影响。例如GIF是 2000x2000的。 但是只有白色。那么他也许只有十几K

12、。这个是JPG做不到的有人夸我配图选的非常好。哈哈 ：D随着IE6的没落PNG的广告形式也渐渐多了。PNG的好处主要是可以做透明和通道。因为GIF只支持像素边缘，所以半透明效果PNG格式是可以解决的。这也是PNG格式的优势。但在IE6下兼容PNG的成本会非常高。Flash这也是现在媒体广告的主力军。早期的设计师都被那些并不懂技术但要装高端的总监们折磨过。因为他们把SWF格式的算法想的跟JPG和GIF差不多。所以在他们的理解里，小尺寸的SWF的最大K数应该小于5KB囧吧？Flash是矢量图形。组件化和AS是最显著的优势。在多尺寸动画输出时，会带来极大的效率。同样因为组件的形式，SWF格式的K数大小跟动画尺寸没太大关联。所以在早期阶段，SWF格式也一度成为暴利闪动广告的主力军。最后的总结好的Banner需要：1. 清晰的主题2. 直观的文案描述3. 良好的构图4. 富有品质感的图形5. 锐利精致的反光6. 适当的色调和渐变7. 适合的图片格式8. 图片尺寸9. 多底色延伸那么，谢谢大家