电商banner图设计技巧、网站banner设计教程、banner设计技巧

电商banner图设计技巧、网站banner设计教程、banner设计技巧

咸宁网页设计培训学校专业机构今天就以下内容仅在目前工作中针对banner设计收集整理的一些方法,与大家分享。咸宁电脑培训学校网页设计班火爆招生中。

一、拿到一个banner设计需求后，我们该怎么做？

1.banner图是针对什么活动、什么目的而设计的

我们需要知道做这个的原因，为谁而做，比如是为了某个节日专题活动还是针对某一个单品的预售，是走高端大气上档次路线，还是走促销亲民热闹路线等，因为这些关系到banner图设计风格的选择。

2.主副标题、利益点等文案信息的确认

一般来说我们可以从文案中寻找灵感确定设计方向（一个好的文案就是这么diao），为了避免设计方向错误，所以需要确认好了才好动手，其次就算只是简单的文字排版，万一后续又有文案的改动或字数的增减，就麻烦了。

3.这个banner图是放在哪个位置投放的

这个主要是考虑banner图与周围的关系，比如首页banner图背景色避免和左侧导航背景同色，如果投放的位置周围都是热闹的图，那这个时候你就可以试一下安静的，大面积留白的，与周围形成对比反差

4.与需求人沟通听下他的看法或建议

我们最为设计师在视觉方面可能是要更专业些，但是不防也听取一下运营或需求方的看法或经验，因为点击数据掌握在他们那里，他们可能比我们更了解用户喜欢什么，需要什么，同时他们往往是拍板说OK的人啦，但不是说完全听他们的，我们自己要有判断能力，对于他们的意见或看法适当引导和取舍（这个过程可以展现设计师的专业素养，增加好感，从而比较容易过稿）。

5.什么时候交稿

这个大家都知道，好的设计是需要时间的，假设有几个设计方向可以选择，如果时间充裕当然选择那个最优方案，如果时间比较赶，那就选那个不出错的、能快速实现的方案喽！

二、了解以上几点信息之后，脑海中应该会出现一些风格定位关键词

促销、热闹、大牌、简约、可爱、稳重、时尚、文艺、特定元素（节日、季节），好嘛，其实这些关键词旺旺是一个或多个同事出现在一个banner广告里的，下面看看一些案例。

关键词：大牌、稳重

说到大牌，我们观察感受一下：

1.背景大量留白

2.色彩单一，常见黑、白、灰作为主色（因为这些是无彩色，它的存在只是为了凸显主体而已）

3.商品或模特一定要够大（不是指字体或logo），截取部分细节展示（因为就是这么自信）

4.不需要太多文案描述，有时只需要一个logo摆在那里就好了（是不是diao，你爱买不买）

5.需要说明的是，这个高冷范的风格比较适用于数码电子产品、奢侈品等。

关键词：时尚、品质感、促销（时尚感大于促销感）

平时是不是经常遇到别人给你说纪要大牌又要促销的无理要求？下次纠正吧，应该是既时尚又促销，不是既大牌又促销。就像你说一个人他穿的好时尚啊，因为时尚不一定非要花大价钱才可以达到，而大牌是真的需要很多钱才可以达到的，而促销代表打折、低价、热闹，这与大牌是相违背的。

这样分析一下会发现有以下几点：

1.注重排版，文字规整排版，比如左对齐右对齐，居中对齐，不会去做一些怪异的字体变形，而是有一个着重突出的文字信息放大形成一个面，压住全局，适当留白。

2.色彩不会太多，三种至多（如果商品本身就是五颜六色的就另当别论了），配色参照商品本身或邻近色来提取，只有某一个需要突出的文字信息才会用对比反差比较大的颜色，比如折扣信息或重要的功能信息。

3.商品角度要好看，品质要高（常见商品角度45°角，俯拾，平视，可别整出个仰视了）。

4.一般商品都会有主标题、副标题、利益点这几个文案信息，利息点要大大大！！！

5.这种一般比较适用于与时尚相关的美妆护肤、男女鞋箱包、饰品，食品和母婴也会有。

关键词：可爱、热闹、亲和力

