澳门太阳神集团

武汉小程序开发
NEWS
资讯观点

超实用!5个帮你快速进阶的电商Banner设计技巧

编辑:admin | 浏览量: | 来源:未知 | 更新时间:2016-07-15 | 当前栏目:武汉小程序开发

编者按:今天这篇好文把电商Banner 的设计方法都说得七七八八了,如何用图案提升节奏感+用装饰活跃氛围;分割背景怎么做;大色块背景如何配色等等,全是电商Banner 常见的技巧。值得一提的是文中案例非常丰富,能大大降低新手的学习难度。

哈喽大家好!已经很久没有更新分享了,没有啥好的点子了。该分享的都分享的干净了,那为什么现在整理这些分享给大家呢。

还是希翼能帮助大家更快的了解Banner设计的一些技巧,另外也是有一些新的想法想和大家交流。

部分案例来源于网络 多有得罪请恕罪哈。

01)Banner 5宝

  1. 图案图形节奏感

  2. 装饰碎屑气氛足

  3. 分割背景更活跃

  4. 背景颜色大色块

  5. 终极宝 

02)案例改稿分享

是不是你也会出现这些问题:

  1. 画面脏

  2. 页面空

  3. 细节不足

一、图案图形节奏感

图案指的什么

图案相比大家都知道,也或多或少用过。图案放大可以变得大气,缩小也可以很精致。

而Banner中经常会出现的图案大都是几何形状的重复或旋转得到的图形,用来做为背景的纹理来丰富背景的细节感。有时候有人经常会说背景里少了点什么,下次你不妨尝试一下用用。不是一定要用,如果你需要可以试试效果呢。

举个例子:

xz201607111

采用一个几何形状通过平移重复得到的图案,在应用在纯色的背景上我把它称之为图案。

案例中的背景采用了纯色背景搭配,没有过多的颜色。在这种情况下为了使背景避免过

于简单,所以加上了菱形图案来丰富背景的细节和层次。

图形指的什么

有人可能会问了,图案和图形的区别是什么呢。图案是通过复制平移得到的,而图形可以通过复制平移和循环放大某个形状得到的图形。图形比图案的节奏感往往会更强一些,图形需要手动去调整和复制,可以做更多的差异化重复。而图案则是规律性更好。

再举个例子:

xz2016071113

图1:案例中的图形是通过相同的圆角矩形,长度和宽度的变化来组合成了更强的节奏感。它可以是色彩变化多端,也可以是单色深浅变化。

图2:案例用了三角形向上循环重复使用,并且通过改变颜色深浅增强了空间感。其实上面还加了一成三角线的图案,不知道小伙伴们你们看到没。

看对比01-背景有图案和没有的区别:

xz2016071124

xz2016071134

我就拿一个三角形图案Banner对比添加和不添加图案的感受,在没有添加图案的情况下虽然这个案例在其他方面我做了挺多视觉表现,但是没有图案还是会感觉少了一点节奏感和细节。当大家为背景层添加了图案之后,画面变得饱满、同时也增加了促销的感受。

看对比02-背景有图案和没有的区别:

loser20160711

同样是没有和有图案的对比(为了大家看的明显一点我把图案加深了一些,因为是线条图案图片缩小就不是很清晰了)图案不仅可以是形状、它也可以是线条。很明显的感受到第一张图促销氛围已经可以满足了,但是通常大家会为了让背景更有细节会添加一些图案。(个人意见 仅供参考)

图案的应用

xz2016071143

第一个案例中用到了3种图案,圆、星、竖条都是来烘托页面背景。其中竖条属于图形重复。

xz2016071144

第二个案例用到了类似波浪线的图案,这些图案总是会给人与生俱来的节奏感。

图形的应用

xz2016071145

案例中是由多边星形由小发散的图形,是不是有很强的节奏感。图案不仅是平铺重复得到,它还可以由一个基本型放大-复制-放大这样循环得到的图形(也可以说是放射性构成)

