Sketch手册:图形

图形

在你的文件中最常见的图层应该就是图形了。Sketch 提供了多种不同的基本图形供你选择:圆形、矩形、星形等。这几个图形中会有几个有趣的额外选项,比如星形和圆角矩形。

你只需单击工具栏中的添加(Insert)> 图形(Shape)按钮,选择一个图形,便可以开始创作。当你的鼠标在画布上拖拽的时候,Sketch 会提示你这个图形的大小,松开鼠标,图形便会成功添加,右边的属性检查器上也会立即显示出这个图形的相关信息,有时也会出现相应的额外选项。

额外选项

有些图形会带来几个有趣的额外调节选项,你最经常遇到的便是星形和圆角矩形,你可以调整星形的半径和角的数量,也可以改变圆角矩形的圆角半径。

图形术语

点是组成每一个图形的基本单位,它们会被直线或曲线连接成一条路径。一个图形可以包含一个或多个路径。多个路径则是通过布尔运算组合在一起的,想象大小两个圆,小圆被放置在大圆上把大圆“打”出一个洞。这个将简单图形组合成复杂图形的布尔运算会在另一章节详细讨论。

本章节包含...

图形编辑

每当你绘制一个新的图形或是编辑一个现有的图形,本质上都是在和点做交互,你在屏幕上看到的是 Sketch 将这些点连接起来的线。有时是直线,有时是曲线。

通过工具栏的插入(Insert)> 图形(Shape)> 矩形(Rectangle)来添加一个矩形,完成后再双击它开始编辑:

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

你会看见每个角上都会有一个小圆点,点击并拖拽这些点来移动到其它位置。你会看到图形的其它部分也跟着发生了变化。点击图形边上任意点单击就可以添加新的点,要想删去某一个点,只需选中它,然后按 delete 键即可。

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

如果你想将一条直线变为曲线,先双击一个点,它的两侧会出现两个新的小手柄,它们分别控制这一点两边线段的弯曲程度。你可以把这些小手柄理解为它们把线条朝自己的方向拉伸。

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

你可以查看 Peter Nowell’s 的一篇深度解析 Sketch 中贝塞尔曲线的文章:Mastering the Bézier Curve in Sketch

不同的曲线调节模式

曲线调节有几种不同的调节模式,不同的调节模式决定了之间会出现怎样的线条。

在编辑图形的时候,检查器会显示出四种不用的调节模式。直角(Straight)、镜像(Mirrored)、断开连接(Disconnected)和不对称(Asymmetric)。

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

・直线(Straight):当你刚刚点击画布的时候,会添加一个直角,也就是说没有任何调节点,你所得到的便是一条直线。

・镜像(Mirrored):调节点会彼此镜像对应。两个调节点将会与主点距离相同并且正好相互对立。当主点并非直角时,镜像便是默认此调节模式。

・断开连接(Disconnected):调节点之间完全独立,互不影响。

・不对称(Asymmetric):两个调节点距离中心点的位置可以不同,但是这些点在一条直线上。

如果一个角被设定为直线角,你也可以用底下的滑块将直线叫变为圆角。如果你通过工具栏的插入(Insert)> 图形(Shape)> 圆角矩形(Rounded)添加了一个圆角矩形,那么你将得到一个四角被设定了默认值的圆角矩形。

能够独立控制每个点,代表着你可以为每个点都设置不同的值,比如说你可以轻松的让一个矩形的上面两个点为圆角,底部两个点为直线角。例如:

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

键盘快捷键:你可以用数字键 1〜4 改变所选点的类型。 1 直角线、 2 镜像, 3 为断开链接和 4 为不对称。

绘制和编辑

除了用一个现有的图形工具来添加图形,你也可以用矢量工具自己绘制一个。进入工具栏的插入(Insert)> 矢量工具(Vector),在画布上单击添加第一个调节点,继续单击别处添加第二个调节点。

你会发现两个点连成了一条线,接着点击其它地方但不要松开鼠标,拖拽控制点以绘制一条曲线。继续绘制其它的点,最后单击第一个调节点,便能绘制出一个封闭的矢量图形,完成编辑。

不论是绘制新的图形还是编辑现有的图形,选择和添加新的节点的这些操作方法都是类似的。

封闭路径与开放路径

一个路径可以是封闭的也可以是开放的。封闭图形的最后一条边会与第一条相连接,开放图形则会在起点和终点间留出一个间隔。你可以通过菜单栏中的图层(Layer)> 路径(Paths)> 关闭路径(Close Path),来将一个开放路径变为封闭路径,反之亦然。

针对一个开放路径,你可以随时在编辑模式中随时添加新的节点。

