sketch符号和导出画板 – Sketch入门UI设计教程 _sketch符号

这是本教程的第三部分，在继续学习之前，先复习第1部分和第2部分（sketch画板和形状，sketch文本、对齐和SVG），这一部分我们介绍sketch的符号，以及sketch导出画板的操作。
创建符号符号对于组织你经常重用的设计元素非常有用。对于本例，让我们将猴子图标转换为一个符号。选择图标后，在顶部菜单栏中选择“Create Symbol（创建符号）”

文章图片
单击后，检查器中会打开一个文本字段，把这个符号命名为“Sock Monkey”。

文章图片
注意文件夹图标在图层面板中是如何从蓝色变成紫色的，这意味着它是一个符号。

文章图片
现在这个符号出现在插入菜单中！让我们插入一个。

文章图片
现在我们有两个猴子，都有紫色的文件夹图标:

文章图片
符号的奇妙之处在于它们是相互联系的。对其中一个进行的任何更改都将应用于符号的所有其他实例。例如，如果你调整其中一个符号的大小，则另一个符号也会调整大小。

文章图片
提示：拖动边框时按住shift键，调整大小时保持原来的比例。
现在我想教你一个快捷方式来复制任何层，选中一个图层后，按住alt/option同时拖动。素描自动显示你的红色指导方针，所以你可以对齐复制层到画板和其他层。首先放开鼠标，然后释放alt键来放置文件。

文章图片
提示：如果你按住alt + shift键拖动，复制的图层会与原始图层对齐。
让我们再重复一次，我们有三个猴图标在底部:

文章图片
有一个快速的方法可以确保所有的这些之间有相同的空间。首先，选择所有三层。然后点击“水平对齐（Distribute Horizontally）”

文章图片
它所做的是将最左边和最右边的对象以相等的间隔对齐，这适用于任何选择3或更多。
现在，让我们学习如何分离符号。我们想要调整顶部的猴子图标，而不影响任何其他。要做到这一点，我们必须右键点击顶部的monkey，并选择“Detach from Symbol”

文章图片
现在我们可以安全地使这个图标更大，而不影响任何其他符号。注意，文件夹颜色再次变为蓝色:

文章图片
记得把这个图标对齐到画板的中心!
导出画板你怎样把你的画板从sketch中拿出来？sketch具有导出功能！它可以批量导出你的画板为PNG格式，并且自动为你的画板命名。
在导出之前，你必须选择每个画板，并在右侧检查器中检查“背景颜色（Background Color）”和“包含在导出中（Include in Export）”。默认情况下不检查这些！如果你不检查这个，你的画板将有透明的背景。