《第3章图片设计篇ppt课件.ppt》由会员分享，可在线阅读，更多相关《第3章图片设计篇ppt课件.ppt（143页珍藏版）》请在三一办公上搜索。
1、第3章,图片设计篇,目录,3.1图片设计的基本方法3.2广告图片的设计标准和制作步骤3.3网店常用图片设计,3.1 图片设计的基本方法3.1.1 色彩篇1色彩心理学2色彩搭配（1）配色基础概念,（2）色彩搭配方法,色相差而形成的配色方式。同色系配色,类似色配色,互补色配色,对比配色而形成的配色方式。,明度对比配色,色调调和而形成的配色方式。明亮色调配色,柔和色调配色,暗系色调配色,3.1.2 字体篇,1字体的选择和设计（1）宋体类型,（2）黑体类型,（3）书法体类型,（4）创意体类型,2文字层次布局,3文字的区别和统一,4字体与风格的搭配,总结：一般来说，在广告设计中不是字体越多越好，最多使用
2、两、三种字体。如果只使用一种字体的话，则可以通过变化字号、粗细及其斜体等来展示外形效果。字体太多不但没有突出阅读重点，反而会分散注意力，产生视觉疲劳。值得注意的是，在广告图设计中，把字号设置多大，是因字体而异的。12px 对于英文字体Verdana 来说已经完全足够了，但是要能轻易地阅读隶书，可能需要24px 以上才行。设计师在创作中要考虑不同的字体适合不同的场景和风格呈现，字体的使用直接影响到设计内容的整体风格传达。根据设计的需要，有效地应用字体和图文排版，能让你的设计与众不同，有效提升图片点击率。,3.1.3 构图篇,1视觉均衡构图,2对角线构图,3特写式构图,4九宫格构图,5三角形构图,
3、6黄金分割构图,7画面中心构图,3.2 广告图片的设计标准和制作步骤3.2.1 广告图片的设计标准,1目标明确,2主题突出,（1）主题突出之促销折扣主题,（2）主题突出之组合主题,3风格统一,（1）风格统一之民族风,（2）风格统一之潮系,（3）风格统一之大气简约,4形式美观,（1）第一个“3”，图片中的三元素：背景、文案、产品信息,（2）第二个“3”，三段文字,（3）第三个“3”，三种字体,（4）第四个“3”，三种颜色,5布局合理（1）布局合理之构图平衡,（2）布局合理之势能,（3）布局合理之集群,（4）布局合理之留白,3.2.2 广告图片的制作步骤,1解析工单（1）美工工单之设计规范解析,（
4、2）美工工单范例,左图右字,左字右图,两边图中间字,2选择素材（1）素材选择之模特投射效应,投射效应之期望值,（2）素材选择之通感效应,（3）素材选择之信噪比,3确定尺寸,常用的尺寸获取方法如下：（1）在网页中，单击鼠标右键，选择“检查元素”,打开DOM 资源管理器，其中红框中蓝色阴影部分就是图片尺寸,（2）将网络图片下载到本地存储，右键单击本地图片，选择“属性”，打开属性对话框,4信息分层,5设计构图,（1）适合正方形构图案例,视觉均衡构图,对角线构图,特写式构图,（2）适合长方形构图案例,对角线构图,三角形构图,九宫格构图,黄金分割构图,6气氛渲染,7保存格式,各格式的区别和在淘宝中的应用
5、：JPEG/JPG：最常见的图片文件格式。有损压缩，不支持动画，不支持透明色。GIF：网上常见的小动画大多是GIF 格式的，常用于网页动画，无损压缩，支持单一透明色。PNG：无损压缩，可调半透明色，不支持动画。WBMP：移动设备使用的一种标准图像格式，这种格式特定使用于WAP 网页中。WBMP 支持1 位颜色，即WBMP 图像只包含黑色和白色像素，而且不能制作得过大，目前此格式使用极少。,三种图片格式简单比较：JPEG 与PNG 图片格式对比：JPEG 在图片压缩方面有很大的优势，但是 JPEG 是有损压缩，图片画质会有损失。一般屏幕截屏用 PNG 格式。JPEG 格式质量高，而且文件更小。G
6、IF 与PNG 图片格式对比：GIF 在简单动画领域有优势，没有动画需求时，PNG 完全可以取代GIF。总的来说，GIF 分静态GIF 和动画GIF 两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，在很多网页中应用的小动画都是GIF 格式。GIF 是将多幅图像保存为一个图像文件，从而形成动画。和JPG 格式一样，GIF 也是一种在网络上非常流行的图片格式，所以一般在网页中看到的动态图片都是GIF 格式的。,在网络中小图标大多都采用PNG 图片格式，PNG 是一种图片存储格式，可以直接作为素材使用，因为它有一个非常好的特点，就是背景透明。在图片设计
7、完成后，选择什么格式输出，主要是根据后台图片格式要求和图片格式特性来选择最佳输出的。提示：建立素材库 建立常用的素材库，可以极大地提高效率，以适应淘宝活动的快速反应要求。常用的素材库包括PSD 分层图库、常用符号、形式语言库和图片素材库。,3.3 网店常用图片设计3.3.1 主图设计,主图发布后台,1主图设计之美工工单解析,2主图设计之选择素材,3主图设计之确定尺寸根据工单提供的尺寸700 像素*700 像素新建主图文件，如图3-91 所示。同时我们要知道图片的这个尺寸对于主图的呈现是最佳效果，而且在主图尺寸大于等于700 像素*700 像素时，系统会自动提供放大镜功能，更有利于产品呈现（放大
8、镜功能见后文详解）。4主图设计之信息分层第一层：图片产品主体第二层：产品LOGO 图片产品倒影第三层：图片背景图片（白色背景或者图片背景）,5主图设计之构图,微调产品主体的画面占比及位置,6主图设计之细节渲染,如果没有图片背景要求，则可以再加一个能够很好地衬托主体的背景,7主图设计之保存主图,白底主图效果,保存加背景图片,加背景主图比白底主图在色彩对比上更醒目,小结：主图设计注意事项发布产品时，淘宝后台会提示主图文件大小不能超过3MB，否则不能上传。主图尺寸在大于等于700像素*700像素时，系统默认提供放大镜功能。商品主图要清晰，文字和色块不能太多，不能干扰商品主体。,目的：进一步提升用户体
9、验，同时提高卖家商品的点击转化率，给卖家带来更多的优质流量。措施：将牛皮癣的严重程度作为一个排序因素参与到排序中，不同的严重程度会对排序有不同的影响。在价格排序下，会对严重牛皮癣的商品默认不进行展示。,严重牛皮癣图片范例,不影响搜索排序的标准图片范例,3.3.2 颜色图设计,1颜色图设计之美工工单解析,2颜色图设计之选择素材,3颜色图设计之确定尺寸,4颜色图设计之信息分层由于颜色图画面简洁，信息一共分三层。第一层：图片产品主体第二层：颜色文字 产品LOGO第三层：图片白底背景,5颜色图设计之构图,6颜色图设计之细节渲染,7颜色图设计之保存格式,颜色图效果,系列颜色图效果,注意事项：在制作产品颜
10、色图时，图片的风格、背景、构图和LOGO 位置都要保持一致，以保证发布到页面中形式统一、直观的效果。,3.3.3 店内海报图设计,1店内海报图设计之工单解析,2店内海报图设计之选择素材,3店内海报图设计之确定尺寸,4店内海报图设计之信息分层设计店内海报图的目的是为了展示产品卖点，同时突出促销信息。在制作过程中，精准第一层信息后，其他层信息依次罗列。信息分层如下：第一层：图片产品主体第二层：文案促销信息第三层：文案产品卖点第四层：图片背景图片+细节渲染,5店内海报图设计之构图,店内海报图设计之构图步骤2,6店内海报图设计之细节渲染,7店内海报图设计之保存格式,店内海报图存储格式,店内海报图效果,
11、3.3.4 直通车图设计,1直通车图设计之工单解析,2直通车图设计之选择素材,3直通车图设计之确定尺寸,4直通车图设计之信息分层 首先确定产品主体是第一层信息，因为直通车广告图的目标人群对产品主体比较关注；然后确定第二层信息是，促销折扣，因为页面版式的关系，价格部分不是十分醒目，而关于产品价格又是买家比较关注的点；最后确定第三层信息是产品广告语和品牌LOGO，第四层信息是背景层，用于渲染气氛。信息分层如下：第一层：图片产品主体第二层：文案促销信息:55 包邮第三层：文案美国原装进口（突出品质），品牌信息第四层：图片背景图片+细节渲染,5直通车图设计之构图,直通车图设计之构图步骤2,6直通车图设
12、计之细节渲染,7直通车图设计之保存格式,直通车图效果,3.3.5 活动图片设计,1活动图片设计之工单解析,2活动图片设计之选择素材,3活动图片设计之确定尺寸,4活动图片设计之信息分层 一般来说，除了个别活动平台，比如聚划算，其他大部分活动都要求使用白底图片，天天特价活动要求使用白底图片。信息分层如下：第一层：产品主体第二层：白色背景,5活动图片设计之构图,6活动图片设计之细节渲染天天特价活动要求图片无LOGO、无水印、无文字信息。7活动图片设计之保存格式,错误图片示范,活动图片之聚划算相关,商品图片优化的四个方面：（1）建议图片背景只选择真实拍摄的实景或者单色背景其中一种（包括同一色调的渐变）
13、，不建议使用多色或者多个实拍背景，不建议出现水印。（2）建议不要使用画中画，商品图片需要展示多个主体（模特、商品）时，建议保持同类主体（模特、商品）之间比例一致且背景统一，不建议多色商品展示与色卡展示同时使用。（3）原则上，商品图片不建议添加任何文字内容（除LOGO 以外）。若一定要添加文字内容，文案不得显示在模板规定范围（300 像素*300PX）之外。不得使用规定以外的任何其他字体（规定字体是指方正兰亭黑体和商家已获授权的其他字体），字号不小于32 号（以原图尺寸为参照），文字颜色不限但不得使用渐变、描边、投影等效果及背景；文案中不得出现折扣、价格、原价等重复信息。（4）LOGO 统一放置
14、在画面左上角，不得添加底色，显示大小最宽不超过180 像素，最高不超过120 像素。,3.3.6 钻展图片设计,1钻展图片设计之工单解析,2钻展图片设计之选择素材,3钻展图片设计之确定尺寸,4钻展图片设计之信息分层在有限的画面上，越啰唆越失败，所以从促销元素到设计元素都务必精简，并重墨在主要素材呈现上。操作时要精简并放大主要主题，根据工单内容和素材的选择，信息分层如下：第一层：文案最后1 天疯抢第二层：文案2015 秋冬女装新品 图片模特主体第三层：文案毛呢/毛衣/连衣裙/裤子“焕新价28 元起”图片LOGO第四层：图片背景+背景细节渲染,5钻展图片设计之构图,6钻展图片设计之细节渲染,7钻展
15、图片设计之保存格式,8钻展图片审核,整改后的钻展图片,钻展图片的创意审核注意事项主要分两个方面：（1）创意图片本身是否有违规信息。（2）链接页面和店铺是否有违规信息。任何一方面有问题，都会被拒绝。其中笔者搜索出钻展审核中常见的十大反面案例，希望大家在应用中引以为鉴。第一大问题：图片模糊、欠美观高居素材拒绝排行榜榜首。第二大问题：最高级别的文字表述“最低价、独家、领衔、首发、第一”第三大问题：资质品牌类品牌产品需要提供品牌注册或者授权资质。第四大问题：资质代言类明星代言需要提供授权书资质,第五大问题：严禁推广红包、优惠券等骗点击图片，iPhone 周边产品无资质不得推广，高危违禁用词、所有减肥、
16、丰胸、壮阳类产品即使资质齐全也不能推广，不论图片还是店铺均不能出现相关表述，内衣类目要特别注意，绝对不能出现瘦腿、丰胸、瘦身类用词。第六大问题：聚划算资质问题聚划算客户可以用“聚划算”字样，但是必须提供聚划算排期资质。第七大问题：图片和链接中均不得出现模拟系统操作的虚假倒计时、箭头、鼠标手等虚假内容。,第八大问题：严禁轮播号遮挡右下方文案，所有焦点图展位都要注意此问题，比如淘宝首页焦点图，右下角切记不要放文案，以免被遮挡，影响信息的传递与点击率。,第九大问题：特殊功效产品资质，若使用祛斑、防晒、脱毛等特殊功效用词，必须提供相关特殊功效资质，否则一律禁止使用，但祛斑改成淡斑可直接使用。,第十大问
17、题：禁止出现100%绝对性文案,本章总结本章从图片的基本设计方法、图片的制作步骤以及网店常用的图片案例这几个部分给大家展示了图片设计的各个要点和制作技巧。在本章内容中，我们一直在强调图片制作思路的重要性，有了清晰的制作方向和思路，才能更好地通过制图技巧来呈现作品。在图片设计基本方法部分和大家分享了关于图片制作必备的色彩、构图、字体以及图片制作标准。接下来介绍了图片制作步骤的通用技巧，以及在流量入口图片制作过程中大家要注意流量入口不同，设计思路和呈现技巧也不同。既然图片要用在淘宝站内的营销中，那么遵守淘宝站内各个细分的图片规则就显得尤为重要了。因为淘宝是一直在变化着的，所以大家也要紧跟变化，了解和遵守最新规则，以避免信息不对称造成不当操作。,本章练习题1图片制作的标准是什么？2常规图片的制作步骤是什么？3不同流量入口图片制作中的差异性是什么？,谢谢,第3章 结束,
