实战案例!详细剖析11款字体的设计全过程(上篇)

Date 2026-04-20 14:43:19

实战案例!详细剖析11款字体的设计全过程(上篇)

本文详细分析了11个字体设计的整个过程。设计+分析+动态效果,以最简单易理解的方式,合成字体设计分享文章,我希望你会喜欢,并留言交流。

字体设计应该是设计师非常重要的技能,甚至是最基本的技能,因为它经常被使用,如标志标准字体、海报、主题活动主要图片、在线横幅等。

做一个字并不难,做一个字也不难。

做字流程

先说说我的写作流程:

确定要做的词的理解和消化词的含义,在网上搜索相关参考资料,边画手稿,电脑执行(软件AI)润色包装。

以下案例将重点介绍计算机执行(软件人工智能)部分,包括初稿、过程草案、亮点详细解释、难点分析等,以及特征单词风格下的一些要点。

实战案例!详细剖析11款字体的设计全过程(上篇)

三大原则

在这次分享中,我从设计技术的纬度进行了更多的分析,并在创意层面上提到了一点。

在设计大多数常规商业字体时,我会严格遵循三个原则:

中宫外扩张的技术重量一致

1. 中宫外扩

中宫收紧一般只存在于书法字体中,紧凑有力。

中宫外扩一般适用于方方正正的标准艺术词,即常规商业字体设计,使用这种形式会使字体宽松整洁。

因此,根据情况,这两种形式没有好坏之分。

实战案例!详细剖析11款字体的设计全过程(上篇)

2. 慎用技法

这里的技术是指在字体设计中可以增加字体设计感和形式感的一些技术,如连笔断笔、点缀笔画特征等。

技术要克制使用,如果泛滥使用,字体就会减少美感,甚至失去识别度,过多。

例如,下图中设计的字体是什么?你还能看到吗?

实战案例!详细剖析11款字体的设计全过程(上篇)

「感官」这两个字可以看出,后两个字是否不能识别,只能用蒙带猜测?是的,因为识别能力太弱了。字体设计的识别严重不够,正是由于忽略了字体结构。

就我个人而言,我认为美和识别同样重要,就像一双筷子是必不可少的。

切记不要盲目追求炫技,要克制,掌握技术的使用程度。字体的识别性和美观性需要更多的考虑。

3. 重量一致

重量一致是指在字体设计中,每个字在视觉上都保持平等的重量,即在视觉上感觉每个字都一样重。

例如,如下图所示「一二三四国馨」,这些字的笔画从一到二十,密度不一致。为了达到视觉上一致的重量,笔画在笔画较少的字体中相对较粗,而笔画较多的字体将笔画调整得相对较细,从而达到整体协调。

实战案例!详细剖析11款字体的设计全过程(上篇)

让我们进入具体字体案例的分析。

实战案例!详细剖析11款字体的设计全过程(上篇)

第1款

实战案例!详细剖析11款字体的设计全过程(上篇)

1. 前期思考

当我得到这个主题时,我想到了美丽和古典主义。设置字体气质,然后按照这个方向找到合适的参考。

在寻找参考资料时,我突然想到了古建筑的屋檐,也想到了海浪的形式,即把四个字变成海水流动的视觉感觉。

最后,考虑到古建筑屋檐的特点更加美观,屋檐的特点更加抽象简单,不能繁琐巧妙地镶嵌在字体笔画中,与之共存,所以选择了这个创意点。

2. 绘制手稿

实战案例!详细剖析11款字体的设计全过程(上篇)

实战案例!详细剖析11款字体的设计全过程(上篇)

3. 参考字库字体结构

下一步进入计算机执行,首先我要打电话「海棠未雨」一边放几个字库字体,方便随时参考字体结构,也可以避免当局迷犯低级错误。

实战案例!详细剖析11款字体的设计全过程(上篇)

4. 雏形

用钢笔工具勾勒出基本类型。

实战案例!详细剖析11款字体的设计全过程(上篇)

3. 初稿

做字时需要不断检查「单个的字」和「整体的字」。

单字:主要检查字体内部偏旁部首之间的位置距离是否协调,然后检查笔画与笔画之间的亲密关系。

整体字:主要检查字体重量是否一致。

总之,观察字体就是观察字体「识别性」和「美观度」。

现阶段,感觉「棠」字略宽,「未」字略小,「雨」字高了。

实战案例!详细剖析11款字体的设计全过程(上篇)

4. 调整

