Sketch 中文手册 • 摘改

注：本文全部内容摘录整理自《Sketch 中文手册》，感谢 Sketch 中文网 以及网站作者 匡雪婷。

1. 基本操作：

• 按住 shift 键来绘制等边图形；按住 option 键来从中心绘制图形，而不是从左上角绘制。
• 按住空格键，改变图形的起始点。
• 拖拽一个范围，同时按住 option 键，则只会选中完全被包括在所画范围内的图层。
• 右击鼠标，从菜单中选择「选择图层」（Pick Layer），便会显示出鼠标底下的所有图层列表。
• 按住 option 键，Sketch 会选中第二层图层，而不是最上层的。
• 按住 Command 键，来直接选择埋在组里的图层。
• 按住 Shift 键来拖动，则会让图层严格按照垂直或者水平方向移动。
• ⌘→ 会将图层宽度增加 1px，⌘← 则会将宽度减少 1px。同样的，⌘↓ 和 ⌘↑ 则分别将长度增加和减少 1px。如果你同时按住 shift 键，每一次更改的数值将会变成 10px。
• 一个 10x10 的图形上 1px 的描边在这个图形被拉伸至 50x50 的时候，将仍保持 1px 的描边。想要更改图层大小的同时一起更改式样，那就使用编辑菜单当中的缩放工具吧。
• 单击图层外任一点，来随时退出图层的编辑模式。

---

2. 路径和绘图：

• 点是组成每一个图形的基本单位，他们会被直线或曲线连接成一条路径。
• 多个路径则是通过布尔运算组合在一起的。
• 点模式：
  • 直线角（Straight）：当你刚刚点击画布的时候，会添加一个直角，也就是说没有任何锚点，你所得到的便是一条直线。
  • 镜像（Mirrored）：锚点会镜像对应。两个锚点将会与主点距离相同并且正好相互对立。当主点并非直角时，镜像便是默认的点模式。
  • 不对称（Asymmetric）：两个锚点到主点之间的距离是独立的，但他们依然相互对应。
  • 断开连接（Disconnected）：锚点之间完全独立，互不影响。
• 按住 shift 键再画之后的点，Sketch 会自动帮你对齐到前一点的 45 度角方向，这在你绘制直线时会非常方便。如果你是在两点之间添加新的锚点时按住 shift 键，你便会得到两点间的锚点。
• 按住 command 键，单击两点间的线条，Sketch 则会帮你在线条的正中间添加锚点。
• 布尔运算：
  • 合并形状（Union）：合并的结果是会得到两个矢量区域的总和。
  • 减去顶层形状（Subtract）：这一项的结果是顶层矢量的区域会从下一层的图形上移去。
  • 与形状区域相交（Intersect）：与形状区域相交的结果是会保留原图形重叠的部分。
  • 排除重叠形状（Difference）：排除重叠形状的结果是只保留原图形不重叠的部分，它是「与形状区域相交」这一运算的反向。
• 你所选的布尔运算将这一层和下一层的图形相组合，他们的结果再与另一层相组合。
• 如果你只想往一个方向拉伸，按住 Command 键再拖动鼠标就好。

---

3. 蒙版和文字：

• 如果你不想接下来所有的图层都被蒙版剪切，那么你可以将蒙版和想要被剪切的图层单独编组，来限制蒙版的使用情景。
• 如果无法编组：
  1. 选中一个你想从剪切蒙版中释放出来的图层。
  2. 编辑 > 忽略底层蒙版（Edit > Ignore Underlying Mask）。
  3. 这一层图层和它以上的所有图层就都不会被蒙版剪切了。
  4. 调整图层顺序的时候则需要格外注意，个别图层可能会意外的被蒙版剪切。
• 在画布上同时选中一个图形和一张图片，选择 编辑 > 用所选图形做为蒙版（Edit > "Mask with Selected Shape"）， 就可以直接将这个图形作为选中图片的蒙版了。
• 所有的复制图形都会被视为原图形的子路径，如果你想让他们成为完全独立的图层，你只需从菜单栏进入 编辑 > 路径 > 分离（Layer > Paths > Split）即可。
• 每当你在为 iPhone 或者 iPad 设计交互页面，你都需要记住这一点：在画布上，Sketch 会帮你对文字进行子像素抗锯齿渲染，但在移动设备上，文字并不会被这样处理。你需要告诉 Sketch 无需进行子像素抗锯齿渲染，通过 Sketch > Preferences > General，取消选择 subpixel-antialiasing。
• 当你进入顶端的 编辑菜单 > 文本路径（Edit > Text on Path），Sketch 会帮你把文本图层贴合的放在它下一层的矢量图形上面，两者的顺序必须是矢量图形在文本图层的下面。
• 现在渐变填充，阴影和内阴影都能包含在文本式样当中了。

