草图

教程
作者:Rainer Erich Scheichelbauer
en fr zh

15 十一月 2020 发布日期: 8 五月 2014

有很多种途径可以获得你的字母造型。很多设计师喜欢首先徒手绘制草图,然后再数字化。大多数方法(如果不是全部的话),共同点都是通过特定的书写工具来寻找造型的源头。这里有两种通行的方式带你起步来为字体画草图。

在拉丁文字的设计理论中,设计字母时发挥最大作用的通常是宽笔尖钢笔。 其他笔也是可以的,例如尖头笔,或者一些完全不同的工具,比如画笔。你也可以使用抽象的方法,尝试一种完全几何的途径。

但很多理论家坚持认为,即使你试图使用不同的工具来抽象字体,你抽象的根据仍然是宽笔尖钢笔绘出的效果。 所以在本教程中,我将专注于宽笔尖钢笔。

从 “n” 开始

不要从 a 开始设计。 除非你有些特别的构思,你最好从 n 开始。 它可能不是字母表中的第一个字母,但它的形状在其他字母中重复出现。 将 n 变为 h、i、m、r、u 等字母并不需要太多考虑,所以 n 是一个很合适的字母。

模拟宽笔尖钢笔

你可以用根鹅毛做自己的钢笔,也可以买一支现成的。 它们有一些现代的变化改进,所以你不会因滴下的墨水弄脏自己的手。 通过一段时间的实践,你便可以用一支宽笔尖笔写出不错的字。

但有可能的是,当你对某个字母已经有很好的想法的时候,你并没有一只这样的笔。 所以我们必须仿造它的效果。 而用宽笔尖书写的特点是简单的:笔尖的宽度是固定的,并且其相对于基线的角度几乎没有变化。

绘制方法 1:两支铅笔

把两支铅笔握到你的手中,也许需要用橡皮筋将其绑在一起,然后开始写字。 确保在绘制笔划时保持它们或多或少相同的角度:

绘制方法 2:摆动

如果你只有一支可用的铅笔,则可以引导手沿着笔划的方向左右来回放松地摆动:

这种摆动可以模拟宽笔尖的效果。 如果把纸张笔直放在你面前,使用下臂自然的角度,你就会画出一个较好的笔尖角度。这种方法与哦点难度,因为需要通过练习才能保持住恒定的宽度和角度进行摆动。

给草图添加细节

无论你采用哪种方法来得到第一个粗略的草图,只要你有了基本的结构,你可以立即看出粗和细的部位。 现在,你可以拿一支铅笔,画出轮廓,并添加一些细节:

数字化你的草图

同样,我们有不同的方法来做这件事。 这里呈现的是一个适用于大多数人的。 简而言之,先用直线开始绘制,粗略的放置一些点。 稍后我们会增加曲线和精度。

首先,在你的草图中,标记你的转角、极值点和曲线变成直线的节点。 你也许会问什么是极值点? 它们是每个曲线上都有的,一个完全水平或垂直切线的切点。 所以,你的草图现在可能看起来像这样:

粗略估计节点

现在,进入 Glyphs,并通过 “文件 > 新建”(Cmd-N)创建一个新的字体。 双击 “n”,然后选择绘制工具(P)。 现在,点击屏幕添加直线,每点击一次添加一条线。 你可以非常粗略地做这一步,在这个阶段你不需要精确。 实际上在这一步就开始追求精确只是浪费时间。 大概地把节点放在基线(从下数第二条)和 x 高度线(从下数第三条)之间:

估计节点间的相对位置。 例如,内弧形的极值点似乎并不完全在字体的两个字干之间的中心,而是稍微偏右侧。给自己提一些问题,比如:“顶部节点是否在右侧字干之上?” 然后相应地放置你的节点。同样,它不需要非常精确,一个近似的效果便可以了。

再次点击您的起始点来闭合整个路径。 保持闭合的路径。 此处再强调一次:不考虑曲线,不考虑精度。 使用 “路径 > 修正路径方向”(Cmd-Shift-R)完成此步骤。 路径方向确定闭合的路径是否显示为白色或黑色。 该命令也会重新排列路径并设置路径起点(由三角形表示)。

对齐和移动点

现在,我们将通过对齐需要位于相同 x 或 y 坐标的点来开始添加精度。 使用编辑工具(V),选择需要对齐的点,然后选择 “路径 > 对齐所选内容”(Cmd-Shift-A)。 你会经常使用它,所以最好记住键盘快捷键:

Glyphs 似乎足够聪明,可以弄清楚你是否要水平或垂直对齐。 原则上,它会用最小的改动方式对齐。

现在,使用键盘上的箭头键,将点移动到位。 加上 Shift 键后,增量为 10 个单位,Cmd 键的增量为 100 单位。 将你的“n”的最低节点放在基线上。 如果它们被正确放置在基线上,会有一个菱形的标记。