loser20160711-2

在这样一个背景纯白的视觉上面,大胆的使用单个倾斜长条复制得到的背景图形,与模特姿态和五彩缤纷的元素组合起来巧妙的产生了有节奏感。

二、装饰碎屑气氛足

Banner设计中经常用到会有彩礼飘带、矩形、三角形、红包外形、横条等装饰。

xz201607113

案例中都具备图案、图形,密集的点点图案使背景更有细节、圆形的多个复制的图案让画面更饱满,飘起来的装饰是不是也有大有小。

三个需要注意的方面

xz201607114

1)有大有小

最基本的基础,因为大小产生空间感、节奏感,如下图左1

2)别克隆

别克隆的意思就是不要所有元素都重复的使用,案例中的三角形有描边的、填充的、几何体,元素更丰富了,但适可而止。如中间图

3)有深有浅

案例中三角形的颜色有深浅看到了吧,这样做是让画面不会很平没有远近感觉。如图右1

xz201607115

三、分割背景更活跃

有人问我这个Banner用什么分割呢?圆形、矩形?当场我就愣住了,只想静静。这个你自己想用什么分割都可以呀,不同的分割给人不同的视觉感受。搞清楚你想要的就知道用什么了。

因为它在Banner设计中的确是很有效果的,所以大家不仅需要实践,还要进行对比分析,这一大家才会成长的更快嘛。

一个案例来演示下,同一主题不同分割的应用。

xz201607116

矩形的分割应用

xz201607117

△ 无分割

xz201607118

△ 有分割

在这里举例矩形的分割,倾斜的会更加利落一些。还有别的方式我就不一一举例了,大家

多留意观察和收集(案例只是来举例分割的其他方面我就没有调整)

圆形、三角形的分割应用

xz201607119

△ 圆形

xz2016071110

△ 三角形

圆让人看起会有圆滑、包容的感受,而三角形是干净利落到底的感受。形状的大小、位置,在文案后面还是模特(商品)后面,都是可以变动的。不同的地方感觉会不一样。

背景的分割会让你的画面变得有层次,多尝试就会有慢慢对分割有一定的认识和感受。

四、背景颜色大色块 第四宝色块

大面积色块的应用,在Banner设计中特别明显。也是非常有效,天猫、淘宝、京东等这些国内电商平台的活动经常是以色块背景为主。色块在很久之前就很流行,作为一种风格。在大色块背景上面,白色的文案、图案就成为了视觉焦点。在色块背景上应用类似时尚的波普元素,画面节奏感就出来了。

案例如下:

xz2016071112

案例中背景颜色是整个蓝色大色块,在这样的情况下。白色的文案就显得非常突出了,成为了视觉的焦点。所以有时候大家会看到天猫、淘宝、京东的促销活动中的会场Banner经常会这样做,一是让主题文案成为视觉的焦点,二是延展其它会场方便套用。没有过多的特效处理,这样大大的节约了时间成本。

用色块背景的时候该注意什么

最重要的就是配色了,颜色尽量不要超过三种。模特或产品的颜色不要和背景颜色跳跃太大,列如上面的案例背景是蓝色,那么其它的颜色可以是青色、紫色、黄色搭配起来会比较舒适。可能你会说黄色和蓝色相隔那么远,黄色是和任何颜色都可以很好的搭配的,所以你会看到官方的Banner图中出现黄色的利益点、小色块。

如果你用不好对比色、互补色、近似色等这些配色理论。那大家就把这些简化成2个点

01)暗色配亮色、亮色配暗色

02)深色配浅色、浅色配深色

暗色配亮色、亮色配暗色

暗色和亮色没有规定说哪一个颜色就是暗色或亮色,如果非要说那就是黑和白了。某一个颜色暗和亮是可以控制的,就像是颜色深浅。但是大家以饱和度最高的情况下,从最基本的红橙黄绿青蓝紫来说,如果它们对比起来就产生了暗和亮的。

