Sketch手册:图层

图层

图层是 Sketch 中最基本的构成单位。

不同于其它将图层和对象这两个概念区分的应用,在 Sketch 里每个对象都被当做一个独立的图层。所以,手册中所说的“图层”和“对象”其实是一个概念,这两个词可相互替代。

编组和画板能让你在 Sketch 里更有效的管理内容,它们也会被视为多个图层的组合。要想添加新的图层,只需执行工具栏中的 Insert 按钮或菜单中的插入菜单。

本章节包含...

添加图层

添加图层最简单的方式是直接从工具栏选择一个标准图形。点击工具栏中的插入(Insert)> 图形(Shape),选择任一个图形,比如选中矩形,光标会变成一个右上角带有小矩形的十字光标。也可以使用快捷键来插入一些图形,矩形 R、线条 L、圆形 O、圆角矩形 U

Sketch手册:图层 - US - UI设计素材库

这时你只需在画布上单击并拖动鼠标来添加你想要的形状。松开鼠标,随即完成这个矩形,并可以开始编辑它。

高级选项

正如你看到的,添加图层的过程非常便捷,但 Sketch 同时提供了一些隐藏快捷键来方便你的绘制。例如你可以按住 shift  键来绘制等边图形:

Sketch手册:图层 - US - UI设计素材库

同样,你可以按住 option  键来从中心绘制图形,而不是从左上角绘制:

Sketch手册:图层 - US - UI设计素材库

如果你想改变图形的起始点,你只需按住空格键,这样将会修改起始点,而不是图形的大小:

Sketch手册:图层 - US - UI设计素材库

在一张尺寸比较大的画布中添加图层的时候,你还可以将鼠标拖拽到画布之外激活滚动视图,以便移动画布。

选择图层

在 Sketch 中选择图层很简单:你只需点击来选中图层即可,图层选中后,选择框的四角或边框上会出现 8 个控制手柄。

Sketch手册:图层 - US - UI设计素材库

值得注意的是,如果选择图层后没看见这些小手柄,那么有可能是你不小心将控制手柄隐藏起来了,你可以进入视图(View) > 画布(Canvas) > 显示控制手柄(Show Selection Handles)将其找回来。

或者,你可以使通过图层列表选择一个图层,点击图层的名称,此时也可以在画布中看到被选中的图层:

Sketch手册:图层 - US - UI设计素材库

同时选择多个图层

你可以按住键盘上的 shift  键来同时选择多个图层,当你点击其它图层时,之前选中的图层也会被保留。如果你按住 shift  键去点击一个已经选中的图层,则会取消选择。

如果你在画布上任一点单击并拖拽出一个选区,则会选中这个选区中的所有图层。你可以继续按住 shift  键或者 command  键来复选或者取消个别已经选中的图层。

如果同时按住 option  键,则只会选中完全被包括在所画选区内的图层。下面的对比图像。左边:按住 shift  键并且拖拽。右边:同时按住 shift  + option  键并且拖拽。

Sketch手册:图层 - US - UI设计素材库

重叠图层

为了让选择某一图层底下的图层更容易,你可以右击鼠标,从菜单中选择“选择图层”(Pick Layer),便会显示出鼠标底下的所有图层列表。

Sketch手册:图层 - US - UI设计素材库

另一个方便的快捷键是 option  ,按住 option  键,Sketch 会选中第二层图层,而不是最上层的。如果某个区域有多个图层重叠,而你想选择第三层,那么还是需要用到上面说的右击鼠标的方法来选择了。但有些情况下,你会发现这是个非常方便的小功能。

快速选择组中的图层

编组能方便的管理内容,有时还能预防无意的编辑操作。单击组,整个组会被视为一个图层,双击才会进入组内选择具体图形。

当然,有时你肯定想从深深的编组层级中直接选中某一具体图层,你可以按住 command  键,来直接选择埋在组里的图层,无需不停的双击以进入更深的层级,这将省去你不少的时间。

如果你同时按住 shift  键,则能选择多个图层。

移动图层

你可以选中任意图层,并拖动鼠标来移动它们。按住 shift  键来拖动,则会让图层严格按照垂直或者水平方向移动。

当你移动(或改变大小)某个图层时,Sketch 会自动帮你将此图层与邻近的图层对齐。如果这个功能没有生效,那可能是智能参考线功能被不小心关闭了,你可以在视图(View)> 显示智能参考线(Show Layer Guides)菜单里重新打开它。标尺(Rule)、参考线(Guides)和网格(Grid)是一个大话题,会在另一章节单独来讨论。

