第3章-图片设计篇课件

第3章图片设计篇第3章图片设计篇目录3.1图片设计的基本方法3.2广告图片的设计标准和制作步骤3.3网店常用图片设计目录3.1图片设计的基本方法3.1图片设计的基本方法3.1.1色彩篇1．色彩心理学2．色彩搭配（1）配色基础概念3.1图片设计的基本方法（2）色彩搭配方法（2）色彩搭配方法①色相差而形成的配色方式。●同色系配色①色相差而形成的配色方式。●类似色配色●类似色配色●互补色配色②对比配色而形成的配色方式。●互补色配色②对比配色而形成的配色方式。●明度对比配色●明度对比配色③色调调和而形成的配色方式。●明亮色调配色③色调调和而形成的配色方式。●柔和色调配色●柔和色调配色●暗系色调配色●暗系色调配色3.1.2字体篇1．字体的选择和设计（1）宋体类型3.1.2字体篇1．字体的选择和设计（2）黑体类型（2）黑体类型（3）书法体类型（3）书法体类型（4）创意体类型（4）创意体类型2．文字层次布局2．文字层次布局3．文字的区别和统一3．文字的区别和统一4．字体与风格的搭配4．字体与风格的搭配总结：一般来说，在广告设计中不是字体越多越好，最多使用两、三种字体。如果只使用一种字体的话，则可以通过变化字号、粗细及其斜体等来展示外形效果。字体太多不但没有突出阅读重点，反而会分散注意力，产生视觉疲劳。值得注意的是，在广告图设计中，把字号设置多大，是因字体而异的。12px对于英文字体Verdana来说已经完全足够了，但是要能轻易地阅读隶书，可能需要24px以上才行。设计师在创作中要考虑不同的字体适合不同的场景和风格呈现，字体的使用直接影响到设计内容的整体风格传达。根据设计的需要，有效地应用字体和图文排版，能让你的设计与众不同，有效提升图片点击率。总结：一般来说，在广告设计中不是字体越多越好，最多使用两、三3.1.3构图篇1．视觉均衡构图3.1.3构图篇1．视觉均衡构图2．对角线构图2．对角线构图3．特写式构图3．特写式构图4．九宫格构图4．九宫格构图5．三角形构图5．三角形构图6．黄金分割构图6．黄金分割构图第3章--图片设计篇ppt课件7．画面中心构图7．画面中心构图3.2广告图片的设计标准和制作步骤3.2.1广告图片的设计标准1．目标明确3.2广告图片的设计标准和制作步骤1．目标明确2．主题突出（1）主题突出之促销折扣主题2．主题突出（1）主题突出之促销折扣主题（2）主题突出之组合主题（2）主题突出之组合主题3．风格统一（1）风格统一之民族风3．风格统一（1）风格统一之民族风（2）风格统一之潮系（2）风格统一之潮系（3）风格统一之大气简约（3）风格统一之大气简约4．形式美观（1）第一个“3”，图片中的三元素：背景、文案、产品信息4．形式美观（1）第一个“3”，图片中的三元素：背景、文案、（2）第二个“3”，三段文字（2）第二个“3”，三段文字（3）第三个“3”，三种字体（3）第三个“3”，三种字体（4）第四个“3”，三种颜色（4）第四个“3”，三种颜色5．布局合理（1）布局合理之构图平衡5．布局合理（2）布局合理之势能（2）布局合理之势能第3章--图片设计篇ppt课件（3）布局合理之集群（3）布局合理之集群（4）布局合理之留白（4）布局合理之留白3.2.2广告图片的制作步骤1．解析工单（1）美工工单之设计规范解析3.2.2广告图片的制作步骤1．解析工单（2）美工工单范例（2）美工工单范例左图右字左字右图左图右字左字右图两边图中间字两边图中间字2．选择素材（1）素材选择之模特投射效应2．选择素材投射效应之期望值投射效应之期望值（2）素材选择之通感效应（2）素材选择之通感效应（3）素材选择之信噪比（3）素材选择之信噪比3．确定尺寸常用的尺寸获取方法如下：（1）在网页中，单击鼠标右键，选择“检查元素”3．确定尺寸常用的尺寸获取方法如下：打开DOM资源管理器，其中红框中蓝色阴影部分就是图片尺寸打开DOM资源管理器，其中红框中蓝色阴影部分就是图片尺寸（2）将网络图片下载到本地存储，右键单击本地图片，选择“属性”，打开属性对话框（2）将网络图片下载到本地存储，右键单击本地图片，选择“属性4．信息分层4．信息分层5．设计构图（1）适合正方形构图案例5．设计构图（1）适合正方形构图案例视觉均衡构图视觉均衡构图对角线构图对角线构图特写式构图特写式构图（2）适合长方形构图案例（2）适合长方形构图案例对角线构图对角线构图三角形构图三角形构图九宫格构图黄金分割构图九宫格构图黄金分割构图6．气氛渲染6．气氛渲染7．保存格式7．保存格式各格式的区别和在淘宝中的应用：JPEG/JPG：最常见的图片文件格式。有损压缩，不支持动画，不支持透明色。GIF：网上常见的小动画大多是GIF格式的，常用于网页动画，无损压缩，支持单一透明色。PNG：无损压缩，可调半透明色，不支持动画。WBMP：移动设备使用的一种标准图像格式，这种格式特定使用于WAP网页中。WBMP支持1位颜色，即WBMP图像只包含黑色和白色像素，而且不能制作得过大，目前此格式使用极少。各格式的区别和在淘宝中的应用：三种图片格式简单比较：JPEG与PNG图片格式对比：JPEG在图片压缩方面有很大的优势，但是JPEG是有损压缩，图片画质会有损失。一般屏幕截屏用PNG格式。JPEG格式质量高，而且文件更小。GIF与PNG图片格式对比：GIF在简单动画领域有优势，没有动画需求时，PNG完全可以取代GIF。总的来说，GIF分静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，在很多网页中应用的小动画都是GIF格式。GIF是将多幅图像保存为一个图像文件，从而形成动画。和JPG格式一样，GIF也是一种在网络上非常流行的图片格式，所以一般在网页中看到的动态图片都是GIF格式的。三种图片格式简单比较：在网络中小图标大多都采用PNG图片格式，PNG是一种图片存储格式，可以直接作为素材使用，因为它有一个非常好的特点，就是背景透明。在图片设计完成后，选择什么格式输出，主要是根据后台图片格式要求和图片格式特性来选择最佳输出的。提示：建立素材库建立常用的素材库，可以极大地提高效率，以适应淘宝活动的快速反应要求。常用的素材库包括PSD分层图库、常用符号、形式语言库和图片素材库。在网络中小图标大多都采用PNG图片格式，PNG是3.3网店常用图片设计3.3.1主图设计3.3网店常用图片设计主图发布后台主图发布后台1．主图设计之美工工单解析1．主图设计之美工工单解析2．主图设计之选择素材2．主图设计之选择素材3．主图设计之确定尺寸根据工单提供的尺寸700像素*700像素新建主图文件，如图3-91所示。同时我们要知道图片的这个尺寸对于主图的呈现是最佳效果，而且在主图尺寸大于等于700像素*700像素时，系统会自动提供放大镜功能，更有利于产品呈现（放大镜功能见后文详解）。4．主图设计之信息分层第一层：图片—产品主体第二层：产品LOGO

