原文：

Arr Matey! Create a Nautical Themed Tattoo Alphabet in Sketch

在这篇教程中，我将向大家展示如何用Sketch制作以航海为灵感主题的纹身字体。我们将利用简单的图形（Shape）和矢量（Vector）工具与边框（Borders）和式样预设（Style Presets）一同迅速制作整个字母表。

1.设置你的文档

打开Sketch，默认视图是一个无限的画板，它的大小由我们自己来决定。

我们将用栅格来工作所以先打开，打开方式：在最上面的工具栏中选择View > Grid Settings，然后参照下图更改。

2.制作你的第一个字母

第一步：

为了使制作工作更简单，我勾画了一些我想实现的效果图。这将有助于字母们的主题风格保持一致，并且提供了一个矢量处理的起点。它不需要也没必要很完美，在矢量处理的过程中我甚至会改变一些花纹与图形。所以这些草稿都只为我提供一些引导。

第二步：

从我的草稿中可以看到，所有的文字都是由一个宽条和一个笔画来完成造型。我决定将宽条定为网格的两格宽，八格高，即50×200px。字母“A”中的宽条会略微倾斜，所以使用矢量工具（V）创建自定义的形状会更容易制作。用矢量工具来点选一个交叉网格以开始绘制。接下来向左数两格，然后单击创建下一个点。向左数三格向上数八格，再画一个点。接着向右数两格，并创建一个点。最后点击起点以闭合整个形状。

（动图，请看原图）

第三步：

现在让我们制作另一条对角线以画完“A”这个图形。Sketch有一个线工具（Line），虽然很不错但它似乎在栅格下表现不佳，且画出来的线在这里不是自动断开的。因此我们将不使用这个工具，并用矢量工具（V）来完成我们的线。

使用矢量工具（V），在宽条最上最左的网格顶部创建一个点，再垂直下拉到最下面，并向左隔三格，并单击创造一个点。最后，您可以按键盘上的回车键来设置路径。

第四步：

下面制作横梁和衬线；再次使用矢量工具（V），创建穿过金字塔形中间的水平线。因为“A”是8格高，证明其中间离上下都是四个网格。而衬线们都将超出两边各一个格。

3.制作字母式样

第一步：

大部分的字母都有着简单的笔画，但宽条需要调整式样以突出我们的复古航海纹身主题。我将选用一个漂亮的水蓝色，你也可以选择你喜欢的颜色。在图层列表（最左的面板）中选择所有简单的笔画图层，然后在检查器（最右的面板）中调整边框部分至如下图所示。这时如果有选择填充选项请去掉。

此时这些笔画图层依然是被选中的，回到图层列表，在最底下你可以看到式样预设（Style Presets）。单击此处的“＋”以将笔画的式样设为预设，方便以后套用。

译者注，译者所用的Sketch 3.0.4版本的Style Presets在检查器的中间，即为No Shared Style>Create New Shared Style）

第二步：

现在选取宽条图形，这次我们将调整填充、边框和内阴影元素。

填充将会选择渐变。当你点击填充图标，填充颜色面板就会出现，然后你便可以调整设置。在这个面板选择渐变，然后预设的渐变色彩就会出现在图形上。

为了编辑渐变，你将不得不把盯着画板上的“A”，你会注意到在它的顶部与底部有两个圆圈图标并在同一条直线上。默认情况下，顶部圆形图标被选中，所以如果你改变颜色/透明度只会影响这个点。我们将它设置为不透明度为100%的白色。在画板上单击底部的圆形图标，并如同刚才一样调整颜色。

译者注：

3.0.4版本的linear gradient在Fills里面，如下图

边框与填充之间的那部分白色为内阴影，参数可见第四步的配图

第三步：

放大画板并定位到宽条的中间，将渐变的上下两个圆形图标拖动到中间（如下图）。

译者注：上下两个圆要拖

如果你按住Shift键，则圆形图标将垂直移动且不偏离。这样做使得他们对齐并作出一条边框颜色和白色的水平线。

在屏幕截图中注意到，这条线是不完全在栅格的网格线上，而是与横梁的边框对齐。

第四步：

渐变的具体操作只能在Fills面板里面操作而不能直接撤销。

然后调整边框与内阴影数值至如下图，接着就像在笔画图层那里的式样预设一样在保存宽条的式样吧！

4.制作字母表

使用之前的草图与新建的式样预设来继续完成其他字母。你会发觉这将会又快又简单因为这些操作将多次重复。

