今天看啥  ›  专栏  ›  iOSDevLog

scetch入门 第3部分:符号和导出

iOSDevLog  · 简书  ·  · 2018-07-27 23:27

背景

这是本教程的最后一部分。在继续前进之前赶上第1部分第2部分

符号

符号非常适合组织您经常重复使用的设计元素。在这个例子中,让我们将袜子猴子图标变成符号。选择图标后,查看顶部菜单栏并选择“创建符号”

创建符号

单击此项后,将在检查器中打开一个文本字段。我将这个符号命名为“Sock Monkey”。

名称符号袜子猴子

请注意图层调色板中的文件夹图标如何从蓝色变为紫色。这意味着它是一个象征!

符号有紫色文件夹图标。

现在,此符号显示在“插入”菜单中!我们来插一个。

插入袜子猴子符号

现在我们有两只袜子猴子,都带有紫色文件夹图标:

袜子猴子符号已被放置。

符号很酷的是它们是相互关联的。您对其中的任何更改都将应用于该符号的所有其他实例。例如,如果您调整其中一个符号的大小,则另一个符号也会调整大小。

调整符号大小。

提醒:在调整边框时按住移位以在调整大小时保持原始比例。

现在我想教你一个复制scetch中任何图层的快捷方式。选择一个图层后,在拖动时按住alt / option。scetch会自动显示红色指南,以便您可以将复制的图层与画板和其他图层对齐。先放开鼠标,然后释放alt键放置文件。

复制符号

提示:如果在拖动时按住alt + shift,复制的图层将拥抱与原始图层对齐的指南。

让我们重复一次,所以我们在底部有三个袜子猴子图标:

再次复制符号

有一种快速方法可以确保所有这些都具有相同的空间。首先,选择所有三个图层。然后单击“水平分布”

这样做是采用最左侧和最右侧的对象,并以相等的间距对齐其间的所有对象。这适用于任何3个或更多的选择。

现在,让我们学习如何分离符号。我们希望调整顶级猴子图标的大小,而不会影响其他任何一个。为此,我们必须右键单击顶部猴子并选择“从符号中分离”

水平分布

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

文件夹颜色再次变为蓝色。

请记住将此图标与画板的中心对齐!

导出画板

你如何让你的画板脱离素描?有了导出功能!它可以批量导出以您的画板命名的PNG格式的画板。

在导出之前,必须选择每个画板并在右侧检查器中选中“背景颜色”和“包含在导出中”。默认情况下不会检查这些!如果您不选中此选项,您的画板将具有透明背景。

设置导出的背景颜色。

与其他画板重复相同的步骤。

重复其他画板。

如您所见,您可以选择不同的大小选项(@ 2x,@ 3x等),添加后缀或更改每个画板的文件格式。我通常会保留默认设置,特别是因为我们的基本画板的尺寸已经为iPhone 5的2倍。

设置好这些选项后,可以通过单击文件>导出或快捷键⇧+⌘+ E导出每个画板。

导出画板。

在对话框中,确保选中所有画板。

导出对话框。

然后单击“导出”,您就完成了!

在这里下载我的最终Sketch文件。

谢谢阅读!

原文:http://megumi.co/learn/sketch3.htm




原文地址:访问原文地址
快照地址: 访问文章快照