玩转电商：双11活动吸睛banner图设计

在日常生活中，我们常常会需要对照片做处理，而图片的处理工具中最常用的软件就是Photoshop(下称PS),在这里我们将带领大家使用PS完整制作一个热闹、动感、重磅的双11活动Banner。我们目标就是了解活动Banner的的设计理念和基本操作。

首先，我们要设计好一个充满张力的背景，炫酷的同时能反衬出中间的主体内容，然后根据活动内容在AI里设计出动感的字体，最后，在字体和产品周围点缀一些渲染气氛的光效和细节使Banner看起来更加张扬，以博人眼球。

一、背景制作

1、画板设置

我们日复一日奔波在职场、机场、人情道场，生活的压力扑面而来。或许这时候我们可以走进一个宋代空间，让生活有一些简单的纯粹。

打开photoshop我们来新建一个文档，双11的活动Banner需要在网站首页全屏展示，所以往往图片比较大。这时候图片就要设置宽度为2000或者是1920都是完全够用的(单位为像素)，高度设置为600(宽度范围在550到650都是可以的)。

本节课的Banner，我们将图片设置为比较常见的尺寸：1920*600，分辨率设置为72像素，单击确定画板设置完毕。

建好这个画板之后，我们需要用参考线标注中间的内容区域，点击矩形新建一个宽度为950，高度默认的一个形状。

创建这个形状图层之后，用黑箭头选中，把它做一个水平对其操作，选择上方菜单栏的路径对齐方式选项，选择对齐至画板，点击居中。接着拉出参考线贴近这个矩形的左边缘，再删掉矩形。

同学们可能有疑惑，这个矩形的宽度为什么是950呢？在这里放置的矩形和参考线有什么意义呢？因为950是一个安全的区域。

那我们做出来的Banner上传到网页展示的时候它要根据显示器的大小进行自适应，比如说在分辨率高尺寸大的显示器上展示的Banner内容就多，而在分辨率低尺寸小的显示器上展示的Banner内容就向中心靠拢。

所以显示器越大，展示的内容越多，显示器越小，展示的内容越少。相对来讲，小显示器就会有展示不出来的部分，切割掉的两侧的内容就是无效的。

所以考虑到小显示器的存在，制作Banner的时候就尽可能的把重要内容，比如说产品图片或是重要的文案都放在中间950的宽度内，不至于小显示器显示网页的时候把重要的内容切割掉。

然后呢我们在参考线内可以放重要的文案和图片，这并意味着说两侧不展示内容了，而是展示一些次要的内容的，背景修饰物等。

2、背景元素

下面我们就来制作背景。找到渐变，选择渐变色：粉色至蓝色，设置径向样式，简单调整缩放位置(缩放设置为228%，径向位置中心置顶)。接下来设计炫光和字体，再添加一些点缀物，最后添加产品图片，Banner就完成了。

下一步，我们需要把背景雕琢的更加酷炫，我们可以用一些素材或者是自备的素材库，进行装点，(ps：身为一个设计师需要建立自己的设计素材库或是拥有图片网站的会员身份，如果总是在百度图片进行挖图，那么作品看起来就没那么有个性有质感了，甚至可能会有雷同。设计师并不是需要所有的元素都需要从底层开发设计，而是要学会整合，整合出富有美感的设计也是设计师的能力)

我们在图片网站上搜索高亮光效的一些素材(可以搜索：高光、炫光、光芒等关键字)选择合适的光效，放到背景的位置。

二、主要信息

1、文字承载体

接下来新建一个图层，我们开始在这里做字体设计的部分。我们会在字体设计的部分的下方设计一个三角形，用它承载整个字体。

先用钢笔工具画上一个倒立三角形，只是一个三角形会缺少一些动感。我们在三角上面做一些处理，先让它有立体感，选择图层样式，添加自上而下的投影，颜色要比粉色稍暗，在角的端重叠处会有空白，影响三角的立体感，我们用钢笔工具把空白的区域填充，颜色选择阴影的颜色就可以了。

