一个banner的设计——字体字形篇
作者:LipengBian
筒子们好,今天我们一起来探讨一下Banner的设计,在这一次的教程中我会介绍一些平时总结下来的可以让banner迅速达成效果的简单小窍门,如果你在平时有大量的banner设计工作,并且总觉得时间不够用,那么希望本次的教程可以帮助到你。
好了,那么我们进入正题。
首先让我们认识一下banner,平时大家在各种网站或者移动端的app里经常可以见到,印象里他们大都长这个样子:
当然了,这就是我们常说的banner,但其实banner还有几个远房表兄、同父异母什么的兄弟姐妹们,它们可能长这个样子:
恩……其实以上这些在广义上来说都可以归纳为Banner,就形状来说现在的banner也已经不再局限于从前大家所理解和看到的那些出现在固定广告位的长条形广告了,他可以是长的、方的、必要的时候也可以是其他什么乱七八糟的形状,总之,不管是侧边栏广告、焦点图、专题页的头图、我们都可以理解为是banner,在设计方法上,其实都是共通的。如果要是分类的话其实可以大概分为两类:
1.“促使点击”
2.“渲染气氛”
第一种就是大家经常在各种大大小小的网站都能看到的广告banner或者焦点图,她们有大有小可长可短,但是他们共同的作用就是通过各种方式引导你去点击。
通常你在做这种类型的banner时,一般会是上图这个场面。
第二种大家通常可以在各种游戏网站,房地产网站,各种活动专题页中见到,也就是大家常说的头图,这种类型的banner通常并不是引导用户去触发点击,而是服务于内容,为整个页面做好气氛的渲染。
通常你在做这种类型的banner时,一般会是上图这个场面
说这么多,其实我是希望通过这种介绍和分类方式,让大家在拿到设计需求时可以确定一个正确的设计方向,降低设计成本,从而提高工作效率。
下面我们介绍几个设计小窍门,也许通过这些方法可以让你在最短的时间内有效的达成效果。
首先我们来说一下字体和字形,大家都知道我们从图形上解读信息的能力是要大于单纯的阅读文字,但是在banner的设计中,大多数情况下我们都是通过文字来了解信息,图片只是起到一个衬托的作用,在我自己平时做banner的时间分配里对字形的处理可能要占到百分之五十甚至更多的时间,所以今天我们重点来说一下这方面的处理技巧。
1.钢笔造字
钢笔造字是在做字形设计上一个比较讨巧的方法,但却又十分有效。对平时没有太多字形设计经验的同学来说非常适合的,只要你了解基本的字形设计规律(笔画的粗细,字体的重心等),那么此方法可以让你快速的让banner高大上起来,具体的设计方法大家可以移步字形设计大师@刘兵克老湿的设计教程:http://v.youku.com/v_show/id_XNDI4MDMwMTg4.html
2.笔画链接
当你没有时间完整的设计banner上字体的字形时,笔画链接未尝不是一种好的方法,在做笔画链接时只有合理的安排需要链接的笔画,做到不突兀,不影响易读性,那么都会出来一个比较好的视觉效果,在做笔画连接的时候我推荐大家使用一些笔画粗细比较统一的非衬线字体比方说雅黑、悦黑、幼圆等等。
3. 随“意”变形
顾名思义就是根据文字的具体含义来设计字形的一种方法,当上面介绍的两种技巧都让你感觉头大的时候不妨试试这种处理技巧,你只需要脑洞大开,了解文字的具体含义并用相应的图形在文字上加以体现就可以了,就酱简单!
4. 3D
如果要在banner中想突出文字,把文字做成3D效果可谓是最“粗暴”的一种解决方法,只要处理方法得当也可以达到很好的效果,如何处理3D这种细节问题这里就不提及了,网上有大堆大堆的教程可供参考。切记,处理3D文字的时配色是关键,稍不注意就会显得山寨和俗气。
好了,以上是一些在设计banner时可以用到的字形设计技巧,可能有童鞋要说我平时banner的设计工作很繁重,时间也很紧张,没有精力去做字形,或者由于版权的问题,在大多数情况下不得不使用那么几种字体,像这样的情况有没有好的办法让banner中的文字出效果呢。答案当然是有啦,下面就给大家介绍几个方法。看看如何在使用简单的默认字体的同时打破字体的沉默。
字体如何打破沉默——不破不立
看到没有,同样是简单的字体,只是打破了整段的文字,做单个字体的倾斜,整体看起来就活泼跳动了很多,或者可以做单个字体的叠加,凹凸效果同样可以让简单的默认字体变得跳跃起来。
如何打破字体的沉默——空间独立
说起这种方法我们就不得不提到banner中的空间关系,在设计banner时通常我们如果我们想突出文字,那么就要使文字和背景拉开空间,而为文字做一个简单的纯色底色不可谓不是一个省事的办法。
如何打破字体的沉默——斜能压正
如何打破字体的沉默——长短粗细变换自如
通常我们在做一段文字的排版时,经常会根据段落中的关键字做相印的加粗或者高亮,这种方法看似简单,但是在实际操作的过程中稍有不当就会导致整段字体看起来凌乱不堪,其实只要设计的时候把文字看作图形,注意整个字体排版的走向是否有规律可循就容易很多。
OK,以上就是今天为大家总结的一些字形与字体的处理方法,希望对大家有所启发,在banenr的设计中还有很多种有效的技巧可以用到,如果你有什么特别的技巧也可以告诉我们。
就到这里了,下期见~
相关推荐
在网页设计中,一个优秀的Banner不仅能够提升页面的整体视觉效果,还能有效地提高用户体验。这个名为“优秀网页设计素材之——168个网页Banner”的资源包,包含了168个精心设计的Banner模板,对于设计师来说是一份...
总的来说,“1000幅网页Banner欣赏”是一个宝贵的资源库,它涵盖了网页设计中的关键元素——Banner的多样性和创新性。无论是新手还是资深设计师,都可以从中汲取灵感,提升自己的设计水平,创造出更具吸引力和影响力...
- **Logo 设计:** Logo 是品牌形象的重要组成部分,一个好的 Logo 不仅能够反映品牌的定位,还应该具有较高的辨识度。 #### 三、工具和技术选型 - **HTML 编辑器选择:** 对于网页设计者来说,选择合适的 HTML ...
综上所述,"网站banner设计PSD素材"是一个宝贵的资源,可以帮助设计师快速创作出引人注目的网站Banner,同时也是一个学习和提升设计技能的好材料。通过实践和分享,我们可以不断丰富自己的设计经验,创造出更优秀的...
- **项目目标**: 开发一个面向大学生的HTML5期末考核大作业源码,旨在帮助学生理解和实践网页设计的基本原理和技术。 - **适用对象**: 主要针对大学阶段的学生群体,特别是那些正在准备HTML5期末考核或者毕业设计的...
在现代网页设计中,Banner作为一种重要的视觉元素,不仅承担着传递信息的任务,更是品牌形象展示的关键窗口。优秀的Banner设计能够吸引用户的注意力,提高点击率,进而促进网站流量的增长。本文将探讨网页设计中的...
本资源包含600个精心设计的网页Banner模板,旨在为设计师提供丰富的创意参考和快速设计工具。 Banner模板的设计涵盖多种风格和用途,包括但不限于商业广告、产品推广、活动宣传、品牌展示等。这些模板的特点是图像...
最后,"Banner设计实例.psd"是Photoshop源文件,对于想要深入学习Banner设计技巧的人来说,这是一个宝贵的实践平台。通过查看并解构这些实例,我们可以看到设计师是如何运用图层、蒙版、滤镜等工具来实现特定效果的...
在设计领域,特别是数字媒体和网页设计中,Logo和Banner是至关重要的元素,它们能够有效传达品牌信息,吸引用户注意力,提升网站的整体视觉效果。以下是对"logo、banner设计原则及尺寸标准"的详细解析: 1. Logo...
- **Banner设计**:设计引人注目的横幅,作为网页的主要视觉焦点之一。 - **表单设计**:实现用户输入数据的功能,如登录表单、注册表单等。 - **二级三级页面**:通过链接跳转到更深层次的页面,实现内容的分级展示...
在设计一个Banner时,字体的选择至关重要,因为它是传递消息的主要工具,能够影响整体视觉效果和用户体验。 描述中再次提到的“Banner”可能是指一个设计项目或教程,专注于创建具有吸引力的横幅广告。在这个场景中...
设计一个有效的Banner需要把握其核心意义,确保图像和文字都能够鲜明地表达出最主要的情感或宣传目标。 制作Banner的过程并非一蹴而就,它涉及一系列步骤。首先,设计师需要积累和分析需求,了解目标受众、品牌定位...
网页Banner,作为网站设计的重要元素,是吸引用户注意力、传达信息、引导用户行动的关键部分。在互联网营销领域,...对于每一个涉及网页设计和营销的工作者来说,理解和掌握Banner设计的技巧是不可或缺的专业技能。
网站banner设计的专业分析,关于如何设计出正确的banner
在电商领域中,网页Banner设计是一个非常关键的部分,它对于吸引顾客注意力、传达促销信息、增强品牌识别度等方面起着不可替代的作用。网页Banner设计需要考虑到色彩搭配、版式布局、字体选择、视觉效果等多方面的...
该压缩包文件包含了一个基于Android平台的开源项目,其标题为“安卓Andriod源码——仿米赚带两侧slidingmenu和自动banner的一个应用”,表明这是一个模仿米赚应用的示例,它集成了侧滑菜单(slidingmenu)和自动轮播...
标题中的“别具光芒配套光盘内容(一)168个网页Banner”指的是一个与名为《别具光芒》的书籍相关的资源包,这个资源包包含168个设计独特的网页Banner。网页Banner通常是在网站顶部或底部用作广告、宣传或者导航元素的...
本项目提供了一个全面的企业级网站设计模板,适合初学者学习和使用。它不仅包含了基本的网页设计要素,还涵盖了多种高级功能和技术应用。通过对该项目的学习和实践,可以帮助学生更好地理解并掌握前端开发的基本技能...