如果你先按住 option  键再拖动图层,会创建一个原图层的副本,原图层位置保持不变(接着按快捷键 command  + D,Sketch 则会重复你刚才的操作,再次创建一个副本)。

移动被遮盖的图层

这是另一个重叠图层麻烦的地方,通常情况下,你单击并拖动一个图层它会被立即选中,并移到新的位置。

大多数时候,这样做是很方便的,但如果你想移动一个完全在另一图层底下的图层,那么就会变得有点碍事,直接选中并移动的是最表面的图层。

解决这个问题,你需要按住 option  + command  键,再来单击你需要的图层并移动它,你甚至可以单击画布上完全不同的区域,Sketch 仍会为你保留当前的选择图层。

Sketch手册:图层 - US - UI设计素材库

对齐图层

另外,要快速移动选中图层,你可通过属性检查器最上方的一排对齐按钮来均匀的分布它们。

Sketch手册:图层 - US - UI设计素材库

这排按钮的前面两个是水平和垂直均分图层按钮。你也可执行菜单命令 Arrange(对齐)> Distribute Objects(均分对象)或者使用快捷键 control ^ + command  + V 或 ^ + command  + H。如果需要使用固定的间距来均分图层,则需要使用创建网格(Make Grid)工具,这个选项同样提供像素适配(Pixel Fitting)功能来确保呈现出足够精确的图像。

其它 6 个按钮(左对齐、水平居中对齐、右对齐、顶部对齐、垂直居中对齐、底部对齐)可用于图层之间的对齐或与画板的对齐。

要把图层对齐到画板,按住 option 键,然后使用对齐的快捷键。你也可同时对齐多个图层。另一种方法就是,先将这些图层编组,再执行对齐到画板。进一步了解

要把图层对齐到特定元素,需要先把要固定不动的图层锁定( 快捷键 shift + command  + L)。如果没有选择锁定的图层,Sketch 会自动选择最可能作为对齐参考的图层。

改变大小

8 个手柄不仅会向你指示出选区,还可用来修改图层大小。拖动任一个手柄即可调整,如果你同时按下 shift  键,图层的长宽则会按等比例变化。

Sketch手册:图层 - US - UI设计素材库

拖拽图层任意一边缘中间的手柄会只调整宽或高,想要同时调整,则可拖动边角的手柄。在调整尺寸时,你会在鼠标边缘看到尺寸数值的变化。

按住 option  键,图层会从中间向四周改变大小,而不是从对角开始变化。

Sketch手册:图层 - US - UI设计素材库

使用属性检查器缩放图层

你还可选中一个图层,并在属性检查器中输入新尺寸。如果尺寸文本框中间的锁形图标为关闭状态,图层将按照比例进行缩放。此外,你还可以使用一些特定语法来执行除开以左上角锚点为基准的缩放:

  • l: 从图层左边开始缩放(默认)
  • r: 从图层右边开始缩放
  • t: 从图层顶部开始缩放(默认)
  • b: 从图层底部开始缩放
  • c/m: 从图层中心开始缩放

所以,想从图层右边开始缩放并增加 50px 宽度,在尺寸文本框中设置 50r 即可。

键盘

你可以直接使用键盘调整图层大小。相对于鼠标,使用键盘能更好实现精确到像素的调整。你需要按住 command  键和方向键来操作。  会将图层宽度增加 1px,  则会将宽度减少 1px。同样的,  和   则分别将长度增加和减少 1px。如果你同时按住 shift  键,每一次更改的数值将会变成 10 px。

也可以在属性检查器的文本框中进行数学运算,以便更高效的工作。

缩放

当你改变一个图层的大小时,它的样式元素并不会随之变大变小:一个 50x50 的图形上 5px 的描边在这个图形被拉伸至 150x150 的时候,将仍保持 5px 的描边。想要同步缩放这些属性,可以使用菜单命令编辑(Edit)> 缩放(Scale),或快捷键 command  + K。通过这种方式进行的缩放,此图层上的所有样式(圆角、描边粗细、阴影等等)都会随之缩放。

Sketch手册:图层 - US - UI设计素材库

编辑图层

双击一个图层、按下 return 键或点击工具栏中的编辑按钮,都可进入图层的编辑状态,接下来发生什么则取决于您想编辑的图层类型,可阅读相关内容进一步了解。

值得注意的是,在编辑状态下,使用鼠标点击图层以外的部分,或按 return 或 esc 键都可以随时退出编辑。

337