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

这是本教程第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）”。