Banner包括什么元素？

在电商设计中，最紧张的即是网店的banner设计，banner中所包括的元素也多种多样，每一种都有不同的功能。大抵能够分为：文字，照片，背景，装修元素和标记。

其中能够给人最直观感受的即是照片，因此这节课我们从照片开始动手。给大家讲一讲照片在banner设计中的应用。

△ 举例图片来自品牌「FEW精品咖啡」「有耳」

电商banner，也能够分为两种，一种是有照片的设计，一种是没有照片的设计，也即是图形设计。

△ 举例图片来自咖啡品牌「三顿半」「闪垫」「不敷商店」

在没有照片的环境下，我们应用图形，插画，文字编排等手法，也能够阐扬出很好很丰富的画面感受。

△ 举例图片来自品牌「LEONSENSE」「超等植物公司」「玩药局」「SENCE LA」「viishow」

以实际照片为主的banner设计，会给人真实的感受，这个是图形设计所达不到的。并且大多数的电商banner，都是用照片来作为主元素应用的。

在电商设计中，照片能够分为两种，划分是商品照片和模特照片。模特照片，又能够分为，儿童，年轻人，中老年人和宠物。人物类的模特照片主要应用在服装平台，服装类电商品牌会大批的应用模特照片来展示产品，宠物的照片则主要应用于宠物用品门类。

除了以上说的这些，模特的照片，在电商设计中的应用那是相当广泛的，你打开淘宝，险些全部的分类里都能够见到应用模特照片设计的banner图。

为什么我们要应用模特照片呢？因为模特照片是最有代入感的，不管是产品也好，服装也好，我们看到模特应用的同时，也会想到本人用上，穿上是不是也有一样的效果。因此人物照片在电商中是最直观的一种阐扬形式。模特照片如何选定也是有考究的，如果选错了照片往往会起到相反的效果，选定与品牌气质比较应的模特是很关键的。

Banner模特图的选定

「启示聪明智慧 修建美好童年」

如果以这段文案来设计banner我们该如何选定对应气质的照片呢？

首先，这个文案是一个儿童产品的文案，简单的分析一下，聪明智慧和美好童年，这两个词是很直观很具象的。那我们要选定的模特照片，首先从外观上，必然是一个看上去很聪明的小孩气象。第二个关键词是美好童年，领有幸福童年的小孩，他最直观的阐扬，即是脸上洋溢的笑容。那分析完这两点，我们就能够按照这两种特性去挑选模特照片了。

△ 图片源自「摄图网」

我们用这三张照片来举例，左侧的小孩，他的行动和脸色看上去非常调皮，非常心爱，右侧的小孩看起来比较活泼好动，那这两种都不太合乎我们文案的感受。我们再来看中心的小孩，他手里在玩着积木，脸上也笑的很自然，第一眼看上去就有比较聪明的感受。因此他就很合乎我们刚才所分析的文案内容，那在这里我们就要选定中心的这张照片。

△ 图片源自「摄图网」

我们再来看第二个文案。这是一个女性衣饰主题的文案，一样，我们来分析一下这个文案，「异想少女钻研所」实在我们只是读一下也能感受的到，这个文案即是那种比较有个性比较年轻的气质，那模特图我们也是要选定一个年轻，有个性的女孩气象。

△ 图片源自「摄图网」

第一张照片上的女孩穿戴校服，看上去是比较清纯的气质。第二张照片上的女孩，她的行动和脸色，看上去给人一种很心爱的感受。因此前两个都不太合乎我们文案的感受。那我们再来看第三张照片，第三张照片中的女孩，妆容细腻，脸上也涂着油彩，眼神也很有个性。因此很显然，第三张更合乎我们的文案内容。

△ 图片源自「摄图网」

我们再来看末了一个文案，「保持身体健康，绽开幸福笑容」，这是一个老年人产品的广告文案，这句话的两个关键词划分为，健康和笑容。那我们选定照片刻也要留意这两点。

△ 图片源自「摄图网」

左侧的模特在皱着眉头思考，感受不是很高兴，而且脸色也有些严肃。右侧的模特，看上去像是一个老中医的气象。那这两个也都不太合乎我们文案的感受，惟有中心的模特，我们能够看出他的气色特别好，而且笑的很光耀，因此在这三张模特照片中，我们必定会选定第二张。

