点爆广告图设计 演示课件(20130531).pdf

开发人：张 勤点 爆 广 告 图 设 计讲师简介•淘宝大学认证讲师•Adobe 中国平面设计认证讲师•10年的平面设计、网页设计相关课程教学经验，•曾经编写过：•主讲课程：《视觉营销》、《宝贝描述设计 》、《店铺装修》、 《店铺视觉诊断与优化》张勤花名：深蓝《Photoshop数码相片调色宝典》、《突破平面InDesign设计与制作深度剖析》等书籍开 始完 成认 识 广 告 图广 告 图 设 计广 告 图 的 优 化 调 整认 识 广 告 图认识广告图广告图的作用？壹认 识 广 告 图主图：商品第一展示图片直通车图：商品（店铺）引流的广告图片 主动消费者——有明确需求钻展图、首焦、硬广等：商品引流广告图片 被动消费者——无明确需求广告图的作用——入口壹广 告 图 的 作 用广 告 图 设 计宝贝主图设计直通车图设计钻展图设计壹主 图 设 计主图的尺寸与构成 主图的构图方式主图的作用与特点主图的规范与调整 重点信息突出壹主 图 设 计1主图的作用与特点作用：主图中展示商品的款式、颜色、品牌等等多个特征特点：在淘宝首页脱颖而出，迅速的刺激着眼球，做出差异化从而产生点击的几率更高，叫做点击率。

关键词或者类目搜索，展示在消费者眼前的宝贝图片主就是商品主图1、背景色单一 2、画面清晰 3、品牌突出 4、主体商品突出 5、差异化壹主 图 设 计1主图的作用与特点商品主图片的尺寸：800像素x800像素以上、500KB以内，要求JPG或GIF格式，将可以实现放大镜功能提示：小图片是不能被放大的！！！比例为1：1的正方形，且无边框壹主 图 设 计2主图的尺寸与比例规范壹主 图 设 计3主图的规范与构成不规范的主图规范文字不能过多，且遮盖住商品主体主图简洁，商品清晰 品牌识别元素很差壹主 图 设 计3主图的规范与构成构图直线式构图法壹主 图 设 计3主图的规范与构成三角形构图构图壹主 图 设 计3主图的规范与构成对角线构图构图壹主 图 设 计3主图的规范与构成构图渐隐式构图壹主 图 设 计3主图的规范与构成构图扇形式构图壹主 图 设 计3主图的规范与构成构图框架式构图九宫格式壹主 图 设 计3主图的规范与构成构图框架式构图平均分配构图不对称构图壹主 图 设 计3主图的规范与构成壹主 图 设 计4素材选择要求与调整尺寸不变的状态，保持清晰度√×壹主 图 设 计4素材选择要求与调整照片曝光不足，应当调整合适√×正面、反面、侧面、细节、面料不完整性壹主 图 设 计4素材选择要求与调整五张主图 合理分配√×VSVS商品质感壹主 图 设 计5重点信息突出图片模糊，需要质感，重点不够突出重点突出壹主 图 设 计主图的尺寸与构成 主图的构图方式主图的作用与特点主图的规范与调整 重点信息突出贰直 通 车 图 设 计直通车图的 尺寸与比例直通车图的注意事项直通车图的 位置与重要性设计规范与构图13 个 单 品 推 广 主 图贰直 通 车 图 设 计1直通车图的位置与重要性店 铺 推 广 图贰直 通 车 图 设 计1直通车图的位置与重要性贰直 通 车 图 设 计1直通车图的位置与重要性直通车概况-位置淘客搜索页右侧贰直 通 车 图 设 计1直通车图的位置与重要性直通车概况-位置淘客搜索页下方贰直 通 车 图 设 计1直通车图的位置与重要性直通车概况-位置淘宝热卖搜索页贰直 通 车 图 设 计1直通车图的位置与重要性我的淘宝- 已买到的宝贝下方贰直 通 车 图 设 计1直通车图的位置与重要性旺旺每日焦点贰直 通 车 图 设 计1直通车图的位置与重要性直通车概况-位置活动推广位置-首页和频道热卖宝贝方块图(75 X 75) 中型图(500 X 500)缩略图(100 X 100)原主图(800 X 800)缩略图(100 X 100)长方形(210 X 315) 图片 尺寸贰直 通 车 图 设 计2直通车图的尺寸与比例1.商品2.主色调3.销量4. 价格5.品牌贰直 通 车 图 设 计3设计规范与构图单品推广图设计贰直 通 车 图 设 计3设计规范与构图店铺推广图设计贰直 通 车 图 设 计3设计规范与构图无论是单品还是店铺推广主图都要注意以下几点：宝贝颜色图片场景图片清晰促销信息创意卖点贰直 通 车 图 设 计4直通车图的注意事项一张图片 多个商品 产品图片 大小不等加夸张的水印产品主题 不突出宝贝细节 放图片里复杂的背景直通车图片制作 六大禁忌贰直 通 车 图 设 计直通车图的 尺寸与比例直通车图的注意事项直通车图的 位置与重要性设计规范与构图叁钻 展 图 设 计广告图设计规范案件分析钻展图的 位置与重要性广告图共同标准什么是钻展？叁钻 展 图 设 计1钻展图的位置与重要性叁钻 展 图 设 计1钻展图的位置与重要性叁钻 展 图 设 计1钻展图的位置与重要性常用尺寸要求叁钻 展 图 设 计2广告图设计规范JPG格式或GIF素材必须清晰无边框，无阴影严禁出现鼠标的手型箭头等形状 严禁出现假分页、翻页，视频模式不得出现杂志，媒体，明星推荐严禁出现拼接形 式，白色竖条位置平均PV 平均点击平均点击率 淘宝首页第2轮播焦点图（1/3） 11,860,276 157,529 1.29%1.23% 点击率2.28%点击率以下广告你会点击那个？叁钻 展 图 设 计2广告图设计规范190000 （元）X 0.02 X 30（元）=11.4（元 ）360000（次）X 0.02 X 30（元）=21.6万元 11.4万（元）-10万（元）= 1.4万21.6万（元）-10万（元）= 赚 11.6元TIP: 首页焦点图平均15万次点击，按以上系数可盈利11.6万19万次点击单位点击成本0.53元以2%的转化率，每单30元利润计算，去 除广告成本10万 盈利3.6万36万次点击单位点击成本0.27元以2%的转化率，每单30元利润计算，去 除广告成本10万 盈利10.4万叁钻 展 图 设 计2广告图设计规范设计的好坏决定了点击率的多少，直接影响广告盈亏叁钻 展 图 设 计2广告图设计规范尽管看起来千差万别，但内在规律却很一致广告设计的共同标准是：1.主题突出2.目标明确3.形式美观通过反向解读，可以看到叁钻 展 图 设 计2广告图设计规范促销的过程就像一次 陈述，我们必须有一 个明确的主题，所有 的元素都必须围绕着 这个主题展开。

