连载：sketch 中文教程（三）

2016-10-09 09:21:00

sketch中文教程

图形

在你的文件中最常见的图层应该就是图形了。

Sketch 提供了多种不同的基本图形供你选择：圆形、矩形、星形等。这几个图形中会有几个有趣的额外选项，比如星形和圆角矩形。

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

图形术语

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

图形编辑、布尔运算、旋转和变形、蒙版、剪刀、旋转复制、铅笔

图形编辑

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

通过工具栏的插入（Insert）> 图形（Shape）> 矩形（Rectangle）来添加一个矩形，完成后再双击它开始编辑：

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

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

不同的曲线调节模式

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

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

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

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

・断开连接（Disconnected）：调节点之间完全独立，互不影响。

・不对称（Asymmetric）：两个调节点距离中心点的位置可以不同，但是这些点在一条直线上。

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

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

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

绘制和编辑

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

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

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

封闭路径与开放路径

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

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

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

快捷键

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

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

选中多个节点

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

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

布尔运算

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

子路径

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

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

运算

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

・合并（Union）：执行合并后，你将得到两个形状区域的和。

・减去（Subtract）：将上层形状区域与下层形状中的重叠部分，从下层区域中挖去，同时只保留下层被挖去后的区域。

・相交（Intersect）：取两个形状重叠的部分。

・排除（Difference）：将两个形状相交的部分挖去，保留其它部分。

图层列表

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

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

图层扁平化

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

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

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

旋转和变形

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

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

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

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

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

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

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

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

蒙版

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

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

在 Sketch 3.4 版本中，你可快速对一个位图应用蒙版效果，只需要点击工具栏中的蒙版（Mask）按钮。此时会自动在这张位图后创建一个矩形的遮罩图层。

限制蒙版

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

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

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

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

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

图形蒙版

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

Alpha 蒙版

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