这种比较适合食品、可爱服饰、母婴品类，因为这些属性跟这些品类的特点是相符的，要给人可爱、可口、甜美、亲和力的感觉。

这样分析一下会发现有以下几点：

1.商品很多，画面会比较满，会有很多小色块，手绘图形什么的进行点缀。

2.色彩丰富，配色柔和，偏暖，给人热情的感觉。

3.会有某一个特别突出的信息，但是整体画面又注重比例的和谐（后面会具体讲到这块）。

总之画面是不会有攻击性的。

关键词：素雅、安静、大面积留白、文艺、简约

这种比较适合家居、茶艺、布艺、棉麻森女系、文艺、日系服饰鞋包。

这样分析一下就会发现有以下几点：

1.超大面积留白，东西都小小的（这点跟前面讲的大牌是截然相反的，虽然都是大面积的留白）。

2.色彩单一，以浅灰、淡蓝白、米白、棕色，饱和度和纯度低的绿色等色彩居多。

3.文案要么很少，要么很多，但是都是打动人情绪的一些文字，并且小小的放置在画面里。

总之，如果你们身边有这样的女子，你观察一下她就知道了，就是这样子的安静素雅，不爱说话，冷冷的犹如一阵清风吹过

关键词：促销，形式感佳（促销甩货目的更大）

这种比较适合尾货大清仓、综合卖场促销活动，合适任何品类（那种常见的路边摊设计我就不举例了，大家有兴趣可以自己找，一大堆）

这种分析一下会发现有以下几点：

1.要么文案超级多，要么商品种类超级多，要么文案和品类都超级多

2.色彩多样、留白较少，注重排版，就是要告诉全天下人我现在很便宜啊快来买我啊

总之，它就像一个热情的促销员，同时打扮很nice，拿着喇叭喊：全场清仓大甩卖啦，快来看快来瞧啊，你买不了吃亏，买不了上当啊-_-!!

关键词：促销（比较diao的促销）

这种比较适合商家店铺banner图或者实体店促销招牌，因为banner图上没有任何商品，要不是因为你本身就处在这个店铺立面，鬼才晓得你要卖什么

这样分析一下就会发现以下几点：

1.形式感，大大的sale和大红背景告诉你，恩，我是来促销的

2.哼~就不告诉你我要促销什么，你来猜啊，不点我你就是不知道

总之，这种要么是为了吸引有点好奇心的消费者，要么是吸引已经是老顾客的消费者，运用在实体店比较常见

还有节日季节等关键词的banner图，这里不再一一举例分析了，也是比较常见。

重点来了！！！

那么上面讲了这么多，我们会发现，一个banner图就是由以下几个元素组成

那么我们看到商品或模特还有文案信息在一个banner图里的重要性了吧？上面说了这么多，是不是偏题了？才没有呢，上面相当于把比赛规则说清楚，接下来我才具体这场比赛该怎么玩。

三、那么我们这次讲到的是针对需要放可以放商品（非模特）的banner图该怎么玩

1.商品摆放有几种姿势（小编读书少，所以词汇想怎么写就怎么写了啊）

①叠加的

②模拟货架摆放的

③手绘商品（全部手绘、部分手绘）

④拿在模特手上或穿在身上脚上

⑤飘的（小的飘或大的飘）

⑥堆放的

⑦商品部分细节展示

⑧平面构成图形化的

见笑了。往往以上姿势会一个或多个同时出现在banner里，下面我们看些实战案例

叠加商品+切变构图+截图部分商品展示+商品数量要多

总结：

将商品按一定的构图规律沿着banner图四周环绕，这就跟给一幅画加一个框把它裱起来一个道理，既美观又能聚焦视觉到画面中心，只不过这里是将视觉聚焦到中间文案，这也是为什么这种构图文案信息都是居中在画布中间放置的原因，该手法在摄影构图中也很常见

1.这种构图往往要求所选商品形状要尽量规整，比如矩形，方形、圆形，摆放位置和大小要形成一定规律，有大有小，有高有低，切勿乱摆。

2.因为选择的是叠加模式，将商品融进背景里的=处理手法，所以对商品的颜色并无太多要求。

