字体设计对设计师来说该当是蛮主要的技能,乃至可能说是最基本的技能,由于常常用到这项技能,比如标志标准字体、海报、主题活动主画面、线上Banner等等。
做一款字并不难,难在做好一款字。
做字流程
先讲讲我的做字流程:
下面案例会重点讲解电脑实行(软件AI)这部分,包括初稿、过程稿、亮点详解、难点阐发等等,还有一些在特点字风格下的做字要点。
三大原则
在这次的分享中我更多的从设计技法的纬度去阐发,在创意层面则会轻微提一下。
我在设计大部分的常规商业字体时,会严格遵守三条原则,分别是:
中宫外扩慎用技法重量同等1. 中宫外扩
中宫收紧这种情形一样平常只存在在书法字体中,显得紧凑有力。
中宫外扩一样平常适用于方方正正的标准美术字,即常规商业字体设计,利用此形式会让字体宽松而且更规整。
因此这两种形式并没有好坏之分,视情形而定。
2. 慎用技法
这里的技法是指字体设计时可以增加字体的设计情感势感的一些技法,比如:连笔断笔、笔画特色点缀。
技法需克制利用,如若泛滥利用,则会使字体降落了美感,乃至丢失了识别度,过犹不及。
比如下图中设计的字体,是什么内容?你是否还看得出来呢?
「感官」二字能看得出来,后面两字是否无法识别,只能连蒙带猜了呢?是的,由于识别性太弱了。字体设计的识别度严重不足,正好是由于忽略字体构造造成的。
我个人以为,都雅性和识别度同等主要,好比一双筷子缺一不可。
牢记不可一味追求炫技,需克制,把握好技法利用的度。须要更多考虑字体的识别性和都雅度。
3. 重量同等
重量同等是指在一款字体设计中,在视觉上每一个字都保持均等的分量,也便是在视觉上觉得每个字都一样重。
举个例子,如下图中的「一二三四国馨」,这些字的笔画从一笔到二十笔递进,疏密各不一致,为了达到视觉上同等的分量,在笔画少的字体中笔画调得相对粗一些,而笔画多的字体则将笔画调得相对细一些,从而达到整体折衷。
下面让我们进入详细字体案例的剖析中吧。
第1款
1. 前期思考
当拿到这个主题的时候,我想到的是唯美、古典。定下字体气质,便按这个方向找寻得当的参考。
在征采参考的时候我溘然想到了古建筑的屋檐,也想到了用海浪的形态,即把四个字做成海水流动的既视感。
终极考虑到古建筑屋檐的特色更有唯美气质,屋檐特色更为抽象简约,可以不繁琐且奥妙镶嵌在字体笔画中,与之共生,因此选了这个创意点。
2. 绘制手稿
3. 字库字体构造参考
接下来进入电脑实行,首先我会打「海棠未雨」几个字库字体放在一边,便于随时参考字体构造,也能避免自己当局者迷犯低级缺点。
4. 雏形
用钢笔工具勾勒出基本型。
3. 初稿
做字时需不断检讨「单个的字」和「整体的字」。
单个的字:紧张检讨字体内部偏旁部首之间的位置间隔是否折衷,再就笔画与笔画之间的亲疏关系。
整体的字:紧张检讨各字体的重量是否同等。
总而言之便是不雅观察字体的「识别性」和「都雅度」。
现阶段,觉得「棠」字略宽,「未」字略小,「雨」字高了。
4. 调度
字体细节调度之后舒畅了很多,好多方角部分做了「倒圆角」处理,更耐看了。
做到这一步,觉得整款字体已经没有什么大毛病了,但依然平平无奇。
5. 增强字体古典气质
加入了古建筑屋檐的抽象形,融入每一个字的某一笔画之中。添加了字体唯美、古典的气息。然后在笔画交汇处都做了「溢墨」处理(一样平常书法字才会有墨水溢开的效果),更加深了字体的古韵味道。
6. 一些思考
实在还有好多细节都在设计过程中做了恰到好处的优化。比如:「棠」字上面三笔,中间高两边低,为了识别也为了都雅。比如:有古建筑屋檐特色的笔画的位置安顿考虑,相邻两字之间的屋檐特色笔画是武断不能对齐,按这个标准加上因时制宜的调度后,呈现出错落有致富有美感的一幅画面,仿佛远处有一座座高低不同的古建筑,还飘着雨。
7. 做字全流程GIF图
8. 包装
第2款
1. 绘制手稿
2. 字库字体构造参考
3. 初稿
快速把基本形实行出来。
字体构造:属于上紧下松。
字体特点:
笔画横细竖粗。横笔右端倾斜处理。字体的影象点在于「来」字的撇和捺,其他字也同样保持这样的特色。4. 添加字母点缀
5. 优化
「来日方长」四字紧凑排版。点缀字母利用更小字重,为了弱扮装点字母,固在每两行之间添加了横杆,更显精细。
6. 终极稿
末了调度一下细节,比如整体特色笔画的处理,比如「长」字右下角断笔的处理。
7. 做字全流程GIF图
8. 包装
第3款
1. 版式1
绘制手稿
字库字体构造参考
初稿
该款字体为繁体字,第一和第四个字笔画繁多,第二第三个字笔画略少,因此在设计时候须要特殊考虑到「重量同等」的设计原则。
字母点缀
现阶段每个字体的风格还不算非常统一(基本统一,但还不足)。
修正调度
「方」字考试测验另一种可能,「方」字为了在风格上与「来」字更统一、呼应,因此修正成下图的方案。「长」字的繁体字右下角做了调度,更加折衷了。
横版终极方案
经由再三衡量比拟,还是以为「方」字左下角那一画,一笔下来更有力量感,有具设计感。「长」字保持上图终极方案。
之前「长」字右下角那一笔跟「方」字左下角那一笔严格对称呼应倾斜度,从而忽略了长字的整体折衷性和端庄感。做了调度之后折衷端庄多了。
2. 版式2
连续试一试其余的排版,探寻更多可能性。
手稿
新的版式新的味道
在上面加了一些数字与线条的装饰,更显精细。
由于版式的不同,「日」字本身字体的宽度受限,考虑到拉宽会改变字义(宽则为「子曰」的「曰」)。因此,把「日」字左对齐上面的「来」字,将中间的横笔破型出头到右边,恰好补充了该处的空缺,更与每个字的最长横笔呼应。
做字全流程GIF图
包装
第4款
设计这款字体时,我并没有绘制手稿。而是找到了精良的字体设计作品作为参考,这个参考的字体内容并没有涌现「放荡喜好」中任何一个字。只要能把握住字体设计的核心特色,皆可借鉴。
1. 字库字体构造参考
老样子,电脑实行打一行字库字体(一样平常用常规黑体)作为字体构造参考。
2. 剖析参考设计笔形特色
剖析到位了,识破所找参考的字体设计作品的紧张特点,或者说风格,将对接下来的造字实行非常有利。
3. 雏形
在整体上,四字之间的视觉重量不一致。在细节上,很多细节的处理并不到位,显粗糙。
4. 初稿
比前面雏形好了很多,但重量依然不一致。情由是两边的字笔画少,中间的字笔画多。
还有一个问题是「放」字和「欢」字右边上面那一「撇」属于这款字的显著性的特色,中间的「肆」字和「喜」字却没有表示。
5. 调度
「放」「肆」「欢」在风格和视觉重量上都达到了标准,唯独「喜」字差点意思。
6. 集中发力设计「喜」字
集中发力设计「喜」字,考试测验更多的可能性。
7. 多考试测验总有惊喜在等你
考试测验了好几款不同的「喜」字,终极找到了满意的结果。
坦白说当时考试测验到末了这个「喜」字的时候,心里还是挺愉悦的。
8. 终极稿
终极呈现可以说在标准线以上。字体风格特色统一,字体视觉重量基本同等。
特殊讲解一下「喜」字。「喜」字笔画多,因此在兼顾识别性与都雅度的条件下,如何调成风格同等和重量同等呢?
最上面那一横笔做断笔处理,避免笔画多而造成的「密欠亨风」。中宫也外扩,即「士」部分最下面那横笔、两个「口」部分的宽度都处在一个得当的占比,因此在视觉重量上与其他三字是同等的。最难的点来了,这个字横笔太多,共有7条横笔,悬殊于其他字。怎么办理呢?把两个「口」部分的下面一横去掉(并没有影响识别性),然后两口之间那部分(喜)两点一横合并成一笔,中间直两边翘起,翘起部分刚好有那两点的特色,因此整体识别性也知足了。
这个「喜」字,用了断笔、连笔、共用的手腕,但呈现出来的效果是简洁的,跟其他字舒适共存了。
做字不刻意,不炫技,技法手腕都是为了达到合理结果所用的手段。
9. 倾斜处理版本
水平倾斜10度,垂直倾斜7度,就有下面这种效果了。
10. 做字全流程GIF图
11. 包装
第5款
我很喜好这个主题,窦唯有一首歌就叫《高等动物》。
这是一款纯粹且凌厉的字,尤其是大刀阔斧的字胚之上加了一些尖角。带刺的觉得总能让我想到动物们的爪子和抓痕。
我做字,很克制,不喜炫技,谢绝多余的素材。就好比陈图画所言,书的封面干干净净最有书的样子,最像是书。书如此,字亦如此。但我玩心也大,遇见特殊的风格也喜好考试测验。克制与放荡同行,统统看心情。
1. 绘制手稿
2. 字库字体构造参考
3. 初稿
4. 整体优化
「高」字和「级」字各一处笔画做断笔处理。「动」字右下角做减法。「物」字旁边部分宽度调节,左加宽了一些;三笔斜笔角度趋平调节。整体排版紧凑调度,整体字体笔画按视觉重量同等原则做了统一调节。增加字母点缀,字体为「Din」。
5. 增强字体个性化特色
在每个字右上角添加尖角细节,让字体更显锋利。在每个字最右边竖笔下端左侧添加尖角细节,宛如动物利爪。
6. 倾斜处理更有动势
水平倾斜10度,让字体更具动感。
7. 做字全流程GIF图
8. 包装
第6款
1. 绘制手稿
2. 字库字体构造参考
3. 雏形
在AI中利用钢笔工具,要么竖要么横的直线勾勒出字体的大致形态。
「高」字的横笔有6笔,与其他字比较过多,因此把两个「口」字部分各去掉一横,竖笔双双相连。看起来更简约,也更具备设计感了,而且视觉重量也与其它三字更同等了。两「口」部分虽都缺了一笔,但它们共用之间一横笔,在视觉上它们就像从有间隔的两个方形变成零间隔的两个方形,因此识别性并没有被削弱。
4. 笔画圆化软化+添加字母点缀
5. 优化
将字体「线」转为「面」,也便是AI软件里将字体的线条路径「轮廓化描边」成为面状图形,然后合并。接着针对笔画相交处做「溢墨」效果,也便是在软件里针对交汇处的节点选中然后做「倒圆角」处理。
修正点缀字母的字体,由「Din」的字库字体改成了「Rubrik」,风格上更加匹配了,情由是,「Rubrik」这款字库字体的风格也是形状属于圆弧状,笔端为圆头,跟我设计的中笔墨体风格同等。
把稳的朋友该当察觉到了,「高等动物」这两款不同风格的中笔墨体,与之匹配的字母字体也是不同的。
6. 终极稿
7. 轻微包装
8. 做字全流程GIF图
9. 动效包装
闪烁抖动的效果让字体更鲜活更有生命力。你是否也会有这种觉得呢?
第7款
1. 绘制手稿
2. 字库字体构造参考
3. 限定字体外框区域+网格参考线+钢笔工具按手稿勾勒出根本构造线条
这类风格字体调节起来会相比拟较麻烦,限定字体的外框区域,有利于节约不必要的试错本钱。
4. 字体根本构造线条
5. 设置字体笔画样式
调节好字体笔画线条的粗细。调节线条缠绕的走向与前后关系,只要营造绳索缠绕的觉得即可。
6. 终极稿
在字体笔画上添加一些小细节,尤其是迁移转变处,有点像是小高光,多了一些质感。添加字母装饰。字体中英文复制粘贴在底部,并放大,降落不透明度,效果蛮故意思的,有点像字体装于透明塑料袋里面。
7. 考试测验不同配色
8. 做字全流程GIF图
9. 包装