电商玩设计:如何使海报、广告图当中的元素更加合理与丰富?

　　
　　我们聊聊图片制作中的元素构成与如何应用这些元素让图片内容更合理、更丰富。根据大的框架我们首先可以给一张图片中的元素分为以下四类：

　　【1】背景、【2】主体、【3】文字、【4】装饰
　　

　　看数字看到眼晕请自行负责
　　我们一一去剖析每种元素的合理应用与方法。
　　
　　一、背景
　　我们在制作图片的时候一般会有以下几种背景的应用形式：纯色、渐变、图案、固有背景、 合成背景。
　　
　　纯色背景
　　(多应用于整洁、简单、明确、大气的海报）

　　渐变背景
　　（多应用于高端、上档次、清新的海报设计当中）

　　图案背景
　　（多应用于活力、张扬、青春、宣传促销的海报设计中）

　　原有环境
　　（多应用于体现整体性、规整性及真实性的海报当中）

　　新的环境
　　（多应用于体现主体性与主题性的海报设计）
　　背景的应用往往会对一张图片起到决定性的作用，我们来谈一谈具体的一些方法吧。
　　背景元素在使用的时候最需要注意的首先就是配色问题，简单来说就是弄出背景与其他元素的融合与反差。一般情况下有以下的几种搭配方式：近似色融合、互扑色反差、亮暗色反差。并且在实际的操作中，往往都是文字比其他元素需要与背景有更强烈的反差感。
　　近似色的融合使整个画面和谐安定

　　那么如何使用好近似色昵，这里我给出两个具体的方法（哇哈哈哈~~~你们等的就是这个吧！不讲方法那是我的教程吗~~~~四面八方各种颜色的板砖袭来！！！！！)
　　第一种方法是通过吸管去吸主体的颜色。

　　第二种方法是将主体物复制一份并将下方的主体物放大，然后滤镜一模糊一高斯模糊，确定好合适的数值。这种方法会使主体跟背景之间有更好的融合过度。文字还是通过第一种方法吸取某一个临近的色块。

　　互补色的反差使整个画面具有对比

　　互扑色的应用往往是针对于需要有强烈的画面渲染和对比的时候，还是比较容易上手的。我们 首先需要了解一个东西就是6位色相环，既RGB与CMY两种颜色模式之间的规律。正三角形顺时 针方向从上依次为RGB，倒三角形顺时针方向从下依次为CMY，而我们所说的互补色就是相对应的两个颜色系列，既红与青、黄与蓝、绿与品红。这里需要额外提到的是我们在做一些光效的时候 ，可以往阴影部分适当增加一些补色进去，会让阴影更加真实。

　　如果我们还是记不住互补色为哪两种色系，也可以打开Photoshop当中的图像–>调整–>色彩平衡。也会有非常明确的补色关系。

　　我们人眼所能识别的颜色直观的去定义只有红、橙、黄、绿、青、蓝、紫、品红八种色系，所以不管我们的主体是什么颜色，我们都可以寻找到他相近的补色，如果实在无法用肉眼去判断，我 们也可以使用拾色器去吸当前的颜色并找到他的具体色相。
　　在相较于近似配色，补色配色能更加突出主体的轮廊，使主体更加明确，时比更加强烈。

　　亮暗色的反差使整个画面具有冲击性

　　亮与暗是一种很极致的反差效果，就好比漆黑的房间中哪怕只是点燃了一根火柴也会有极强烈的冲击感。我们可以仔细的回想自己看过的一些作品，在绝大多数成熟的作品中亮暗对比、光的渲 染、阴影的处理都是必不可少的环节。
　　亮部处理方法
　　背景中的亮部往往都是利用“光”去完成的，光的应用也有很多种，我推荐几个我比较常用的方式，首先第一个是一个滤镜，叫做光线工厂。左边部分为效果区，右边 为调整区，一目了然，比较容易上手。

　　第二种方法是使用光的素材，并通过模式中的滤色、柔光、叠加等方式对素材进行处理。
　　黑底的光素材通过滤色可以很轻松的过滤掉黑色部分

