资源简介

(共64张PPT)
中等职业教育国家规划教材
项目四 网页广告的设计与制作
任务2 设计与制作Banner
任务情景
任务分析
任务实施
项目四 网页广告的设计与制作
任务情景
在为自己的网站设计了一个精美、有创意的Logo后，张家豪在一些资料的查阅和向专业人士的请教后，他开始尝试Banner的设计与制作。
项目四 网页广告的设计与制作
任务分析
本任务主要是根据客户的需要设计出富有视觉效果的Banner。
◆确定Banner创意
◆设计网站Banner
◆著名网站Banner赏析
项目四 网页广告的设计与制作
任务实施
步骤一 确定Banner创意
步骤二 设计网站Banner
步骤三 著名网站Banner赏析
项目四 网页广告的设计与制作
Banner主要指网站页面中的横幅广告，常常放置在网站的首页上，用来显示网站中最重要的内容或需要重点突出的内容，尤其具有独特的个性要素。
（一）Banner相较于其他广告形式的优势
1.互动性强
互动性是Banner的本质特征，互动的概念即为“人—机—人”式的直接沟通， Banner的传播既具有人与人之间传播的直接性特点，又具有大众传播的广泛性特点，是一种全球范围的直接交往形式。
项目四 网页广告的设计与制作
知识准备
知识准备
大众汽车率先采用了先进的后视摄像头技术，当倒车的时候让你充分了解车后发生的状况。为了说明这一点，设计公司创作了一则非常有创意的互动Banner，当浏览者点击Banner后，大众车倒出了广告画面，而且继续倒回到用户原先访问的页面。
广告语：后视摄像头，让你清楚的知道后面是什么（如图4-33所示）。
图4-33 大众汽车
项目四 网页广告的设计与制作
知识准备
2.受众明确，针对性强
Banner的目标受众明确。点击广告的人即为有对网站的产品或服务有兴趣的人，因此可以将其直接定位为有可能购买的用户，并可以为不同的受众推出不同的广告内容。
项目四 网页广告的设计与制作
知识准备
例如同样是电子商务网站首页上有关新年促销的Banner，淘宝网上的促销标题是“奢侈品过大年——全场2折起”，一屏Banner广告上除了大红的色彩、喜庆的图案，主要产品图片是国际一线品牌的包、墨镜等奢侈品（如图4-34所示），点击者大多数是18-40之间的年轻爱美又有一定购买能力的女性消费者，Banner设计符合目标受众的审美偏好。另一个著名电子商务网站京东商城主页上的Banner 则是“你拍五 我拍五——大年初五 一齐火拼LOL”，因为网站主营电子产品，Banner上的产品图片主要是平板电脑、相机和耳机等电子产品图（如图4-35所示），点击者基本就是喜爱并关注电子产品的浏览者。
项目四 网页广告的设计与制作
图4-35 京东促销Banner
图4-34 淘宝网促销Banner
知识准备
项目四 网页广告的设计与制作
知识准备
3. 受众数量可准确统计
在网络上就可通过访客流量统计，精确计算出每个Banner被多少个用户点击过，还可以知道这些用户查阅的时间分布和地域分布，效果易体现，客户群体清晰易辨，广告行为收益也能准确计量。
4.灵活性强，成本低
在互联网上做广告，能按照需要及时变更广告内容，且变更成本低廉，相对更加灵活，成效更为显著。
5.市场推广时间跨度缩短
Banner可以明确体现网站的中心意旨，形象鲜明地表达最主要的情感思想，与访问者产生互动效果，锁定目标受众，低成本、快速的向访问者展示网站商品或服务，Banner往往在进行商品或服务宣传方面起到决定性的作用。
项目四 网页广告的设计与制作
知识准备
（二）Banner的设计尺寸
早在1997年，相关的IAC/CASIE标准详细的规定了Banner的一系列可选择尺寸。
Internet Advertising Bureau (IAB，国际广告局)的“标准和管理委员会”联合Coalition for Advertising Supported Informatiln and Entertainment(CASIE，广告支持信息和娱乐联合会)联合推出了一系列网络广告宣传物的标准尺寸。这些尺寸作为建议，提供给广告生产者和消费者。2001年第二次标准公布，对1997年的标准进行了略微的调整：IAB将不再支持1997年第一次公布标准中的392×72形。现在网站上的广告几乎都遵循IAC/CASIE标准。
项目四 网页广告的设计与制作
知识准备
2001年第二次标准：
No. Size(pix) Name
1.120×600 “摩天大楼”形
2.160×600 宽“摩天大楼”形
3.180×150 长方形
4.300×250 中级长方形
5.336×280 大长方形
6.240×400 竖长方形
7.250×250 “正方形弹出式”广告
但是现在随着大屏幕的显示器出现，Banner的表现尺寸越来大，760X70；1000X70像素以及更大尺寸的Banner也屡见不鲜。Banner的尺寸还是要看投放网站中规划出的广告位的大小。
项目四 网页广告的设计与制作
知识准备
（三）Banner的设计原则
Banner设计的一般原则是：
1.提前与投放网站沟通好，使Banner的尺寸、大小符合标准，以便于在网站上能直接上线投放。
2.以内容为主，产品推荐类Banner：必须以产品、折扣等信息为主。事件营销类Banner：突出事件主题，配合活动进行有创意设计。
3.主题明确，弱化辅助内容。切记不可喧宾夺主，使Banner看起来混乱。不能出现与主题无关，没有实际含义的图片、场景等辅助元素。
4.Banner所传播的经济信息要真实。文案内容要真实体现广告内容，不能虚夸，更不能伪造虚构，或以歧义的文案误导引诱用户。
5.Banner设计制作中要运用美学原理，给人以美的享受。注重统一性，Banner需结合所在的网页设计而设计，与周边环境，整体设计风格一致，保持整体的统一。
项目四 网页广告的设计与制作
（四）Banner的设计规范
1.文案
标题文案必须要真实准确，切中主旨。在网络的海量信息中，Banner上的标题要想引发浏览者的兴趣，首先必须简单明了，通俗易懂。标题最好是押韵或琅琅上口，可以是匠心独运的谐音、成语、俚语，贴近生活，使访问者看到标题马上能够了解网站的商品或服务。
知识准备
项目四 网页广告的设计与制作
其次，在语言表达上使用的文字能够引起访问者的好奇和兴趣，可以是招唤性的，如“点击即可获优惠券”、也可以是时间性或优惠力度的，如“最后三天”“满400减120” （如图4-36所示）之类的词语，这种看起来很俗、很直接的词语往往可以使Banner更具吸引力，轻易的吸引消费受众的注意，提高Banner的点击率。
图4-36 优惠力度广告语
知识准备
项目四 网页广告的设计与制作
如果Banner的文案和点击后下一层网页中的文案编撰得不好，很有可能使浏览者完全不想点击。因此，在编辑文案时应注意以下两点：首先，通常在Banner中尽量少用大段的文字，尤其是在小尺寸的Banner中。详细的文字信息一般放在第二层网页上，第二层网页上信息要完备，应包含Banner中产品或服务的详细信息；当前的活动优惠力度；重点推荐的商品；完善的售后服务方式等。当人们在看这个设计时能和平常的生活联系起来，产生共鸣的才是好的设计。其次，正文的设计不要设计得太深，一般不超过三层，因为访问者没有耐心一层层点击进去。
知识准备
项目四 网页广告的设计与制作
2.字体
随着网络信息的大量增加，网络中Banner的竞争也越发激烈，越来越多的Banner设计，对字体的要求也开始变高。可以选择合适的字体加以再设计，甚至可以只设计某些文字或局部，只要能传递需求的服务和商品特征即可，这也是平面设计中字体设计的关键所在（如图4-37所示）。
图4-37 字体设计
知识准备
项目四 网页广告的设计与制作
字体在Banner里逐渐被人们重视，设计师对字体的选择或是对字体的应用直接影响了整个网页的视觉效果。相对更加适合某一主题的字体，其感染力可以是巨大的。设计师要运用创新的观念去表现字体的时代性，设计和组合上都要带给其他人或亲和力，或震撼力。
Banner上的文字力求清晰、醒目，对于一些标题性的文字常使用笔画相对较粗的字体，如方正粗黑简体、微软雅黑等。一般的文字在排列上视文字多少及版面效果选择字体和排列行距与间距，在一些效果特殊的Banner上文字可以自行设计排列形态。
当Banner中呈现一些动态效果时，需要注意的是，如果一味追求特效形式，而忽略主题的表现，令观者只觉得很花俏、突兀，Banner的动态效果反而有可能是画蛇添足。
知识准备
项目四 网页广告的设计与制作
3.色彩
Banner的色彩要明亮干净，要与整个网页相协调。例如Tiffany&Co的中国官方网站，因为品牌包装特有的“蒂凡尼蓝”深入人心，所以整个网站主色调都是这种浅蓝色。Banner的背景色自然也是大面积的“蒂凡尼蓝”，与网站非常和谐、舒服地融合在一起（如图4-38所示）。
图4-38 蒂芙尼
知识准备
项目四 网页广告的设计与制作
对于Banner来说，色彩应该是比较能吸引眼球的元素，尤其是大面积的色块。过度耀眼的色彩是不可取的，营造愉悦、舒服的感观很重要。下图中采用了大面积的红色作为背景搭配黄色的标题文字，但降低了红色的纯度，并尽可能删减了多余的细节信息，使得整个页面的色彩看起来鲜艳活泼但又比较干净（如图4-39所示）。
图4-39 红色背景Banner
知识准备
项目四 网页广告的设计与制作
很多时候，Banner的主题将直接决定其色彩，如下图中名为“青红巴蜀”的Banner色彩就采用了一半青色一半红色，红色正好又和导航条的颜色相似，颜色虽明艳，但配上有所关联的文案，有趣的图案，中国风的设计风格，也足够引起浏览者的兴趣（如图4-40所示）。
图4-40 青红巴蜀
知识准备
项目四 网页广告的设计与制作
4.图片
Banner设计除了文字的设计以外，合适的图案也是非常重要的。研究表明，当同一个图片放置一段时间以后，点击率开始下降。所以更换图片保持新鲜感是吸引访客的一个好办法。与平面杂志和户外媒体宣传不同，Banner的显示尺寸非常有限，摆放太多产品，则所有产品的图片会被压缩得看不出优劣，视觉效果大打折扣，也无法有效吸引访问者点击。所以，产品图片不是越多越好，关键是易于识别。
知识准备
项目四 网页广告的设计与制作
Banner的图片选择要注意两点：一是图片质量不需很高。因为网络图片一般只显示于计算机的显示器上，即使图片的分辨率很高，颜色深度很大，我们的肉眼也经常无法把它和一幅普通图片区分开来。一般来说，分辨率72dpi，是大多数图片的最佳选择；二是图片和最后做完的文件都要尽量小。网络页面的图片用于网络的传输，受到带宽的限制，其文件尺寸在一定范围内越小越好。文件的长度越小，下载的时间就会越短。控制网页的大小，节约带宽，使广告点击后，网页能立刻呈现。按照国际著名机构ZonaResearch’s发现的“8秒钟定律”----如果网页的下载时间不能保证在8秒钟以内，访问者就会放弃访问。
知识准备
项目四 网页广告的设计与制作
Banner的设计不仅要视觉效果好，更多的应该强调其趣味性与创意。图片的动作、位置、面积、数量、质量等直接影响到网站的互动性。
在图片的选择和优化的同时，就像平面设计中讲究版式设计一样，应考虑图片在整体中的编排摆放，达到和谐整齐。要达到这样的效果，在页面图片的合理选用时，一要注意悦目；二要注意统一。很多用户觉得提供的图文信息都很重要，都要求突出显示，结果却忽略了区分主次；三要注意突出重点，在相对小的页面里，想一下子夺人眼球，必须结合产品特性确定重点宣传内容，放大访问者所关注的产品和服务信息，缩小不必要的信息，使画面主次对比鲜明；最后一点要注意图文的视觉流程，在处理文字和图片编排时，要做到在Banner有限的空间内做好各种信息的平衡和协调。
知识准备
项目四 网页广告的设计与制作
以上图为例，作为一个家纺网站中的广告，Banner中选择了几乎白色的背景图，与家纺的颜色浑然天成，看起来完全就是一个干净、舒适的床铺，妈妈和宝宝愉快的躺在床上，文字的大小和颜色恰如其分，完全贴合了文案“精致&温馨” 的意境（如图4-41所示）。
图4-41 罗莱家纺
知识准备
项目四 网页广告的设计与制作
5.Banner跳转动画
因为一个网站的首页空间是有限的，尤其是一些热门网站。Banner的位置上，通常是三、四个Banner交替出现（如图4-42所示）、（如图4-43所示）。浏览者可以通过数字或标题的切换按钮切换到感兴趣的Banner，在无手动切换的情况下，几个Banner会一直循环播放。
图4-42 交替出现的Banner
知识准备
项目四 网页广告的设计与制作
图4-43 交替出现的Banner
切换的页面一般不超过五个，每个页面切换时间为2到3秒。
知识准备
项目四 网页广告的设计与制作
6.输出格式
目前的Banner主要分为静态Banner和动态Banner两种。我们在日常浏览网站时，比较常见的是静态Banner。
静态Banner主要是使用Photoshop、Illustrator等软件制作，输出文件以JPG格式的静态的图形方式存在，也可以是GIF或者PNG等其他形式。
而动态Banner目前很多是使用Flash格式的动画，具有更显著的表现力和互动性、趣味性。图像的分辨率为72dpi，根据图片特点选择输出格式，要求在不超网站规定大小的情况下，最大限度的提高质量。
知识准备
项目四 网页广告的设计与制作
创意要符合主题。和所有其他类别的设计一样，创意是设计中最复杂也最难寻找标准的一项。对于同一个主题，一百个人可以有一千个创意，而且很难评选出哪个是最好的创意。我们要做的，就是在开始设计之前，做充分的调查、搜集等准备工作，挑选出能较好的体现产品或服务的主题、能起到宣传品牌作用的、适合投放在网页中的方案，并加以修改完善。
令人拍案叫绝的好创意并不是总能出现，但设计者在创意过程中，也一定要尽自己所能，完成合格的作品。
项目四 网页广告的设计与制作
步骤一 确定Banner创意
现在，假设中国老牌化妆品品牌“百雀羚”准备在感恩节举行网络购物大型优惠活动，需要在各大电子商务网站投放Banner广告，由我们来设计这样一个Banner。
我们前期需要发散性思维，尝试书法、中国风、旧上海年画、化妆品图片等多种可能性。最后，在我们反复研究了“百雀羚”的品牌故事后，确定制作一个旧上海月份牌风格、较为素雅的Banner。
项目四 网页广告的设计与制作
步骤一 确定Banner创意
在Banner的设计原则中我们提到过，Banner主要有两大类，一类是以展示产品为主的产品推荐类Banner；另一类是以事件营销类为主的促销Banner。主旨不同，设计过程中的侧重点也有所不同，我们通过“百雀羚”促销Banner 和“艾特米诺”产品Banner两个实例来分别学习一下如何设计制作这两类不同主旨的Banner。
项目四 网页广告的设计与制作
步骤二 设计网站Banner
（一）制作“百雀羚”促销Banner
1.新建文件
打开Photoshop cs5程序。点击“文件”->“新建”按钮，出现新建窗口
名称：名称-Banner
预设：选自定
宽度：为673像素 高度：为314像素（确定在淘宝网首页投放，此为其固定尺寸）
分辨率：填72像素英寸
颜色模式：选RGB颜色 8位通道 (网站设计常用颜色)
背景内容：白色
点击“确定”按钮，如图4-44所示。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
图4-44 新建窗口
步骤二 设计网站Banner
项目四 网页广告的设计与制作
Photoshop cs5 设计制作界面（如图4-45所示）
图4-45 Photoshop cs5 设计制作界面
步骤二 设计网站Banner
项目四 网页广告的设计与制作
2.图片素材设计
因为活动和产品的主基调是温暖、感恩。所以找了淡红色、复古牛皮纸底纹的素材图作为底图。插入素材图， 命名图层为“底色”（如图4-46所示）。
图4-46 底色图层
步骤二 设计网站Banner
项目四 网页广告的设计与制作
在网上搜索旧上海月份牌中温婉的古典美女形象，突出品牌文化。新建“月份牌”图层，将素材图粘入画板右侧。
为了使图片和底图更好的融合，我们需要把图片的边缘虚化。画一个椭圆形（将图片中的月份牌美女包含其中），右键 选择反向，右键 羽化（羽化半径输入30像素），橡皮擦工具，选择边缘模糊的笔刷 调整画笔大小，将边缘部分擦去，这样就能制造出边缘虚化的效果了（如图4-47所示）。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
图4-47 边缘虚化效果
步骤二 设计网站Banner
项目四 网页广告的设计与制作
选择活动主推的优惠产品套装的官方图片和价格作为素材，新建“产品”图层，将素材褪底后置于左下方（如图4-48所示）。
图4-48 产品图层
步骤二 设计网站Banner
项目四 网页广告的设计与制作
3.文案确立和文字排版
“老牌国货 复古新宠”是品牌近期的营销口号，在Banner中需要有所体现，但也不是最重要的文案，所以位置不在正中，字体的选择是比较复古纤细的字体——幼圆加粗，字号也较小，为25点。最后给文字加上投影效果。因为这样的一行字在底图上不太显眼，所以在文字下衬上一行白底。使用图层面板——渐变，做出白底一边渐隐于底图的效果（如图4-49所示）。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
图4-49 文字排版
步骤二 设计网站Banner
项目四 网页广告的设计与制作
活动的标语是“感恩节温暖回馈 全场7.5折起”，这是整个Banner最重要的内容——折扣促销。
前句“感恩节温暖回馈”考虑到感恩节前后，网站上类似的口号会比较多，所以相对弱化，字体同样采用与幼圆相似但更有设计感的造字工房悦黑体，字号相对比较大，为32点，颜色也是吸引人眼球的深红色。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
后句“全场7.5折起”是表达折扣的力度，往往是Banner中比较能吸引浏览者点击的所在。为了突出这句话，又不显得凌乱，采用了同样在文字下衬底的方式。但是选择了红底衬托白字。正好与前句形成反白的效果。这句话同样采用了造字工房悦黑体，字号也是32点，但“7.5”这个折扣数字放大字号到46点，以便更加吸引观者（如图4-50所示）。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
图4-50 文字排版
步骤二 设计网站Banner
项目四 网页广告的设计与制作
护肤品促销Banner在网页上比比皆是，百雀羚又是比较有知名度的老牌国货化妆品品牌，所以建议如能把Logo放大，放在显眼的位置，就能和其他品牌的促销Banner区分开来。
新建Logo图层，在左上角插入百雀羚Logo素材，调整大小到看起来舒服又醒目。新建文本图层，加上品牌引以为傲的历史“中国·第一代护肤品品牌 SINCE1931”字样。字体为简单的黑体，字号也只有16号，起到协调画面的作用，又能宣传品牌历史悠久，同时也不会太显眼（如图4-51所示）。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
图4-51 文字排版
步骤二 设计网站Banner
项目四 网页广告的设计与制作
最后在空白处加上活动日期和官网地址，令Banner看起来更加正式。字体采用了造字工房悦黑体，字号为较小的12.5点，颜色为相同的深红色。使得整个Banner看起来和谐统一（如图4-52所示）。
图4-52 添加活动日期和官网地址
步骤二 设计网站Banner
项目四 网页广告的设计与制作
4.文件存储
保存图形，点击【菜单文件】，存储为“jpg格式”（如图4-53所示）。保存选项，按下图设置好，点击存储，完成。
图4-53 文件存储
步骤二 设计网站Banner
项目四 网页广告的设计与制作
最终效果如图4-54所示。
图4-54 最终效果图
步骤二 设计网站Banner
项目四 网页广告的设计与制作
（二）制作爱特米诺Banner
1.新建文件
打开Photoshop cs5用程序。点击“文件”->“新建”按钮，出现新建窗口
名称：爱特米诺-Banner
预设：选自定
宽度：为1400像素 高度：为384像素（网页中为Banner留的位置大小）
分辨率：填72像素英寸
颜色模式：选RGB颜色 8位通道 (网站设计常用颜色)
背景内容：白色
点击“确定”按钮，如图4-55所示。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
图4-55 新建窗口
步骤二 设计网站Banner
项目四 网页广告的设计与制作
Photoshop cs5设计制作界面（如图4-56所示）。
图4-56 Photoshop cs5设计制作界面
步骤二 设计网站Banner
项目四 网页广告的设计与制作
2.图片素材设计
为了与网站和Logo匹配，底图选择蓝天白云的图片素材。新建“蓝天”图层，插入选择的素材。调整大小和位置（如图4-57所示）。
图4-57新建“蓝天”图层
步骤二 设计网站Banner
项目四 网页广告的设计与制作
仅仅只有素材图片，显得单调，可以下载一下气泡、曲线等装饰性的素材文件，加入其中。使得图片变得更加丰富，但装饰的摆放需要符合视觉美感（如图4-58所示）。
图4-58 添加装饰图片
步骤二 设计网站Banner
项目四 网页广告的设计与制作
为了切合公司的性质，除了美化外，还需要在背景上加一下商务、电子的素材，但是这些素材只能以背景的形式存在，否则再加上产品图片和文案，就会显得杂乱，可以选择调低素材图层的透明度，将透明度调位34%（如图4-59所示）。这样背景图就完成了。
图4-59 调整装饰图片
步骤二 设计网站Banner
项目四 网页广告的设计与制作
3.图片文字排版
在背景图上添加相应的产品或服务图片和文字介绍（如图4-60所示）（如图4-61所示）。
图4-60 添加产品图片
步骤二 设计网站Banner
项目四 网页广告的设计与制作
图4-61 添加文字介绍
步骤二 设计网站Banner
项目四 网页广告的设计与制作
4.文件存储
保存图形，点击【菜单文件】，存储为“jpg格式”。保存选项，按上图设置好，点击存储，完成制作。
最终效果如下（如图4-62所示）：
图4-62最终效果图
步骤二 设计网站Banner
项目四 网页广告的设计与制作
知识链接
在后续的广告投放中，可以根据需要，修改Banner的大小，适当增减信息，做成不同的尺寸和版本，投放在不同网站中。
步骤二 设计网站Banner
项目四 网页广告的设计与制作
下面是淘宝天猫商城的一个Banner广告（如图4-63所示）。是天猫网站联合在网站上开有旗舰店的家居品牌发起的促销活动。所以在设计的时候注意到了与网站色彩风格的呼应。
在“宜”和“忌”两块巧妙的地表达了鼓励人们点击购买优惠产品，不要等到错过优惠再伤感这样的宣传目的。“最后一天”这样的大字也很容易吸引人们点击。除了要表达的内容外，基本没有其他装饰图案，看起来干净、舒适。
步骤三 著名网站Banner赏析
项目四 网页广告的设计与制作
图4-63 淘宝天猫商城的一个Banner广告
步骤三 著名网站Banner赏析
项目四 网页广告的设计与制作
下图是网站“一号店”首页上的Banner（如图4-64所示）。“一号店”以零食、进口小食品的销售在电子商务网站中独树一帜。Banner中宣传的“全球美食1折起 带着味蕾去旅行”，琅琅上口，放大的“1折”也颇为诱人。
图4-64一号店
步骤三 著名网站Banner赏析
项目四 网页广告的设计与制作
三星中国区的官方网站首页上的Banner（如图4-65所示）。因为三星作为高端电子产品品牌的特质，很少有特惠活动之类，主要是要介绍产品，所以Banner是将面积方方正正的切割成几块，各自放上海报和主推的产品。整个页面看起来简单大方又不失锋利硬朗，很有品牌的特色。
图4-65 三星中国官网
步骤三 著名网站Banner赏析
项目四 网页广告的设计与制作
THANKS！

展开更多......

收起↑