sketch文本、对齐和SVG – Sketch入门UI设计教程

这是本教程第1部分的延续（sketch画板和形状），在这一部分中，我们将介绍文本工具、对齐方式以及如何在Sketch中使用导入的矢量图形SVG。

文本和对齐

现在，让我们打开Insert插入菜单并写一些文本！

写入文本“Bananas”，选中文本后，查看屏幕右侧的检查器。字体大小为36，文字居中对齐，填充白色。

可以看到，文本并没有相对于矩形居中，要解决这个问题，按住Shift键，同时选择矩形和文本。

接下来，找到检查器顶部的对齐按钮，并选择我在下面列出的两个，它们是水平对齐和垂直对齐。

现在让我们在页面的白色部分添加一些文本，写上“There’s always money in the banana stand”。

我用的是24号的Avenir，中间对齐，另外确保在对齐设置中水平对齐到画板的中心。

导入矢量

让我们学习如何导入矢量文件并编辑它们，你可以下载其他的矢量图标进行操作。

下载并解压缩SVG文件之后，将其直接拖到sketch画板中。

选择图标后，让我们在屏幕左侧的Layers菜单中做一点检查。这个SVG包含在名为“_59767_cc”的层组中。如果单击箭头展开它，你将看到三个名为Layer_1、Layer_2和Layer_3的子层，以及其他的一些文本层。

这里通过点击delete来删除嵌入的不必要的文本层。

现在是做一些侦探工作的时候了，总是这样做时，导入向量文件，以清理空和不必要的层。选择Layer_1和Layer_2后，注意这些层是空的，可以删除它们。

如果展开Layer_3，你将看到图标的核心路径在这里。

选择了这三层后，你可以更改填充或边框颜色。我把填充改为#90B8DC。注意:如果你选择了父组(“group”)，Sketch将不允许你更改填充颜色。你必须在组中选择三个单独的层来编辑颜色！

现在你有了一只应该是浅蓝色的猴子，要调整大小，按住shift并将光标移动到形状的一角。

按住shift，拖动图像的一角，直到它变大。按住shift键可以确保图像的比例与原始比例一致。

使用画板

接下来我们要做的是改变画板的名字，现在改名为“Portrait – 5/5S/5C”，但我们想要更具体的东西，因为这将成为你导出的PNG文件的名称。如果你在图层窗口双击画板的名字，它会选择你想要的名字，这里输入了”Banana Stand”。

最后，我做了一些调整，把文字移到猴子下面。然后我使用在检查器的顶部对齐工具居中所有的东西。结果如下:

现在激动人心的部分开始了！我们可以很容易地复制整个画板。右键点击图层窗口中的画板，选择“Duplicate/复制”。或者使用快捷键⌘+ D的画板选择(提示: 这也适用于层)。

sketch将创建另一个复制的画板，一定要记得更改每个屏幕的画板名称，因为这是Sketch在导出你的png时将使用这个名称。

共享样式和文本样式

共享样式允许你一次更改多个层的样式。为了了解它是如何工作的，我们首先从任何画板中选择一个蓝色矩形。如果你看右边的检查器，你会看到一个下拉菜单，上面写着“没有共享样式（No Shared Style）”。

点击这个下拉菜单，选择“创建新的共享样式”并命名它。我把这个命名为Top Rectangle

现在选择第二个画板中的另一个蓝色矩形，并应用“顶部矩形”样式。

现在，这部分很重要：确保你只选择了一个矩形，而不是两个，编辑填充为#F5C923。

你在这里所做的是改变一个形状与“顶部矩形”风格，这影响了两个矩形在你的项目。你还可以对文本样式执行此操作。

选择其中一行黑色文本并创建一个新的文本样式。

现在重复我们对矩形所做的。选择第二个画板上的文字，应用样式“Body Text”。现在我们可以看到更多的操作。只选择一个文本层，并将字体粗体…

这时两行文本都将变为粗体，即使只选择了其中一行。

你可能已经看到结果了。我们要做第三种风格的图标。要做到这一点，你必须选择层组中的三个单独的层，像这样:

点击“创建新的共享样式”，输入“Sock Monkey”。

这一次，我们要做一些不同的事情。不要把这种风格应用到另一只猴子身上。首先，让我们把这个颜色改为黄色#F5C923。

接下来，通过扩展层组并选择组成图标的三个层来选择另一个monkey。然后转到右边的检查器，选择图层样式下拉菜单，选择你刚刚创建的“Sock Monkey”样式。

如你所见，“袜子猴子”风格已经被应用，改变我们的图标从蓝色到黄色。