2、字体设计

先用钢笔工具画上一个倒立三角形，只是一个三角形会缺少一些动感。我们在三角上面做一些处理，先让它有立体感，选择图层样式，添加自上而下的投影，颜色要比粉色稍暗，在角的端重叠处会有空白，影响三角的立体感，我们用钢笔工具把空白的区域填充，颜色选择阴影的颜色就可以了。

在把产品元素置入图中之后，我们开始着手字体设计的部分。字体设计可以用PS软件也可以用AI软件(ps：我们要清楚这两个软件的区别，AI软件比较擅长做矢量绘制，它做出来的质量造型往往创意的自由度很高，而且非常的高效和灵活，PS的矢量造型能力就会弱一些，相比之下，AI的内置的工具和便捷的命令会更加方便操作)

现在打开AI软件，在AI软件我们可以把字体设计的部分快速完成，新建一个1004×1004像素的画板，然后先绘制背景，新建矩形，颜色尽量选择PS背景图的近似色，会更方便观察文字效果。

按住command/Ctrl + 2锁定图层(Mac端为：command+2；PC端为：Ctrl+2。同理解锁就是command/Ctrl + Alt + 2)。

我们继续选择字体，字体选择白色，字号设置为100像素，文案为：双11来了。然后我们做字体设计，可以用字库字体去变形，也可以找一些比较有力量感或是比较动感的字库字体进行变形处理会更加的高效，当然，我们动手能力强的同学也可以直接用矩形或用线条来拼凑文字。

下面我们就来展示相对高效的方式，选择一个比较厚重比较有力量感的字体(这里选择的是汉仪菱心体简)，然后把这个字库的字体变形，变成我们想要的动感或者是创意。

接下来一步很重要，我们把这个文字做扩展，选中之后，选择上方对象选项，点击扩展选项，扩展之后它就再也不是字库字体了，而是一个普通的矢量造型，取消编组之后，就可以把每个字当作普通路径，就可以拆开操作了。

我们把文字“11”调整大小，略大一些，显得有重量，文字重要。接下来我们要把它做的更动感，接下来把四个路径(指“双11来了”文字，下同)，选择倾斜工具，倾斜可以制造动感，让它看上去更有活力，用倾斜工具拖拽这个路径顶边。

接着对矢量造型继续处理，将“双”的最后一笔捺和数字“11”的十位1下方相连接；将“来”和“了”的下端相连接，调整长度，修理边角，再用白箭头修理锚点的位置，做整体细节调整。简单修改完毕，我们开始进行细节的打磨。

我们的发现现在的字体虽然是一个整体，但是欠缺了一些立体感，现在我们可以尝试着用钢笔工具添加阴影，在一些笔画重叠交叉的地方添加阴影的效果，来提升字体的立体感。

拿“双”字中的左半部分做举例，在撇和捺交叉的位置添加一个阴影，沿着撇的方向在捺露出的位置盖住它绘制一个矩形，使用线性渐变。

渐变使用黑到黑，因为阴影的颜色就是黑色，通过更改透明度就可以达到渐变的效果，一侧设置透明度为0%，另一侧设置透明度为20%，就是20%透明度的黑过渡到0%的黑，这个渐变颜色就设置好了。

接着用渐变工具拖拽效果向下渐变，我们现在观察一下，拖拽出来的效果就是一个渐变，一个由半透明的黑到完全透明的一个渐变，那给人地感觉就像一道阴影一样。其实本质就是一个矩形加了渐变而已。

现在有个问题，在我们更换背景颜色之后发现，阴影的矩形不仅盖住了字体还会多出来，那么我们则需要把多余面去掉。先把背景由黑色换为红色，我们用黑箭头选中“双”字的面和矩形阴影的面，选择形状生成器工具，按住Alt键点击不需要的面删除。