---

4. 符号运用：

• 进入 添加 > 符号 （Insert > Symbol），在画布中重复使用符号。继续复制粘贴符号，Sketch 会自动将所有副本链接。任何针对某一副本的编辑，都会同步到其他副本上。
• 选中符号中的文本，勾选「从符号中排除文本」（Exclude Text Value from Symbol），这样，所有针对文本的编辑就都是独立的。
• 添加 > 符号 > 管理符号 （Insert > Symbol > Manage Symbols）。在符号名中加入斜杠「/」，Sketch 会将它视为组的分隔标志。如：两个分别名为 Button / Normal 和 Button / Pressed 的符号会被一起编入叫 Button 的组内。
• 符号始终会按照字母顺序排列，而不是创建时间。

---

5. 检查器和式样：

• 输入框：按住 shift 会以 10 为单位变化；按住 option 键，以 0.1 为单位变化。也可以用键盘上的上下方向键配合 shift 或 option 键来完成。同时，支持简单四则运算。
• 先按 return 键来确认输入框中的任何编辑，然后再按一次 return 键，方可返回到画布中。
• 复制粘贴式样：共享其中一部分元素，但不让图层始终保持链接。
• 选中一个图层，按 1-9 将图层透明度从 10% 调至 90%，按下 0 则会将透明度调至100%。
• 填充选项从左至右分别是：
  • 纯色
  • 线性渐变
  • 径向渐变
  • 环形渐变
  • 图案填充
  • 杂色填充
• 关于渐变：
  • 渐变线上每一个点都是一个色彩滑块。在渐变线中间单击，你就会看见一个新的色彩滑块被添加。
  • 径向渐变的渐变线上的第一个点便会是径向渐变的中心。在渐变色的外圈上的另一个点，拖拽它使渐变范围在正圆和椭圆当中变化。
  • 先添加新节点后，按下 1-9 在渐变线的 10% - 90% 的位置添加新节点；按下 5，在首末节点正中间添加。按下 = 键，在两个节点的正中间添加。
  • 渐变条：你能看见渐变的每一个节点，以及从左至右的变化。
• 单击第一个色彩填充旁边的 + 按钮来添加新的填充，每一个图层都可以有无限的填充，填充会按照从下至上的顺序叠加，每一层填充也都有自己可调节的混合模式和透明度。
• 当模糊半径被设置为0的时候，文本图层的内阴影才是最好看的。
• 模糊：
  • 高斯模糊（Gaussian Blur）：能让你的图层均匀的模糊。
  • 动态模糊（Motion Blur）：仅向一个方向模糊，造成一种运动的错觉。
  • 缩放模糊（Zoom Blur）：从一个特定的点向外模糊。
  • 背景模糊（Background Blur）：将图层下一层的内容模糊。
• 拾色器是基于 HSB 色彩模式，饱和度和亮度分别按照水平和垂直方向变化。下面两个滑动条，分别供你调整色相和透明度。

---

6. 编组和画布

• 按住 Command 键，便可直接进入组选择想要的图层。
• 如果只想将编组工具用于组织图层列表，而不想每次都先双击，你可以勾选编组检查器中的「直接选择」（Click-through when selecting）。
• Sketch 里的画板是在「无限的」画布中的一块「固定大小」的画框。
  • 如果是设计网页，针对不同大小的屏幕进行设计，则可以将每一个屏幕尺寸设定为一个画板。
  • 如果是设计图标，同样可以将不同的图标尺寸设定为画板，以限制在默认的图标尺寸中创作。
• 要添加多个刚才置入的新画板，可以按 Command + D 来重复添加画板。
• 直接在画布上单击拖拽某一画板的名字来移动它。
• 每一个画板都是在画布上相对独立的创作空间，每个画板都有自己的标尺和网格选项。
• 一个 Sketch 文件内可以包含多个页面。将多个相关页面放在一个 Sketch 文件中：
  • 符号和共享式样将在页面中通用。
  • 把过多的画板分布在多个页面中会高效很多。