3.这种常运用于服饰鞋包、美妆护肤等活动banner里。

还有其他类似手法的我们一起来看下，下次遇到适合这样处理商品的图不妨一试，时尚感立马提升

模拟商品真是摆放场景+三件以上商品

总结：

这种手法主要就是试图营造一种真实的购物场景体验，一定程度上增加网购信任感和亲和力

1.这种手法对于商品的拍摄角度有较高要求，因为看上不要真实，如果透视阴影光线都不对，就穿帮了。

2.如果有条件在拍摄时把场景搭建好，那么作图的时候直接拿来用就好了

商品堆放+三件以上商品

选用左右各45度角商品、中间正视角度商品堆放在画面左边，三角构图，画面比较稳

商品堆放在画面中间，居中放置，其中一个商品比重最大，周围小物体围绕周边，形成稳定的三角构图

商品堆放在画面右边，其中一个商品比重最大，周围小物体围绕周边，形成稳定的三角构图

商品堆放在画面中间，其中一个商品在最高点周围物体围绕周边，周围小物体围绕周边，形成稳定的三角构图

这四个都是横向或纵向往一个轴线堆放，也是稳定构图，类似堆积木，做汉堡，唯一要注意的是，商品角度上有点变化可以让画面更灵活，如上如所示

总结：

虽然都是堆放的形式，但是变化也是可以很多样化吗，前面几种三角堆放商品的形式在食品，服饰鞋包或综合类目的活动中应用较多，后面几种比较适合同类商品的堆放，要求商品形状是比较规则的立方体或扁平的物体，想象一下堆积木或叠衣服就知道了

远景近景的对比+2件以上物品

总结：

这种形式不需要太对商品，比较适合推单品的活动，要求商品拍摄角度要好看，45°角最佳，这样透视感比较容易出来效果，近大远小，近景商品为主角。

穿在模特身上展示+大小比对+1件以上物品

左中右布局，商品三角堆放在右边，模特试穿效果图左边，文案在中间，对称式构图，稳定

左右布局，商品和模特三角堆放在右边，文案在左边，左右面积相当，画面稳定

左右布局，模特试穿局部效果图放右边，全身真实在左边，文案在左边，左右面积大小相当，画面稳定，同时右边多彩大小面积局部视图起到比较突出展示商品的效果

近景和远景布局，文案在前，商品在后，文案信息为主体，多个商品排排放为远景做背景

左边模特试穿效果展示，右边文案信息，同时文案排版遵循模特姿势，画面有动感，如箭头所示

左右都为模特局部效果展示，但是文案信息在右边，所以增大左边模特面积，这里是一个模特大小的对比，一个是背景颜色浅和深的对比，最终效果画面稳定

总结：

这种形式需要一个姿势好看或动感的模特试穿效果，若是左右的布局，则适合近大远小的形式，若为左中右布局，则适合大小相当的对称式构图，颜色的选取和行塑造都应该遵循产品本身的特点来，这是比较有依据的做法

飘着的商品+大小对比+虚实对比+3件以上商品

主体在中间，前面清晰近景围绕，后面虚化远景围绕，点缀其他几个大小不一的虚化物体，让画面有动感和层次感，注意力还是几种在画面中央的商品上

左中右对称布局，文案信息在中间为主体，商品近景大，远景小，一看就是要促销卖各种鞋子的

大大的文字sale为主体，商品有节奏的前后左右贴边像是长在主体上，商品作为修饰物，增加热闹促销氛围

总结：

这种形式要求有一个中心主体，在正中间，比如文案信息，然后商品作为配角，或环形围绕着他转，或者左右对称漂浮着，或像生长在主体周围一样，所以说，设计真的是有很多可以向大自然学习的规律

按某种规律平铺商品+4件以上商品

商品摆放要规整，要错落有秩，有大有小，右边文案，右边商品的左右布局，左边背景深，右边背景浅，这样子左右比重就平衡了，这种适用于商品品类相似，商品形状规则的促销活动

商品围绕中心主体文案规则排列，有轻有重的节奏，错落有秩