值得注意的是,当你为一个开放路径设置了颜色填充,那么这个填充会呈现出路径已经被封闭的形状,哪怕这个路径仍有间隔不完整。

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

快捷键

绘制矢量图形时,你可以按住 shift  键再画之后的点,Sketch 会自动帮你对齐到前一点的 45 度角方向,这在你绘制直线时会非常方便。如果你是在两点之间添加新的调节点时按住 shift  键,你便会得到两点间的调节点。

如果你按住 command  键,单击两点间的线条,Sketch 则会帮你在线条的正中间添加调节点。

选中多个节点

有一个不那么明显的功能是你可以同时选中多个节点,一起移动它们。在选择节点的时候按住 shift  键,你会看见被选中的点中心是白色的,而没被选中的点中心是灰色的。

另从画布空白区域点击并拖拽出一个矩形选区。如果你一直按住了 shift  键,则会将新选区和之前的点一起选中,如果没有按住 shift  键,则会取消之前的选择,只保留新选区内的点。

布尔运算

如果 Sketch 的标准图形中没有你想要的图形,那就需要你自己创作了。你的第一个想法也许是用矢量工具来手绘出来,然而你会发现很多复杂的图形都可以轻易地被拆分成基本的图形,布尔运算正是为了帮你实现这一点,将几个基本图形结合成一个复杂图形。

子路径

Sketch 支持动态的布尔运算,但在做进一步讨论之前,先来快速的回顾一下矢量图形。Sketch 当中的大多数矢量图形都只含有一系列的点、一个路径。然而一个图形可以有多个子路径,至于这些子路径最终是什么效果,则取决于它们是如何组合的。

在 Sketch 当中使用布尔运算,它会通过具体的布尔算法将最上层的图形变成下一层图形的子路径。由于 Sketch 当中的布尔运算是动态的,所以你也可以随时调整每一个子路径,比如你可以单独调整其中一个矩形的内角半径。此时布尔运算的效果也将随时发生变化。

运算

有 4 种不同的布尔运算方式,你可根据情况来具体选择:

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

・合并(Union):执行合并后,你将得到两个形状区域的和。

・减去(Subtract):将上层形状区域与下层形状中的重叠部分,从下层区域中挖去,同时只保留下层被挖去后的区域。

・相交(Intersect):取两个形状重叠的部分。

・排除(Difference):将两个形状相交的部分挖去,保留其它部分。

你可以通过下面的视频更快速的了解布尔运算功能:

图层列表

当你操作一个包含多个子路径的图形时,注意左侧的图层列表。你会发现正如编组列表结构,图层列表的左侧也有一个下拉箭头,点击它便会看见这个图形的子路径列表。值得注意的是,每一个子路径的布尔运算都可以在右边的按钮中单独修改。一个子路径可以被设置成减去顶层形状,它上面的一个子路径则可以和它再相合并。

子路径列表的顺序是从下至上的,布尔运算的工作原理也是一样,即你所选的布尔运算将这一层和下一层的图形相组合,它们的结果再与另一层相组合。

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

图层扁平化

当使用扁平化功能(Flattening),Sketch 会试着将一个图形里的多个子路径呈现为一个路径,也就是将扁平化图层结构。但有些图形是无法扁平为一个路径,比如说一个环状,只能有两个路径:一个是外圈的圆,一个是内圈的圆。

当 Sketch 不能执行扁平化命令时,会出现一个小警告,如果你继续坚持,那有的子路径可能被替换,也许比之前更少,也许和之前一样多。

也许在你之前使用的绘图应用中,你每次添加布尔运算后到要让图层扁平一次,但在 Sketch 当中大可不必这么做,你可以尽情添加无数层布尔运算,而无需使用扁平命令。

旋转和变形

旋转和变形是 Sketch 中两个相似但也不尽相同的操作,这两个操作允许你通过不同方式来编辑图层

对选择的图层做旋转有很多种方式。由于旋转是由角度来决定的,所以它可以在 Sketch 的属性检查器中编辑,这个数值可以为正数/负数,分别代表顺/逆时针旋转。

如果你在旋转图层时希望有更多操作选项,点击工具栏中的旋转(Rotate)按钮,进入旋转模式。然后你可点击选择图层之外的区域,拖动鼠标来向任何方向旋转。如果你同时按住 command  键,则以 15° 为增幅来旋转,准确的获取对角线或对称效果。旋转的角度可在属性检查器中查看到。

默认情况下,图层会以中心点位置进行旋转,但要调整中心点位置也很容易。你可选中然后拖拽图层中的十字准星到图层里或者外部,此时旋转中心点将会发生变化。只需要取消选择,再次重新选择图层,此时中心点就会回到原位。

更快的旋转图层或组的方式:无需进入旋转模式,只需简单的按住 command  键然后拖动选择手柄即可。