• 用 Z 键来快速放大某一特定区域，单击画布任一点拖拽出矩形区域即可。
• 智能测量：
  • 按住 option 键，Sketch 会显示出已选中的图层和鼠标现在所悬浮的图层之间的距离
  • 在移动一个对象时，移动到和另外两个对象的距离相等时，Sketch 会给出提示。
  • 调节一个图层的大小时，Sketch 会显示出具有相同长度或宽度的图形的数据。

---

7. 导出和导入

• 当要导出时，Sketch 会列出画布、画板、切片中所有可导出的图层。可以导出部分或全部的图层：
  • 如果选好了图层再点击导出按钮，Sketch 默认只导出这一图层。
  • 可以无需建立切片直接导出图层。
• 只导出一个图层：
  • 先选中图层或组，然后单击检查器底端的 Make Exportable。
  • 单击 + 按钮，添加新的导出尺寸。
• 关于切片：
  • 添加 > 切片（Insert > Slice），并在画布上单击拖动鼠标创建一个新的切片区域。
  • 直接单击一个图层，Sketch 会围绕这个图层建立一个新的切片。
  • 图层若有一个小刀的图标，说明这个图层是可导出的。
  • 直接在列表中将图层拖到 Finder 或者其他 App 里，Sketch 会迅速导出一张 PNG 图片。如果按住 option 键，则会将它以 PDF 数据写入剪贴板中。
  • 切片能将画布中的特定区域导出为一个文件。一个 Sketch 可以有无数个切片，每个切片都能导出不同的文件。
  • 切片被视为普通图层。把想要导出的多个图层编组成一整个切片，当移动这个组的时候，切片也会跟着移动。
  • 如果在文件名中加入斜杠（/），Sketch 会新建一个文件夹并把此文件放入其中。举个例子：如果将切片命名为 foo/bar.png ，那 Sketch 会先创建一个叫 foo 的文件夹，然后在里面创建一个叫 bar.png 的图片。
  • 每个切片都有一个选择框：仅导出组内图层（Export Group Contents Only），这样就只会到导出那些在组内的图层，而不会导出表面的或者背景图层等等其他切片内的东西。
  • 「修剪」：选中它之后，每个被导出的切片的透明外围都会被剪去。
  • 若暂时不想整理画布上的切片，可以在图层列表最底下关闭小刀按钮。
• Sketch 里的画板无需先创建切片就可直接导出，先添加一个画板的导出尺寸，下次单击导出时，Sketch 就会导出画板。
• 编辑 > 复制 CSS 属性（Edit > Copy CSS Attributes），Sketch 便会为选中的对象声明 CSS 中的边框，填充，渐变，阴影以及文字样式。
• 支持导入 / 导出的文件格式：
  • JPG：照片文件所常用的格式，但并不支持透明度。
  • PNG：如果你画的内容中有透明的像素，这将是最好的选择。
  • TIFF：支持透明度，但这种格式的文件会更大。
  • PDF or EPS：保存矢量对象，目前基本支持。
  • SVG：能很好的保留图形和文本的导出，但是并不支持阴影。使用这种格式主要可以让该文件在其他应用中导入。
• 不支持导入 / 导出的文件格式：
  • PSD：PhotoShop 文件是封闭且不支持导出的，可以将 PS 文件导出为 .PDF，并导入 Illustrator。
  • AI：Sketch 目前不支持 .AI 文件，但是 Illustrator 可以打开从 Sketch 里导出的 .PDF 或 .SVG 文件。

---

8. 偏好设置

• Sketch 会将多个相似的操作视为一组，比如你连续多次按下方向键以移动图层，但是只需一次撤销，即可恢复原来的位置。
• 当你为 Mac 或网页设计时，往往会打开「子像素抗锯齿效果」，但是为 iOS 设计时，往往会关掉它。
• 如果不想使用 Retina 这个功能，只想让显示器显示实际的每个像素，那么可以关闭 Retina Canvas 的选项。
• 背景模糊会比普通的模糊更加复杂和消耗资源，所以如果想模糊一整张图片，那还是用普通模糊吧，不要用背景模糊。
• 如果多个画板上都有大面积的阴影和模糊效果，文件操作起来就会很慢，解决这个问题最简单的方法，就是把一部分画板移到新的页面上去。
• 将文本转化为轮廓是要格外谨慎。其实无需矢量化，文本也可以直接应用渐变效果。