　　第三种方法是通过自行绘制来实现效果，也许新手会感觉比较生疏，不太容易控制，但是熟练应用之后会给你的设计带来很多的便利，我平时很少使用渐变工具去制作渐变效果，而是通过画笔去绘制渐变效果，这祥可以让渐变更加灵活，也给你的设计带来更多的可能性。
　　下图示范，如需在一个黑背景上画出一种紫色到蓝色的过度。首先新建一个空白图层，用柔边 的画笔，不透明度在10%—30%之间，选择适当的画笔大小在图层上绘制紫色，再次新建空白图层，使用上述方法绘制蓝色，两个图层之间可以调整不同的模式，如滤色、柔光、变亮等查看不 同效果，当然如果正常情况下也很舒服可以直接使用正常模式。这里需要记住的是我们尽量新建空白图层去绘制，这样如果需要移动光效也会变的非常简便。

　　上图所示的光效效果很多都是通过绘制的方式完成的。
　　暗部处理方法
　　暗部处理的常用方法其实跟亮部处理的方式雷同，这里不再重复啰嗦。我说说我平时在处理图片时会经常用来处理暗部的方法—camera raw滤镜。ps在cc版本之后可以自由使用camera raw滤镜是我个人认为ps近几年改版当中最具有突破的一次，ACR可以广泛应用于图层中，对图片的处理带来了巨大的便捷。我们可以在滤镜菜荦中找到camera raw滤镜命令。
　　首先是基本选项中的高光、阴影、白色、黑色调节块可以方便自如的控制你需要调节的亮暗区域，其次清晰度选项可以帮助你把图片锐化程度进一步提升的同时减少锯齿的出现。

　　效果选项中的剪裁后晕影可以轻松制作四角加暗效果，并且灵活性颇高。

　　下图所示，四角加暗效果对图片的质感有着非常巨大的提升，本来感觉平平的图片会因为亮暗的巨大反差而具有很强的视觉冲击性。

　　二、主体
　　没有主体的画面是散乱儿飘渺的，而如何在画面中明确表现出主体也是很多设计师非常头疼的问题，我在这里总结几种方法可以让我们有更多的选择去处理我们的主体。
　　我们要先搞清楚主体的画面占用比，拿淘宝的一个banner来说，画布尺寸是990X400,而我的产品是一个鱼竿，那么当我的鱼竿以全貌的形式呈现在这张banner当中会出现什么情况：

　　我们可以看到不管我们是横放竖放还是斜放都会给我们的图片带来大量的空白，这祥会使我们 的图片空洞无力毫无美感。这就是主体的画面占用比太低（而正常情况下主体的画面占用比应在 30%以上）和主体的形状局限性所带来的一种不便，面对这种情况我们需要做的就是放大主体，
　　不需要完整呈现，这也是为什么很多以人物为主体的图片都不会把人整体放在图片中的原因，其实 人的整体形状跟鱼竿也是类似的都是长条形，所以处理人物的时候也是适当放大或者多放几个人物在统一画面当中。
　　当我们把主体放大并放到适当位置发现还是有大量空白的时候也可以使用复制错位并降低透明度的方式增加主体的画面占用比。

　　通过时主体画面占用比的分析，我们可以总结出一个方法就是当主体面积不够时，可以通过放大主体体积或增加主体数量来维持主体的平衡，如下作品展示；

　　当然，主体所占的比重在一副图中大多数情况是要比其他元素要大的。
　　大多数设计师在自己的设计之路上会经历一段时期，做出的东西自己也能感觉有问题，但是就是找不到问题出在哪里，我在这里提供几个例子，可能会对大家摆脱这个阶段有一些帮助。
　　首先是要留意元素间小规模贴近叠加的问题，很多元素小范围内非常贴近甚至直接重叠，会使画面变得混乱拥挤。

　　处理好元素间的贴合问题会让画面减少凌乱点，在作图的时候需要多多留意。
　　第二个需要留意的是元素与边缘：我们在制作图片前都会预留出血，但是这不代表除出血以外的边缘地区就可以随意靠近，大多数情况下，我们还是要始终保持各元素与画布的边缘有一定的距离（特定装饰除外）。在图形中如果加人了文字，也要保证当前文字不要紧贴图形四周，如下图， 第一个要比第二个舒服的多，我们要学会给各类元素的边缘留出空间。
　　
　　第三个需要留意画面中元素的分布情况：如果把你画面中的某一个元素或某一区域元素看做 一个点，那么观察这祥的点是有规律的还是散乱无章的，一般情况下分布有问题的图会有两种，一 个是整个画面基本都是大点而且不规律，另一个是整个画面有多个小点且不规律。