字体细节调整后舒服多了,很多方角都做好了「倒圆角」处理,更耐用。

做到这一步,感觉整个字体没什么大问题,但还是平平无奇。

实战案例!详细剖析11款字体的设计全过程(上篇)

5. 增强字体古典气质

加入古建筑屋檐的抽象形,融入每个字的笔画。增添了美丽的字体和古典的气息。然后在笔画的交汇处做了「溢墨」处理(一般书法字会有墨水溢出的效果),加深了字体的古韵味。

“实战案例!详细分析11字体设计的全过程(上一篇)”

6. 一些思考

事实上,在设计过程中有很多细节进行了适当的优化。例如:「棠」上面三个字,中间高两边低,为了识别也为了美观。例如:考虑到古建筑屋檐特征笔画的位置,相邻两个字之间的屋檐特征笔画坚决不对齐。根据本标准和因地制宜的调整,呈现出一幅散落而美丽的画面,仿佛远处有不同高度的古建筑,仍在下雨。

实战案例!详细剖析11款字体的设计全过程(上篇)

7. 全过程GIF图

实战案例!详细剖析11款字体的设计全过程(上篇)

8. 包装

实战案例!详细剖析11款字体的设计全过程(上篇)

第2款

实战案例!详细剖析11款字体的设计全过程(上篇)

1. 绘制手稿

实战案例!详细剖析11款字体的设计全过程(上篇)

2. 参考字库字体结构

实战案例!详细剖析11款字体的设计全过程(上篇)

3. 初稿

快速执行基本形。

字体结构:属于上紧下松。

字体特点:

笔画是水平和垂直的。水平笔的右端倾斜。字体的记忆点在于「来」字的撇和抑,其他字也保持着这样的特征。

实战案例!详细剖析11款字体的设计全过程(上篇)

4. 添加字母点缀

实战案例!详细剖析11款字体的设计全过程(上篇)

5. 优化

「来日方长」四字紧凑排版。点缀字母使用较小的字重。为了削弱点缀字母,每两行之间都加了横杆,更加精致。

实战案例!详细剖析11款字体的设计全过程(上篇)

6. 最终稿

最后,调整细节,如整体特征笔画的处理,如「长」处理字右下角断笔。

实战案例!详细剖析11款字体的设计全过程(上篇)

7. 全过程GIF图

实战案例!详细剖析11款字体的设计全过程(上篇)

8. 包装

实战案例!详细剖析11款字体的设计全过程(上篇)

第3款

实战案例!详细剖析11款字体的设计全过程(上篇)

1. 版式1

绘制手稿

实战案例!详细剖析11款字体的设计全过程(上篇)

参考字库字体结构

实战案例!详细剖析11款字体的设计全过程(上篇)

初稿

这个字体是繁体字,第一个和第四个字有很多笔画,第二个和第三个字有点少,所以在设计中需要特别考虑「重量一致」设计原则。

实战案例!详细剖析11款字体的设计全过程(上篇)

字母点缀

现阶段每个字体的风格都不是很统一(基本统一,但还不够)。

实战案例!详细剖析11款字体的设计全过程(上篇)

修改调整

「方」单词尝试另一种可能性,「方」以风格为目的「来」单词更加统一和呼应,因此修改为下图中的方案。「长」字的繁体字右下角进行了调整,更加协调。

实战案例!详细剖析11款字体的设计全过程(上篇)

横版最终方案

经过反复测量和比较,我仍然觉得「方」左下角的画更有力量感,有设计感。「长」保持上图的最终方案。

之前「长」字右下角的笔跟「方」字左下角的笔严格对称地呼应倾斜度,从而忽略了长字的整体协调性和稳定性。经过调整,协调更加稳定。

实战案例!详细剖析11款字体的设计全过程(上篇)

2. 版式2

继续尝试另一个排版,探索更多的可能性。

手稿

实战案例!详细剖析11款字体的设计全过程(上篇)

新的布局,新的味道

加上一些数字和线条的装饰,更加精致。

由于布局不同,「日」考虑到拉宽会改变字义,字体本身的宽度是有限的(宽则是「子曰」的「曰」)。因此,把「日」左对齐上面的单词「来」字,中间的横笔破型出头到右边,正好填补了这个地方的空白,更呼应了每个字最长的横笔。

实战案例!详细剖析11款字体的设计全过程(上篇)

全过程GIF图

实战案例!详细剖析11款字体的设计全过程(上篇)

包装

实战案例!详细剖析11款字体的设计全过程(上篇)

