技术文章

创建像素完美的图标，尤其是小尺寸的图标，可能看起来需要矢量编辑高级文凭才能实现。但如果您知道正确的技术，您可以将一些简单的形状与 Sketch 的一些最基本的功能相结合，以产生一些令人印象深刻的结果。

今天，我们将介绍在 Sketch 中创建图标的三种简单技术。零绘画技巧！更好的是，您可以采用这些技术并将它们应用于各种场景，而不仅仅是图标。

您将学习使用以下方法创建图标：

• 布尔运算，例如减法和交集

• 边框

• 基本形状工具，如椭圆形和矩形

• 矢量编辑

使用 Subtract 创建位置图钉图标

按O激活椭圆工具并创建一个 12x12 像素的圆圈。您可以按住⌥⇧以从中心向外创建一个完美的圆。或者，您可以快速插入圆圈并通过检查器调整大小。

默认情况下，每个新形状都会有灰色填充和边框。让我们去掉边框并将填充设置为黑色。现在，再次选择图层并按5将不透明度降低至 50%。

专业提示：选择一个形状图层，然后使用“图层”> “样式” > “设置为默认样式”将其样式设置为您创建的任何新形状的新默认样式。

要在位置图钉图标中创建孔，请通过选择圆形图层并按 来复制它⌘D。然后按住⇧⌥并将其缩小到 6x6 像素。

随着之前不透明度的降低，现在在我们承诺剪切任何内容之前可以很容易地看到形状如何重叠。

现在是有趣的部分，重塑更大的圆圈以形成别针形状。双击圆圈进入矢量编辑模式 - 并将底部点直接向下拖动以将其拉伸。

该点当前有两个控制柄控制点正在弯曲路径。我们想要一个直的硬角，因此双击以切换到直点。然后，通过应用圆角半径 1 来柔化该点。

要完成此操作，请选择两个图层，然后使用工具栏上的“减去”布尔操作将前面的图层从后面的图层中剪切出来 - 这样就完成了！

使用 Difference 创建眼球图标

您可以使用与以前相同的技术创建眼球图标，但这次让我们尝试不同的方法。前往第二个画板并使用椭圆工具绘制一个 28x28 像素的圆圈。

您会注意到圆圈比画板本身更大 - 这完全没问题。将其向上移动，使其距画板底部边缘 5 像素。

专业提示：按住⌥画板上的任何图层并将其悬停在上面，以测量它们到边缘的距离。

复制图层，这次按住⌥并拖出一个副本 - 或者您可以使用与上一步相同的技术。将副本放置在距画板顶部边缘 5 像素的位置。

您已经可以看到形成眼球形状的重叠部分，因此选择两个图层并应用“相交”布尔运算 - 只保留重叠区域。

您可以保持形状不变，但我们会给您一些更多的提示来软化角落。如果双击编辑，可以看到圆圈仍然存在，因为布尔运算是非破坏性的。要将布尔运算的可见结果转换为路径，我们首先需要通过单击工具栏中的“工具”按钮并从下拉菜单中选择“展平”来展平它。

现在，返回矢量编辑模式并将侧点微移 1 像素。选择它们并在检查器上将点类型更改为直线。是的，现在角度看起来会更尖，但我们可以给它们设置圆角半径 1。按↵退出矢量编辑模式。

对于瞳孔，创建一个 10x10 的圆圈，复制它，然后将其缩小到 6x6 像素。确保图层居中，将其全部选中，然后单击“差异布尔”操作以交替添加和减去重叠的图层。这就是一个包装🌯

使用边框创建放大镜图标

对于最后一个，我们将使用边框而不是填充进行绘制。与前面的示例一样，您可以使用我们介绍的任何技术来创建此图标，但让我们探讨一下最后一种技术。

前往最后一个画板并创建一个 14x14 的圆圈。点击F以删除填充并B添加边框。将边框的颜色更改为黑色，将宽度增加到 2px，并确保位置设置为“内部”——尽管这可能是默认值。

现在，对于放大镜手柄，我们使用矢量工具绘制一条线段，您可以通过按 来触发该工具V。您还可以使用直线工具，但我们建议使用矢量工具以获得更高的精度。在绘制线条之前，请前往检查器并单击“对齐到半像素”按钮，即尺寸控件下方的第三个按钮。

接下来，单击使第一个点距圆底部半个像素，然后向下移动一点并添加第二个点。点击↵以确认您已完成绘制，并将手柄设置为与圆圈相同的样式。

专业提示：要快速复制图层的样式，请按⌥⌘ C复制并将⌥⌘C其粘贴到另一个图层上。

要使手柄的方形底部变圆，您可以扩展边框（我们选择 3 像素）并切换到圆形帽端。此时，您可以对图层进行分组，旋转它们，然后就到此为止了。但我们将引导您完成更多步骤，使其看起来像我们今天制作的其他图标。

选择两个路径，单击工具栏上的编辑图标，然后选择轮廓。现在，我们不再有两条带边框的路径，而是两条带填充的复合路径，您可以使用 Union 布尔运算将其连接起来。

按住⌘⇧并拖动边界框，直到将形状旋转到 -45 度。您还可以将整个事情扁平化为一个单一的、优化的复合路径。就是这样！

就像这样，我们使用三种不同的技术绘制了三个图标 - 并在此过程中学到了很多技巧。我们希望您掌握一些新技能，并更有信心在 Sketch 中创建图标。