背景
这是本教程第1部分的延续。在本部分中,我们将介绍文本工具,对齐以及在Sketch中使用导入的矢量图形。
文字和对齐方式
好吧,让我们打开插入菜单并写一些文字!

添加文字
我写了“香蕉”。选择文本后,查看屏幕右侧的Inspector。使字体大小为36,文本对齐中心和填充颜色为白色。

编辑文字
如您所见,文本不是相对于矩形居中。要解决此问题,请按住Shift并同时选择矩形和文本。

选择两个对象
接下来,找到Inspector顶部的Align按钮,然后选择下面列出的两个按钮。这些是水平对齐和垂直对齐。

水平和垂直对齐
现在让我们在页面的白色部分添加一些文本。我写道:“香蕉摊里总有钱。”

香蕉摊里总有钱。
我使用了24号Avenir,对齐中心。确保在对齐设置中将其水平对齐到画板的中心。
导入向量
让我们学习如何导入矢量文件并进行编辑。我在The Noun Project下载了Will Deskins设计的可爱猴子图标。点击这里直接下载SVG。(记得根据名词项目的指导方针在你的项目中给予肯定!)
下载并解压缩SVG文件后,将其直接拖到Sketch画板中。

将SVG拖动到画板
选中图标后,让我们在屏幕左侧的“图层”菜单中进行一些调查。此SVG包含在名为“noun_59767_cc”的图层组中。如果单击箭头将其展开,您将看到三个名为Layer_1,Layer_2和Layer_3的子图层以及一些用于艺术家信用的文本图层。

显示所有图层
由于我在本教程中对艺术家给予了赞誉,因此我通过点击删除来删除嵌入的文本图层。当您使用他人的作品时,请确保在下载时始终给予奖励或付费。

打开图层
现在是时候做一些侦探工作了。我总是在导入矢量文件时清理空的和不必要的图层。选择Layer_1和Layer_2后,请注意图层为空,可以删除。

删除空图层
如果展开Layer_3,您将看到这是图标核心路径的位置。

选择猴子图层
选择这三个图层后,您可以更改填充或边框颜色。我将填充更改为#90B8DC。注意:如果选择父组(“组”),Sketch将不允许您更改填充颜色。您必须选择组中的三个单独的图层才能编辑颜色!
现在你有一只浅蓝色的猴子。要调整大小,请按住shift并将光标移动到形状的角落。

调整图层大小
在按住shift的同时,拖动图像的一角直到它变大。保持移位可确保图像的比例与原始比例一致。
使用画板
接下来我们要做的是更改画板的名称。现在它说“肖像 - 5 / 5S / 5C”,但我们想要更具体的东西,因为这将成为导出的PNG文件的名称。如果双击图层窗口中的画板名称,它将选择名称并允许您键入任何所需内容。我打字“香蕉摊”

更改画板名称
最后,我做了一些调整。我把文字移到猴子下面。然后我使用检查器顶部的对齐工具将所有内容置于中心位置。结果如下:

香蕉站画板示例
现在激动人心的部分开始了 我们可以非常轻松地复制整个画板。右键单击图层窗口中的画板,然后选择“复制”。或者在选择画板的情况下使用快捷键⌘+ D(提示:这也适用于图层!)。

复制画板
Sketch将在原始右侧创建一个复制画板。请务必更改每个屏幕的画板名称,因为这是Sketch在导出PNG时将使用的名称!
共享样式和文本样式
共享样式允许您一次更改多个图层的样式。要了解其工作原理,首先从任何画板中选择一个蓝色矩形。如果您查看右侧的检查器,您将看到一个显示“无共享样式”的下拉列表。

没有共享风格
单击此下拉列表,选择“创建新共享样式”并为其命名。我把它命名为“顶部矩形”

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

选择其他矩形
现在,这部分很重要:确保只选择了一个矩形,而不是两个。编辑填充到#F5C923。

将颜色更改为黄色
你在这里做的是用“顶部矩形”样式更改形状,这会影响项目中的两个矩形。你猜怎么着?您也可以使用文本样式执行此操作。

创建文本样式
选择一条黑色文本行并创建一个新的文本样式。我把我的名字命名为“Body Text”。

创建文本样式
现在重复我们对矩形所做的事情。选择第二个画板上的文本并应用样式“正文文本”。现在我们可以看到更多的Sketch魔术发生了。通过只选择一个文本图层并将字体粗细更改为粗体...

将文本样式更改为粗体
是的,你猜对了!即使您只选择了一行文本,这两行文本也会更改为粗体。
你可能会看到这是怎么回事。我们将为袜子猴子图标制作第三种款式。为此,您必须在图层组中选择三个单独的图层,如下所示:

创造袜子猴子风格
单击“创建新共享样式”并键入“Sock Monkey”。

名字袜子猴子样式
这一次,我们将做一些不同的事情。暂缓将风格应用于第二只猴子。首先,让我们将这个颜色改为黄色#F5C923。

应用风格
接下来,通过展开图层组并选择构成图标的三个图层来选择另一只猴子。然后转到右侧的Inspector,选择Layer Styles下拉列表,并选择刚刚创建的“Sock Monkey”样式。

应用风格
如您所见,已应用“Sock Monkey”样式,将我们的图标从蓝色更改为黄色。
在第3部分中了解如何导出文件
原文:http://megumi.co/learn/sketch2.htm