△ 图片源自「摄图网」

Banner 模特图的阐扬形式

我们先来说一下脸色放大。那么在什么时分，我们需要将模特的脸色放大呢？

合乎这几个特色的模特图，我们都适用将她的脸色放大，但是放大的前提是图片清楚度要充足，如果清楚度不敷的话，就会给人很低价的感受。

首先来说妆容浮夸，我们能够看到，这个模特的脸部有很多的油彩，那这种妆容在我们通常生活中是很少见到的。因此她在脸部就自然的形成了一种聚焦的核心，并且这片面气质也给人一种高冷、有个性的感受。那这个时分我们就适用把她的脸色放大。

当我们把脸色放大之后，也会增强相传模特自身的气质。

我们再来看这个模特，她头上戴的假发，已经遮住了她的大部分面部，那这种妆容就会给人一种很秘密的感受。

如果把它的脸色放大，你会觉得人物的主体是非常有视觉冲击力的，而且非常迷惑眼球。

而后我们再来看一下妆容细腻。如果模特本人的照片质感不是很好，那就需要我们有很强的图片后期技术，经过修图，来给人物面部增强质感，当质感达标之后，我们就能够将她的脸色放大。

这个时分我们能够很清楚的看到她面部的皮肤细节，这种方法也非常适用我们阐扬护肤品、美妆类产品。固然了，这对大家的修图技术也有必然的要求。

脸色浮夸。当一片面做出大笑，流泪，怒视等浮夸脸色的时分，我们都适用把他放大。

因为情绪是能够沾染的，当你看到模特情绪的同时，本人也会直接被她的情绪所感染到。

气质清纯，在日本的广告设计中，他们时常应用这种年轻的，妆容非常洁净的女性，当模特图发现这种气质的时分，我们能够将她的面部放大，将她清纯美好的气质阐扬出来。

1. 应用产品

它是一种「正在进行时」的阐扬形式，好比我们在骑摩托、溜冰、跑步、泅水，这些都属于「正在进行时」。一样，模特正在应用产品的时分拍摄的照片，就会给观者很强的代入感。

日本外乡的啤酒品牌麒麟啤酒的广告，每个广告片的末了，演员喝酒的脸色和行动都是不一样的。

通过演员喝啤酒的状况和脸色来向观众转达和夸大麒麟啤酒，口味醇厚、口感丰富和品格高的产品卖点。

这也是一组麒麟品牌的广告，但是产品换成了鸡尾酒，因为这种鸡尾酒的主要受众是白领，因此这组广告也选用了比较比较有气质的模特，他的场景妆容和灯光安插，塑造了一种上班族工作了一天，下班之后美美的小酌一杯的感受，那当观众看到了这组广告，也会被广告中模特的状况所感染。也会想要去尝试一下这款鸡尾酒的味道。

2. 应用环境

这是一个尿不湿的广告，在这个房间环境的衬托下，更加凸显了婴儿在应用这款尿不湿之后，睡觉特别安稳、舒服的感受。

这是一个空调广告，首先广告构建了一个洁净整齐的房间，而后发现了我们的主角——空调。而后画面中又发现了一个正在练瑜伽的女孩。这组广告也是通过这个女孩练瑜伽时轻松舒服的环境，来阐扬这款空调的舒服度。恬静舒心的场景，也更加凸显了空调「清爽自然无异味」和「身心舒坦」的产品卖点。

这是一个大发汽车的广告，在画面中我们能够看到这辆汽车是在一个环境优美的山上，这就代表这款汽车的底盘是很高的，它能够越野。而后画面中又发现一群人，这群人看上去像是主角的家人大概是朋友，那这里就体现了车辆里面空间大，舒服，适用与家人朋友一起游览的产品定位。

3. 应用效果

△ 图片来自花瓣网

这种方法阐扬了人物应用产品之后所能达到的一个效果。好比画面中模特佩戴的手镯和手表，通过展示模特佩戴产品的效果，能够让用户人群更加直观的感受到，本人佩戴之后是一个什么样的感受。

△ 图片来自花瓣网