促销的主题一般是价格，折扣和其他促销内容本身，所以这个信息应该是放在视觉焦点上的，被突出和放大的元素第一主题叁钻 展 图 设 计3广告图共同标准主题突出人本能会先看人脸！ 是吸引目光的手段突出的折扣信息，作为第 一层级信息被强化产品信息是第二层级辅助信息为 第三层级暗示信息 为第四层级陈述的过程是分层次展开的，和语言的逻辑一样，设计的逻辑也是按层次结构展开的信息传达的层次结构叁钻 展 图 设 计3广告图共同标准主题突出更大的面积，更 粗的字体是一种 强化手段过于修饰的形式 会减弱传达，过 多细节会对主题 造成干扰通过形式强化主题，形式不可大于内容叁钻 展 图 设 计3广告图共同标准主题突出同等级别的多主题表达，形式感要保持一致这样让阅读者容易找到规律，把多条信息一次获取不同等级别的多主题表达，要分清主次关系，把次要信息降到第二层级，避免平均分配造成的主要信息弱化多主题的组合表现叁钻 展 图 设 计3广告图共同标准主题突出面向白领或成年人群，字体色彩都庄重和贵气面向学生羽绒服，字体色彩都活泼可爱目标人群的审美特征叁钻 展 图 设 计3广告图共同标准目标明确目标人群的审美特征TIP: 投射效应，让消费者把自己想象成画面上的模特年龄段叁钻 展 图 设 计3广告图共同标准目标明确模特应与目标人群特征吻合，也要和产品特点吻合TIP: 简单的控制色彩的方法是用 色不超过3种，并按照6：3：1的 比例配置叁钻 展 图 设 计3广告图共同标准形式美观色彩饱和度对比色彩呼应和统一衬底色块是最简单的明度对比方式（温和的）冷暖对比字体和语音的比喻字体大小粗细相当于音强 字体越大相当于声音越大字体的形式相当于音色男低音还是女高音叁钻 展 图 设 计3广告图共同标准形式美观字体简洁明快的标签更加醒目增加文化暗示的标 签，对品牌提到提 示作用叁钻 展 图 设 计3广告图共同标准形式美观标签就像兔子在狗面前奔跑会勾起狗的狩猎天性一样，明确的按钮和箭头都会对买家产生不可低估的心理暗示叁钻 展 图 设 计3广告图共同标准形式美观引导气氛的塑造依赖于细节TIP: 请记住设计大师 米斯·范·多·罗的名言： “上帝在细节之中”叁钻 展 图 设 计3广告图共同标准增加了光影立体细节后画面显得饱满了些增加了背景光和炫光线条，画面变得丰富生动形式美观气氛大小对比虚实对比叁钻 展 图 设 计3广告图共同标准形式美观对比TIP: 任何的创意过程都是先做加法在做减法的过程；能否“舍”决定了能否“得”叁钻 展 图 设 计3广告图共同标准过多的元素产生的干扰形式美观取舍段间距必须大于行间距，信息板块之间要有明确的间隔空间，主要内容和图片外框间要有版心概念，画面要有30%以上留白叁钻 展 图 设 计3广告图共同标准过多的元素产生的干扰形式美观取舍模拟广告图 设计叁钻 展 图 设 计3小组互动主题明确：促销内容的文字醒目，让人第一时间获取信息风格：蓝色和牙膏产品相符，给人带来清洁清爽的感觉。