图片—产品倒影第三层：图片—背景图片（白色背景或者图片背景）3．主图设计之确定尺寸第3章--图片设计篇ppt课件5．主图设计之构图5．主图设计之构图第3章--图片设计篇ppt课件微调产品主体的画面占比及位置微调产品主体的画面占比及位置6．主图设计之细节渲染6．主图设计之细节渲染如果没有图片背景要求，则可以再加一个能够很好地衬托主体的背景如果没有图片背景要求，则可以再加一个能够很好地衬托主体的背景7．主图设计之保存主图7．主图设计之保存主图白底主图效果白底主图效果保存加背景图片保存加背景图片加背景主图比白底主图在色彩对比上更醒目加背景主图比白底主图在色彩对比上更醒目小结：主图设计注意事项发布产品时，淘宝后台会提示主图文件大小不能超过3MB，否则不能上传。主图尺寸在大于等于700像素*700像素时，系统默认提供放大镜功能。商品主图要清晰，文字和色块不能太多，不能干扰商品主体。目的：进一步提升用户体验，同时提高卖家商品的点击转化率，给卖家带来更多的优质流量。措施：将牛皮癣的严重程度作为一个排序因素参与到排序中，不同的严重程度会对排序有不同的影响。在价格排序下，会对严重牛皮癣的商品默认不进行展示。小结：主图设计注意事项目的：严重牛皮癣图片范例严重牛皮癣图片范例不影响搜索排序的标准图片范例不影响搜索排序的标准图片范例3.3.2颜色图设计3.3.2颜色图设计1．颜色图设计之美工工单解析1．颜色图设计之美工工单解析2．颜色图设计之选择素材2．颜色图设计之选择素材3．颜色图设计之确定尺寸3．颜色图设计之确定尺寸4．颜色图设计之信息分层由于颜色图画面简洁，信息一共分三层。第一层：图片—产品主体第二层：颜色文字产品LOGO第三层：图片—白底背景4．颜色图设计之信息分层5．颜色图设计之构图5．颜色图设计之构图6．颜色图设计之细节渲染6．颜色图设计之细节渲染7．颜色图设计之保存格式7．颜色图设计之保存格式颜色图效果颜色图效果系列颜色图效果注意事项：在制作产品颜色图时，图片的风格、背景、构图和LOGO位置都要保持一致，以保证发布到页面中形式统一、直观的效果。系列颜色图效果注意事项：在制作产品颜色图时，图片的风格、背景3.3.3店内海报图设计1．店内海报图设计之工单解析3.3.3店内海报图设计1．店内海报图设计之工单解析2．店内海报图设计之选择素材2．店内海报图设计之选择素材3．店内海报图设计之确定尺寸3．店内海报图设计之确定尺寸4．店内海报图设计之信息分层设计店内海报图的目的是为了展示产品卖点，同时突出促销信息。在制作过程中，精准第一层信息后，其他层信息依次罗列。信息分层如下：第一层：图片—产品主体第二层：文案—促销信息第三层：文案—产品卖点第四层：图片—背景图片+细节渲染4．店内海报图设计之信息分层5．店内海报图设计之构图5．店内海报图设计之构图店内海报图设计之构图步骤2店内海报图设计之构图步骤26．店内海报图设计之细节渲染6．店内海报图设计之细节渲染7．店内海报图设计之保存格式7．店内海报图设计之保存格式店内海报图存储格式店内海报图存储格式店内海报图效果店内海报图效果3.3.4直通车图设计3.3.4直通车图设计第3章--图片设计篇ppt课件1．直通车图设计之工单解析1．直通车图设计之工单解析2．直通车图设计之选择素材2．直通车图设计之选择素材3．直通车图设计之确定尺寸3．直通车图设计之确定尺寸4．直通车图设计之信息分层首先确定产品主体是第一层信息，因为直通车广告图的目标人群对产品主体比较关注；然后确定第二层信息是，促销折扣，因为页面版式的关系，价格部分不是十分醒目，而关于产品价格又是买家比较关注的点；最后确定第三层信息是产品广告语和品牌LOGO，第四层信息是背景层，用于渲染气氛。信息分层如下：第一层：图片—产品主体第二层：文案—促销信息:55包邮第三层：文案—美国原装进口（突出品质），品牌信息第四层：图片—背景图片+细节渲染4．直通车图设计之信息分层5．直通车图设计之构图5．直通车图设计之构图直通车图设计之构图步骤2直通车图设计之构图步骤26．直通车图设计之细节渲染6．直通车图设计之细节渲染7．直通车图设计之保存格式7．直通车图设计之保存格式直通车图效果直通车图效果3.3.5活动图片设计3.3.5活动图片设计1．活动图片设计之工单解析1．活动图片设计之工单解析2．活动图片设计之选择素材2．活动图片设计之选择素材3．活动图片设计之确定尺寸3．活动图片设计之确定尺寸4．活动图片设计之信息分层一般来说，除了个别活动平台，比如聚划算，其他大部分活动都要求使用白底图片，天天特价活动要求使用白底图片。信息分层如下：第一层：产品主体第二层：白色背景4．活动图片设计之信息分层5．活动图片设计之构图5．活动图片设计之构图6．活动图片设计之细节渲染天天特价活动要求图片无LOGO、无水印、无文字信息。7．活动图片设计之保存格式6．活动图片设计之细节渲染错误图片示范错误图片示范●活动图片之聚划算相关商品图片优化的四个方面：（1）建议图片背景只选择真实拍摄的实景或者单色背景其中一种（包括同一色调的渐变），不建议使用多色或者多个实拍背景，不建议出现水印。（2）建议不要使用画中画，商品图片需要展示多个主体（模特、商品）时，建议保持同类主体（模特、商品）之间比例一致且背景统一，不建议多色商品展示与色卡展示同时使用。（3）原则上，商品图片不建议添加任何文字内容（除LOGO以外）。若一定要添加文字内容，文案不得显示在模板规定范围（300像素*300PX）之外。不得使用规定以外的任何其他字体（规定字体是指方正兰亭黑体和商家已获授权的其他字体），字号不小于32号（以原图尺寸为参照），文字颜色不限但不得使用渐变、描边、投影等效果及背景；文案中不得出现折扣、价格、原价等重复信息。（4）LOGO统一放置在画面左上角，不得添加底色，显示大小最宽不超过180像素，最高不超过120像素。●活动图片之聚划算相关商品图片优化的四个方面：3.3.6钻展图片设计3.3.6钻展图片设计1．钻展图片设计之工单解析1．钻展图片设计之工单解析2．钻展图片设计之选择素材2．钻展图片设计之选择素材3．钻展图片设计之确定尺寸3．钻展图片设计之确定尺寸4．钻展图片设计之信息分层在有限的画面上，越啰唆越失败，所以从促销元素到设计元素都务必精简，并重墨在主要素材呈现上。操作时要精简并放大主要主题，根据工单内容和素材的选择，信息分层如下：第一层：文案—最后1天疯抢第二层：文案—2015秋冬女装新品图片—模特主体第三层：文案毛呢/毛衣/连衣裙/裤子“焕新价28元起”图片—LOGO第四层：图片—背景+背景细节渲染4．钻展图片设计之信息分层5．钻展图片设计之构图5．钻展图片设计之构图6．钻展图片设计之细节渲染6．钻展图片设计之细节渲染7．钻展图片设计之保存格式7．钻展图片设计之保存格式8．钻展图片审核8．钻展图片审核整改后的钻展图片整改后的钻展图片钻展图片的创意审核注意事项主要分两个方面：（1）创意图片本身是否有违规信息。（2）链接页面和店铺是否有违规信息。任何一方面有问题，都会被拒绝。其中笔者搜索出钻展审核中常见的十大反面案例，希望大家在应用中引以为鉴。第一大问题：图片模糊、欠美观——高居素材拒绝排行榜榜首。第二大问题：最高级别的文字表述——“最低价、独家、领衔、首发、第一”第三大问题：资质品牌类——品牌产品需要提供品牌注册或者授权资质。第四大问题：资质代言类——明星代言需要提供授权书资质钻展图片的创意审核注意事项主要分两个方面：第五大问题：严禁推广红包、优惠券等骗点击图片，iPhone周边产品无资质不得推广，高危违禁用词、所有减肥、丰胸、壮阳类产品即使资质齐全也不能推广，不论图片还是店铺均不能出现相关表述，内衣类目要特别注意，绝对不能出现瘦腿、丰胸、