第4款

实战案例!详细剖析11款字体的设计全过程(上篇)

在设计这个字体的时候,我没有画手稿。相反,我找到了一个优秀的字体设计作品作为参考,没有出现这个参考的字体内容。「放肆喜欢」任何一个字。只要能把握字体设计的核心特征,就可以借鉴。

1. 参考字库字体结构

实战案例!详细剖析11款字体的设计全过程(上篇)

同样,计算机执行打字库字体(通常使用常规黑体)作为字体结构的参考。

2. 参考设计笔形特征分析分析

分析到位,看透字体设计作品的主要特点或风格,将非常有利于下一步的写作实施。

实战案例!详细剖析11款字体的设计全过程(上篇)

3. 雏形

总的来说,四字之间的视觉重量是不一致的。很多细节处理不到位,粗糙。

实战案例!详细剖析11款字体的设计全过程(上篇)

4. 初稿

实战案例!详细剖析11款字体的设计全过程(上篇)

它比前面的原型好得多,但重量仍然不一致。原因是两边的笔画少,中间的笔画多。

另一个问题是「放」字和「欢」字右上方的那一个「撇」属于这个词的显著特征,中间「肆」字和「喜」但是字没有体现。

5. 调整

「放」「肆」「欢」只有在风格和视觉重量上达到了标准「喜」字差点意思。

实战案例!详细剖析11款字体的设计全过程(上篇)

6. 集中设计「喜」字

集中设计「喜」文字,尝试更多的可能性。

实战案例!详细剖析11款字体的设计全过程(上篇)

7. 多尝试总有惊喜在等你

尝试了几种不同的型号「喜」字,终于找到了满意的结果。

坦白说,当时我试过最后一个「喜」字的时候,心里还是挺开心的。

实战案例!详细剖析11款字体的设计全过程(上篇)

8. 最终稿

最终呈现可以说超过了标准线。字体风格特征统一,字体视觉重量基本相同。

特别解释一下「喜」字。「喜」字笔画多,所以在兼顾识别性和美观性的前提下,如何调整风格和重量一致?

最上面的横笔断笔处理,避免笔画过多造成的「密不透风」。中宫也扩大了,也就是说「士」部分底部的横笔,两个「口」部分宽度处于适当的比例,因此视觉重量与其他三个单词一致。最困难的一点是,这个词有太多的横笔,总共有7个横笔,与其他单词有很大的不同。如何解决它?把两个「口」去掉下面部分(不影响识别),然后两口之间的那部分(喜)两点一横合并成一笔,中间直两侧翘起,翘起部分正好有那两点的特点,所以整体识别也很满意。

这个「喜」字,用断笔、连笔、共用的手法,但呈现出来的效果简单,与其它字舒适共存。

做字不刻意,不炫技,技法和手法都是达到合理结果的手段。

实战案例!详细剖析11款字体的设计全过程(上篇)

9. 倾斜版本

水平倾斜10度,垂直倾斜7度,有以下效果。

实战案例!详细剖析11款字体的设计全过程(上篇)

10. 全过程GIF图

“实战案例!详细分析11字体设计的全过程(上一篇)”

11. 包装

实战案例!详细剖析11款字体的设计全过程(上篇)

第5款

实战案例!详细剖析11款字体的设计全过程(上篇)

我非常喜欢这个主题,窦唯只有一首歌叫《高级动物》。

这是一个纯粹而锋利的词,特别是在大刀阔斧的字胚上加了一些尖角。带刺的感觉总能让我想起动物的爪子和抓痕。

我写字,很克制,不喜欢炫耀自己的技能,拒绝多余的材料。正如陈丹青所说,书的封面干净,最像书。书也是如此,字也是如此。但我也很担心,我喜欢尝试特殊的风格。克制和肆意的同行,一切都取决于情绪。

1. 绘制手稿

实战案例!详细剖析11款字体的设计全过程(上篇)

2. 参考字库字体结构

实战案例!详细剖析11款字体的设计全过程(上篇)

3. 初稿

实战案例!详细剖析11款字体的设计全过程(上篇)

4. 整体优化

「高」字和「级」每个字每个字每个笔画做断笔处理。「动」在字的右下角做减法。「物」调整单词左右部分的宽度,加宽左部分;三笔斜笔角度趋平调整。

整体排版调整紧凑,整体字体笔画按照视觉重量一致的原则进行统一调整。添加字母装饰,字体为「Din」。

实战案例!详细剖析11款字体的设计全过程(上篇)

