Sketch 基础教程 5- 对齐及分布工具详解

本期教程介绍对齐及分布工具的使用,并利用对齐元素制作一个简单页面。更多优质教程 请关注 “一稿过”

/// 开场白 ...

上一篇我们学习了如何用布尔运算制作一个微信Icon,本次我们来学习一下如何使用对齐工具快速制作一个页面。

/// 现在开始 ...

我们先来了解一下对齐工具在Sketch中的位置,具体见下图。

这八个按钮的图示非常明显,大家一看就知道具体怎么用。但是有些细节如果注意到,会让我们的工作效率提升很多。

1.单个元素或者成组元素如何在画布中排列。仅需选中单个元素后直接点击对齐按钮即可。是不是特别方便?

2.元素间排列。这种排列方式最用,操作也很简单。仅需将元素选择后,点击相应的对齐方式即可。

3.设定基准元素。比如下面的例子:将最下面的绿色球设定为基准元素,快捷键:shift+command+L,即使点击上对齐,依然以基准元素排列。是不是很方便?

4.元素平均分布。当排列多个元素时可以使用Arrange->Make Grid...。按照要求设定参数,即可快速排列元素。此功能常用于数量多的导航按钮排列中。

好了我们讲解完了最基础的用法后,实战一下。现在就制作一个简单的App首页。

/// 重点来了 ...

1.首先制作顶部的状态栏,从Sketch模版库里拷贝出状态栏。因为默认已经成组,所以我们直接点击“居中”及“顶对齐”两个按钮即可。

2.开始制作导航及搜索。

现在需要将菜单 “Home”及搜索按钮平均分布,并且内边距设置为20px。

3.开始制作内容部分。第一个Banner距离Home设置为20px。内部文字距离外边距10px。

4.同理我们在制作三个Banner。

5.最关键的底部按钮区域,制作起来稍显复杂一点。

我们先将最左侧及最右侧按钮贴边对齐,然后将5个按钮选中。

执行:Arrange->Make Grid...。

因为我们是排列一行所以Rows填入1 。

下面的Columns选择5,间距为0 。

确认后我们的5个按钮就按照一列整齐的排开了。

好了,我们的一个页面就制作完成了。下面是成品。

好了本期就到这里,我们下期继续。

上一篇:制作微信图标(公众号回复04)

如有问题请大家留言。

文/一稿过

关键字:设计, sketch, 按钮

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部