主要字体使用对比色，突出内容构图：图片和字体分布两边，是常用的排版方式但字体所占的面积略大一下，让画面不会太呆板字体和字体之间呈斜坡状的排版具有层次感，放大促销信息，第一时间吸引客户注意，然后再传达其他的信息细节：产品图后方亮光突出产品，并让画面生动起来立即享受的按钮让人有点击的冲动肆案 件 分 析主题明确：模特图片的选择很好的传达了毕业的主题风格：毕业给人青春的感觉，所以选择鲜亮的颜色，而和黑色学士服最相配最巨冲击力的颜色非黄色莫属因为颜色太鲜亮所以为了避免抢镜所以背景没有再做更多的处理，纯色是最佳的效果构图：文字和图片以斜切的方式5-5分，达到生动的平衡感文字用放大和不同的颜色突出主题青春的狂想，次要标题使用粗黑，说明文字使用细黑，形成层次感肆案 件 分 析主题明确：此海报的意图是宣传新品，所以和文字相比产品更重要，漂亮鲜亮的模特图在第一时间抓住眼球风格：背景略带破旧感的灰色即带来了潮流感，又很好的村托了模特图片整个画面将灰色和鲜亮的色彩进行对比，造成视觉冲击构图：图片和文字左右3-7开，是能让视觉觉得非常舒服的比例图片和图片直接1大3小的分布具有层次感和节奏感文字将能够给人潮流感的英文作为主体，中文为辅。

细节：图片处理精美，增加了色彩的饱和度右下角的细节是画面的亮点，破开了框架的连续性，让画面生动起来肆案 件 分 析主题明确：使用漂亮的模特图吸引眼球，主题文字在画面的最中央（第一视觉集中的点），使用画面中最亮的黄色底色来突出主题风格：使用多个对比色（撞色）带来潮流感，注意各种颜色的比例和与黑色的搭配来平衡整个画面构图：图片以不同大小和位置摆放，形成空间感和左-右-左的层次感及节奏感文字上紫红色英文字主要集中在上方，给下方留出空白，突出主题文字英文字体主要是用于装饰的功能细节：英文字体是时尚杂志常用的字体，带来时尚感图片处理精美橙色的小标签也给人时尚杂志的感觉肆案 件 分 析主题明确：图片和文字都表现了亲子的主题和促销信息风格：前景使用活泼的彩虹色凸显亲子的感觉和数码产品丰富内容的印象所以背景需要使用灰色调来进行调和，画面使用的暖灰不仅平衡了彩虹色，还给人以温暖的亲切感构图：主图和说明内容平衡的在画面左右分布左边部分上方突出主题，下方展示促销内容内容和功能性分布非常明确肆案 件 分 析肆案 件 分 析叁钻 展 图 设 计广告图设计规范案件分析钻展图的 位置与重要性广告图共同标准广 告 图 的 优 化 调 整实施步骤数据对比壹实 施 步 骤01 策划02 沟通03 设计促销目标 产品策略 受众分析媒体分析 时段分析产品体验 策略沟通。