5. 增强字体的个性化特征

在每个字的右上角添加尖角细节,使字体更加锋利。在每个字的右下端左侧添加尖角细节,就像动物爪一样。

实战案例!详细剖析11款字体的设计全过程(上篇)

实战案例!详细剖析11款字体的设计全过程(上篇)

6. 倾斜处理更有动力

水平倾斜10度,使字体更有活力。

实战案例!详细剖析11款字体的设计全过程(上篇)

7. 全过程GIF图

实战案例!详细剖析11款字体的设计全过程(上篇)

8. 包装

实战案例!详细剖析11款字体的设计全过程(上篇)

第6款

实战案例!详细剖析11款字体的设计全过程(上篇)

1. 绘制手稿

实战案例!详细剖析11款字体的设计全过程(上篇)

2. 参考字库字体结构

实战案例!详细剖析11款字体的设计全过程(上篇)

3. 雏形

在人工智能中使用钢笔工具,或垂直或水平直线勾勒出字体的一般形状。

「高」字的横笔有6笔,和其他字相比太多,所以两个字「口」每个字部分去掉一个水平,竖笔双双相连。看起来更简单,更有设计感,视觉重量更符合其他三个字。两个「口」虽然有些人缺少一支笔,但它们共用一支水平笔。在视觉上,它们就像从两个方形到零距离的两个方形,因此识别并没有被削弱。

实战案例!详细剖析11款字体的设计全过程(上篇)

4. 笔画圆化软化+添加字母点缀

实战案例!详细剖析11款字体的设计全过程(上篇)

5. 优化

将字体「线」转为「面」,也就是说,在AI软件中,字体的线路路径「轮廓化描边」成为表面图形,然后合并。然后在笔画的交叉口做「溢墨」效果,即在软件中选择交汇处的节点「倒圆角」处理。

修改点缀字母的字体,由「Din」字库字体改为「Rubrik」,风格比较匹配,原因是,「Rubrik」这个字库字体的风格也是圆弧形的,笔端是圆头,和我设计的中文字体风格一致。

细心的朋友应该注意到,「高级动物」这两种不同风格的中文字体也不同于匹配的字母字体。

实战案例!详细剖析11款字体的设计全过程(上篇)

6. 最终稿

“实战案例!详细分析11字体设计的全过程(上一篇)”

7. 轻微包装

实战案例!详细剖析11款字体的设计全过程(上篇)

8. 全过程GIF图

实战案例!详细剖析11款字体的设计全过程(上篇)

9. 动效包装

实战案例!详细剖析11款字体的设计全过程(上篇)

闪烁抖动的效果使字体更生动、更有活力。你也会有这种感觉吗?

第7款

实战案例!详细剖析11款字体的设计全过程(上篇)

1. 绘制手稿

实战案例!详细剖析11款字体的设计全过程(上篇)

2. 参考字库字体结构

实战案例!详细剖析11款字体的设计全过程(上篇)

3. 字体外框区+网格参考线+钢笔工具按手稿勾勒出基本结构线

这种风格的字体调整起来会比较麻烦,限制字体的外框面积,有利于节省不必要的试错成本。

实战案例!详细剖析11款字体的设计全过程(上篇)

4. 字体基础结构线

实战案例!详细剖析11款字体的设计全过程(上篇)

5. 设置字体笔画风格

调整字体笔画线条的厚度。只要营造绳索缠绕的感觉,就可以调整线条缠绕的方向和前后关系。

实战案例!详细剖析11款字体的设计全过程(上篇)

实战案例!详细剖析11款字体的设计全过程(上篇)

6. 最终稿

在字体笔画中添加一些小细节,特别是在转折点,有点像一个小亮点,有更多的纹理。添加字母装饰。字体复制粘贴在底部,放大,降低不透明度,效果很有趣,有点像字体安装在透明塑料袋中。

实战案例!详细剖析11款字体的设计全过程(上篇)

7. 尝试不同的配色

实战案例!详细剖析11款字体的设计全过程(上篇)

实战案例!详细剖析11款字体的设计全过程(上篇)

实战案例!详细剖析11款字体的设计全过程(上篇)

8. 全过程GIF图

实战案例!详细剖析11款字体的设计全过程(上篇)

9. 包装

实战案例!详细剖析11款字体的设计全过程(上篇)

实战案例!详细剖析11款字体的设计全过程(上篇)

欢迎添加作者微信:

实战案例!详细剖析11款字体的设计全过程(上篇)