弧线顶端的极值点需要略高于 x 高(默认值为 500)。 我们称之为视错觉溢出补偿(overshoot),确保视觉上弧形笔画与 x 高的水平笔画看起来等高。 大多数视错觉溢出补偿值在 10 到 15 个之间。如果你的设计是用作大字号展示目的,那么视错觉溢出补偿值大概是 10。如果它用于较小的字号,请将视错觉溢出补偿值设置得多一些。

现在 n 看起来是这样的:

让字干相等

接下来,我们需要让节点之间的距离相等。根据字母 “n” 的情况,我们需要确保两个字干具有相同的宽度。 一次一个字干,选择好构成字干的四个节点。 然后,查看灰色信息框(“显示 > 显示信息”,Cmd-Shift-I),并确保锁头图标是解开的。 这样,我们可以分别编辑宽度和高度。

为字干找到一个合适的的宽度数值,用灰色信息框上的水平双箭头旁边的数字控制。 对两个字干使用相同的宽度数值。

添加曲线

关于直线的操作已经足够了! 切换到编辑工具(V),按住 Option(Alt)键,然后单击线段以向线段添加灰色手柄。 如果添加的手柄太多,你可以选择一个手柄并使用 delete 键将其删除,而你的线段将再次变成直线。

一旦你在所有需要弯曲的线段添加了手柄,就可以轻松的将其拖拽到位。手柄在极值点时是水平或者垂直的。

最有可能的是,你还将在左侧字干中的重叠部分内有两个手柄。通常情况下,这两个手柄需要考虑的不是水平或垂直的问题,而是它们的角度。确保它们都具有大致相同的角度。这将有助于下一步。

你的 “n” 可能看起来像这样:

调整曲率

选择外部曲线段的某个手柄,并调出面板(“窗口 > 右侧边栏” 或 Cmd-Opt-P)。 在 “面板” 的 “调适曲线” 部分中,单击按钮(或按 Ctrl-Opt-1 至 8):

线段的曲率以手柄的相对长度计量。0% 表示手柄完全缩回,100% 时曲线段的两个手柄相碰。0% 的曲率是没有意义的,因为这样表示为直线段——即没有任何手柄——更好。55% 的曲率时为椭圆形,即几何圆形所需的手柄长度。在字体设计领域,我们通常需要让曲率更大。即使在非常几何的设计中,曲率也至少为 57% 或58%。另一边,我们通常不会超过 80% 的曲率。你知我知:个人希望将两端的曲率值设为 58% 和 76%。

但是如何使内部和外部的曲线相匹配?很简单。秘密在于,内部曲线段的曲率要高于其对应的外部曲线。这样操作:选择内部(较小的)曲线的手柄,为其指定较高的百分数(例如Ctrl-Opt-5),然后选择外部(较大的)曲线的手柄,为其指定较低的百分数(例如Ctrl-Opt-4)。

尝试各种数值,直到满意为止。在超粗的设计中,曲率的差异通常会更大一些,在这样的设计中,内部和外部曲线之间的距离较大,而内部曲线将比外部曲线短得多。 另一方面,在超细的设计中,两条对应曲线的曲率可能完全相同,因为两条曲线基本上一样。

消除曲线上的隆起

也许你看到一些曲线上有小凸起,大约出现在两个曲线段相交的极值点处。 如果某一段曲线到另一段曲线的曲率突然变化,则会发生这种情况。 在这个 “凸起” 点的某侧,曲线看起来相当平坦,而相反的一侧,看起来相当陡峭。

选择节点,按住 Option 键,将节点水平移动。 你可以用箭头键或鼠标来做到这一点。 按住 Option 键时拖动节点,可以固定手柄位置不动,实际上是节点在相邻手柄之间移动:

这样的效果是,你将扁平的部分挤到一起,使其更加弯曲。同时,让弯曲的部分伸长,使其变得平缓。在中间的某处,你会找到一个最佳点,使得两侧曲率匹配,从而消除隆起。这就是人们有时所称的 “G2 连续”。

如果你有完整版的 Glyphs,则可以使用第三方插件,以帮助你将崎岖不平的曲线变成光滑的轮廓。 首先,我们推荐 Tim Ahrens 的 Remix Tools,它包含一个叫做 Harmonizer 的滤镜(安装后,选择 “滤镜 > Harmonizer”),会尝试重新排列节点,消除凸起的点。

然后,Yanone 的 SpeedPunk 工具,可以帮助你发现曲率问题。 它只会将曲率可视化,而你可以保持对曲线的控制。

嗒哒!

恭喜,你完成了你的第一个字母 n:

从这里开始, 你可以绘制你的下一个字符,或者调节字母的边距在 Adobe 的应用软件中测试你的字体。 别忘了在 “文件 > 字体信息 > 字体” 中设定字体家族的名称。


铅笔草图由 Stefan Willerstorfer 绘制

Translation:李灵鸥 Li Lingou
Revision: 刘钊 Liu Zhao

2020-10-16 更新:为 Glyphs 3 稍作调整。

Updated by Willie Liu (刘育黎) from 3type (三言).