学会这3招,轻松做出复古风格的字体!

2018-8-9    资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

每个时代都有特定的印迹,我们感受比较直接的或许是每个时代的穿着打扮变化,其实人、事、物都会有时代特征,字体也不例外。但是如何将字体穿越到过往呢?今天要从字型变化和字体效果两个方面聊聊如何把字体打造成我们口中所说的怀旧与复古。


举个我们最熟悉的例子,电话从转盘拨号到功能机再到智能机一直都在更新换代,单从外观看是变得越来越简洁,其实衣食住行我们都可以找到相类似的变化。从过去到现在每一天都在变,我们是否可以从千丝万缕中总结出一些大趋势,为字体所用?

上图是书法字体中篆书、隶书、行书和楷书,依序也是书法的演变过程,如果对此无感的话可以想一想繁体字到简体字的变化,从中不难总结由繁至简的变化规律。那么说仅仅是把文字造型做的「繁杂」就能够成功「穿越」吗?当然不是,下面用几个实例分享几个具体的方法。

一、古为今用

字体设计中的很多形变要有根有据,比如我们要设计一款有年代的古风字体其实就可以借阅古时书法中的一些写法,其中最具代表性的当属篆书。

篆书具有文字形体的象形性特征,虽然当下已失去实用性质但是我们可以根据自身的需求做一定的优化,以达到古为今用的目的。

下面以「诗画集」三字做分解。上图文字是从网络中搜寻的「诗画集」的篆书写法,一眼望去是不是非常的「繁杂」,甚至同一字会有多种不同的写法,结构变化也是很多样,那么在众多的文字中我们又应该如何挑选适合的呢?

一般来讲大家可以注意以下三个规律:

  • 辨识度低的首要排除,如图中第一个字对于大部分人来说都很难辨识;
  • 有取有舍学会拼接简化,遇到没有完整可用的,这时我们要有一定的取舍,比如图中第一行的「诗」字,结构左边的言字旁还好识别,但是右边的部分变化就有些「过」了,不太符合我们的需求,所以就要做一定的简化处理;
  • 善于抓特征,古为今用不是照搬不动,而是要实用可识别为基本诉求最大化保留所借鉴的文字特征。

如上图是我选出比较中意的三个字,按照上面提出的几个标准很显然第一个字会被淘汰,但是我更看重的是左边「言」字旁的笔法,右边当然要舍弃重做。

第一步就是依据上面的字用线条勾勒出结构框架,最后一个字相比前面的字是比较扁平一些的在做的过程中要进行拔高以保持三个字的统一。

前面说了这种方法不是完全照搬,我们一起看看有哪些地方做了调整:

  • 诗字右边的结构换成简体字的形式,保持文字的辨识度;
  • 笔画由曲变直,比如原字中横笔都是带有一定的弧度的,先全部变成直线段,这样做是为了让整体更有条理性,当然有例外比如「画」字的左右两个竖笔。
  • 相较以前的结构是要更加高挑,尤其是最后一个字的变化最明显,高矮胖瘦这个要根据你所做的字体含义做相对应的调整。

仅仅完成了结构的搭建肯定还是不充分的,细节的处理一定少不了。等线的笔画本身是比较直接的,可适当添加一些圆角处理,这也更符合篆书的字体特征。如上图,第一个字未做任何处理,第二个字笔画折角由原来的直角变为圆角处理。第三个字又从前面基础上增加内部的圆角,如此一来笔画有了些许顿挫感,更加耐看。

色彩和版式也是细节的一部分,最后选用深蓝色并配红色印章点缀,一组比较复古但又符合现代人审美的文字设计就完成了。这种古为今用的方法看下来很简单,但是除了上面讲的注意事项,字体的空间配置均匀有序也是至关重要的一环,任何字都如此。

二、旧字新用

就像电视剧布景一样,尽可能还原当时的场景,拍出来的影片才能有更强的代入感;而我们要设计有年代感的字体最直接有效的方式就是还原那个年代的字体特征。和第一种方式原理类似,但实际还是有些许不同。下面我们由古代穿越到近代,还是「诗画集」三字。

网络上有很多关于老字体的图片,平时遇见了要保存一下,说不定什么时候会用得到,另外没有保存也不要紧,我们字体学堂公众号会不定期更新收集的老字,方便大家学习参考。

老字的年代感除了纸张的斑驳更重要的是字型的特征,大概分类的话一个是宋体字另一种是有一些几何形态的应用变化,另外由于老字多由手工绘制,有很强的随意性,这也是老字的一大特征。

第一步是常规笔画的提取,由于年代久远又加上拍摄等因素,很多字体细节是模糊不确定的,不要把客观因素造成的字体细节变化也原封不动的照搬过来,而应该是边提取边优化。

有一些我们所需的笔画可能老字当中并没有,这个时候就要根据老字的风格做笔画扩展;另外老字中的笔画转角不会很锐利,通常会有一点圆角,笔画的线条也不是笔直,这些都可以在后期统一添加,勿从初始笔画添加。

基础笔画搞定下一步就可以进行结构搭建了,除了笔画的借用结构空间特征我们也可以参阅,「三防常识」这几个字整体是扁平的,内部空间比较紧,这是本组字结构上的特点要抓住。

基础笔画可不是一成不变,像是「集」字横笔居多,如果保持原来的横笔粗细的话空间上会变得非常挤也不美观,所以将横笔减细处理;同一笔画在不同的字体中都会有所差异,这一点就要求大家对字形结构要了解的更透,做字要「活」。

最后如上图,其实基础结构搭建出来到最后的确定字型,你看到的结果只是两步带过,期间是有很多细碎反复的调整,好字多磨!

这种方法会上瘾,以「汽水」两字再来一组。过程同上就不再复述,直接看结果。

今天选的这两组老字笔画上还不算最有特点的,还有一些个性更突显,大家不妨动手一试,看看是不是真如你所看到的这样简单。

三、纹理来凑

如果平时来不及设计想快速「穿越」这种情形也是有的,所以字体效果营造出表面的年代感还是要讲一下,因为是软件的基础操作所以就不很细致咯。

1. 纹理叠加

最简单常用的肯定是各种纹理叠加,甚至这是很多同学做年代感的文字必备选项。如上图,左边是常规字体,右边以此为基础叠加纹理。说两个注意点:一是纹理不在多,要避免纹理抢风头;二是纹理也有虚实对比,不可做的太平均。

2. 粗糙轮廓

使用同样的字库字,利用 Ai 软件中的「粗糙化」实现字体轮廓的粗糙处理,要掌握好粗糙化中的两个数值大小的变化,另外还可以通过路径位移制造字体内部的纹理变化,使之更有岁月斑驳感。

总结

以上分享你会发现,年代感的字体设计由内及外是相对复杂化,同时要善于抓特征,几个思路帮大家梳理一遍,有没有收获一点呢?


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档