使用Sketch 3创建一个引人注目的水滴图标

您将要创建的内容

sketch 是一个非常通用的工具，您可以在日常工作中使用它作为 Web 和应用程序设计师。在本教程中，我将向您介绍 Sketch 中的画板、图层、阴影、内阴影、文本、边框和填充功能，并向您展示如何使用它来创建一个简单、引人注目的图标。 

如果这是您第一次打开 Sketch 3，关于 Sketch 界面有四点需要注意：

• 在顶部，您可以获得设计工具（矩形、三角形等）。

• 左侧面板是您的图层所在的位置。

• 中间是一个无限的画布，您可以在其中进行设计。

• 在右侧，您可以获得每个选定工具的设置。

1. 添加画板

画板是一种通过分隔框架组织设计的简单方法。当您按下A 键（或单击Insert > Artboard ）时，Sketch 3 会为您提供一组默认画板尺寸。您可以看到默认情况下，您在 Sketch 界面的右侧具有主要 Apple 设备的屏幕尺寸：

选择ipad屏幕 > 横向。您现在可以在左侧的图层面板中看到它。如果您的屏幕尺寸较小，请不要忘记按Command-连字符 (-)缩小以查看整个画板。 

双击它重命名你的画板。调用它Water Icon。你现在应该有这样的东西：

2. 创建背景

所以，我们有一个 1024 像素宽和 768 像素高的 iPad 画板。让我们从添加背景开始。为此，请按R 键（或转到“ 插入”>“形状”>“矩形”），单击您的画板，然后拖动鼠标/手指以制作一个小矩形。您现在可以在图层面板中看到它。重命名它background。 

接下来，我们将转到右侧面板并设置背景层的属性：

• 位置X 到 0

• 将 Y 定位为 0

• 宽度为 1024

• 身高768

让我们添加一些样式。转到边界并取消选中它。现在，通过单击填充属性中的默认灰色来添加渐变。将显示一个下拉菜单，其中包含五个选项：平面颜色、线性渐变、径向渐变、角度渐变、图案填充和噪声填充。

从左到右：平面颜色、线性渐变、径向渐变、角渐变、图案填充、噪声填充

单击径向渐变。您现在可以看到一个滑块，左侧的渐变中心是白色，右侧是渐变色的末端黑色。要更改它们的颜色，您只需在滑块中单击它们：

让我们设置颜色。Sketch 允许您通过单击RGB或HSB标签在十六进制值、RGBA 和 HSBA 之间进行更改。我对HSBA比较熟悉，所以中间的颜色我选择H190、S50、B100、A100，四肢的颜色我选择H210、S50、B100、A100。

3.创建图标

我们现在将创建包含水滴的图标。为此，请添加一个新矩形。按R，然后单击并拖动。然后重命名你的新层icon。

将Width设置为515，将Height设置为515。使用右侧面板顶部的工具将其放置在中心：

使用 position 上方的工具设置图层相对于其容器的位置

将边框半径设置为144，与背景图层一样，取消选中边框，然后通过选择白色、纯色填充图标。

阴影

现在我们将添加一些阴影。阴影功能有五个选项：颜色、X 位置、Y 位置、模糊和散布。将阴影设置为：

• 颜色：H210、S70、B80、A100

• X: 0

• 是的：24

• 模糊：55

• 点差：0

图标的最后一步是在底部添加内部阴影。内部阴影遵循与阴影完全相同的功能，只是它会扩散到形状的内部而不是外部。我们可以将内部阴影设置为：

• 颜色：H190、S30、B100、A100

• X: 0

• 是：-13

• 模糊：21

• 点差：0

最后你应该得到这个：

4. 创建液滴

在这些最后的步骤中，您将学习使用 Sketch 创建一个水滴图标。首先我们需要一个椭圆，所以按O  （或转到插入 > 形状 > 椭圆），并将其大小定义为 宽度：200和高度：200。

接下来，通过插入>形状>三角形创建一个三角形（这个没有快捷方式）。转到右侧面板，选中 Equilateral，并将Width设置为200，将Height设置为200。

现在是棘手的部分。你必须像这样定位你的图层：

选择这两个图层，然后单击位于Sketch 界面顶部的Union按钮。

现在我们有了水滴形状，我们将通过在其顶部添加半径来添加最后的触感以使其更加用户友好。为此，请选择您的形状并单击顶部工具栏中的编辑工具。

幸运的是，选择的第一个点是我们要编辑的点。转到右侧面板并将Corners值更改为34。

恭喜！水滴形状现在完成了！现在您可以通过单击顶部菜单栏中的图标（旋转右侧）将其展平。在图层面板中选择水滴图层并将其重命名Droplet。转到右侧面板并将Width设置为266，将Height设置为377。然后使用右侧面板顶部的工具将其居中：

现在是最后一步：风格！首先取消选中边框，然后用径向渐变填充形状。使中心值 H190, S70, B100,  A100和底部值 H210, S70, B100, A100。

然后我们将添加一个内阴影：

• H190、S100、B100、A100

• X: 0

• 是：-34

• 模糊：55

• 点差：0

恭喜！完成

感谢您阅读教程。我希望它可以帮助您学习使用 Sketch 中可用的一些基本工具。