我将假设你知道所有字母的样子，所以比起带你全部过一遍每个字母，我将会许选择用不同的工具与手法制作一些重点字母形状。

第一步：

要制作“B”，我们得建立一个50×200px的矩形，这将是“B”的主干。选择Shape菜单，点击矩形工具（R）并绘制图形，然后添加预设的渐变填充样式。

第二步：

我们将使用圆角矩形工具绘制字母“B”的圆圈部分。用圆角工具（U）绘制一个150×100px的圆角矩形，其弯度半径至少50，可在检查器中调整。

第三步：

在顶部工具栏点选编辑工具来编辑我们刚刚创建的圆角矩形。选择矩形左上方的点，然后工具栏就有一组新的选项可以使用。你可以看到这个弯度设置的是50px，然后单击文本框并将其更改为0。这样做就把左上角的圆角给移除了，接着把右下角的圆角一并移除吧。

第四步：

选择剪刀工具，Edit > Paths > Scissors，然后点击左侧边将其删除。这个工具使用非常频繁，最好是将其放保存到工具栏。设置方法：右键点击工具栏，或前往View > Customise Toolbar。我们将使用这个工具很多，可能是您的最佳利益将其保存到工具栏。要做到这一点，右键点击工具栏，或浏览视图>自定义工具栏...然后你可以把它放在随意放在工具栏中。

再次选择编辑工具，然后单击左下角的点并拖动它，使它不再穿过“B”的主干。接下来我们运用之前的笔画式样预设。现在，您可以通过重复这些步骤以创建“B”下面的圆圈部分，并且通过矢量工具在“B”中间添加一个额外的衬线。

译者注：3.0.4剪刀工具：Lays > Paths > Scissors

第五步：

相比来说，”C”非常简单。它基本上是个圆，但我们需要往主干中填充。选择椭圆工具（O），并创建一个200×200px的圆。

第六步：

用矩形工具（R）像先前一样画出主要矩形，并对齐圆的左边。按住Shift键单击两个形状，前往Edit > Combine > Intersect，或从顶部工具栏选择相交（Intersect）。然后就可以用之前的渐变式样预设填充。

第七步：

再画一个与刚才一样大小的圆，并把它放在刚才的图层之上。选择编辑工具，将鼠标悬停在圈的边缘，你会看到光标变为有一个“+”的笔的图标。在中心点上下两侧且路径与栅格交叉的地方单击以创建新的点。选择剪刀工具，然后剪掉刚才创建的两点间的开放路径。添加衬线然后可以套用笔画式样预设。

第八步：

依照之前的步骤，你应该能够从字母“A”制作到“R”。几乎都是加工、打磨、重复主题和基本字母式样。不过“S”稍微有点不同，接下来我会解释说明。

为了字体更整齐和谐，我用与“A”相同的角度来制作所有其他倾斜字母如“V”，“W”，和“X”。然而，这个角度对于“S”和“Z”有点小。所以我给“S”重新绘制一个新的角度。宽条的宽度仍然是两个方格宽但上下边之间的相对距离是四个格而不是三个。所以，选择矢量工具（V）和创造如下图的图案。

第九步：

选择圆形工具（U）画一个150×200px的圆角矩形，弯度半径为至少一半的宽度，选择75。按住Shift选择两个图形，然后前往Edit > Combine > Intersect，或者选择顶部的工具栏的相交工具（ Intersect），然后用渐变式样预设填充它。

第十步：

使椭圆工具（O）创建两个150×150px的圆圈，把它们直接对准之前所制作的形状，一个在顶部一个在底部。然后选择编辑工具并悬停的圆边，你会看到光标变为一个带“+”笔的图标。在圆与底层的相交的地方单击创建一个新的点，并选择剪刀工具把这两点之前的路径剪掉。

你可以在你的字体中运用笔画图层式样预设，如顶部和底部的圈，然后你的“S”就完成了。

第十一步：

“Y”由矢量工具绘制（V），可由下面的步骤来制作。

（动图，请看原图）

第十二步：

最后，“Z”我觉得角度太陡，所以我把它像"S" 一样拉长并表现得更明显。你可以随你喜欢来调整角度，但我把上下边之间的相对距离调为五个格并加入主干与衬线来完成。

Arr, "X" Marks the Spot, Matey!

我希望我告诉了你一些关于款式套用的小技巧。

一旦你有了一些设计的字体你可以将不同的元素组合起来，然后就可以复制／粘贴这些字体以组成单词与句子。敬请期待未来关于如何有趣地运用这些新造字体的教程。