据说小学生看完都会设计字体了
我是一个运营设计师,日常工作经常需要做字体设计,而我的字体设计又很一般,每次遇到需要造字时都没有头绪,我想能不能总结一套方法帮助到跟我一样的同学,让大家在做字体设计时能够有迹可循。为了写这篇文章我研究了数以千计的案例,试图去提炼字体设计间的共性,共总结出12类造字方法,以方法论为主,详细介绍字体设计的整个流程环节。本篇更侧重于艺术字体设计,多适用于活动、海报、banner等快消式设计,不需要经过历史和时间的检验。
(如下是qq阅读团队的两个H5专题头图设计,相得益彰的字体设计会使专题画面更具张力和感染力)
一、造字准备——“忘”
造字之前首先要干什么呢,当我们接到一个项目需要造字时,首先深吸一口气,然后闭上双眼去忘了去要造的字。忘掉字体的“点“”横“”撇“”捺''钩''折''提',忘掉字体的偏旁部首,只把造字当做为一种线描icon的绘制。
首先明确一点字库设计和字体设计是两回事,我们需要尊重字库设计,但本篇更侧重于艺术字体。
我们的目的就是要让单调而无情的字体,通过我们的设计变得与众不同、而又新颖夺目。
二、造字三层面
本质来看,字体设计可以拆分为这3个层面:
1、字体骨架设计:不同的字体有着不同的骨架,字体骨架影响着字体的辨识度,骨架是一个字体最重要的视觉呈现。
2、笔划特征设计:笔划可以想象成图形,图形会有不同的表现特征,比如宋体字笔划收尾处的菱角特征,书法字体的飞白特征等等。
3、留白空间设计:字体的笔划穿插之间会产生不同程度的留白,留白空间的设计影响着字体的透气度,是字体设计中非常重要的一环。
三、造字步骤
1)氛围考究(防止跑题)
主要是针对我们拿到的需求场景,有一个大氛围上的预判,是童趣风、文艺风、还是古代风等。如果没有灵感我们也可以打开花瓣、站酷等平台搜一些比较好的字体设计,找一些跟我们需求感觉比较吻合的字体形式。
2)草图绘制(骨架探索)
下图为站酷大触“左佐工作室”所画的草图,不要怕丑,草图的目的是对字体的不断摸索过程。此处不需要去扣细节,主要是对字体骨架的探索,细节上我们在软件复现时候再去研究。草图绘制主要研究字体笔划的变形、组合方式、粗细长短等。
3)软件制作(精细优化)
此阶段主要是把上一步选中的比较不错的草图骨骼进行电脑图像化,我们可以将草稿拍照然后导入到计算机中,使用软件勾勒出草稿的形体,再去细微调整字体的大小、结构和留白空间,以及字体笔画特征上的设计。(软件的选择上建议使用llustrator CC2015版本或以上版本,AI 2015以上版本新增了圆角优化功能,很方便字体细节的后期处理和加工)
四、造字秘籍
造字秘籍围绕3种类型展开,分别是针对笔划变型变化的【笔划类】,针对字体变形的【字型类】,针对后期修饰加工的【修饰类】。
第一式 断笔(笔划类)
断笔,顾名思义即是对笔划结构的省略和断开,通过在一些转折处、或笔划交接处,适当的断开,可以使笔画更加清爽。断笔后会有不同程度留白,产生新的节奏感和即视感。断笔的基础和前提是充分利用“格式塔心理学”中的封闭性原理。
“封闭性原理”即是人们在观察熟悉的视觉形象时,会把不完整的局部形象当作一个整体的形象来感知。但如果局部形象过于陌生或简略,则不会产生整体闭合联想,所以断笔的级别在于对一个度的掌握。
常见的3类断笔形式——【十字交叉断】【拐角断】【面条断】
十字交叉断:字体笔划之间往往存在交叉,在一些十字交叉的地方进行断开。
拐角断:字体笔划往往会出现拐角状的笔划,通常我们在拐角处进行断开。
面条断:如果把一些修长型笔划看做面条,断笔可以断在面条的任意一个位置。
我们以“日”作为单字的某个部首去做分析,寻找十字交叉与拐角
第6个日是断的极端表现——“省”,特定场合的字组里是经常出现的。
下面例子中,“黄圈标记”是在笔画衔接处断笔,以此提高字体的个性和透气度,“红圈标记”是断笔后的重新组合,应用到我下面要说的第二式“连笔”进行新笔画的重新组合连接,使字体不再局限于单纯的断笔而又产生新的节奏感。所以断笔后会产生新的笔画形式,新的笔画形式可以用我后续提到的其他招式进行进一步改造。
第二式 连笔(笔划类)
“连笔”是指字体间通过分析字体间的笔画结构特征,寻找到字体间可以通过变形而产生连接的结构形式。在保证字体识别性的基础上,大胆去尝试你所能想到的任何可以产生连接的方式,打个比方你要从河一边过到另一边,可能的方法有千千万种。
常见的3类连笔形式——【字内连接】、【字外连接】、【特殊连接】
字内——延长连接:
字体内部笔划进行延长与其他笔划延长笔划产生衔接。如上图“胡同里”的“同”字的折勾延长与同字相交,形成连笔。
字内——旋转连接:
字内笔划旋转一定方向后与其他笔划产生衔接。如上图中“胡同里”中的“里”字的一个笔划逆时针旋转与上侧笔划产生衔接。
字内——断开连接:
字内笔划局部断开,断开区域过延长或旋转与其他笔划产生衔接。如上图中“度假”中的“度”字,部首“又”左上角进行断开,断开后与下侧笔划产生衔接。
字外——顺势连接:
顺势连接多为横笔,斜笔(因为竖笔易使产生上下拉伸的视觉感,会有重心不稳要倒的错觉...)两个笔划位置相近,笔划的倾斜度也相似,可以顺着笔画的走势延伸尝试相交,如若相交不自然可产生适度变形处理。如下图中“空格”和“秒速五厘米”。
字外——错位连接:
当顺势连接不易实现或想在顺势连接的基础上有所突破,可以考虑错位连接,就是把字体位置错开重新排列组合,错开后通过对笔划的延长、旋转、断开等方式创造连接可能,错位方法可参照后面的“错位组合”招式。如下图中“跨年盛典”和“儿童节”。
特殊连接——笔锋连接:
以上连接方法都是以笔划结构出发去做笔划上的连接,而另类连是我见了很多字体以后发现,有一些连接形式不基于笔划结构,同时又会产生笔画连接的效果。我将这些方法汇总归类为另类连。暂举一种常见的——笔锋连接,篇幅有限,后续会再做补充。
我们日常写字的时候经常会不自觉的连笔,而我们却经常不以为意,连笔笔锋准确的说应该属于毛笔字的范畴。我们将笔划以笔锋形式进行连接,并不会奇怪反而会增加字体不一样的动势。
第三式 笔划化形(笔划类)
当笔画进化到形的状态,就偏离了笔画的基本特征,趋近于图形表现。也就更倾向于前面我们提到的做一个“字的icon”的说法。
“笔划化形”通常将单个笔画或部首以图形替代,亦或是字组里面嵌入形状。形可点题并强调字意,亦可做为装饰处理,形不再属于传统字体的“点、横、撇、捺、钩、折、提”的范畴,所以引入形即能打破传统的字体的形式,又能产生新的既视感。神说:“要有光”,在字体设计里面,有形即有灵。
化形方法常见有2种——【字意化形】、【任意化形】
字意化形:
提取字组或单字字意,将字意化为具象图形,合理的组合在字体的骨骼中。
如下图《半岛时光》案例中,提取时间的字意,具象出钟表指针的图形,嵌入在“时”中点笔划的位置。
下图《全明星》案例中,提取星的字意,具象出星星的图形,嵌入在“星”字中,替换一部分笔划。
任意化形:
与字意化形稍有不同,任意化形更加全面而不受约束。笔画或部首可根据情景或特点变换为任意形状,可具象可抽象,灵活多变。
如下图《极地大冒险》中的“冒”字处理,将“目”的部首处理成类似一个漩涡的形状,迎合了一种冒险、不断探索的感觉。
第四式 笔划包容(笔划类)
行走江湖总得有个家嘛!“笔划包容”即是将字体进行包容和整合,容可以理解成“房子”,而字体的骨骼则充当房内的家具和摆饰!笔划包容有一个先后顺序是通常我们先设计字体的骨骼,然后再根据字体的骨骼去选择盖什么样的“房子”,方的、圆的、高的、矮的等等.......
此种方法常用在多个字的组合设计中。经过“笔划包容”的字体会显得更加的整体和统一,在一些专题、banner等设计中,“笔划包容”的处理方式会大大提高字体的视觉聚焦。“容”并不是说像个包子一样把字体全部包在里面,而是说使字体具有包容感。
笔划包容常见有3种——【常规“容”】、【描边“容”】、【异形“容”】
常规“容”:
常规性的“容”,即是我们常见的规则几何图形,比如方形、圆形、三角形等。以这些规则几何形状作为“房子”去包容字体。此种方法较为常见,难点在于字体与图形间的二次融合。
具体可以理解成Photoshop中形状工具展开项的前5个与字体间的组合。
描边“容”(反白):
描边可能是我们经常用,而有的时候又想不到的一种方法了。小编将描边也作为“笔划包容”的一种形式,因为描边也同样会使字体产生包容感。
描边“容”进一步细分常见有四种描边形式(可逐一对照以下案例对比观察):
常规描边:常规描边可以在PS里加一层描边图层样式,也可以在Ai加描边,亦或是Ai里偏移路径形成描边感。这里主要讲方法论,不做多说,推荐使用Ai,Ai的描边是可以控制描边后的拐角形状的。
移位描边:区别于常规描边,移位描边是将描边进行一定程度的位移,形成一种“伪立体”感。
异形描边:异形描边区别于普通描边的根本点在于会将描边进行二次创造,虽有描边的感觉,但已不单单图层样式和移动就可以呈现的了。
扩充描边:当描边足够粗就会与字组形成偏离感,通常我们再做一些描点的简化处理,会形成一种“描边扩充感”。
异形“容”:
异形的“容”,顾名思义“房子”可以是千奇百怪,造型各异的。不拘泥于传统,更讲究随心随性,这种形式是无迹可寻的。
以下例子可以发现,“异形容”可以是基础图形的组合,可以是墨迹感的反白,可以是盾牌,可以是曲线的弯曲抖动,可以是立体盒子,也可以是水滴造型等等。这个形式更考验对字体的理解、造字的经验和想象创造力。
第五式 笔划生枝(笔划类)
“笔划生枝”意思是说如果我们将笔划骨骼比作树干主体,那么树干上可以伸出来各样的树枝,这样的枝干会显得更加的丰满,细节更加的完整。比如下图中两个字分别是微软雅黑(左)、宋体(右)的字库字体,雅黑字体横平竖直,而宋体字在笔划上却有很多细节特点,这就是一种“笔划生枝”的手法表现。
而“笔划生枝'方法中的重点就在于”枝“的表现上。“枝”可以从枝干的任何一个部分分枝发芽。既可以向外生“枝”也可以向内生“枝”。而“枝”的形状、粗细、曲折就会带来不一样的视觉感受。
笔划生枝常见有2种——【局部生枝】、【嫁接生枝】
局部生枝:
局部升枝是最常见的表现形式,通常在笔划的初始端或末尾端去做生枝处理,在字体的提笔、顿笔、折笔处和字体组合时的大留白处进行相应的各种形状的“生枝”。而生枝时应尽量保持统一性,不易多于2种“生枝”形状。
如下图中的一些局部小细节处理,会显得很精致~
嫁接生枝:
“嫁接生枝”即是将枝干进行大幅度的延伸,形成一种在字体主要枝干基础上进行嫁接的感觉。
如果说“局部生枝”是短而小的,那么嫁接升枝便是长而大的。对于字体枝干上的延伸嫁接会使得字组有一种外放的扩张感。
第六式 笔划融合(笔划类)
“笔划融合”说白了就是填坑,主要针对于两种类型字体。
1)有一些字的某些笔划呈现包围或半包围结构,比如部首“口”“日”“目”等常见的结构。
2)亦或是某些字笔划比较多,书写繁琐,同时要兼顾上下左右结构,比如“繁”“聚”等。
通常针对这两种类型字体,可以忽略一些内部笔划结构将笔划融为一体,形成一种下面例子中的感觉,小编找到的例子都做了统一色调处理,采用此种功法的字组建议慎用黑色,此种功法配黑色看久了会显得比较压抑。
第七式 透视大法(字型类)
前面讲过的所有方法都是在二维平面去做设计,而所有字体的应用场景也都是在平面二维视觉中。“透视大法”是说在字体设计中通过字组之间的堆叠,或者是字体笔划的纵深处理,使得整组字体呈现出一种透视感,或者称之为一种“2.5维动感”。
在进行“透视大法”之前,需要明确字体的透视透视原理,是在二维平面上产生消失点,形成一种近大远小的错觉。通俗的讲,“透视大法”可以理解为是将传统笔划的横平竖直变为“一头大一头小”的字体形式。
透视大法常见有3种——【笔划透视】、【单字透视】、【组合透视】
笔划透视:
笔划透视是指在字体的横笔、竖笔、提笔等笔划上创造透视。笔划呈现出“一头大一头小”的特点,也就是说如果我们去延伸这种“大小”的走势,会产生一个消失点,这就是【笔划透视】。
*笔划透视常伴夸张,有时不妨在透视的基础上加以夸张,或许会有意想不到的收获。
单字透视:
单字透视是指把字组中的一个字作为“形”去创造透视,可以想象成ps中的Ctal+T的自由变化,形成不同方向上的纵深透视。
组合透视:
组合透视是说当我们去创造字体组合时,将整个字组作为一个图形去做透视处理,字组透视同样可理解为一头大一头小.......
值得注意一点是,字组透视常会伴随某些字体偏小,在做处理时,尽量避免偏小字体笔划过多而堆积在一起。
第八式 借用繁体(字型类)
在进行字体设计时,有一些字造型比较简单,比如下图例子中的“式”“记”“风”等,而我们又想不到其他的变形手法,这个时候不如去尝试一下去“借用繁体”这个方法。
绝大多数汉字都是存在繁体的,而现在的字体也都是经过繁体阶段简化而来。所以“借用繁体”是对时间的一种追溯,所以在视觉呈现上容易给人一种怀旧感、时代感、历史感。
此功法不做多说,主要是对个别字进行简化繁体的处理,很多时候我们可能想不到这个方法,但是这个方法又相对比较简单又容易出彩的方法。
第九式 反笔妙用(字型类)
“反笔妙用”是一种逆向思维方式的表现,一个字的某个笔划书写次数多了就会形成固化思维。而此时如果我们将某些笔划进行反向处理(可以理解为ps中的水平翻转和垂直翻转),就会有一种耳目一新、眼前一亮的视觉感。
“反笔妙用”多针对字体的局部点缀性笔划和一些倾斜性笔划进行变形处理,“反笔妙用”方法属于偏后期的处理手法,因为进行反笔后的字体不会有大程度的颠覆性变化。
第十式 错位组合(字型类)
“错位组合”此种方法应用也是比较多的,此方法可以拆分为两招(可不是一阳指和狮吼功....)。
一为“错位”、二为“组合”,我们进行逐一分析:
错位:
常规的字库字体为了整体的协调统一,多为方方正正的笔画部首组合,所以首先我们要应用第一招“错位”破开方方正正的部首组合。如下图所示(矩形代表部首):
组合:
组合是说字体的组合方式,常规的惯性思维我们常将字体进行较为规整的横向或竖向排列,这是一种固有思维需要打破。
打破方式就是将字想象成积木,字会限制组合的思维,而想象成积木你讲有无限发挥的可能。
以下都为小编的任意举例,主要为了说明组合的方式千千万,不要局限横竖两种。
错位+组合:
通过以上我们说到的“错位”“组合”两招合二为一就是错位组合这门武功的真谛了。
下面是应用错位组合的一些字体设计案例。多补充一点是错位连接易产生部分空荡部位,常用英文、拼音、或一些装饰进行补充丰富加强。
第十一式 氛围装饰(修饰类)
“氛围装饰法”是指通过为字体的周围增加抽象或具象的装饰物,使得字体在原有的笔划造型基础上能够有更加丰富的视觉表现。装饰物的选择上没有过多约束,尽量贴合字意,如若不易找到贴合字意装饰物,尽量使用抽象图形式装饰,另许注意“氛围装饰法”中的装饰物通常对字体周围进行装饰,这样不会因为装饰物对内部笔划的遮挡而影响辨识度。
装饰物常见有4种——【图形装饰】、【字母装饰】、【写意装饰】、【全局装饰】
图形装饰:
顾名思义,图形装饰的装饰物为图形,常见的有三角形、圆形、分段矩形、曲线等,图形装饰最是简单高效易出效果。
字母装饰:
装饰物为字母,英文和拼音都属于字母装饰,我们国人的第一视觉捕捉一定大号中文字体,小而点缀性质的英文或拼音就自然充当了辅助装饰作用,最为常见的就是利用字母装饰填补字组变形所产生的空白区域,此种方法也很常见,通常添加字母装饰的字体会显得更有逼格~
写意装饰:
写意装饰是指装饰物不再抽象,而是更加的具象化而产生一定的含义,如下面案例“药不停”中的写意装饰是一个打开的胶囊,“石榴汁”中的写意装饰是从“汁”上滴下来的一个小水滴,“小野”中的写意装饰是水面蜻蜓点水状的涟漪。
全局装饰:
全局装饰是以上三种方法的融合进阶,无迹可寻,需要很强的创造力和想象力,装饰物与字体之间的融合度很高,这种方法在专题活动中最为常见,也是最难的一种装饰方法。
第十二式 借位让位(修饰类)
“借位让位”着重强调的是笔划之间的互补,在多个字的字体组合结构中,因为每个字体的大小、变形、和排列形式的不确定性,字与字的靠近区域会形成各种各样的断开空间。
“借位让位”即是将这个断开空间顺着笔划的走势进行一定程度的变形处理。使这个断开空间呈现一种似断非断的连接。
此种方法是一种后期细节处理方式,是后期处理中最为出彩的一种方法,经过“借位让位”的字体视觉上会显得更加整合与统一。
五、秘籍汇总
六、尾话
感谢能够认真读完整篇文章,希望该篇文章能给大家字体设计上带来一定帮助。同时如果该篇反响较好我还会再写续篇和单独的书法字体篇~
https://mp.weixin.qq.com/s/jNf3WJ2katAW38bAKYG2hw
(另文章中涉及到的相关案例都为花瓣上搜集到的素材,并未商用,都是为了来提炼方法论,如原作者有所介意,请私下联系替换)