广东快3>WIKI库>学习UI设计>banner设计简介

banner设计简介



了解banner概念及应用


1.什么是banner?


Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题。Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。


2.banner的具体形式


一般是比较长的放在网页抬头的图片形式。比较高的图片。长短不一的各种图形形状。不管是侧边栏广告、焦点图、专题页的头图,我们都可以理解为师banner,在设计方法上,其实都是共通的。


3.banner的用途


1)大家经常在各种大大小小的网站都能看到的广告banner或者焦点图,它们都有大有小、可长可短,但是他们共同的作用就是通过各种方式引导你去点击、渲染气氛。


2)大家通常可以在各种游戏网站,房地产网站,各种活动专题页中见到,也就是大家常说的头图,这种类型的banner通常并不是引导用户去触发点击,而是服务于内容,为整个页面做好气氛的渲染。



Banner包含的三个部分


1.文字(占主导地位)


大家都知道我们从图形上解读信息的能力是要大于单纯的阅读文字,但是在banner的设计中,大多数情况下我们都是通过文字来了解信息,图片知识起到一个衬托的作用,做banner的时间分配里对字形的处理可能要占到50%甚至更多的时间。


1)需要对文案内容负进行处理


使内容更符合信息传递,如果主标太长,需求方不舍得删文字的情况下,对主标中重要关键字进行强调,突出主要的信息,弱化非关键词。整体文字太短,画面太空,可以用一些加入一些辅助信息丰富画面。如加点英文、域名、频道名等。


2)需要考虑到字形


文本主要包含标题和辅助性的文本。标题部分一般需要进行些设计处理,提高画面的艺术感和吸引力。钢笔造字是在做字形设计上一个比较讨巧的方法,但却又十分有效。笔画连接,做笔画连接时只有合理的安排需要连接的笔画,在笔画收尾和边缘做一些简单造型处理,那么都会出来一个比较好的视觉效果。在做笔画连接时推荐使用一些笔画粗细比较统一的非衬线字体。


形状替换:根据文字的具体含义来设计字形的一种方法。比如把卖表的文案中出现“时间”把日字旁换成钟表。卖服装,把“装”字的衣字底改成衣服的团等,这种设计往往带来新奇的视觉效果。


3D设计:如果要在banner中想突出文字,把文字做成3D效果可谓是最“粗暴”的一种解决方法,只要处理方法得当也可以达到很好的效果。可以通过对多个文字副本移动,或重复变形,做出简单的立体效果。


介绍性文本或者次要信息部分,一般是低调处理,一般使用一些通用字体。字体两种作呕即可,太多会使画面失和如果使用一些商业字体,需要注意使用授权的问题,避免产生一些法律纠纷。


普通字体可以通过一些简单方法焕发活力。


字体处理:


1)给字添加背景,以达到突出文本,拉开字语背景的层次的目的。


2)对字体倾斜处理,整体看起来就活泼跳动了很多。


3)对文本进行斜切处理,打破沉闷的版面布局,可以说是百试不爽。


2.主视觉图


主视觉部分一般放置产品图、任务模特等。产品图的选用要切合题义,不过这部分,大多一般都会有素材提供,不需要我们过多花费精力。需要注意的是,在使用补充素材时,要保证图片清晰,部分图片不清时,可以使用如花滤镜处理一下。一些扣图,调整图片色彩灯操作,这些都是通用技术。


3.背景


背景部分可以烘托出整体气氛。


三种类型的背景:


banner1.png


第一种使用的是纯色的背景,通常这种设计使整个画面显得很清新、简洁。


第二种是渐变型的,可以增加设计的效果,使整个画面更加绚丽,一般一些科幻类可以用到。


第三种是带有复杂背景的,一般用在特殊的专题当中,用于烘托出主题的特点。


背景的选择需要根据网站和主题的风格来予以确定。比如历史专题频道,则会选择复杂的背景图片来烘托气氛。而清新现代风格的网站可能会选择浅色背景。对比不足的时候,可以对文字后背景虚化处理、减淡背景色。



小作业


了解banner的两类用途及其三个组成部分。课后了解一些字形处理的技巧,尝试着去设计一些文字效果。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录