详细解析网页Banner设计的心得技巧

186liuxing

186liuxing

2016-02-17 01:28

图老师小编精心整理的详细解析网页Banner设计的心得技巧希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验。如有错误,尽管拍砖,小女子虚心请教学习。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

Banner设计其实是我们接触互联网工作后,最常见一种工作。那么Banner到底是什么呢?Banner的核心使命其实是吸引用户关注,然后被点击。他的主旨就是主题明确,突出关键内容,抓住用户眼球。一个Banner他是由背景、主视觉和标题文字三部分组成,在我刚刚接到需求的时候,我首先分析他的重点词、字,想要表达什么,分析好了后可以在纸上画下草稿,在大脑里有个大概的视觉效果,想法多的话可以画几版不一样的,最后根据草稿定一个定稿,接下来就可以找素材着手做了。在做期间,还要注意整体的美观,让人看起来舒服。

下面从这三部分逐一给大家分享下。

一、背景

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

我们画画的同学可能都知道,一个画面不可能都面面俱到,重点的需要细致刻画,有的一笔带过即可。设计一个Banner有时候就像画画似的,首先要有大的环境,那Banner的背景就好比大环境,其实主要是起到衬托、烘托气氛的作用。一个新需求过来,首先我们考虑要营造一个什么样的环境,什么样的气氛,是欢快的、悲伤的、可爱的还是比如过年,可能就用红橙色,比如儿童类的,颜色上就要纯一点,活泼点等等。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

但是需要注意一点,背景不能太花,否则会影响整体的一个可读识性,简单,清晰即可。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

二、主视觉元素

Banner中的主视觉要清楚,符合主题,元素不可太多,否则看起来跟人感觉就会乱。有的人在做时只要是有地,就全放满,其实页面适当的留白也是提升画面品质的一个好方法。视觉元素不论是人物,还是其他,一定要清晰,在我们找素材的时候也要找像素质量高的,我一般会去站酷、昵图网、花瓣或者直接google搜,不要太多。还有一点注意的是不可盗用他人的作品,头像等等。大家都懂的:)

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

下面的这个Banner看起来就比较乱,东西太多,想表达的也太多,这时候需要用户去花时间思考它想告诉我们什么,而往往这时候用户是不愿意是思考的,一是画面不知道他要表达什么,二是整体上没有吸引住用户的眼睛,这种情况下这个Banner是做到比较失败的。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

三、标题文字

标题文字非常重要,是整个Banner的主题,重点文字一定要在背景中突出出来,不论用颜色对比、放大、变形设计还是即便做立体效果等等。(这里我分享一个经验,就是在页面上新建一个黑色的图层,样式改成饱和度,整体上成黑白的效果后一眼就能看出来了)

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

这个Banner标题用了描边和投影,从背景中出来了,但还是看起来不舒服,主要是他的文字有用曲线、斜线的方式,让人不禁会顺着字的排版顺读下去,他这里面不同方向的斜线用的还比较多,这种方式看多了就会比较累,没有形成统一。

详细解析网页Banner设计的心得技巧,PS教程,图老师教程网

这个Banner看起来比较清新,没有过多的元素,但重点是文字,由于背景用的浅色,文字也用的浅色,用户是很难看出来的,影响用户的阅读性。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

最后总结几点

1.画面整体统一,颜色搭配的看起来舒服;

2.页面元素要以组为单位;(如文字和文字之间的间距不要过大,让人看起来是一组)

3.采用吸引力的用语,或者添加火速参与等刺激性的词语按钮等,让用户在最短的时间内有去点击他的欲望。

4.主次对比分明,合理安排页面布局;

5.输出K数不宜过大,否则加载速度会慢;

6.最后最重要的一点是,前期工作一定要与需求方沟通好,要知道,在工作中,沟通是非常重要的一件事情。

以上是自己在平时工作中总结的一点点小经验吧,希望对初学设计的同学来说有点帮助,还望大师们多多指点,我会虚心学习。有部分图是从网上找的,在这里借用下,如果侵犯您的权了,请告知下。谢谢。

展开更多 50%)
分享

猜你喜欢

详细解析网页Banner设计的心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页Banner设计的心得技巧

详细解析网页字体设计心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页字体设计心得技巧

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

详细解析网页全屏设计的心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页全屏设计的心得技巧

设计师解读网页Banner设计的心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
设计师解读网页Banner设计的心得技巧

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

详细解析专题BANNER设计心得分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析专题BANNER设计心得分享

详细解析BANNER设计的故事

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析BANNER设计的故事

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

送给美女摄影师的100条摄影小贴士

送给美女摄影师的100条摄影小贴士

摄影师浅谈星空拍摄技巧全攻略

摄影师浅谈星空拍摄技巧全攻略
下拉加载更多内容 ↓