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