通常，我偶尔会有头痛，因此就时常会去买头痛药，在选购头痛药的时分，我就留意到商家应用了很多这样的图，这样的图首先他仇家痛的症状阐扬比较模糊，这样的行动它也有不妨焦炙大概情绪低落的阐扬。别的，大多数的头痛药品牌都在应用这种图，看得多了就会感受千篇一律，审美没趣。怎么冲破以往的形式，来设计一个头痛药的广告画面呢？

△ 大正制药，头痛药广告

这是大正制药在今年年制作的头痛药广告，这里人物的模特，选定了和以前我们看赴任异性很大的一个浅笑的少女，画面中的模特用手指向上方的产品形成聚核心，轻松快乐的脸色，也展示了「应用头痛药，头痛轻松走」的产品定位。

这是香港的一款饮料广告，这款饮料主打健康养生的定位，适用正在健身大概正在减肥的人喝，广告中也选定了一名身材特别好的模特，看到这个广告之后也会给你一种你喝了也能这么瘦的感受。

4. 明星效应

当今有很多当红的流量明星，他们的流量是很浮夸的，明星的粉丝会购买他们代言的产品，粉丝会认为，本人idol所代言的产品也是idol的一部分，我们以前也有一名学员，他就非常稀饭某位明星，他把他全部代言的产品全都买回家了。因此可见明星效应所带来的的产品销量是立竿见影的。

△ rio「微醺鸡尾酒」系列广告

△ rio「微醺鸡尾酒」系列广告

rio的产品微醺鸡尾酒，就选定了近两年人民喜好度爆表的演员周冬雨来代言产品，这个产品它主打「一片面的小酒」的概念，广告片中的周冬雨颇有活泼细腻的少女感，通过她精深的演技，把小女生单独喝酒后的状况阐扬的淋漓尽致。

△ 护肤品牌Dual Face新广告

别的，请明星也是要留意明星的气质和人设是否合乎品牌或产品的定位，日本的一款护肤品，就选用了「自然氧气美少女」夏帆来为品牌做代言，夏帆的人设和产品应用自然有机质料的特色完善配备，不仅激动了销量，也增强了用户人群的信任度，是一个很成功的明星代言。

△ 可尔必思广告

可尔必思能够说是日本的人民饮料了，我们去任何一家日料店，必定都能够喝到可尔必思，它的卖点是自然乳酸菌，酸酸甜甜，在青少年中尤为受迎接。可尔必思的代言人选定了日本颇具人气的年轻美少女永野芽郁，她活泼年轻心爱的气象，也非常合乎可尔必思的产品受众。

Banner模特圈的视角

虽然我们设计师不必然都要懂摄影，但是我们也要对模特照片的基本的拍摄视角和景别有所打听，这样我们才气更好的行使模特照片来做出适宜的设计。

1. 全身照片

△ 图片来自服装品牌「玩药局」

全身照片是对模特整个面目的一个宏观阐扬，在这里，模特的穿戴和动势我们都一览无余。而且全身照片的可操纵性强，你能够范例片随便进行裁剪处理。

△ 图片来自服装品牌「鹿与飞鸟」「ONE MORE」

2. 半身照片

△ 图片来自服装品牌「REDCHARCOAL 」

半身，即是密集在模特的上半身，大概下半身的某一部分，这种方法比较适用密集突出产品，普通也会把视角密集在产品上。

△ 图片来自服装品牌「REDCHARCOAL 」「鹿与飞鸟 」

△ 图片来自品牌「行动不停 」「jessiejane 」「鹿与飞鸟 」

一样是半身照片，我们能够看到这几张照片的脸部，都没有完全暴露来。这是因为什么呢？这个在视觉生理学中来讲叫做信噪比，画面中除了必要的消息以外，也会存在所谓的「噪音」。

因为人物脸部的存在，观者的视野会不自发地聚焦在人物脸部，当我们把脸部进行裁切或遮挡的时分，会削减模特脸色关于产品的干扰，会让你直接把视野聚焦在产品上。

3. 胸部以上

胸部以上的照片，主要是用于展示模特的妆容和佩饰，大概是人物的面部脸色和情绪，这种视角能够拉近画中人与观众的距离，增强交互性，但是关于皮肤的质感要求较高，因此也需要必然的后期修图技术。

