个性化阅读
专注于IT技术分析

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

这是本教程的第三部分,在继续学习之前,先复习第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)”。默认情况下不检查这些!如果你不检查这个,你的画板将有透明的背景。

设置导出的背景颜色

用另一个画板重复相同的步骤。

重复其他画板导出

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

一旦你有了这些选项,您可以导出每一个画板,点击文件>导出或捷径⇧+⌘+ E。

导出你的画板

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

导出对话框

然后点击导出,就完成了!

赞(0)
未经允许不得转载:srcmini » sketch符号和导出画板 – Sketch入门UI设计教程

评论 抢沙发

评论前必须登录!