7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Sketch

掌握对齐和分布示意图

Scroll to top
Read Time: 1 min

Chinese (Simplified) (中文(简体)) translation by Rongrong Zhan (you can also view the original English article)

通过本教程,我们将学习到使用Sketch3完美地对齐和分布对象 我会使用一些简单的例子来完整地讲解操作—有些会令你大吃一惊! 

1.在画板上对齐一个图层

这是对齐最简单的技能。

(选中图形后)对齐相关的操作按钮在右侧的操作面板顶端。 右边有六个操作按钮(水平方向的左对齐,居中和右对齐;垂直方向的顶部对齐,居中对齐,顶端对齐),可以对齐不同的层对象。不过如果你只选中了一个对象,它将以画板为基准进行对齐。 如下图所示:

如前所述,你也可以用这些按钮对齐多个对象。 但如果我们想对齐多个对象时该如何操作呢?

2 以画板为准对齐多个层

想以画板为准对齐多个对象,可以把这些对象看成单个的层组 这时,当你使用对齐按钮时,对组内对象的操作就和操作同一个对象是一样的。

然而,这种分组操作不一定能满足你的需求。 我会教你另一种办法。

选中你想对齐的层,然后按住alt键,再进行各种对齐操作。 效果如下图: 请注意:你需要把选中的层都放在画板里,否则操作会无效。

 下例中,我选中了三个不同的层对象。

这种操作对层组也同样适用。也就是说你可以选中多个层组,按住alt键然后把层组跟画板对齐。

3.对齐特定的层

另一种场景:我想把所有的东西都对齐某个特定的对象。 首先,你要明白,缺省情况下,Sketch总是对齐所选中对象的最外沿。 被对齐的这个层就叫作“关键对象”

同样的,如果要把所有选中的对象顶端对齐,那么选中对象中位于最顶端的对象就是“关键对象”。 下面这个例子演示了我将三个对象先顶端、后右对齐(红色的方块就是我们的“关键对象”)

如果我们可以自行定义对齐的”关键对象“,一定会更棒,对吧。 办法就是:锁定你想作为”关键对象”的层,然后再选中其他所有的层。 (不过只有在层清单中,你才可以选中锁定的层,也就是说在画板中是无法直接选中被锁定的层的)

下面这个例子,蓝色的方块是锁定的,因此可以作为我们新的“关键对象"。 现在我们可以选中对象并再次执行左对齐操作。

多谢SketchTips,我才发现了这个非常顺手的操作技巧。 如果你使用Lucien Lee做的"Align to“插件,也可以实现相同的效果。

4  矢量点对象

小技巧:在"编辑"模式下,你也可以使用对齐按钮对齐多个矢量点 选中矢量对象,然后双击改变为编辑模式(你也可以点击主工具栏上面的”编辑“图标),然后选中所有你希望对齐的矢量点。

5. 分布多个层

如果仔细看下操作面板,或许你会注意到我到现在还没有用到最左边的两个对齐图标。 这两个按钮是用来水平或垂直分布层对象的。 我们可以平均分布选中的对象,方便之极! 比如我们选中了几个形状,然后想将他们水平分布。 使用水平分布按钮,或者通过”对齐“-》”分布“-》”水平“执行相同的操作。

最左边和最右边的对象会保持不变,不过中间的层会均匀分布在其中。 垂直分布操作和水平分布操作原理相同。

6. 用固定的间隔分布多个层

上面的操作很不错,但如果我希望层间隔都是固定的20px,又该怎么操作呢? 水平分布/垂直水平就没有办法了。

这种情况下,我们可以点击”网格“工具(Make Grid,可以在Arrange>Make Grid下找到),自定义需要水平或垂直分布的距离。 最初可能有些难以理解,所以还是举例说明吧。

此处我希望将四个不同的层对象彼此间都间隔20px 在Make Grid对话框中,我设定为行数为1(意思是所有的对象都在同一个水平位置上),列数为4(即每个对象为一列)。 然后将列间隔设为希望的20px。 如果我想垂直分布这些层,我只需要将列数设为1,行数设为4,然后行间隔改为20px就可以了。

如果你觉得上述办法用起来不太理想,建议你试试SketchDistributor插件。 这个插件也可以做到让层对象按指定的间隔进行分布。

到此结束。

希望本课程可以让你有所收获。 掌握Sketch对齐和分布工具将节省大量的时间。

关注我们的公众号
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.