同样的样式，我们可以按住Alt键拖拽，复制到其他的笔画交叉处进行阴影的添加，用白箭头调整角度贴合笔画，同时调整渐变角度，把多余的面删除。

现在的字体已经稍具立体感，在AI里把背景删除，框选文字复制到PS中，把它粘贴到三角形上方，系统提示粘贴为智能对象还是形状，选择智能对象，放到三角形上方正中央，把重要的文案放到950范围内。

现在我们观察到这个文字太过突兀，白颜色与周围的粉色紫色环境光反差太大，它的阴影都是些中性灰，我们可以给它加投影，就可以和背景融合，或者也可以调整它上面阴影的颜色。

举个例子，我们现在改变“双11来了”这几个字上阴影的颜色，先在它的上方创建一个色相饱和度的调整图层，调整图层可以选中着色，但是选中着色之后会发现它会把下面所有的涂层都改色。

所以我们需要按住Alt键，给矢量智能对象创建一个剪贴蒙版，让上边新建调整图层只为这个矢量智能对象服务，使其他的图层不受影响，这就是调整层的一种用法，按它可以专门为下方图层而改色。

现在我们开始着色，着色需要选择和环境光相近的颜色，选择紫色或者粉色，这种效果会比较舒适，同时可以调整色彩饱和度，让这些阴影的饱和度更加丰满。

最后添加投影，这样可以和背景更好的融合，混合模式中选择正片叠底，正片叠底可以使颜色更深沉，让投影和背景进行油墨混合变得更暗(不透明度调整为65%，距离调整为10像素，扩展0%，大小40像素)。

3、炫光效果

最后还缺少一些元素，比如炫光，我们可以添加上一些炫光的效果。使画面更加动感活泼。从刚才用过的素材库中选择一些炫光效果，利用炫光给文字增添色彩，分别放在“双”和“了”的边角处。

三、说明信息

主要文字信息已经绘制完毕了，现在就剩下说明性的文字信息，我们将主要信息整体上移，空出的位置用说明展示优惠的信息。点击文字选项添加“全场七折，我们造！”文字（这里选择的同样是汉仪菱心体简，颜色为白色）。

为了突出七折的信息，我们把“七折”两字颜色修改为黄色，现在看上去并不够清晰，那么我们可以改变他的背景。就很多东西，并不是一次性就搞定了，都是要多次的去微调才能够达到满意的效果。

然后把这个字添加投影，因为在目前的背景下不太好识别，所以有一个小技巧，就是给它添加一个投影，这样呢会增加它的体感和清晰度（具体设置为：混合样式为正片叠底，角度90度，距离10像素，扩展0%，大小调整至32像素），同时把说明信息的小文案，放到正下方，现在这个作品，基本就已经完成了。

本节课的图片中，用到了AI的字体设计，加上PS的炫酷的素材和背景，然后需要把边缘干净的产品抠图整合到背景中，最终做出了一个重磅，同时比较有视觉冲击力比较炫酷的Banner。

四、导出图片

导出图片选择存储为web所用格式，选择JPEG格式，调整品质，因为图片需要放到网页中加载，图片的打开速度影响着网页的体验，图片体量过大网页加载时间就会过长，所以我们要在品质与Banner的文件大小之间寻找一个均衡，在尽可能保证品质的情况下建议把图片大小限制在200k以内。

总结

到此为止Banner就做完了，本节课就学完了一个活动Banner。其实制作一个活动Banner并不难，难点在于细致、细心，我们在设计字体的时候需要注意字体的整体结构，笔画连接位置以至于阴影的方向都要精雕细琢，同时背景的颜色搭配，元素的边缘是否整齐都是对整体画面影响的关键。

制作Banner是电商促销专题网页中很重要的一个环节，希望大家在电商节日的时候多留心鉴赏，并做临摹练习，多练习才能有提升。

爱分享，爱设计，欢迎关注微信公众号：UI设计研究院。