8种方法,教你玩转字体设计72变

2017/03/28 30266

在视觉设计工作中,几乎每项任务都会使用到字体。

字体是最基础的设计元素,也是设计中必不可少的表达工具。在恰当的环境下使用合适的字体,可以让设计更生动严谨。在运营活动、海报、书籍、包装等诸多媒介中,文字部分作为信息传达的重要工具,除了要准确传达信息的基础功能,还需要赋予其美观的形态,使其视觉传达更为强烈与丰富,更能引起用户的注意。

字体设计不同于字体库字体,它是经过艺术性加工和升华的字体,对比字体库千篇一律,个性不强的字体,字体设计展现的魅力更加独特与诱人。

欢迎关注作者:众安ZED原创 ( 微信号zhongan_zed

字体表现类型

那么做为字体小白,如何从基础开始有系统性的学习字体设计呢?下面将以中文字体做主要分析,根据喜闻乐见的字体设计案例,我们大致将字体表现类型分为五种:黑体字、宋体字、书法体字、三维体字、动态体字。

黑体字

黑体字也叫等线体,又称“方体”,属于无衬线字。字架吸收了宋体字结构的优点,去掉了衬线装饰,整体简洁大方,有时尚感和现代感。黑体字可以说是百搭字体,可塑性很强,可以表现商业的严谨气质,也可以表现青春激情和动感,纤细的黑体还能体现女性气质。

上图为众安微信公众号“马上飞”的活动页面等线体字设计

宋体字

宋体字是为印刷而生的,其笔画有粗细变化,一般是横细竖粗,笔画末端有类似三角形的节点衬线装饰。宋体属于衬线体。宋体的装饰性远大于黑体,宋体字形在文化、艺术、生活、女性、美食、养生、时尚等领域所传达出的气质要比黑体字形准确。

上图为众安天猫旗舰店新年活动页面宋体字设计

书法体字

中国书法字讲究行气,指书法作品中字与字、行与行之间的呼应关系。一般要求笔断意连,连缀成行,积行成篇,在文字的上下、左右、首尾的书写中,既有变化,又能和谐,如清代宋曹《书法约言》中称:“勿往复收,乍断复连,承上生下,恋子顾母。”书法字自身孕育的大气恢弘之势,可以承载出无限的设计能量。在字体设计中,书法体一般是用毛笔,为了字体气质丰富的表现力,可以尝试用软笔、马克笔、秀丽笔、钢笔、铅笔等书写工具。

右图为众安保险微信公众号“万人画蓝天”活动页书法字体设计

常规的书法字体体设计实现有两种方法:

第一种为字体库书法体:

根据字体库里的书法字体,组合毛笔笔触,实现字形的再加工。

第二种为手写书法字体:

a. 用毛笔等工具书写,然后扫描到电脑里进行再加工,无聊闲暇的时候可以用其他书写工具寻找笔触感觉,比如马克笔、白描笔、钢笔等,除了在纸张上书写,还可以尝试在餐巾纸、玻璃等非常规书写媒介上探索有意思的笔触。

b. 用手绘笔在电脑上直接写,先书其形,再填充加工(这里又有笔触杂边与平滑之分,想要比较类似毛笔笔触的杂边可用手绘笔与素材配合。)

△ 毛笔字书写实现案例

其他的书写做字工具

上图为众安app开屏页手写字体设计

三维体字

三维体指有3D效果,立体感,空间性强的字体。常见是辅助60°、45°网格绘制,各个透视组建,按照基本字形组合搭建而成。横平竖直的结构比较容易实现,撇、点、捺需要设计师丰富的创作能力去实现。或者将字型笔画拆解,用立方体、圆柱体或其他几何体取代常规笔画,任意组合,可以创造出无尽的字体可能。当然也可以直接用如C4D等三维软件,根据字型建模渲染,最终效果逼真动人,使字体设计魅力十足。

上图为众安1221献保节立体字设计

动态体字

静态字体有自身表现的局限性,如果增加动效可以增强感官感受,也能将字义表现的更到位,使人印象深刻。

字体基础改造方法

介绍了五种字体表现类型,想必大家已经跃跃欲试了。现在我们了解下汉字的基础改造方法。

汉字是方块字,为了达到视觉上的感官平衡,在字形空间上是有一些基础规律可循的,简单粗暴的总结为三种结构表现方式:上紧下松、横细竖粗、左窄右宽。具体推导在此不做赘述,但需要了解的是字体重心。

汉字的重心和我们理解的几何重心是不同的。字体重心是一个字最吸引视线的重心,也称为视觉重心。简单来说,视觉中心在几何中心偏左上方一点的位置。比如在米字格中,对角线的交叉点就是几何中心,而交叉点左上方一点的位置才是视觉中心。

设计中为了达到字体的整体平衡,一个字中较重的部分要靠近字体重心,较轻的部分则要离重心稍远些,这样能使字达到视觉美感平衡。一般来说,一个字的主体部件和次要部件在布局上处理成黄金比例,那么这个字在视觉上就平衡了,看起来也会更加舒适美观。

黑体字与宋体字是所有汉字字形的基础,它们有严谨的字体结构,所以练习字体设计,均从黑体字与宋体字开始。

有两种基础的实现方法:矩形造字法和路径造字法

矩形造字法:在AI里画好矩形,根据字体的基本字形,一笔一笔的拼凑,简单易行。

路径造字法:在AI里用钢笔画好路径,确定好字形后,描边。

有了字形,我们还需要根据字义进行变形。由字义到字形的设计过程是一个由内而外,由虚至实的思维过程,从核心字义出发,从字体内容出发,才能有一个准确的设计起点,最终设计出内外兼修的字体。

以下有8种简单的方法,可以让基础字型成为内外兼修的好字型。

1. 笔画代替法

在原有字体基础上,删减某一处或多出笔画之后,再用其他形式进行代替,可以用其他字体笔画做衔接,也可以用图形图像的添加,方式很灵活。或者采用具有象征性的视觉图形符号,唤起人们对某一个抽象意义、观念或情绪的记忆。能正确传达与理解象征的意义,表达出字体的含义与气质。

2. 细节添加法

根据字体主题进行针对性的设计修饰,常常是在横竖撇捺的笔画端点处进行锚点添加,或断点处理。

笔画有快手的组合形式,比如笔画太多太复杂,为了简单粗暴的表述,我们先以横线来做示范。

男性字除了可以把笔画变粗,还可以这样:

女性字除了可以把笔画变细,还可以这样:

下图为众安三月八日女神节活动页面设计的更纤细,更柔软的女性化字体。

3. 笔画删减法 

在保证字体识别度的前提下,对笔画进行减法留白处理,因为人脑可以根据自己的视觉经验将隐藏或省略的部分在脑中自动补齐。这种方法处理的字型比较有东方绘画的韵味,文艺气质浓厚。

4. 效果添加法

运用圆角、描边、倾斜等系列工具对原字体笔画进行显著的外形变化。圆角工具可以把笔画转折处变直为曲,描边工具可以使字体加粗或减细,倾斜工具可以加强字体的力度与动感。这种方法特别容易出效果,项目时间紧急的情况下,可以在字体库里找到合适的字体,进行简单的加工,就能实现还不错的效果。

上图为众安3周年庆与春运活动的运营页面字体设计

5. 符号拼接法

拆解出外文或标点符号独特的笔画装饰,按照汉字的字形结构去组合。一般使用比较多的是哥特字体、藏文、中世纪的手写卷花体等。最近看到一种尝试方式是拆解宋体字笔画结构,搭配几何图形进行新的字型重组,有解构主义的韵味。

6. 氛围装饰法

在设计好的基础字型周围添加放射线、波点等几何形,或者花型,来烘托气氛,对字体含义的表达起到辅助作用。

7. 色彩质感法

通过丰富的色彩,光线阴影,质感叠加,具象或抽象的图案纹路让字体变得生动活泼。

8. 空间层次法

透视、虚实(景深)、羽化模糊、视幻、点化群集、重叠遮挡、投影、正负反向等手法来塑造字体空间的丰富性。

上图为众安“马上飞”公众号的雾霾出行送口罩活动的字体设计

总结

笔者认为,可以称之为「高级感」的字体带有如下特征:

  • 不加修饰
  • 简约
  • 纯粹
  • 耐看
  • 结构端正
  • 经得起推敲
  • 字型带有美感与张力

设计师需要进行大量的练习,才能真正领悟字体设计的精髓,根据需求游刃有余地将字体设计融入到平时的设计工作中。

最后,分享以下不错的字体设计书籍,与大家共同学习:

  1. 小林章 《西洋字型,字型的背景和使用方法》(2005年)《西洋字型2:常规字型和表现手法》(2008)/《字型不思议》(2011)
  2. 左佐《设计师的基本修养》《治字百方》
  3. 杉浦康平《亚洲的书籍文字与设计》
  4. 张光宇《张光宇集-现代设计》
  5. 廖洁连《中国字体设计人:一字一生》
  6. 李明君《中国美术字史图说》

欢迎关注作者:众安ZED原创 ( 微信号zhongan_zed )

「优设字体设计好文集锦」

  1. 灰昼字体推荐:《灰昼的字体库!10款常用的经典基础英文字体推荐(已打包)》
  2. 字体排印指南:《新手福利!一份详尽全面的UI设计字体与排版指南》
  3. 150000种设计方法:《刘兵克大神教程!送给你150000种字体设计方法》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/8-method-design-fonts

素材 界面设计 好文 交互设计师 UI 转场动效 设计流程 用户体验设计 设计师专访 设计师 排版布局 扁平化设计 素材下载 视觉设计 职场 设计规范 产品设计 配色 web前端开发 设计趋势 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里