xz2016071111

这里的分类表明的不是绝对的,因为一个蓝色非常亮,但是如果和黄色比起来是不是蓝色相对暗了呢。,每个颜色都有它最亮的色值,当然不会超过白色和黑色。白黑才是最亮和最暗的。就像 如果这个世界没有瘦子那么就不会有瘦子一样。

所以大家会通过调颜色饱和度的深浅来让它变暗或亮,当然如果要深度的熟悉配色原理,还是要从对比色、互补色等这些原理去了解,才能更加的透彻。

温馨提示:

1、凡本网注明“来源:***(非盈科互动)”的作品,均转载自其它媒体,转载目的在于传递更多的信息,并不代表本网赞同其观点和对其真实性负责。

2、如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。

征稿启事:

为了更好的发挥盈科互动资讯资讯平台价值,促进诸位自身发展以及业务拓展,更好地为企业及个人提供服务,盈科互动诚征各类稿件,欢迎实力来稿。

文章TAG:

热门城市网站建设
南漳网站建设 枣阳网站建设 沙市网站建设 石首网站建设 老河口网站建设 丹江口网站建设 随县网站建设 汉阳网站建设 洪湖网站建设 利川网站建设 孝南网站建设 硚口网站建设 通山网站建设 襄城网站建设 樊城网站建设 长阳网站建设 东西湖网站建设 夷陵网站建设 远安网站建设 郧西网站建设 江汉网站建设 罗田网站建设 建始网站建设 团风网站建设 曾都网站建设 保康网站建设 红安网站建设 黄石港网站建设 赤壁网站建设 谷城网站建设 曲江网站建设 荔湾网站建设 越秀网站建设 乐昌网站建设 萝岗网站建设 番禺网站建设 濠江网站建设 武江网站建设 顺德网站建设 龙湖网站建设 南沙网站建设 高明网站建设 光明新网站建设 南澳网站建设 天河网站建设 潮阳网站建设 白云网站建设 罗湖网站建设 新丰网站建设 花都网站建设 翁源网站建设 金平网站建设 禅城网站建设 斗门网站建设 龙华新网站建设 南海网站建设 从化网站建设 香洲网站建设 澄海网站建设 福田网站建设 澧县网站建设 鹤城网站建设 永定网站建设 沅江网站建设 武冈网站建设 赫山网站建设 湘乡网站建设 衡阳网站建设 安仁网站建设 涟源网站建设 宁乡网站建设 津市网站建设 攸县网站建设 南县网站建设 溆浦网站建设 炎陵网站建设 韶山网站建设 新化网站建设 古丈网站建设 衡山网站建设 蓝山网站建设 醴陵网站建设 大祥网站建设 江华网站建设 望城网站建设 岳阳网站建设 苏仙网站建设 城步网站建设 泸溪网站建设 茶陵网站建设
和这篇文章主题相似的文章
澳门太阳神集团 | 网站建设 | 微信开发 | H5制作 | 网络营销 | 案例展示 | 资讯中心 | 文字版官网| 米拓模版标签在线手册
136-2726-6633 / 027-82756-772

地址:武汉市解放大道1328号中原大厦1806室

E-mail:wuhan1806@163.com;QQ:6686935

热门标签: 更多标签
本网站所刊载信息,不代表盈科互动观点,部分信息及数据来源于互联网,如果侵犯您的权益,请速与大家联系。
Copyright ? 2006- 盈科动力(vikasp.net) 版权所有-鄂ICP备13002765号-1技术支撑:澳门太阳神集团

在线
客服

技术在线服务时间:9:00-20:00

在盈科,您对接的直接是技术员,而非客服传话!

  • 网站建设
  • 小程序开发
  • APP开发
  • 品牌设计
  • SEO优化
  • 售后支撑

电话
咨询

027-8275-6772
7*24小时客服热线

136-2726-6633
项目经理手机

微信
咨询

加微信获取报价
顶部
XML 地图 | Sitemap 地图