　　全图基本是大点且不规律很大程度上说明你的图片找不到主体

　　全图基本是小点且分布不均很大程度上说明你的图片元索凌乱。而较为合理的元素分布大体上应该是这个祥子的；

　　左右/上下分布

　　中心分布

　　满版分布
　　(由于产品的局限性，满版分布在电商中的应用较少）
　　最后就是需要注意元素的清晰度，首先就是图源的分辨率要足够的大并且清晰度正常，第二是在处理过程中尽量使用智能对象使图片不会出现丢失像素变模糊的问题。

　　三、文字
　　文字在图片应用中有三种比较常见的形式一一文字为主、图文并重、文字为辅。文字为主和图文并重的图片大体有两种表现形式一排版为主、特效为主。而以文字为辅的图形因为文字不需要太过突出，多以排版形式为主，极少使用特效去影响主体。

　　文字为主——排版为主
　　（想要突出文字，但文案字数过多，又不想单调排列的时候可首选）

　　文字为主——特效为主
　　（想要突出文字，并且具有明确的主标题，文案字数较少的时候可首选）

　　图文并重——排版为主
　　（图片跟文字都要兼顾，尤其是电商领域极为常用）

　　图文并重——特效为主
　　（想要突出表达某一文字，但又需要融合饧景或产品，需要较高的技术能力）

　　文字为辅
　　（以图片为主，往往是满版形式，文字作为辅助在图片四周分布，不会使用夸张的特效） @Naniee是我非常欣赏的设计师，想要提高海报水平的朋友可以多去字习他的作品。
　　下边方法来了：
　　很多朋友在做文字的排版时总觉得自己的文字非常的别扭，但又找不到适合的解决方法，其实文字的排版，简单来说只需要注意以下两点即可一团结性与对比性。
　　文字在应用中大部分情况下一定不是单个存在的，而会是以一种组合的形式出现，而通俗来讲这个文字的组合就好比咱们身边的朋友圈，团结性一好朋友肯定是团结友爱，激情四射的；对比性一每个人的 仰貌，性格都不同，或高矮，或胖瘦，有张扬有内敛……
　　关于团结性一通俗来讲就是各种大小文字集结在某一个集体里，我们在做文字的时候需要做的就是让这群家伙在一个合理的限定范围之内各种抱团，大部分情况下这个限定范围可以用一个矩形去表示，我们从上边的例图中每种选择一个来看。

　　在制图过程中我们不要吝啬参考线，尽量让图片中的文字元素找到集体感，让团结的爱不仅在小范围内传播，也要扩散到更广阔的大集体中，这样画面才不会丢失整体。也许你现在回头去看你 的一些作品会发现很多文字正在散兵游勇，单独作战，而只需要简单的几条参考线，你就会发现团结的力量是多么的伟大。
　　对比性是文字排版的核心，没有对比的文字看起来呆滞死板，而有了对比之后的文字会更具有观赏性和灵动性。而跟我之前提到的人的体貌性格特征一样，文字的对比用来用去也无非就是那么几点：大小对比、高低对比、粗细对比、顔色对比、松紧对比。
　　有的朋友又会问，那这些对比我即便是知道了但是也不知道怎么用好啊，其实这也是很简单的一个问题，就跟我们身材各异的人，总 归能买到合适的衣服一样，在大部分情况下这些时比也都是有规律和方法可循的。首先我们需要了解在我们团结友爱的文字集体，主要是由主标题、副标题、描述、正文、其他几位成员组成的。
　　在文字形状部分，主标题就像是个别领导，膀大腰圆，所以会比较大，比较粗。而副标题由于长期 跟领导混所以也会比较大一坨，但是要突出领导的地位还是会收敛一些；最后就是描述部分，描述 就好比职员，肯定是不可以抢领导的风头的所以会跟领导完全相反又小又细。
而正文就好比平头百姓，都是比较平平凡凡，但是可能会有各别领导眼中的“愤青”会在百姓这个集体中做一些反常的举动；其他其实是最可怜的，用时下比较流行的说法就是临时工，有时候需要在那个位置上，而有时候可以直接去掉。
　　而在颜色部分，往往都是主标题占据主导，要么最亮要么最暗，其余的文字颜色都要配合主标题的颜色进行挑选和更改。当然，部分图片可能会有多个领导班子，县长、市长、 ，我们用图片去明确一下这种关系。

　　多领导体系电商
　　上图为了节省时间我就不一一标注了……大家应该能感受到。
　　如果看到这里你还是觉得对于文字的排版无从下手的话，我再提供一个更简单的方法，虽然死板但是不会出现太多的错误，以后可以在这个基础上不断完善、不断提高，以电商banner为例， 我们的排版可以围绕主标题的字数多少来应用两种方法，当然电商中段落数量尽量不要少于三句超过五句。
　　如果不够三句可以把其中觉得是主标题的那段翻译成英文字，现在翻译英文方式很多，而且也没有必要害怕对不对，没有人那么闲跟你在英文对错上较真，实在对英文没有把握，翻译成拼 音也是可以的。
　　如果文案过多，也不要紧，我们可以把除了主副标题以外的文案都当做是描述来处理，方法后边我会去讲，我们先以这三段话做例子【一周不重样】【出街就要吸引眼球】【作为女人必须时尚精致】首先先不要考虑那么多，直接在画布上打上文案。

　　比如“一周不重样”是主标题（主标题字数少），就要选择一种又粗又大的字体，一般这种字体名字中都带“黑”“粗”“劲”字。选择另外一段作为副标题也应用这个字体，最后剩余的一段选择细体，一般也就是带“细”“纤”字的字体，如果你能在这个时候考虑到女性要用柔和的字体 ，男性可以使用刚硬的字体就更好。

　　在文字两边建立参考线，并将文字以参考线为基准ctrl+T两边对齐，记住要按住shift保持等比例，并保持每句话之间的间距一致。

　　根据我们的背景色，或者主体的颜色给予文字一种配色，这个部分上期我有提到过，这里不做细致说明。

　　根据主次将文字颜色进行细节细微的调整，但目的是要让主标题更突出突出！

　　最后我们可以在这个基础上再逬行微调，比如增加一些形状进去增强设计感，改变某几个字的颜色显得俏皮，拉大某几句之间的间距使排版灵动，增加一些其他的文字元素丰富内容等等。
　　其实方法变来变去真的就是固定的那么几个，只是看你平时怎么去积累他们，并且在使用的时候注意好对齐、居中、对比等细致的问题。还要补充一点是英文字母除了特殊情况尽量使用大写，以保证高度是一致的，文字要团结?嗯！

　　主标题字数较多的情况，方法与上边讲的大体相同，只是对齐的方式可以使用左右时齐或者中心对齐。还是上边那三句，我们改用出街就要吸引眼球作为主标题来排列，我省去中间的步骤，直 接看最后的结果，大家肯定能看明白。

　　由于我觉得很重要，在这里再提一下我曾经在别的教程中有提到的关于文字使用中需要避免的 三个问题一字体的选择：很多朋友没有很强的做字能力，所以常常会使用现成的字体，但是我们一定要搞清楚文字所在的环境，去找到合适的字体，比如很多人爱用的霹雳体，如果是比较喜庆的场面，你用这种字体做文字肯定在效果上是很突兀的，再比如比较正规的、严肃的场合，用一些娃娃体，少女体也肯定是驴唇不村马嘴。

　　字体的种类：
　　一张图片中不要使用过多的不同字体，这祥不仅会让主次不明确，而且也会显得特别的乱，最好把字伸数量控制在三四个左右，既有变化性，也不会很混乱。

　　字体的颜色：
　　有些颜色过于艳丽的海报往往会让观者难受的要死，一般情况下撇几眼就会不想再看下去，颜色使用不当不仅会让眼睛疲劳，甚至会影响观看者的情绪。


　　三、装饰
　　装饰元素在图片中不一定必须出现，但是一旦出现就要让画面变得精彩起来，很多人可能会对 装饰元素感到迷茫，不知道如何去应用才会合适，希望接下来的文章会让你改变这种状态。
　　装饰元素大概分为以下几种：
　　文字装饰、光效装饰、几何形状及线条装饰、实物装饰。
　　文字装饰要与正常的文字排版区分开，一般用来装饰的文字很多情况下我们不会去看它写的什 么，甚至都看不清它写的什么，它仅仅只是为了装饰图片效果而放在那里的，在电商描述板块和摄影类作品中比较常见；

　　光效装饰与我们上期提到的光的应用基本雷同，这边不去纠结，不过这里我需要额外说点题外话，很多人愿意跟别人要素材，我个人是这么理解要素这件事情的。只有自己亲手下的素材才是 自己的素材，该用的时候你能想起来你素材库里有这么个东西，能真正帮到你，况且在你寻找某一 素材的时候可能会找到其他更让你有灵感的东西（至少我很多时候都是会遇到这种情况）；别人给 的素材，顶多就是让你的素材库多了点东西罢了，很多都是记不住的，到该用的时候你还是不知道你原来有这么个东西。素材库这种设计师的命门，不是用来跟人比较自己有多少多少G的，而是让 你作图的时候能更灵活、更方便的，请记住！那是你的素材库。
　　作为一个设计讲师，很多时候对一些设计师的小陋习愿意多说点东西，如果冒犯了个别朋友， 请您谅解。
　　几何形状及线条是装饰中比较常见的一种效果，应用起来更多的是点线面的结合（或者叫瑱充与描边的结合）难点不是怎么应用而是怎么去想，我在这边提供给大家一种思维方式一从简单到 复杂，学会联想。以点为例。一段话的前方可以放一个点作为小装饰，那么这个点我们就可以展开 更多的思维。

　　图片中的点大部分时候还是与线配合使用，把上边的联想再应用到点线结合上。

　　面的应用平时可以多做画形延伸的练习，比如画一个圆，然后不断对个圆进行补充和修改，不 仅能开拓思维也能在平时作图中作为参考。

　　晶格化效果，也是比较常用的面的形式。晶格化软件网上貌似很多，但是我都没有用过，所以不在这里做误导，我个人平时有三种方法做晶格化的东西。
　　第一个是直接应用素材。

　　第二个是通过滤镜一像素化一晶格化（Photoshop本身的晶格化效果不是很突出，但是作为晶格背景来说还是可以接受的）。首先做一个渐变，颜色不要太深。

　　使用晶格化命令，数值自己拿捏。

　　第三个是制作小范围的晶格效果的时候通过剪切蒙版去完成。

　　想要改变颜色可以建组后，剪切一个色相饱和度调整层，并勾选着色即可。
　　通过Photoshop中的3D手段也是很容易做出小晶格效果的。
　　还有就是自定义形状了，一些常用的符号、箭头、对话框、条框等等都可以通过下载得到。

　　说了这么多我们看看一些实例中几何形状及线条的应用吧。

　　@旧言虐心是我非常欣赏的设计师，想要提高banner水平的朋友可以多去字习他的作品。
　　实物装饰是很多图片常用的手段，实物装饰没有太多的难点，只要累积了一定的素材基本都可以完成，我在这边说一说实物装饰的几种常见用法。
　　装饰元素出现在画布边缘并且不显示全貌，既能保证画面不空洞，又不会太过抢掉主体；这种手法需要注意虚实变化，多用高斯模糊做一些虚化，效果会更明显。

　　画面中应用若干实物装饰点缀，丰富画面的同时让画面的主题更明确。（我们要搞清楚主体跟主题的区别；主体是某个物体，而主题是画面所要表达的含义，两者是截然不同的）。

　　画面中使用诸多中国元素的实物素材，体现中国风主体。

　　画面中使用诸多装饰元素的图案素材，体现装修节主题。
　　使用实物散落效果是非常主要的实物元素应用的手法，通过实物的虚实散落来影响整体画面， 这种方法不需要散落物数量的多少，而是需要注意大小变化、虚实变化、角度变化等，而且最好有部分散落物是超出画面的，以增加整个图片的延伸感。

　　虚实效果可以通过Photoshop滤镜——模糊中的高斯模糊或者动感模糊去实现。