4. 特写照片

特写大家就比较熟悉了，尤为是各位女性朋友，你们在买口红的时分，口红的品牌险些都是应用嘴唇的特写来阐扬口红的色彩。因此特写，也是非常适用阐扬化装品、护肤品、美瞳等产品。别的特写也是部分的展示，它能够使阐扬对象从周围的环境中凸显出来，导致清楚的视觉印象，从而获得夸大的效果。

5. 蓝图照片

△ 图片来自品牌「行动不停 」

蓝图在电商设计中的应用比较少，因为人物在里面已经很小了，你看不清他的衣饰，也看不清他的妆容。它所传布出来的实在即是它怪异的气质和画面的意境，好比这家店《行动不停》，他们的产品主打即是日式森系的样式。因此他们很多的照片都应用了这种大留白的蓝图来转达品牌的气质，这个，也是他们家区别于其余品牌的地方。

讲到品牌不得不提的是，当今的大多数电商品牌拍摄的模特照片基本都大同小异，好比说当我们在淘宝搜索连衣裙的时分，我们能够看到搜索出来的图片基本都差未几，角度单纯，审美没趣，因此说电商品牌如何和其余品牌形成差异化呢？

△ 图片来自品牌「ZE by sankuanz 」 摄影师：袁小鹏

摄影师袁晓鹏给上官喆拍的一系列照片，就很好的办理了这个疑问，既保持了品牌的个性又找到了十分有趣的角度，每张照片里都有一个正在进行的「段子」，给观者以遐想空间。这样的店，就会在你的心里留下一个很深的印象，也就和其余店形成了差异化。

Banner模特圈的人数

1. 1人

△ 图片来自服装品牌「only 」「viishow」

画面中的模特人数，分为：一人，两人和多人。一片面就很常见了，网店里主打的单品通常就会用单人模特来展示。

2. 2人

