如何创建自定义字体：7 个步骤和 3 个案例研究
已发表: 2022-03-11面对现实吧; 有些字体是我们设计师喜欢讨厌的。 实际上，“仇恨”这个词可能不够强烈。 天灾？ 诅咒？ 瘟疫？ 粪便？ 我听说每个人都曾经侮辱我们用来交流思想的无生命的字母、数字和符号，我完全明白。 我见过（并犯下）类型的罪行如此糟糕，以至于即使是最古怪的办公室公告也会感到尴尬。
但是，如果我告诉你，我们这一代最受诟病的字体实际上可能是品牌设计师最好的朋友呢？ 如果我向您展示如何将平淡无奇的字体变成客户会喜欢的甜美标识（并为此付出高昂的代价）怎么办？ 您是否愿意从根本上改变您看待字体的方式，并向无限扩展的创意选择世界敞开心扉？ 准备好制作自己的字体了吗？
如果是这样，请继续阅读，因为我将介绍一个简单的过程，您可以使用它来立即转换任何字体，以便更好地创建字体。 而且，为了展示这个过程的有效性，我将使用三种被各地设计师强烈鄙视的字体来展示每一步。
首先是小丑，这是一组古怪的小丑角色，通常出现在生日横幅和“异想天开”的名片上。
接下来，我们有纸莎草纸，从图坦卡蒙国王陵墓的墙壁上精心复制而来，咖啡店菜单、严肃艺术家和詹姆斯卡梅隆的首选。
最后，一个不需要介绍的酷且不可动摇的随意的排版不法之徒——唯一的， Comic Sans 。
从这个不太可能的分组中，我会教你看到别人喊“垃圾”的宝藏！ 并创建最高水准的自定义标识。
简单可靠的过程
让我们开始从丑陋的字体到令人惊叹的标识的旅程，并学习如何制作字体。 我们将从不好的事情开始，以好的事情结束，并且每次都遵循相同的七个步骤。 七个步骤是什么？ 我将稍微讨论一下细节，但首先，关于此类工作所需的工具的一些说明。
推荐设置
视觉设计师可以使用大量新的和负担得起的设计工具。 触摸屏设备和 Apple Pencil 等高级触控笔让捕捉创意和迁移到数字工作流程变得比以往任何时候都更容易。 自由尝试，坚持任何对你有用的东西。 也就是说，我更喜欢使用 Adobe 和 Wacom 的可靠工具的经过验证的真实方法：
- Photoshop - 用于处理字体和创建分层细化草图。
- Illustrator - 用于矢量跟踪最终细化草图并快速添加样式元素，如颜色、渐变、纹理、图案等。
- Wacom 数位板— 用于在 Photoshop 中进行数字绘图。
小丑——从粗鲁到优雅
Jokerman 是字体中的 Jim Carrey：从不微妙，在各个角度都响亮，但奇怪地吸引了大众。 这很荒谬，而且完全是本教程所针对的字体。 像 Jokerman 这样的古怪字体充满了奇特的设计元素，但缺乏雅致标识所需的约束。 作为设计师，我们需要有良好的判断力，这通常意味着为了更清晰的沟通而放弃细节。
这是一个简单的七步过程，将我们从不受欢迎的字体带到高端标识。 涉及一些简单的绘图，但是如果您可以写下您的名字并绘制图片，那么您就拥有了学习如何制作自己的字体所需的所有技能。 让我们开始。
1.查看字体
在 Photoshop 中，选择一种字体（在本例中为 Jokerman），输入您的标识所需的企业名称，然后快速检查每个字母以了解设计可能性，如比例、比例、字母重量等。
2.构思
使用您的 Wacom 数位板，为您的标识画一个松散的草图。 这里不需要精确。 只需快速简单地绘制一些草图，作为您设计的骨架。
3.扭曲字体
使用您选择的字体、缩放、拉伸、倾斜和挤压构思草图顶部的每个字母。 无需在此步骤中使事情变得完美。 稍后您将对其进行改进，因此请继续。
4.修正草图
现在，在扭曲的字母上方快速绘制草图。 这是您开始改进原始字体的缺点并添加自己的设计细节的地方。
5.细化草图
这是 Photoshop 中草图和细化的最后阶段。 清理所有不起作用的东西，并填写你的字母，这样你就可以更好地了解形式和字母之间的空格关系。
6. 矢量跟踪
将您的细化草图放到 Illustrator 中，取出钢笔工具，然后小心地点击您的方式来绘制美丽的贝塞尔曲线。
7. 收尾工作
完成矢量追踪后，使用颜色、阴影、高光、轮廓等深思熟虑的细节添加视觉冲击力。
Papyrus——一种微妙的转变
忏悔：我喜欢Papyrus，我不在乎谁知道。 说真的，并不是我们设计师喜欢抨击的所有字体实际上都那么糟糕。 过度使用？ 可能是。 俗气？ 好的，是的。 但仅仅因为字体让人觉得她的电枢设计文档有尊严并不意味着它很糟糕。 这就是我对 Papyrus 的看法。 就像我在 Old Navy 买的正装衬衫：它合身，让我在特殊场合也能表现得体。
也就是说，我的礼服衬衫没有故意磨损的边缘。 所以，让我们看看我们是否可以保留 Papyrus 字体的漂亮部分，同时使整体外观和感觉更加现代。
1.查看字体
同样，我们从 Photoshop 开始。 选择您的字体（Papyrus），然后输入标识名称。 查看每个字母，记下潜在的设计细节。
2.构思
拿出你的 Wacom 数位板，快速勾勒出一些构图创意。 不要想太多这一步。 这就像在笔记本上涂鸦你的名字。
3.扭曲字体
就像我们为小丑所做的那样，在您创建的构思草图的顶部缩放、拉伸、倾斜和挤压每个字母。 它会变得混乱，但不要担心！
4.修正草图
在所有步骤中，这可能是最令人生畏的，但不要强调它。
你不是从头开始构建的。 您正在使用原始字体的结构，同时添加您自己的改进。
这个草图可能非常糟糕和丑陋。 Photoshop 中图层的美妙之处在于能够进行多次传递，每一次都更接近您的真实设计意图。
5.细化草图
这是我们在 Photoshop 中的最后一步。 对自己的设计部分不工作要诚实。 它还有助于为您的字母着色，以便您可以看到它们彼此相邻的外观并发现形式上的任何不规则之处。
6. 矢量跟踪
将细化草图放在 Illustrator 中，并使用钢笔工具开始您的矢量描摹。
7. 收尾工作
完成矢量跟踪后，通过添加颜色、阴影、高光和轮廓等细节，使您的标识栩栩如生。
Comic Sans - 就像熨烫皱巴巴的衬衫
我拒绝嘲笑 Comic Sans。 当然，它出现在不合适的时间，看起来有点凌乱，就像刚从小睡中醒来一样。 但是，它符合设计要求，可能只是世界上最知名的字体。
从纯粹的美学角度来看，Comic Sans 并没有太多值得喜欢的地方。 它笨重、笨拙，字母中的小扭结和旋钮很让人分心。 尽管如此，它还是有一些有趣的怪癖，可以很好地用于标识，并且它作为有史以来最糟糕的字体的普遍看法使其成为我们七步细化技术的完美挑战。
这一次，我将减少对机制的关注，并在每一步让您更深入地了解我的创造性思维过程。
1.查看字体
对于这一步，把自己想象成一个尴尬的青春期男孩的父母。 不可否认，他是一个看起来瘦长的傻瓜，但你可以看到他将成为一个身材魁梧、全面发展的年轻人的那一天。
2.构思
构思是释放你冒险艺术的一面的时候。 你可以在以后无情地编辑自己，但现在，抓住机会。
当我回顾 Comic Sans 时，我注意到我试图将其融入到我的构思草图中。
3.扭曲字体
也许你和我一样……有点痴迷于在 Photoshop 中组织图层和使用非破坏性编辑技术。 这一步不要这样！
输入你的单词，光栅化字体，然后扭曲这些字母。
4.修正草图
就像我说的，Comic Sans 的小不规则令人抓狂，所以在这一步中，我专注于拉直线条和平滑曲线。
5.细化草图
在最长的时间里，我直接从 Photoshop 中的校正草图步骤转到 Illustrator 中的矢量描摹。 但是，当我第一次看到我填写的矢量字母时，它们总是看起来有点奇怪。
这个细化步骤是确保您的字母间距良好的好方法。 毕竟，字母之间形成的形状与字母本身同样重要。
6. 矢量跟踪
使用钢笔工具很容易让你的大脑关闭。 您开始指向、单击和拖动手柄，而不再寻找改进设计的方法。
不要那样做！ 当你手绘草图时，你会不断地在瞬间做出决定和更正。 您应该以类似的方式使用钢笔工具。
7. 收尾工作
我对矢量跟踪的结果很满意，所以我选择了一个简单的块阴影和一些内部强调线。
理想情况下，您的字体将能够独立存在而无需任何修饰。 最后润色是为了让你的设计流行，但你应该注意不要添加太多的特殊效果。
不想要的东西的机会
我们设计师明智的做法是紧跟行业中存在的趋势、工具和思维模式。 我们作为一个社区学习和成长，如果我们领域的大部分人对某些事情的看法很差，我们应该寻求了解原因。
然而，我们也应该抵制彻底拒绝设计实践的冲动，尤其是在流行观点的一时兴起。 当我们遇到一些被认为不好的东西时，比如使用 Jokerman，了解其他设计师为什么会有这种感觉是件好事，但将潜在有价值的资源扔进垃圾堆是短视的。
相反，尽可能多地记在心里。 记笔记、观察、分类你喜欢和不喜欢的东西，并存储来自其他设计师的各种意见。
您永远不会知道，有一天您可能会通过使用 Comic sans 作为您客户美丽的新标识的基础来做出不可想象的风险设计社区的嘲笑。
• • •
进一步阅读 Toptal 设计博客：
- 电子商务用户体验——最佳实践概述（附信息图）
- 以人为本的设计在产品设计中的重要性
- 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
- 移动界面的启发式原则
- 预期设计：如何创造神奇的用户体验