跳过导航
学习设计

个Sketch图标设计的初学者指南

学习如何在无需成为优秀插画师的情况下创建自己的图标

创建像素完美的图标,尤其是那些在小尺寸下也能正常显示的图标,可能看起来需要高级的矢量编辑文凭才能实现。但如果你掌握了正确的技巧,就可以将一些简单的形状与Sketch的一些最基本功能结合起来,从而产生一些令人印象深刻的效果。

今天,我们将介绍三种在Sketch中创建图标的简单技巧。无需任何绘画技能!更棒的是,您可以采用这些技巧并将其应用于各种场景,而不仅仅是图标。

您将学习如何使用以下方法创建图标:

  • 布尔运算,例如减去和相交
  • 边框
  • 基本形状工具,例如椭圆形和矩形
  • 矢量编辑

让我们来看一看 🔍

首先,在Sketch中打开一个新文档,按A激活画板工具,并为每个图标创建三个24x24 px的画板。

使用“减去”创建定位销图标

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

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

专业提示:选择一个形状图层并使用图层 > 样式 > 设置为默认样式将它的样式设置为创建任何新形状时的新的默认样式。

要创建定位销图标中的孔,请通过选择圆形图层并按D复制它。然后按住并将其缩小到6x6 px。

由于之前降低了不透明度,因此在开始剪切任何内容之前,您现在可以轻松地查看形状如何重叠。

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

此点当前有两个弯曲路径的控制点手柄。我们希望改为一个笔直的硬角,因此双击切换到直线点。然后,通过应用1的圆角来软化该点。

最后,选择这两个图层并使用工具栏上的“减去”布尔运算将前图层从后图层中剪切出来 - 就完成了!

使用“差集”创建眼球图标

您可以使用与之前相同的技巧创建眼球图标,但这次让我们尝试一种不同的方法。转到第二个画板并使用椭圆形工具绘制一个28x28 px的圆形。

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

专业提示:并将鼠标悬停在画板上的任何图层上以测量其到边缘的距离。

复制图层,这次按住并拖出一个副本 - 或者您可以使用上一步中的相同技巧。将副本放置在画板的**顶部**边缘5px处。

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

您可以保留形状原样,但我们将为您提供更多提示来软化角。如果您双击进行编辑,您会看到圆形仍然存在,因为布尔运算是无损的。要将布尔运算的可见结果转换为路径,我们首先需要通过点击工具栏中的**工具**按钮并从下拉菜单中选择**展平**来将其展平。

现在,返回矢量编辑模式并将侧点向内移动1px。选择它们并更改检查器中的点类型为直线。是的,角度现在看起来会更尖锐,但我们可以为它们提供1的圆角。按退出矢量编辑模式。

对于瞳孔,创建一个10x10的圆形,复制它,并将其缩小到6x6 px。确保图层居中,选择所有图层,然后单击“差集”布尔运算以在一个范围内交替添加和减去重叠的图层。就这样结束了 🌯

使用边框创建放大镜图标

对于最后一个,我们将使用边框而不是填充进行绘制。与之前的示例一样,您可以使用我们介绍过的任何技巧创建此图标,但让我们探索此最后一项技巧。

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

现在,对于放大镜的手柄,让我们使用矢量工具绘制一条线段,您可以通过按V触发它。您也可以使用直线工具,但我们建议使用矢量工具以获得更高的精度。在绘制线段之前,转到检查器并点击大小控制下方第三个**吸附到半像素**按钮。

接下来,点击使第一个点位于圆形底部上方半像素处,然后向下移动一点并添加第二个点。点击确认您已完成绘制并为手柄设置与圆形相同的样式。

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

要使手柄的方形底部变圆,您可以扩展边框 - 我们将使用3 px - 并切换到圆形端帽。此时,您可以对图层进行编组,旋转它们并完成。但我们将引导您完成更多步骤,使其看起来与我们今天处理的其他图标完全一样。

选择这两条路径,点击工具栏上的**编辑**图标,然后选择**轮廓**。现在,我们有两个带边框的路径,而不是有两个带边框的路径,我们有两个带填充的复合路径,您可以使用“联合”布尔运算将它们连接起来。

按住并拖动边界框,直到将形状旋转到-45度。您还可以将整个内容展平为单个优化的复合路径。就这样!


就这样,我们使用三种不同的技巧绘制了三个图标 - 并在此过程中学习了许多技巧。我们希望您获得了一些新技能,并对在Sketch中创建图标更有信心。如果您有任何疑问或想学习如何创建特定内容,您始终可以咨询我们优秀的社区 在我们的论坛上

**接下来阅读:**了解Forrest背后的设计师Matt Emmins如何为该应用的大型更新创建了一套自定义图标。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 新手,还是回来查看新功能,我们都能让您在几分钟内完成设置并准备好完成最佳工作。

免费开始使用
免费开始使用