第7章推广图与促销活动页视觉设计（课件）《电子商务视觉设计》（电子工业出版社）

第7章推广图与促销活动页视觉设计 知识目标和技能目标 知识目标： 了解和认知推广图与促销活动页 掌握推广图意义 掌握推广图视觉设计方法 掌握促销活动页设计原则 掌握促销活动页视觉设计方法 技能目标： 能够运用Photoshop软件相关操作与命令进行推广图视觉设计 能够运用Photoshop软件相关操作与命令进行促销活动页视觉设计 学习重点和难点 学习重点： 电商网店推广图与促销活动页视觉设计 学习难点： 推广图与促销活动页和海报的区别 第一节 高点击率推广图视觉设计 1.1 高点击率推广图的意义 优质的推广图可以吸引消费者眼球、精准引流，浏览店铺的消费者会在第一时间注意到推广图，给店铺带来更多潜在消费者；优质的推广图可以促进消费者点击其他有效关联商品，增加店铺的人气；优质的推广图可以提升购买率，是视觉设计的关键点，也是卖家为自己量身定做的推广工具，包括直通车推广图设计和钻展图设计。 第一节 高点击率推广图视觉设计 1.2直通车推广图设计技巧 （一）掌控定位与风格一般推广图的尺寸为 310像素×310像素，是消费者进入店铺后首先获 取信息来源的图片。在通常情况下，直通车推广图 的定位直接影响该商品所要投放的位置，因此要通 过分析商品所对应消费群体的喜好、消费能力、潜 在购买意识和生活习惯等因素来确定设计风格与促 销方式。 （二）突出卖点与位置：由于篇幅、尺寸的限制， 推广图中出现的店铺或商品信息只能以徽标的形式放在 店招上，而集中展示商品本身才是主图的主要功能。 第一节 高点击率推广图视觉设计 1.2直通车推广图设计技巧 （三）图片清晰与色彩背景：清晰的图片更显质 感，清晰是直通车推广图最基本和最重要的要求。运 用Photoshop软件等软件把较暗的图片调整为较亮的 图片，把模糊的图片调整为清晰的图片等，都可以适 当提高图片本身的清晰度。 （四）懂得排兵与布阵：在设计直通车推广图时， 要注意优化文字信息，用最简洁的内容对应最精准的 商品特点，切忌胡乱排布文字，让画面杂乱不堪；所 有的文字统一居左或居右；一般情况下文字的字体、 颜色和行距等都要尽量统一。 第一节 高点击率推广图视觉设计 1.3 直通车推广图视觉设计案例——地灯直通车推广图 案例准备：启动软件，新建文件名称设置为“地灯”，宽度设置为“310像素”，高度设置为“310像素”，分辨率设置为“72像素/英寸”，颜色模式设置为“RGB颜色”、背景内容为“白色”的文档。将前景色设置为#55839a，按Alt+Delete组合键填充背景。在文件底部三分之一处绘制矩形选区，将填充颜色设置为#071b65。 第一节 高点击率推广图视觉设计 1.3 直通车推广图视觉设计案例——地灯直通车推广图 案例操作：调入“地灯”素材；绘制半圆形选区修改菜单下将羽化值设置为15像素，由上至下填充白色—透明渐变；绘制矩形，填充颜色#ded8a3，设置投影效果；输入文本“简约时尚”大小设置为30点，文本颜色设置为#071b65。字体和字号同“简约时尚”文本，将文本颜色设置为#0b2893。在文本下方绘制矩形选区，填充颜色#c2b75c，输入文本“精品灯具专场”字体设置为楷体，字号大小设置为14点，文本颜色设置为黑色；选择“矩形选框工具”绘制矩形选区，填充颜色设置为白色，输入文本“春节正常发货，顺丰包邮到家”字体设置为楷体，文本字号设置为11点，文本颜色设置为黑色。 第一节 高点击率推广图视觉设计 1.3 直通车推广图视觉设计案例——地灯直通车推广图 案例效果：选择“矩形工具”，属性栏中将填充颜色设置为无，描边颜色设置为白色，描边宽度设置为1点，描边类型设置为虚线，然后绘制合适的形状，完成效果如下图。 第一节 高点击率推广图视觉设计 1.4 钻展图视觉设计 （一）钻展图认知 放置在钻石展位的商品图片被称为钻展图，其全称为钻石展位图，是电商网店图片类广告位竞价投放平台。钻展图以CPM（每千次浏览单价）为计费单位，按流量竞价售卖广告位。因此，钻展图性价比的关键点在于点击率，在成本和展现量相同的情况下，钻展图的点击率越高，说明引流效果越显著，促成的购买率越高。范围广、定向精准和实时竞价是钻展图的三大特点。 （二）钻展图设计 1．尺寸各异 2．目标明确 3．创意无限 4．重点突出 5．风格统一 第二节 促销活动页视觉设计 2.1 促销活动页的制作方法 （一）互联下载：电商网店可以对在互联网上下载到本地的免费促销模块进行修改或者直接在线编辑，添加自己商铺的促销信息与公告。这种方法的优点是操作方便快捷且无须付费；缺点是在设计上不能满足个性化，有很强的限制性。 （二）自行设计：电商网店可以使用图像处理软件自行设计促销版面，并在网页上添加特效。这种方法的优点是在设计上可以尽展个性化方法，设计独一无二的商品促销活动页；缺点是对卖家的设计能力要求很高，需要掌握一定的设计理论及图像设计和网页制作技能。 （三）直接购买：目前淘宝网上有很多专门提供店铺装修服务和出售店铺装修模板的店铺，卖家可以直接购买。这种方法的优点是省力省心；缺点是要花费一定费用，如果购买专属商品促销模板，费用会更高一些。 第二节 促销活动页视觉设计 2.2 促销活动页广告尺寸 一般情况下可根据计算机显示的屏幕大小来设定，常见宽度有800像素、1024像素、1280像素、1440像素、1680像素或1920像素，高度可根据需求设置为150像素～800像素。 第二节 促销活动页视觉设计 2.3 促销活动页广告设计准则 （一）突出主题：促销广告内容从吸引眼球到被点击，通常只需几秒，这就要求促销广告要在有效时间内让消费者了解所有的活动信息。 （二）明确目标：不管是淡旺季促销，还是节假日活动，促销都是要达成购买的目的。 （三）统一风格：与钻展图设计方法类似，促销活动页同样要考虑设计元素的风格统一。 （四）布局排版：任何时候合理的布局与排版都能让浏览者感受到阅读的快乐，但布局与排版没有固定的规律，需要灵活运用与搭配，一图一样，才有利于视觉传达。 （五）搭配色彩：促销广告的配色十分重要，消费者在浏览店铺促销活动页广告时，最先映入眼帘的是画面整体色调，冷色或暖色，明朗鲜艳或素雅质朴，不同的色彩倾向会给人不同的印象。 第二节 促销活动页视觉设计 2.4 促销活动的类型 （一）会员、积分促销：这种促销方式不仅可以吸引老客户回购，而且可以拓展新客户，会员特惠、积分换购都可以增加消费者对网店、微店的忠诚度。 （二）折扣促销：折扣促销也称打折促销。折扣促销因为可以让消费者直接感受到实惠，所以是目前最常用的一种阶段性促销方式。折扣促销包括以节假日为由直接进行折扣，采用几件商品进行打包组合的变相折扣，选择合适的赠品做买赠促销活动等方式。 第二节 促销活动页视觉设计 2.4 促销活动的类型 （三）红包促销：红包促销是淘宝电商网店最常用的一种促销方式，卖家可以根据各自店铺的不同情况制定红包赠送规则和使用规则，让消费者直接得到实惠。 第二节 促销活动页视觉设计 2.4 促销活动的类型 （四）抽奖促销：每位消费者都有或深或浅的博彩心理，而抽奖促销正好迎合了消费者的这种心理，超值、有诱惑的奖品对消费者有很大的吸引力，简单易操作的参与方式会让消费者更乐于参与抽奖活动。 第二节 促销活动页视觉设计 2.4 促销活动的类型 （五）赠送样品促销：由于物流成本原因，这种促销方式目前在电商网店促销活动中应用得不是太多，但这种方式可以让消费者产生对产品的信任度和忠实度，尤其是效果过硬的化妆品、保健品等商品。 第二节 促销活动页视觉设计 2.4 促销活动的类型 （六）秒杀和拍卖促销：秒杀和拍卖促销是电商网店上最吸引人气的促销方式之一，“整点秒杀”“一元拍”都会让消费者有“机不可失”的感受，可以大大提升商品成交机会。 （七）电商平台的促销活动：淘宝等电商平台会不定期地组织不同活动，参与活动的卖家容易让更多的人关注到自身的店铺，有更多“露脸”的机会，因此卖家要积极参与活动，吸引更多的潜在客户。 第二节 促销活动页视觉设计 2.5 促销活动页视觉设计案例——女包促销广告 案例准备：启动软件，新建一个1024像素×500像素的文件，文件名称为女包促销广告，填充背景颜色为#0a0731；新建图层1及参考线定位菱形中心点，选择“多边形套索工具”属性栏中将羽化值设置为25像素，在背景右侧绘制菱形选区，填充颜色为#1c1396，然后复制生成图层1的拷贝图层，将其移至背景左侧。 第二节 促销活动页视觉设计 2.5 促销活动页视觉设计案例——女包促销广告 案例操作：打开资源库素材文件中的“女包”图片，“魔棒工具”抠取女包，并将其放置在右侧菱形内，复制女包放置在左侧菱形内，执行“图像”→“调整”→“色相/饱和度”命令，将左侧女包颜色更改为草绿色；选择“横排文字工具”输入文本“PRETTY”文本字体设置为黑体，文本颜色设置为白色，文本字号大小设置为90点，为文本叠加“橙-黄-橙”渐变；选择“横排文字工具”依次输入文本,文本字体设置为黑体，文本颜色设置为#e89019.选择“矩形工具”填充颜色设置为#e89019，描边颜色设置为无，在背景中心位置沿水平参考线绘制矩形，添加“斜面和浮雕”图层样式;输入文本“点击看详情”文本字体设置为黑体，文本颜色设置为白色。 第二节 促销活动页视觉设计 2.5 促销活动页视觉设计案例——女包促销广告 案例效果：调入”星空“素材，将图层模式更改为“颜色减淡”，把星空背景隐藏，选择“橡皮擦工具”设置为“柔边圆”，大小设置为100像素，然后使用“橡皮擦工具”在女包上进行涂抹，擦除覆盖在主图上的星星。清除参考线，完成最终效果，如图所示。 $$