上下结构布局，商品横向摆放，商品形状一致，摆放有大有小有节奏感，画面紧凑

左右结构布局，商品置于整齐排列的圆形里，真实部分细节，这种适用于商品种类繁多，商品形状多样化不规则的促销活动

总结：

这种形式适合任何布局，上下也好，左右也好，居中也好，都无限制，所以你的banner到底适合哪一种，就要看缘分和心情了....

铺满整个画面+前后景+n多商品

总结：

1.这种形式与清仓大甩卖这话种活动简直是绝配，它往往意味着廉价，超级便宜，商品种类蛮多，往往也可以淘到很多物美价廉的商品

2.将商品一堆铺满整个画面，作为多彩的背景，文案利益店加一个纯色底放置在上面，最后一步，将折扣信息突出突出再突出，一个banner就完成了。是不是感觉自己在做一道类似于火锅大杂烩的黑暗料理？

手绘+虚实结合+1个以上商品

其实这种就是前面讲到的很常见的商品三角构图堆放，文案和商品左右布局，只是商品变成全手绘稿，设计感和艺术气息立马提升几个台阶，如果您的手绘功底并且时间充裕，并且你的需求人愿意让你这么搞，那就这么干。

这三种构图前面也讲到了，这里就不再多说，我要说的是，如果你有手绘功底，并且你的活动类型是可爱或者炫酷，或者脑洞大开的，你就发挥自己的特长，加点想象力，在实物图上面手绘几笔，虚实结合，画面非常有活力，看到的人都会觉得，哇，好棒！不信你试一下。

总结：

1.硬性指标：会手绘，有想象力，或者你会照葫芦画瓢也行。

2.要你的活动定位愿意让你这么干，毕竟不是每个类目都适合这种手法，比如是要走国际高端的路线，这种手法就会太小儿科了，与品牌调性不一致，这种适用于潮牌服饰鞋包，护肤美妆，母婴，韩系日系可爱风。

3.你的手绘内容应该是与商品活动有关的或有联系，如果你卖的是女装，你画一只鸭子合适吗？

4.时间充裕，因为手绘比较费时间。

结合商品本身的特点排版+从文案里找灵感+两件以上商品

这个广告一看就是想表达这只拖鞋有很多颜色，这就是结合商品本身的特点和文案去联想去发挥，其实往往这种特质比较明显的商品是很容易让设计师发挥的，我们的设计很多时候就是想办法与商品产生关联，比如商品的质感、颜色、纹理、图案、形状都是我们可以提取的元素。

雨伞和雨鞋可以做的这么乖，扑通！！！

是不是很像一个小胖孩子打着伞，好形象，有亲和力，好喜欢，买买买！

所以说这些比较讨巧的商品就是可以摆放成这样去卖萌，获取用户好感，然后就是买买买喽！

这种图就是玩构图，看个人功力了，你看他的平行线、他的切割比例多么美，他的背景色块都是从商品的配色吸取的。如果有圆形、矩形、三角形，千万不要放过他们，因为这几个基本图形很容易玩出构图来。

超大局部细节展示+1件商品

总结：

1.超大局部细节展示（因为大牌就是这么自信啊，我细节棒，做工好用料好，不怕你拿放大镜看我），所以，有些天天喊着要我做大牌感的广告，但是给的商品又是拍摄质量很糟糕的，或者做工很一般的，真想......

2.大面积留白，画面干净无杂质，商品就是唯一的主角。

3.其次是品牌logo稍微醒目点，文案信息字体比较纤细，并且自豪很小，处在配角的位置，但是因为往往这种广告大面积留白，即使字体很小很纤细，可视度也很高，不影响阅读。

4.北京多为黑白灰，色彩单一，总之就是为了高冷而生。

5.这种形式适用于奢侈品彰显大牌调调的活动，或者数码电子产品，数码电子产品也是喜欢走这种高冷路线，因为；冷酷，有bigger，让人觉得拥有它很有面子，那种一般的商品比如衣服有线头，褶皱，产品用料又不高档做工不精细的就不要尝试这种了，因为本来你是想要装大牌来着，却把你的瑕疵缺点展示出了，就起反作用了。