△ 图片来自服装品牌「vovavi」「it`s toasted」

双人模特，通常用于阐扬作对和并列的干系。

3. 多人

△ 图片来自服装品牌「GUUKA」「药九玖柒」

应用多人模特，会给人带来一种热闹，而且有相信的感受。

Banner模特圈的编排方法

1. 去底

偶然候人物摄影的背景是比较杂乱的。我们文字放在上面编排的时分识别性很差。这个时分为了保证文字的识别性，我们就会给它加上投影大概描边，但是这样又会显得画面很脏，更好的设施是什么呢？即是把图片给它抠出来，放在一个适宜的背景上。

2. 与文字交叉

为了让画面更有层次感，我们就能够应用图叠字，大概字叠图的形式，但是应用时也要留意文字的识别性。

3. 整体+部分

当我们想展示宏观场景又想展示产品细节时，该怎么办呢？这个时分我们就能够应用整体加部分的这种形式。如果是横版的banner，我们也能够左右来排。

4. 放大铺满背景

就像我们以前提到的，当人物的脸色很有特色的时分，我们就能够将人物放大做背景。但或是那句话，放大的前提是图片清楚度要充足，如果不敷的话，往往会显得很低价。

5. 去底+手绘

这种形式，比较适用活泼心爱有生气有个性的电商品牌，那大家也不要看到手绘两个字就望而却步，实际上它对你的手绘才气要求也不是很高，因为只是去画少许简单的装修元素，大家也能够本人尝试一下，或是比较简单的。

6. 重叠

通常我们见到最多的，即是这种单位形的重叠，他们能够是同一人物，不同穿戴，也能够是不同人物，不同穿戴。当我们想让这些人物在画面中同时展示的时分，我们就能够给这些模特图抠出来有序的摆放，但是也要留意，抠出来之后模特的大小也必然要保持一致。

7. 去色+单色

关于场景化的模特照片来说，我们能够应用这种方法。将人物大概人物周围的环境去色，这样也会更加的突出产品。

8. 合成场景

△ 图片作者「汤臣杰逊」

合成这里我们不做重点来讲，因为这个是一种比较耗时耗力的形式。大家能够本人去打听一下。

Banner 案例演示

接下来，我们就根据文案和图片，来设计一张手机banner。

首先我们把模特照片安排在画面中，而后我们来分析一下，这张照片毫无疑问它拍的很好，模特的妆容和长相都比较洁净，眼神也自然聚焦，看上去就十分舒心，像这种模特图，我们就能够放心的给他放大。

放大之后人物的气质，也更突出了，周围的负空间也获得了填充。接下来我们来编排题目。我们能够留意到，人物的眼睛当今是在画面上方的，因此整个画面的重心也在上方，这个时分我们就能够把题目编排在画面下方，来平均版面，也是与上方的重心做一个照应，因为这个品牌的气质是比较清爽，比较自然的，因此在题目上，我就选定了一个细体的西文字体，并且加大了字间距，这样文字之间就有了一个呼吸感。

下一步我们把最关键的文案竖排放在模特眼睛和题目之间。那为什么放在这个地位呢？因为上方模特的眼睛是视觉重心，虽然下方的题目做了平均和照应，但是由于距离较远，两者贫乏联系，观者把视野聚焦在眼睛之后，视野就没有了第二个聚核心，就不晓得该看什么了。

这段文字放在这里，也能够看作是一个线条，用它来连接视觉中心，引导阅读视野，让观众很自然的从视觉重心连续往下阅读。末了我们把其余文字按照层级干系，编排在版面内，这个案例就实现了。

第二个案例，我们做一个比较高端大牌的服装品牌banner。

像这种比较大牌大概奢侈品品牌的banner，普通来说文案都比较少，而且高端大牌的模特普通都是比较高冷，比较有质感的。因为大牌，它即是要的这个自信。而且它们不需要太多的文案形貌，偶然候画面中惟有一个LOGO和几段文字就能够了，乃至有的品牌连LOGO都不放。那大家也不要觉得，文字少了就好排，实际上文字越少，越考验你的版式的基本功，如何把少量的文字排挤你想要展示的气质，也是需要必然技巧的。

首先我们把照片放入画面，那这张照片当今的人物的大小和地位，或是比较尴尬的，上方下方都没有一个完整的空间供我们编排文字，这个时分我们就需要把图片稍微调解一下。

这样，我们的画面上方，就有了一个比较完整的空间了。而后我们选定一个气质相符的手写英文编排在版面的上方，这里要留意人物外表面和文字之间的干系。

而后将剩余文字编排在画面下方，版面的结构就实现了，但是这里还有一个疑问，下方的文字色彩如果选定白色的话，有点过于显眼突出了，和整个画面的气质不太相符。怎么办呢？我们能够把这段文字的色彩改成画面中人物皮肤亮部的黄色，再进步少许明度，这样画面看起来就协调多了。

第三个案例，我们做一个轻松心爱的促销类banner

我们先把模特素材抠出来安排在版面中，这个时分模特的外表面是十分不规律的，那这种不规律，就导致了版面中也存在了很多不规律的负空间，这种负空间只靠文案是很难以填充的，编排的难度很高。

我们能够将模特放大裁剪为半身，裁剪之后，负空间就少了很多。也利便我们之后的编排。别的我们来看模特的手，是一个很好的视觉指引，模特的手指指向的区域，我们要安排最紧张的文案消息。但是当今手部的区域已经靠近边缘了，空间不敷，那怎么办呢？我们把人物移到右侧。这样这个地位的空间就很完整了。

之后，我们把折扣消息编排在人物手部的地位组成一个文字组合，而后在下方把时间消息排好。

高低两头能够用色块来填充版面，再把剩余的文案编排好。而后再用装修元素粉饰一下负空间，这个案例就实现了。

本次教程到这里就结束了，我们往返顾总结一下今天的内容。首先模特图的气质我们必然要拿捏好，因为模特的气质是品牌定位的基石。如果模特图选错的话，往往会产生相反的效果。第二，在我们应用模特图来做设计的时分，要根据模特图的不同阐扬形式来合理的计划版面。第三，我们作为设计师，要对模特照片的基本的拍摄视角和景别有所打听，我们要根据不同的拍摄视角来选定适宜的编排方法。那这节课的内容就到这里，我们下期再会。

更多高手才懂的电商设计方法：