变形工具可以通过改变点的位置或者制造一个视觉上的 3D 效果来使一个矢量图形变形。在 Sketch 里你可以运用变形工具变形一个或同时变形多个图层。

选中一个或多个图层,然后点击工具栏中的变形工具。你可拖动四角的锚点来任意改变图层的形状,或者拖拽中间的锚点来同时移动两个边角使图形倾斜。

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

当你从一个图形的一角拖拽变形,你会发现其对角也会往相反方向拉伸,这能形成对称的变形效果,但如果你只想往一个方向拉伸,按住 command  键再拖动鼠标就好。

蒙版

Sketch 中的蒙版可以让你有选择性的显示图层的一部分。例如,在一个位图上运用圆形蒙版,那么这个位图就只会显示出圆形内部的内容。

任何的形状都可变成蒙版,要应用蒙版,选中一个形状,然后进入图层(Layer)> 使用蒙版(Use as Mask), 所有在这个蒙版上面的图形都会被剪切成蒙版的形状。

Sketch手册:图形 - US - UI设计素材库
在 Sketch 3.4 版本中,你可快速对一个位图应用蒙版效果,只需要点击工具栏中的蒙版(Mask)按钮。此时会自动在这张位图后创建一个矩形的遮罩图层。

限制蒙版

如果你不想接下来所有的图层都被蒙版剪切,那么你可以将蒙版和想要被剪切的图层单独编组,来限制蒙版的影响范围。一旦蒙版被编组,其它在组外的图层就不会再受蒙版影响。

在无法编组的情况下,你还可通过以下方式来解决:

1. 选中一个你不想被蒙版影响的图层

2. 执行菜单命令图层(Layer)> 忽略底层蒙版(Ignore Underlying Mask)

随后此图层和它以上的图层就都不会被蒙版影响了。当你需要调整图层顺序的时候则需要格外注意,个别图层可能会再次的被蒙版影响。

图形蒙版

如果上面这一系列操作看起来很麻烦,这里有一个更好的办法:在画布上同时选中一个图形和一张位图,然后执行菜单命令图层(Layer)> 用所选图形做为蒙版("Mask with Selected Shape"), 即可直接将这个图形作为选中位图的蒙版了。Sketch 会自动为它们编组,并把其中的图形图层变成蒙版。

Alpha 蒙版

默认情况下,蒙版所在区域之外的图片会被隐藏。另一种方式是将蒙版填充为渐变色,使用透明渐变的方式,来决定被蒙版作用的区域中,哪部分是可见的,哪部分是不可见的。

Sketch手册:图形 - US - UI设计素材库
使用这个方法你可先选中蒙版图层,执行菜单命令图层(Layer)> 蒙版模式(Mask Mode)> Alpha 蒙版(Alpha Mask)。

想要了解蒙版更多的操作细节,可观看下面的视频:

剪刀

剪刀工具可以用来剪掉图形两个节点间的线段部分。选中图形,然后点击工具栏中的剪刀工具,或执行菜单命令图层(Layer)> 路径(Paths)> 剪刀工具(Scissors)来使用。

随后,点击图形中的一条线段,即可将这条线剪掉。操作完成后,点击图形外的任何一点,或使用键盘上的 return 键或 esc 键即可退出编辑。当所选图形剪切到只剩一条线时,Sketch 会自动退出剪刀工具编辑。

旋转复制

这是 Sketch 当中一个特别的工具。它并没有出现在默认的工具栏中,但你可通过鼠标右击工具栏并选中定制工具栏...(Customize Toolbar...)来将旋转复制添加到工具栏上。你也可执行菜单命令图层(Layer)> 路径(Paths)> 复制旋转(Rotate Copies)。

这个工具可将选中的图形按照某个中心点复制并排列多个。例如绘制一朵花,只需先画出一片花瓣,然后将这些花瓣旋转并复制 12 片,即可得到一朵花的图案。

你可选中一个图层,激活复制旋转工具,输入想要的复制数量(如果需要复制出 12 个图形,输入 11 即可,因为画板上已有一个),接着调整中心点的位置,最后点击图形外的画布即可退出复制旋转工具。

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

分离路径

所有复制出的图形都会被视为原图形的子路径,如果想让它们成为完全独立的图层,只需执行菜单命令图层(Layer)> 路径(Paths)> 分离(Split)即可。

铅笔

你可以使用铅笔工具来自由的绘制图形。松开鼠标后,Sketch 会自动平滑和简化路径。

在工具栏的插入(Insert)图标中可找到铅笔(Pencil)工具,或执行菜单命令插入(Insert)> 铅笔(Pencil)。还可以用铅笔的快捷键 P 。

313