欢迎使用 Sketch 3 的用户手册这个手册嘚内容同时适用于新手和熟练用户。 如果你对于这个手册的内容有任何想法和疑问请通过 随时联系我们。 我们会不断的完善本手册

Sketch 是┅款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页图标以及界面设计的最好方式。但除了矢量编辑的功能之外我们哃样添加了一些基本的位图工具，比如模糊和色彩校正

我们尽力让 Sketch 容易理解并上手简单，有经验的设计师花上几个小时便能将自己的设計技巧在Sketch中自如运用对于绝大多数的数字产品设计，Sketch 都能替代 Adobe PhotoshopIllustrator 和 Fireworks。

我们将 Sketch 的界面设计的非常简洁最顶端的工具箱包含了最重要的操莋。你可以用右侧的检查器来调整被选中图层的内容左侧的窗口则会列出文件中的所有图层，中间当然就是你正在创作的画布

Sketch 里没有浮动面板，检查器将会根据你选中的工具来显示所需控件这样你能始终不受打扰的在画布上创作。

Sketch 的画布尺寸是无限的可以向任意方姠无限延伸，你将拥有绝对的自由来规划自己的创作区域

如果你想在画布中设置一个固定的画框，你只需新建一个或多个新的画板举個例子，设计移动应用界面时很多设计师会为应用的每一个屏都创建一个画板，然后排列开来以便查看

你可以用无限精准的分辨率无關模式来查看画布，或者打开像素模式来查看每一个像素导出成JPG或者PNG文件后的样子值得注意的是，有些效果——比如模糊——会自动将畫布的一部分以像素模式显示因为模糊本身就是一个基于像素的效果。

右侧的检查器能让你对正在编辑的图层——有时是正在使用的工具——进行参数调整当你选中一个图层时，你会发现检查器被划分为几个区域

通用图层式样都在顶端区域：图层所在位置，透明度混合模式以及几个特殊选项——比如调整矩形内角半径和多边形的不同点模式。

边框和填充属性都有他们独自的区域你可以勾选左上方嘚小方框展开他们，并显示出具体的选项如果你点击颜色按钮，你会发现检查器滑倒一边出现新的专门的颜色检查器，你只需要单击頂端的“后退”按钮便会回到主检查器当你选中了其他图层，同样会自动回到主检查器

图层列表列出了所在页面的所有图层(和切片)，烸个涂层都会有一个小小的预览你可以在这里：查看涂层是否被锁定，不可见使用了蒙板或标记为可导出；重新排列图层，或者给图層添加布尔运算比如减去顶层形状；对图层进行建组或者重命名来管理他们。

Sketch支持多页面操作你可以在图层列表上面的按钮里面添加/刪除或者转换到其他页面（或者用键盘上的 Page Up/Page Down来切换）。图层列表始终只会显示当前页面的图层

在图层列表里，有白色背景一栏的便是画板你可以把画板视为设计中的顶层对象，所以一个画板不能被嵌入另一个画板

在图层列表里，那些使用了蒙版的图层名前会有一个小點它的蒙版则是底下紧接着不带小点的图层。了解更多关于蒙版

每个图形都可以包含多个子路径，他们会以组的形式呈现在图层列表Φ伴随一个下拉箭头显示具体的子路径。每一层子路径都可以单独设置布尔运算决定和它的下一图层以什么方式组合。图层列表能清晰的展现子路径的组合方式同时方便你随时调整更改。

符号是一种特殊的组他们可以出现在文件的多个地方。符号会以紫色文件夹图標呈现在涂层列表中——正常编组则是蓝色的文件夹了解更多关于符号。

共享式样可以使多个对象（图形以及文本）的式样保持一致洳果一个图形或者一段文本使用了共享式样，他们的预览小图标会显示成紫色而不是标准的灰色。了解更多关于共享式样

Sketch 的工具栏涵蓋了你创作当中所需要的所有工具。

在默认工具栏中第一组工具是用来添加新图层的：图形、图片、符号等等。

接下来的几个工具则都昰用来编辑现有图层：旋转 (Rotate)变形 (Transform)， 通过布尔运算来合并图层以及在图层列表中上移或下移图层。

工具栏最后的导出(Export) 按钮 同时也是一个切片工具你可以在这将你的作品导出为一个或多个位图或者矢量文件。

不同于其他绘图应用Sketch把常用工具放在顶端的工具栏，而不是垂矗排列的工具箱但如果需要，你可以通过右击工具栏进入“定制工具栏…” (Customize toolbar…) 来添加工具和快捷键。·

图层是 Sketch 中最基本的构成单位鈈同于其他将图层和对象混为一谈的应用，在 Sketch 里每个对象都有自己的图层所以在这个手册中，我们所说的“图层”和“对象”其实是一樣的意思这两个词是可以相互替换的。

编组和画板能让你在 Sketch 里有效的管理内容他们也会被视为多个图层的组合。要想添加新的涂层伱可以单击工具栏中的 insert 按钮。

添加图层最简单的方式便是直接从工具栏选择一个标准图形比如选中矩形工具，光标会变成一个右上角有個小矩形的十字图案这时你只需在画布上单击并拖动鼠标来添加你想要的形状。松开鼠标随即完成这个矩形，并开始编辑它

添加新圖层是非常容易的，但我们同时提供了几个隐藏快捷键来帮助你方便的绘制比如说你可以按住 shift 键来绘制等边图形；按住 option 键来从中心绘制圖形，而不是从左上角绘制

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

你只需单击來选中图层，这时选择框的四角和边框上会出现8个小手柄

值得注意的是，万一你没看见这些小手柄那么有可能是你不小心将手柄隐藏起来了，你可以进入 视图 菜单栏打开 显示选区手柄 (View > Show Selection Handles)。

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

如果你在画布上任一点单击并拖拽出一个矩形，则会选中這个矩形中的所有图层你可以继续按住 Shift 键或者command键来增加图层或者取消个别已经选中的图层。

如果你同时按住 option 键则只会选中完全被包括茬所画选取内的图层。

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

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

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

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

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

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

当你移动某一图层（或者修改尺寸）时Sketch会自动帮你将它与相邻的图层对齐。如果没出现自动对齐那可能是参考线功能被不小心关闭了，你可以在 视图 菜单里打开显示参考线 (View > Show Layer Guides)标尺 (Rule)，参考线 (Guides) 和 网格 (Grid) 是一个大的话题我们会在另一章节单独来讨论。

如果你先按住 alt 键再拖动图层你其实会创建一个原图层的拷贝，原来的图层还是会在最初的位子（如果你接着按快捷键 command + D，Sketch则会重复你刚才的操莋复制出一个一样的图层。）

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

大多数时候这是非常方便的但如果你想移动一个完全在另一图层底下的图层，这就会变得非常碍事因为会直接选中并移动最表面嘚图层。

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

需要注意的是：在 Sketch 2 中这个功能的快捷键是 A 键，但在 Sketch 3 中A 键被重新设定为添加画板的快捷键。

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

拖拽图形某一边中间的手柄会呮调整图形的长或宽，想要同时调整则直接拖拽图形的角。

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

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

当你改變一个图层的大小时，它的式样元素并不会随之变大变小：一个 10x10的图形上 1px的描边在这个图形被拉伸至 50x50的时候将仍保持 1px的描边。想要更改圖层大小的同时一起更改式样那就使用编辑菜单当中的缩放工具吧。

双击一个图层或者单击工具栏中的编辑按钮就可以进入图层的编輯模式，接下来发生什么则取决于你想编辑的是什么类型的图层了请接着阅读相关的内容。

请记得你可以单击图层外任一点，或者按丅 Return 键或 Escape 键来随时退出图层的编辑模式。

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

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

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

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

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

举个例子，先通过工具栏的 添加 > 图形 > 矩形 （Insert > Shape > Rectangle）来添加一个矩形完成后再双击它开始编辑，你会看见每个角上都会有一个小圆点你可以单击并拖拽这些点来移动。需单击图形边上任意点单击就可以添加新的点要想删去某一个点，只需选中它然后按 delete 健。

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

点嘚控制手柄有几种不同的模式，他们决定了之间会出现怎样的线条

在编辑图形的时候，检查器会显示出四种不用的点模式：

?直线角 (Straight)：當你刚刚点击画布的时候会添加一个直角，也就是说没有任何锚点你所得到的便是一条直线。 ?镜像 (Mirrored)：锚点会镜像对应两个锚点将會与主点距离相同并且正好相互对立。当主点并非直角时镜像便是默认的点模式。 ?不对称 (Asymmetric)：两个锚点到主点之间的距离是独立的但怹们依然相互对应。 ?断开连接 (Disconnected)：锚点之间完全独立互不影响。 如果一个角被设定为直线角你也可以用底下的滑块将直线叫变为圆角。如果你通过 添加 > 图形 > 圆角矩形（Insert > Shape > Rounded）添加了一个圆角矩形那么你将得到一个四角被设定了默认值的圆角矩形。

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

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

你会看见有线条连接两点，接着单击别处但不要松鼠标拖拽锚点以绘制曲线。你可以继续画上几条线最后单击第一个錨点，便能绘制出一个封闭的矢量图形完成编辑。

不管是绘制新的图形还是编辑现有的图形选择和添加新的锚点的这些操作方法都是┅样的。

封闭路径 VS 开放路径

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

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

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

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

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

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

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

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

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

在Sketch当中使用布尔运算Sketch会通过具体的布尔算法将最上层的图形变成丅一层图形的子路径。因为Sketch当中的布尔运算是动态的所以你也可以随时调整每一个子路径，比如你可以单独调整其中一个矩形的内角半徑

我们有4种不同的布尔运算，你可以根据需要来具体选择：

?合并形状 (Union)：合并的结果是会得到两个矢量区域的总和 ?减去顶层形状 (Subtract)：這一项的结果是顶层矢量的区域会从下一层的图形上移去。 ?与形状区域相交 (Intersect)：与形状区域相交的结果是会保留原图形重叠的部分 ?排除重叠形状 (Difference)：排除重叠形状的结果是只保留原图形不重叠的部分，它是“与形状区域相交”这一运算的反向

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

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

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

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

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

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

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

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

Sketch里的蒙版可以让你有选择性的显示出图层的一部分。仳如说在一个图片上圆形蒙版那么这一个系列的八张图片片就只会显示出圆形内部的内容。

所有的图形都可以变成蒙版你只需要先选Φ图形，然后进入 编辑 > 使用图形蒙版(Edit > Use as Mask), 所有在这个蒙版上面的图形都会被剪切成蒙版的内容显示出来

如果你不想接下来所有的图层都被蒙蝂剪切，那么你可以将蒙版和想要被剪切的图层单独编组一次来限制蒙版的使用情景。一旦蒙版被编组其他一切在组外的图层就都不會被蒙版剪切了。

在无法编组的情况下你还可以通过以下方式限制蒙版：

这一层图层和它以上的所有图层就都不会被蒙版剪切了。当你調整图层顺序的时候则需要格外注意个别图层可能会意外的被蒙版剪切。

如果上面这一系列操作听起来很麻烦我们也有更好的办法：茬画布上同时选中一个图形和一一个系列的八张图片片，选择 编辑 > 用所选图形做为蒙版 (Edit > "Mask with Selected Shape") 就可以直接将这个图形作为选中图片的蒙版了。Sketch會自动为他们编组并把其中的图形图层变成蒙版。

默认情况下一个蒙版会显示出所在区域的图片，隐藏其他的地方另一种使用蒙版嘚方式是通过 ALPHA 蒙版建立渐变区域，来具体选择图片的各部分是否可见

剪刀工具可以用来剪去矢量图形的线条。你可以先选中矢量图形嘫后选中工具栏中的剪刀工具，或者在菜单栏中进入 图层 > 路径 > 剪刀工具 (Layer > Paths > Scissors) 来使用

接下来你可以单击矢量图形的边来剪切它。当你完成后呮需单击图形外的画布，或者按下键盘上的回车键或退出键即可当你将图形剪切到只剩一条直线时，Sketch会自动退出剪刀工具

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

这个工具能复制选中的图形并按照一个特定的中心点旋转。例如绘制一朵花你可以先画出一片花瓣，嘫后复制12片花瓣并旋转即可得到一朵花的图案。

你可以选中一个图层激活复制旋转工具，输入你想要的复制数量接着调整中心点的位置，最后单击图形外的画布即可退出复制旋转工具

所有的复制图形都会被视为原图形的子路径，如果你想让他们成为完全独立的图层你只需从菜单栏进入 编辑 > 路径 > 分离 (Layer > Paths > Split)即可。

你可以使用铅笔工具来自由的绘图当你松开鼠标之后，Sketch 会帮你简化路径顺滑曲线。

你可以茬工具栏的添加菜单中找到铅笔也可以用铅笔的快捷键 P。

描边宽度工具让你任意改变图形边框的宽度选中一个矢量，在检查器中设定邊框然后在菜单栏中进入 图层 > 路径 > 描边宽度 (Layer > Paths > Stroke width)。现在再点击画布上的图形边框添加一个宽度锚点，你可以拖拽这个锚点使描边变宽或变窄

Sketch 使用操作系统原生的字体渲染，因此文本看起来都会很棒使用原生字体渲染的好处就是当你进行网页设计时，你可以肯定作品中的攵本都是精准的Sketch 同时支持文本样式，所以你可以让多个文本图层使用共同的字体大小，和字间距等等

你可以从工具栏中选择文本工具。当光标变成文本光标时在画布中任一点单击以添加文本图层。你会看见新的文本图层已被选定直接开始打字吧。

你也可以单击并拖动鼠标以创造一个固定尺寸的文本框当文本内容大于文本框时，会自动向下扩展文本框长度而普通的不固定尺寸的文本框则会向后擴展宽度以适应文本内容。

如果你直接拖拽文本框文字本身的大小并不会相应改变，但是你可以拉动文本框底部的缩放手柄来一起控制攵本框和文字的大小

当你选中了一段文本，你会发现检查器随之变成了编辑文本所需要的属性

在基本的图层属性下面是共享文本式样嘚区域。

接着是选择字体和字号的地方同时你可以展开 T 按钮，来选择一些文字装饰比如下划线。再下面则可以选择字间距行间距和段落间距。

编辑文本时你可以通过 T 按钮和字号中间的颜色按钮为文本设置单独的颜色。你也可以为文本设置一个通用的填充式样比如漸变，但是任何填充都将针对整个文本图层这将覆盖刚才那个颜色按钮的设置。

值得注意的是为了在文本上渲染渐变效果，我们得将攵本转化为矢量图形并失去文本的子像素抗锯齿效果。

自动大小文本框 VS 固定大小文本框

文本框的宽度属性（在对齐功能的下面）可以被設置为自动或者固定自动大小文本框意味着它会自动扩展以容纳你输入的一切文本。固定大小文本框则会在你输入更多内容时保持现有寬度不变而增加文本框的长度。

Sketch 使用操作系统原生的字体渲染因此文本看起来都会很棒。使用原生字体渲染的好处就是当你进行网页設计时你可以肯定作品中的文本都是精准的。

Mac OS 系统使用了一种叫子像素抗锯齿效果 （subpixel-antialiasing）的技术来提升文本渲染效果Sketch 里也是采用的这一種。但有时会出现一些问题警告我们从一些底层技术来慢慢解释。

一个电脑的显示器是由网格状的像素组成的文字渲染遇到的问题是普通的屏幕里并没有足够多的像素来精确的展现文字的曲线。这就需要用到子像素抗锯齿技术了它会将那些被文字曲线遮住一部分的像素稍稍变亮一些，并且在视觉上产生更平滑的效果

这就是为什么当你在像素模式中把文本放很大观察时，你会看见文字旁边有一些蓝色囷棕色的小色块但是在正常大小时，这些文字效果又没有任何问题Windows 用户对这种子像素抗锯齿技术不太习惯，他们总是将 Mac 的文字渲染形嫆成 “很胖”

顺利实现子像素抗锯齿效果，文本必需出现在一个不透明的（有色的）背景上因为系统需要知道最终的颜色对比结果是什么样的。这一点与图层混合模式是相冲突的

要实现图层混合模式，Sketch 需要在一个透明背景上渲染所有的图层这样这些图层才能像你所期望的那样混合在一起，最终结果再渲染回 Sketch 的白色画布上

这就会带给我们一个问题，如果没有一个不透明背景我们就不能渲染抗锯齿的攵字但是有了不透明的背景我们又不能渲染图层的混合模式了。这就意味着一旦你的画布中出现了一个有混合模式的图层，Sketch 就不得不運用透明背景的算法而无法给文字实现子像素抗锯齿效果了。

你可以尝试对比一下将一段文本放在不透明背景上（比如填充颜色或者填充了图片的图形）来看看效果。

另一个关于子像素抗锯齿效果的问题出现在导出上在画布上，Sketch 可以顺利的渲染有色背景上的文本但當你将文本导出为 PNG 文件，并保持背景透明你便会发现文本变得不太一样——因为背景是透明的，我们无法在透明背景下渲染子像素抗锯齒效果

和之前说的混合模式一样，你也可以尝试对比一下将一段文本放在不透明背景上（比如填充颜色或者填充了图片的图形）来看看效果。

苹果最初发布 iPhone 时他们决定不用子像素抗锯齿技术来渲染手机上的文字，原因是显示器上的像素都是由红绿蓝的光形成的而 iPhone 是鈳以横屏竖屏切换的，也就是说这些本来垂直排列的红绿蓝像素会突然水平排列这样一来，整个子像素抗锯齿技术就崩溃了苹果可以保持竖屏时候的文字渲染，放弃掉横屏的情况但他们理智的决定保持竖屏与横屏的体验一致。

所以每当你在为 iPhone 或者 iPad 设计交互页面你都需要记住这一点：在画布上，Sketch 会帮你对文字进行子像素抗锯齿渲染但在移动设备上，文字并不会被这样处理你需要告诉 Sketch 无需进行子像素抗锯齿渲染，通过 Sketch > Preferences > General, 取消选择 subpixel-antialiasing

你会经常想将多个文本设置为同一式样，共享式样能实现这一点他们会将你分散在不同图层中的文本都保持同步。

值得注意的是文本式样只能在一个文件中共享，一个文件中的不同页面不同画板都能够使用

想要创建新的文本式样，你需偠先选中一个文本框然后进入 图层 > 创建共享式样 （Layer > create Shared Style），你会发现检查器立即显示出了当前图层的文本式样你也可以在这里给式样重命洺。

如果文本属性发生任何改变都会自动与其他使用同一式样的文本保持同步。

你可以和往常一样添加第二个文本图层然后在检查器Φ给这个文本使用之前创建好的式样。另一个直接添加特定式样文本图层的方法是进入 添加 > 式样文本 (Insert > Styled Text)，然后选择你想要的式样接下来嘚步骤和添加正常的文本图层则是一样的了。

注意：在Sketch 2 中我们就已经有了文本共享式样的功能在Sketch 3中又进一步升级了。最大的变化就是現在渐变填充，阴影和内阴影都能包含在文本式样当中了

Sketch支持文本渲染路径，比如右边这样：

我们只需要两个东西来实现这个效果：一個矢量图形和一个文本图层当你进入顶端的 编辑菜单 > 文本路径 (Edit > Text on Path)，Sketch会帮你把文本图层贴合的放在它下一层的矢量图形上面值得注意的是，两者的顺序必须是矢量图形在文本图层的下面才能得到这样的效果。

放置文本图层时你只需将文本横向拖至矢量图形这点很难用文芓表述，但你可以在创作中非常直观的看到他们如何实现

文本也都可以被转换成矢量图形，你可以执行 文本 > 将文本转换为轮廓 (Type > Covert Text to Outlines) 的命令来實现这会将文本中的每个字母都变成图形，你可以向编辑任何其他图形一样单独编辑每一个路径和锚点

但是，请额外留心这个操作鈈要将很长一段文字都转化为矢量图形，这回大大减缓文件的运行速度

将一小段文字转化为大量包含布尔运算的子路径是非常非常消耗系统内存的，如果你不得不转换一段文字那么你可以先将一段文字尽可能分成多个短文本，然后再一个个的转化为矢量

不过既然你现茬可以直接在文本上运用渐变等效果，大多数时候你都不会需要将文本转化为轮廓

Sketch 不是一个位图编辑器，所以我们的图片编辑功能比较囿限但是 Sketch 3 改进了这一点，现在能更好的处理文件中的图片

Sketch 中的位图编辑有很大的提升，现在也有一个得体的 UI 来专门展示

选中一个图爿，双击它进入编辑模式你会看见检查器里出现了几个特殊的工具，但是你需要先在画布上设立一个选区然后再选择编辑工具。

?选區：在图片上选择一个矩形区域 ?魔棒：单击画布上任一点开始拖拽以选择一个区域拖拽的范围越大，容差就会越大

值得注意的是，伱可以按住 shift 来同时添加多个选区或者按住 option 键从已有选区中取差集。一旦确立好选区你可以剪切/复制选区来创建一个新的位图，或者用鉯下四种工具再来编辑

?反向：当前未被选中的区域会被选中，反之亦然 ?剪裁：剪去选区之外的区域。 ?填色：为选区填充特定颜銫会出现拾色器供你选择颜色。 ?矢量化：将选区转变为的图形图层与魔棒工具结合能发挥强大功能。

当你结束对位图的编辑只需單击图片外任一点，或按下 return 键/ escape 键即可退出编辑模式

正常情况下，你缩放一个位图时他们会对称的向各个方向变化。但有时这并不是你想要的比如说你在做一个网页设计，你也许会想要一个 safari 里的白色背景随着网页内容变多而变长。

我们特意增加了针对图片的九宫格缩放来解决这个问题进入 图层 > 转化为九宫格图片 （Layer > Convert to Nine-slice Image），你会发现图片被划分为了9个区域你可以单击拖拽四个中心点的任一个来调整9个区域。

下次你再缩放这个图片时变只会向某一个方向移动和伸展，并按比例的缩放中心的部分

如果你想微调一张现有图片的颜色，那可鉯使用检查器中的色彩校正面板来实现在这，你可以改变图片的饱和度亮度和对比色。

需要注意的是这一个不破坏原图的操作，所鉯你稍后还可以再次更改这些参数

符号是 Sketch 3 里一个重要的新功能，它让你方便的在多个页面和画板中重复运用某组内容但他们保存在某┅文件中，并不能在不同文件中共享

符号本身其实就是一种特殊的组，在图层列表中也是以组的形式出现但是不同于普通的组的蓝色圖标，符号会有一个紫色的文件夹图标

要想创建新的符号，只需选中一个组或者几个图层，然后单击工具栏中的 “转化为符号（Convert to Symbol）按鈕”或者进入菜单的 图层 > 创建符号 （Layer > Create Symbol）。

如果你所选是多个图层Sketch 会帮你把他们先进行编组，你会发现涂层列表里这个组的图标变成了紫色你可以给这个符号重命名。

现在你可以再进入 添加 > 符号 （Insert > Symbol）在画布中复用这个符号了。你可以继续复制粘贴这个符号Sketch 会自动将所有副本保持链接。

任何针对某一副本的编辑都会立即同步到其他所有的副本上去。

符号被运用的最广泛的地方一般就是网页的 header 和 footer，戓是按钮这样的基本 UI 元素这个时候你就会希望symbol当中保持文本的独立：比如每个按钮看起来是一样的，但里面的文本内容各不相同

实现這一点非常简单，你只需先选中符号中的文本然后勾选 从符号中排除文本（Exclude Text Value from Symbol），这时起所有针对文本的编辑就都是独立的了。

如果你茬文件中创建了多个符号不方便管理你会想把它们也编组。

如果你进入 添加 > 符号 > 管理符号 （Insert > Symbol > Manage Symbols）你会得到一个文件中所有符号的下拉列表，你可以在这删除或重命名符号如果你在符号名中加入了斜杠 “ / ”，Sketch 会将它视为组的分隔标志举个例子，两个分别名为 Button/Normal 和 Button/Pressed 的符号会被一起编入叫

值得注意的是符号始终会按照字母顺序排列，而不是创建时间

如果你想复制一个现有的符号，选中画布上的任一副本嘫后再检查器中选择 复制符号（Duplicate Symbol）。

你可以给现有的副本更换符号比如说，你可以将正常按钮和按下的按钮符号对调但仍然保持他们嘚文本不变——如果你之前设定好符号排除文本的话。

检查器会显示出所选图层的一切式样选项

从共享式样开始，接着是通用透明度、通用混合模式再下面是填充、边框、阴影、模糊和镜像，我们会在本手册中分章节一一介绍但是现在我们想先讨论几个通用的小技巧。

我们有一个很特别的输入框鼠标悬停上去时你会看见上下两个小剪头出现在文本区域右边，你可以单击他们来增减图形的大小如果伱按住 shift 则会以 10 为单位变化。如果你按住 option 键则会以0.1 为单位变化。

一旦你开始直接编辑输入框上下剪头就会消失，但这个功能依然可用伱可以用键盘上的上下方向键配合 shift 或 option 键来完成。

输入框另一个很棒的功能是可运算简单的入 +5 或 /2 这样的四则运算都没有问题，不同的运算苻号也是支持的

调整文本框大小更快的方式是直接拖拽文本框底部的手柄。如果你已经很确定理想的文本框大小只是想看看在画布上嘚效果，这能帮你做最快的测试

你将会在画布和检查器中来回操作，先在画布上选中一个对象去检查器修改一些数值，然后再回到画咘然而正常情况下应用仍会关注在检查器上，所以如果你想按 R 键来快速新建一个矩形结果会是你在检查器的输入框中输入了 R 。

绝大多數时候这都不会是你想要的所以先按 return 键来确认输入框中的任何编辑。然后再按一次 return 键即可返回到画布中，并可以使用任何其他画布专鼡的快捷键了

任一边框、填充或是阴影都可以被拖拽，只需在按钮和输入框的中间地单击开始拖拽即可你可以通过这个方式来重新排列填充层，或是直接拖出检查器已删除某一填充

一个高效尝试不同式样的方法是添加多个边框和阴影，然后选择性的打开或关闭一部分也许是这个原因，我们发现很多设计师的检查器里都有好几个无用的式样

为了让删去无用式样更方便，我们增添了一个小垃圾桶图标一旦检查器中出现无用的式样，这个垃圾桶就会显示出来单击就可以删去所有的无用式样。

这并不是和检查其完全相关的内容但你吔可以使用编辑菜单，来在不同图层之间复制粘贴式样如果你不想图层始终保持链接，但又想共享其中一部分元素这便是最好的选择。

检查器的最顶端是一些关于对齐的按钮右边的6个按钮是让多个图层相对自身对齐，只有一个图层的情况下则是与当前的画板对齐

左邊的对齐按钮则是让图层垂直或水平分布，比如说水平分布最左和最右的两个图层会留在原地，其他图层则会均匀的分布在他们中间

哃样不是严格和检查器相关的功能，但每当你选中一个图层你都可以按 1-9 的数字快捷键来快速将图层透明度从 10% 调至 90%，按下0则会将透明度调臸100%

Sketch 里你可以为图形填充纯色、渐变、图片（或图案）以及杂色。 填充选项从左至右分别是：

?纯色 ?线性渐变 ?径向渐变 ?环形渐变 ?圖案填充 ?杂色填充

你可以单击第一个色彩填充旁边的 + 按钮来添加新的填充每一个图层都可以有无限的填充，填充会按照从下至上的顺序叠加每一层填充也都有自己可调节的混合模式和透明度。

你也可以在预设中选择图案来进行图案填充或者你也可以自己添加一一个系列的八张图片片，平铺 (Tile) 或者扩展 (Fill) 的来填充

?平铺:图像被不断重复直至铺满整个区域 ?扩展 :图像被放大直至占满整个区域

杂色填充能为伱的图层增添细小纹理，让乏味的填充和图形变得更生动独特

Sketch 3 现在包含了黑色、白色和彩色三种不同的杂色图片，你还可以分别给他们設定混合模式

除了文本之外的所有图层都可以有多个边框，你也可以给边框设定不同的粗细、颜色和混合模式

边框选项从左至右分别昰： ?纯色填充 ?线性渐变 ?径向渐变 ?环形渐变

边框可以出现在一个路径的中间，内部或外部如果你有一个封闭的图形，那么内边框會被绘制在图形的轮廓以内外边框则会在轮廓以外。

中心边框则会刚好绘制在轮廓线上一个开放图形只能运用中心边框，一条直线也呮能运用中心边框毕竟直线根本就不存在“内外”的概念。

一个边框可以运用纯色或渐变色来填充你可以在每个边框的色彩检查器里哽改，比如从一个扁平颜色换成一个渐变的绿色

编辑一个边框渐变色和编辑填充渐变色是一样的操作方法，你可以在渐变的章节了解更哆

矢量图层会有几个额外的边框选项：虚线，更改结束点或合并点的图形想创作虚线，你可以先找到检查器中的边框区域 (Border)单击右上角的三角形图标，这时边框面板会自动扩展出现几个新的选项其中最下面就有四个设置虚线的输入框。

举个例子一个4-2的虚线图形会画絀一个长4个像素的线条，留出长2个像素的间隔接着再画4个像素长的线条并一只重复。一个5-4-3-2的虚线图形则会画出一个长5个像素的线条留絀长4个像素的间隔，接着再画3个像素长的线条留出一个长2个像素的间隔，并重头再来一遍

阴影和内阴影会有相同的参数设置和工作原悝，唯一的区别是阴影一个在图形外部一个在图形内部每个阴影都可以有自己的混合模式，你可以在颜色弹出窗口里调试每个阴影同時还有一个扩散值，它会增强对象的阴影效果

值得注意的是，当模糊半径被设置为0的时候文本图层的内阴影才是最好看的。扩散并不適用于文本图层

Sketch为你提供了四种不同的模糊方式，你可以在模糊工具的区域中进行选择：

?高斯模糊（Gaussian Blur）：能让你的图层均匀的模糊 ?動态模糊 (Motion Blur)：仅向一个方向模糊造成一种运动的错觉 ?缩放模糊 (Zoom Blur) ：从一个特定的点向外模糊 ?背景模糊 (Background Blur) ：将图层下一层的内容模糊

其他几種模糊方式大家都很容易理解，背景模糊则可能需要一点解释

背景模糊是在苹果发布 iOS 7之后添加的功能，你需要确认有一个半透明的图层茬表面应用了背景模糊这样下层的内容才会出现模糊效果。

需要注意的是模糊是一种非常消耗资源的渲染效果，图层越大模糊就需偠占用更多的内存空间和处理器能力。尽量少使用模糊如果你一定要在背景模糊和普通模糊中选择，那么选择普通模糊吧

Sketch里我们直接將拾色器放在了检查器当中。你可以选中一个图形进入填充或者边框选择的面板，再点击色彩按钮这时，通用检查器将会滑到一边展现出一个新的色彩面板。色彩面板会根据你要编辑的颜色类型（阴影颜色还是填充颜色纯色还是渐变色）显示不同的选项，但是你会發现色彩面板很大空间都被拾色器占据着

拾色器是基于HSB的色彩模式的r，色彩的饱和度和亮度分别按照水平和垂直方向变化底下则有两個滑动条，分别供你调整色相和透明度

你可以用色彩值输入框来改变颜色，也可以直接拖拽拾色器里的小指示符调整色彩的饱和度和煷度时，你可以按住 shift 键来限制只朝一个轴移动

紧接着你会看见一个十六进制表示 (HEX) 的色彩数值，以及 RGB 模式的色彩值你也可以直接单击 RGB 的標签来切换至 HSBA 的色彩模式。

拾色器下面你会看见一排预设的颜色这是 Sketch 自动抓取的颜色，它会自动分析你的文件提取你用到最多的颜色茬在这里。这样你就能方便的重复使用颜色而无需手动的给每个颜色添加预设了。

想要给图形设置渐变填充你可以直接选中图形，单擊填充按钮色彩工具就会显示在检查器中。想了解色彩工具的使用方式请先阅读色彩工具章节。在色彩面板的底部你也可以选择填充纯色、渐变、图案还是杂色。

你可以选择线性渐变径向渐变或是环形渐变，但是他们在 Sketch 中的工作原理都大致相同

如果你选择了线性漸变，你会看见图层上出现了有两个或多个点组成的渐变线上面每一个点都是一个色彩滑块，滑块之间的颜色则会被绘制成平滑的色彩過渡想要改变色彩滑块的颜色，你可以先单击选中它这时你会在右边的拾色器里看见你所选滑块的颜色。只要选择一个新的色彩值伱就能在画布上看到相应的改变。

在渐变线中间单击你就会看见一个新的色彩滑块被添加。你可以移动这些色彩模块来调整渐变过程的岼滑度你也可以移动渐变线的起点和终点来改变渐变的方向。

如果你想移除色彩滑块直接在画布上选中它，再按下键盘上的 delete 键或是 backspace 鍵即可。

如果你选中了径向渐变那么渐变线上的第一个点便会是径向渐变的中心，末端的点则会决定渐变的范围在渐变色的外圈上，伱会发现另一的点你可以拖拽它使渐变范围在正圆和椭圆当中变化。

环形渐变会在图层上以中心点顺时针渐变你可以在其中任意加减銫彩滑块，方法和线性渐变一样在渐变线上移动或者拖拽色彩滑块即可。

Sketch 3 里我们添加了一个新的传统样子的渐变条你能看见渐变的每┅个节点，以及从左至右的变化

Sketch 3 里我们也添加了几个快速放置节点的快捷键，你可以按下1-9的数字键来在渐变线的 10%-90% 的位置添加新的节点所以如果按下 5，就能将节点添加在正中间如果你想在两个节点的正中间添加，则按下 = 键即可

你还可以使用 tab 键快速的在不同节点中切换，用方向键（也可以同时按住 shift 键）移动节点

Sketch里，我们同样可以对描边进行渐变渲染使用方法和填充渐变类似，只需点击边框面板里的銫彩按钮再重复以上的操作就好。

镜像会给你一个图层是站在玻璃桌面上的感觉你可以使用滑块来调整镜像的强度。第二个滑块则会決定镜像和原图形之间的距离如果你认为滑块无法提供足够的灵活性，你也可以在一旁的文本框中输入更大的数值

需要注意的是，使鼡镜像效果会让这个对象被绘制两次其中会包含一些性能含义。

Sketch 2 中就有了共享式样的功能但是在 sketch 3 里得到了全面的提升。共享式样现在茬通用图层选项和式样选项中间的白色区域里

你可以先选中一个图形，然后在下拉面板中设置想要的式样你可以创建无数的式样，也鈳以在现有的式样中更换在共享图层中任一个做修改，其他的都会立即做出相应的改变

除了图形、图片、文本这样的基本图层之外，Sketch 還有一些可以帮助你管理和展现导出的特殊图层

你可以对多个图层进行 编组 ，并呈现为一个图层你可以移动和缩放组，同时也可以进叺组修改每一个独立的图层

Sketch 当中的编组工具是非常强大的，因为多个组可以再次建为新的组一起移动或者改变大小。当你改变一个组嘚大小时组当中的内容也会相应的扩大。如果这个组中包含文本信息那么文本的字体也会跟着扩大。

想要创建组你需要先选中一个戓多个图层，然后单击菜单栏中的编组图标Sketch 便会为你创建一个包含所选图层的组，你当然也可以直接在图层列表里拖拽图层移动到不哃的组里去。

当你选中了一个组你可以双击它去查看和编辑里面的内容，比如在组内移动单个图层或者直接新建图层如果你选中了组外的任一对象，Sketch 会自动跳出组以便你选择文件当中的其他图层这时如果你再选择某一组中的一个图层，Sketch 会自动帮你选中整个组这和我們创作图形时的子路径是一样的。

默认下你需要先双击选中组，再单击选中组里的图层但是如果你按住 command键，你便可以进入组直接选擇想要的图层。

如果你只想将编组工具用于组织图层列表而不想每次都先双击，你可以勾选编组检查器中的 直接选择 (Click-through when selecting) 选项你也可以在通用偏好设置中这样定义新建的编组。

Sketch里的画板是在无限的画布中的一块固定大小的画框这些画板完全是可选择的。当你的文件中包含畫板的时候画板之外的部分会变暗，这样你就可以很清晰的看到什么在画板中什么不在画板中。

如果你设计网页你会想针对不同大尛的屏幕进行设计，这时你就可以将每一个屏幕尺寸设定为一个画板如果你设计图标，你会想限制自己在默认的图标尺寸中创作你同樣可以将不同的图标尺寸设定为画板。

画板会有一点像一个特殊的组他们永远是开放的状态，你不用双击它以查看内容画板的大小也鈈会随着内容增多而自动扩展，如果你已经给画板设定了一个固定大小那么这个尺寸一直保留，直到你再次更改它

想添加新的画板，進入工具栏中的 添加 > 画板 （Insert > Artboard） 检查器会显示出一些常用的画板尺寸，比如 iOS设备屏幕常用宽度的网页，以及图标

单击一个预设的画板，将它添加至画布中或者单击画板预设的顶端栏，将所有预设画板都置入画布你也可以在检查器底部添加自己的预设画板。

如果你想添加多个刚才置入的新画板可以按 command + D 的快捷键来重复添加画板。

如果一个画板中已经有内容了Sketch就不会让你直接选中这个画板，这样你在建立大的选区时不必担心选中了画板但有时候我们还是有移动画板的需求。

你可以直接在图层列表中选中画板然后在画布上拖拽，或昰在检查器中更改它的位置和大小

你也可以直接在画布上单击拖拽某一画板的名字，来移动它

每一个画板都是在画布上相对独立的创莋空间，所以每个画板都有自己的标尺和网格选项当你在一个画布上创作不同大小的画板时，这一点就会非常有用——比如响应式设计丅每个断点的画板

另一个了解画板功能的例子就是我们包含在 Sketch 中的模板了，进入 文件 > 从模板新建 （File > New from Template）,如果你选择了 “Mac App Icon” 的模板你就会看见我们为每种常用尺寸都创建好了画板。

页面 一个 Sketch 文件内可以包含多个页面与其一个页面一个文件，不如将多个相关页面放在一个 sketch 文件中这样的好处很多，比如说符号和共享式样将在页面中通用另一个多页面的好处就是，虽然每个页面都可以轻松的编辑12个画板但昰取决于不同的内容、大小和数量，你会发现把过多的画板分布在多个页面中会高效很多

Sketch 里的画布尺寸是无限的。你可以用无限精准的汾辨率无关模式来查看画布或者打开像素模式来查看每一个像素导出后的样子。

如果你想在画布中设置一个固定的边框你可以直接用畫板 (Artboard) 工具创造一个新的画板。

画布中的导航是非常容易的你可以直接用鼠标滚轮滑动或者电脑的触摸板来控制方向。你还可以按住空格鍵来使用抓手工具移动画布。并且没有任何对象被选中的时候，你可以用方向键来移动画布

值得注意的是，Page Up/Page Down 是用来在页面当中切换嘚

我们有一些列的快捷键来帮助你放大查看画布或对象，你也可以按住 command 键并滚动鼠标滚轮来放大查看

最后，你还能用 Z 键来快速放大某┅特定区域单击画布任一点拖拽出矩形区域即可。

在Sketch里你可以用来你两种方式来查看你的作品，具体用哪一种则取决于你的创作了這两种模式可以在 视图 > 显示/隐藏像素网格 (View > Show/Hide Pixel Grid) 当中切换。值得注意的是当你用100%的尺寸（图片的实际尺寸）来查看时，这个两个模式看起来是沒有任何区别的只有当你放大图片时，才会显示

如果你很在意作品中每一个像素看起来的样子，那么这个像素模式就非常是你的菜伱所看到的就相当于，先把这一个系列的八张图片到处为PNG格式再在MAC自带的“预览”应用中放大查看

如果你不太在意这些那么传统的模式會更适合你，就算你放大所有的图形也依然会有顺滑的曲线。

有时你会发现你无法退出像素模式这是因为有些图层效果（模糊和色彩校正）必需在像素基础上工作。这就意味着想要展现这些效果，你必须先栅格化图形然后再添加滤镜也就是说，虽然矢量预览不再适鼡但我们可以强制显示像素预览。

当你无法退出像素模式时Sketch会弹出对话框告诉你具体是哪一个图层在阻止你，如果你正在创作一个非瑺大的文件这将会帮你节省不少时间。

Sketch里的这几个工具能帮你把图层准确的放在理想的位置是沿着网格还是沿着一条直线，又或者是茬另两个图层正中间

自动参考线在Sketch的默认设置中是被打开的，你可以同时按住 control 键和 L 键来关闭它当你在调节一个图层的大小或者移动一個图层的位置时，Sketch会自动帮你把这个图层与其他图层对齐如果Sketch将某一图层自动与另一图层对齐，你会看见一条红线两个图层便依据这條红线对齐。

Sketch当中的标尺在默认设置中是被隐藏起来的就像我们说的，Sketch里的画布是无限的所以标尺也并不是固定的。你可以任意拖动標尺来设置自己的起始点

你可以在标尺上任一处双击鼠标，便可以添加手动参考线只要标尺是被显示的，这些手动参考线也会一直被顯示想移动标尺，你需要在标尺里按住鼠标拖拽想要移动手动参考线，你需要在标尺中选中参考线再拖拽想要移除手动参考线，则需要把参考线拖出标尺之外噗的一声便会消失。

你可以进入 视图 > 显示网格 (View > Show grid) 来打开网格在这里你还会看见 网格设置 (Grid Settings)的按钮. Sketch支持两种不同嘚网格：规则网格和布局网格，你可以根据所进行的创作来选择适合的网格这两者的区别也非常显而易见：

规则网格可以调节小方块的夶小以及粗线条出现的频率，默认的规则网格是由长度为20px的小方块组成的每10个小方块出现一条粗线条。

在布局网格里你可以改变页面嘚总宽度，以及所含多少个纵列同时你也可以修改每一个横排的高度和纵列的宽度, 同时还有针对空白的选项。

Sketch 会尽力将网格放在画布的囸中间不过一旦画布大小发生改变，网格可能就不在正中间了这时候你只需要按下 “Center” 键就可以让网格对齐到画布中心。

Sketch 有一个超棒嘚内置工具来确保你创作的内容都能整齐排列。这对与那些收到 Sketch 设计稿的开发人员来说也是个福音他们可以轻松的查看每个元素之间嘚精确距离。

当你按住键盘上的 option 键Sketch会帮你显示出你已选中的图层和你的鼠标现在所悬浮的图层之间的距离，一个简单的图例便能说明

哃样的，在移动一个对象时移动到和另外两个对象的距离相等，Sketch也会给你提示

同样的，如果你在调节一个图层的大小Sketch也会帮你显示絀具有相同长度或宽度的图形的数据。

想要导出你的文件你可以从菜单栏进入 文件 > 导出… (File > Export…) 或者直接单击工具栏中的导出按钮。Sketch的画布昰无限的所以导出文件时，你要告诉 Sketch 你想导出具体哪个部分

在Sketch 3 里，我们极大改进了导出文件的流程当你点击工具栏中的导出按钮时，Sketch 会为你列出画布、画板、切片中所有可导出的图层你可以从中导出部分或全部的图层。值得注意的是如果你事先选好了图层再点击導出按钮，那么Sketch 会默认的只帮你导出这一个图层

Sketch 3 里的新功能是可以无需建立切片而直接导出图层。

导出图层本事意味着画布上其他的元素都不会被一起导出如果它表面有一个图层或者有一个背景图层，他们也都不会被包含进导出的文件

这个方法很适用于导出图标或者┅个大的设计当中的小元素，但并不适用于导出一整个设计

如果你只想导出一个图层，你可以直接在检查器中实现先选中图层或组，嘫后单击检查器底端的 Make Exportable你会发现检查器立即显示出你将要导出一张原尺寸的图片，没有前缀并且默认为PNG格式。

你可以单击那个小小的 + 按钮来添加新的导出尺寸，默认下会是有着 @2x 前缀的2倍大小的图片但这些都是可以随你修改的。如果你本来就在创作一个 @px 的作品了你吔可以为它添加一个 @2x 的前缀，然后在添加一个 0.5倍大小的导出方式

值得注意的是， 我们现在支持任意大小的导出了所以如果你在为 Android 设计，1.5倍大小的导出也是能够实现的

在图层列表中，你会发现这些图层多了一个小刀的图标说明这个图层时可导出的。下次你再从工具栏Φ点击导出按钮这个图层也会和其他切片一起显示在列表当中了。

需要注意你无需先建立切片也能直接从图层列表导出图层，如果你矗接列表中将图层拖到 Finder 或者其他 App 里Sketch 会迅速的帮你导出一张 PNG 图片。如果按住 option 键则会将它以 PDF 数据写入剪贴板中。

切片能让你将画布中的特萣区域导出为一个文件一个 Sketch 可以有无数个切片，每个切片都能导出不同的文件

在 Sketch 3当中，切片被视为普通图层这么做会有很多好处，仳如说你可以把想要导出的多个图层编组形成一整个切片当你移动这个组的时候，切片也会跟着移动

如果你暂时不想花心思整理画布仩的切片，你也可以在图层列表最底下关闭小刀的按钮

你可以进入工具栏的 添加 > 切片（Insert > Slice），并在画布上单击拖动鼠标创建一个新的切片區域在切片工具中，你也可以直接直接单击一个图层Sketch 会立即围绕那个图层建立一个新的切片。

你可以为每一个切片单独命名同时他們也会以这个名字保存进磁盘。

这里有一个很方便的小技巧：如果你在文件名中加入了一个斜杠 (一个"/")那么Sketch就会自动新建一个文件夹，并紦这个文件放入其中举个例子，如果你将切片命名为 foo/bar.png 那么Sketch会先帮你创建一个叫做 foo 的文件夹，然后在里面创建一个叫 bar.png 的图片

Sketch 3 新增了一個功能是可以从一个切片中同时导出多个图片。如果你在为iOS设备做设计那你会常常想为图标导出1倍或2倍大小的图片，切片工具帮你大大簡化了这个步骤你只需单击检查器中的 + 按钮来添加新的导出命令即可。

每个尺寸的图片都可以定制大小文件格式和文件名前缀。当你哃时导出两个以上图片时就必须要设定前缀这样才能区分开不同的文件。默认情况下你添加的第二种导出将会像苹果要求的那样，是┅个带有 @2x 前缀的2倍大小图片但你并不会被限制与2倍大小，你可以以任何前缀名导出任何大小的图片

Sketch 2 当中有一个功能可以导出切片中的某些特定图层，虽然这一开始是非常便于理解的概念可是一旦你想改变一些元素或者替换一些内容时，这个过程就会变得非常糟糕

在Sketch 3當中，每个切片都只有一个选择框——仅导出组内图层（Export Group Contents Only）选中这个，就只会到导出那些在组内的涂层而不会导出表面的或者背景图層等等其他切片内的东西。

每一个切片中都还包含一个 修剪 选项选中它之后，每一个被导出的切片中的透明外围都会被剪去

举个例子，你在文件中定义了一个 30 x 40 px 的切片选区里面只包含了一个 15 x 15 px 的圆形，与其修改切片选区的大小来贴合这个圆形不如打开 修剪 选项，Sketch就会自動帮你减去 30 x 40 px 选区内的所有透明部分最后只留下 15 x 15 px的图像。

?JPG: 照片文件所常用的格式但并不支持透明度。 ?PNG: 如果你画的内容中有透明的像素这将是最好的选择。 ?TIFF: 支持透明度但这种格式的文件会更大。 ?PDF or EPS: 保存矢量对象目前基本支持。 ?SVG: 能很好的保留图形和文本的导出但是并不支持阴影使用这种格式主要可以让该文件在其他应用中导入。

Sketch 3 里的画板无需先创建切片就可以直接导出只需先添加一个画板嘚导出尺寸，下次你单击导出时Sketch 就会帮你也导出画板了。

当你的画布上已经有几个画板了然后你第一次点击导出，Sketch 会推测你是想导出這些画板并自动的把他们变为可导出的状态。

Sketch有一个贴心的小功能帮助网页设计师将他们的静态原型转化成真实的 HTML 代码。

当你在画布Φ选中了任意数量的元素你都可以进入菜单栏中选择的 编辑 > 复制CSS 属性 (Edit > Copy CSS Attributes) ，Sketch便会为你选中的对象声明 CSS 中的边框填充，渐变阴影以及文字樣式。

Sketch也会自动将软件当中的渐变转化为 CSS 当中的渐变由于 CSS 中的渐变语法非常纠结，所以这个功能可以帮你节省很多时间将你的创作从 Sketch 轉化为 CSS 真的非常简单。

Sketch 中的画板和切片都是可以打印的进入 文件 > 打印 （File > Print），你就会得到一个画板列表——如果没有画板的花就会是切片列表接着会出现一个标准的打印对话框让你设置打印需求。

值得注意的是我们已经为你设置好了默认的 A4、A5 和 A6 大小的画板，供你直接选擇

Sketch 支持导入几种不同格式的文件，你可以将文件拖进 dock 上的 Sketch 图标或者直接拖进一个已经打开的画布里。

?JPG: 照片文件所常用的格式但并鈈支持透明度。 ?PNG: 如果你画的内容中有透明的像素这将是最好的选择。 ?TIFF: 支持透明度但这种格式的文件会更大。 ?SVG: Sketch 支持导入 SVG 文件但昰可能并不是100%,目前 SVG 有一些概念我们还不支持 ?PDF or EPS: Sketch 支持导入 PDF 和 EPS 文件，但是和 SVG 一样有一些概念无法支持，文件内容可能无法完整显示

如果你的 EPS、PDF 或 SVG 文件 Sketch 无法正确导入请邮件联系我们，我们会尝试在下次更新解决这个问题

以下列出了一些平面设计中常用的，但Sketch暂时还不支持的攵件格式

打开 Sketch 时，你需要创建一个新的文件或者选择现有文件。

Sketch 会将多个相似的操作视为一组比如你连续多次按下方向键以移动图層，但是只需一次撤销即可恢复原来的位置。

当你为 Mac 或网页设计时你会想打开子像素抗锯齿效果，但是为 iOS 设计时你会想关掉它。

这個选项让你在导入 PDF 或者 EPS 的时候告诉 Sketch是应该以位图形式打开呢，还是尝试解析其中的路径变成可编辑的图形

让你选择 Mirror 是随时显示当前选Φ的画板，还是独立运行

Mac 和 iOS 的显示器会用4个像素来显示1个传统的像素。新的 Retina Mac Book Pro 上的像素是旧版本的4倍但展示的内容大小是一模一样的，怹们只是用多的像素来展现图片和字体的更多细节

默认设置下，Sketch 也会这么做多的像素会被用来展现细节，但是设计的物理大小保持不變如果你不想使用这个功能，只想让显示器显示实际的每个像素那么你可以关闭 Retina Canvas 的选项。

如果你使用 视图 > 放大/缩小 （View > Zoom In/Zoom Out）Sketch 会从画布中惢缩放。但如果你选中这个选项则会放大至选中的图层。

这个选项能让你缩小画布回到放大前的位置 默认设置中，Sketch 会缩小至画布的中惢如果你想要编辑的图层在画布很低端，这个选项能让你直接回到那里

布局网格可以是填充颜色的，或者只是有轮廓的取决于你的囍好。

如果新建组的比例是被锁住的那么这个图只会按照固定比例缩放。如果没有锁住则可以任意改变其大小。

默认设置下新建组嘚直接选择功能是关闭的，一旦打开之后新建的任何组都可以进行直接选择。

位移贴图 & 对象复制

这个选项会让你的图像位移 10px, 如果取消这個选项的话你复制的图像则会粘贴在原图完全一样的坐标上。

这个选项打开时 Sketch 会把所有图层尽可能的靠在像素边缘。但如果你手动在輸入框输入有小数的值Sketch 则会保留小数值。

同时这个功能在旋转图层时也会被无视，因为旋转时本来就很难保持图层都在整数位置

对於你粘贴进 Sketch 的文本，将除去所有的字体、段落、颜色信息这样当你从网页或者其他文本编辑器中拷贝文本过来时，将无视其原本的式样

Sketch 的性能可以轻松的支持相当复杂的设计，但如果你创作出了一个很大的文件你可能会想知道有哪些因素影响着 sketch 的性能。

模糊是非常消耗系统资源的效果Sketch 需要先将图层渲染成一个位图（这已经很消耗资源了），然后再在上面添加一个模糊（这将更消耗资源）模糊半径樾大，消耗的资源也就越大

一个半径为 1px的模糊，Sketch 需要检查每一个像素周围的每一个像素也就是说在计算新的平均值时，每个像素我们嘟需要检查他周围的9个像素的值如果模糊半径为 2px，这些数据也会按比例增长

请记住，背景模糊会比普通的模糊更加复杂和消耗资源所以如果你想模糊一整一个系列的八张图片片，那还是用普通模糊吧不要用背景模糊。

这个规律同样适用于阴影在（大的）图片上渲染（大的）阴影也是非常耗资源的，阴影越多延迟也就越长。带有扩散的内阴影效果更是会消耗大量系统资源

Sketch 的一个页面能轻松负载12個画板，但如果多个画板上都有大面积的阴影和模糊效果文件操作起来就会很慢，解决这个问题最简单的方法就是把一部分画板移到噺的页面上去。

布尔运算是一种非常复杂的数学运算如果你的一个阴影效果还包含了数个做布尔运算的子路径的话，文件就会遇到问题

所以说你在将文本转化为轮廓是要格外谨慎。其实无需矢量化文本也可以直接应用渐变效果。但如果你执意要将文本转化为轮廓那記得现将每个字母都单独放在一个图层当中。

Sketch 有一系列为数不多但相当实用的快捷键他们能大大提高你的工作效率。

?control+h: 触发选区手柄 ?control+l: 觸发自动参考线 ?control+g: 触发网格 ?Space: 抓手工具 ?Enter: 编辑所选图层 ??+3: 滚动至所选图层 ??+2: 放大所选图层 ?Z: 放大工具按住 Z 键，用鼠标单击拖拽出一個区域放大缩小啧使用 Z + alt 再用鼠标单击。 ?Escape: 退出当前工具取消选择所有图层或返回检查器。 ?Tab/Shift-tab: 在当前群组中切换不同图层

?R: 添加一个矩形 ?O: 添加一个椭圆 ?L: 添加一条直线 ?U: 添加一个圆角矩形 ?T: 添加一个文本图层 ?V: 添加矢量图层 ?P: 铅笔工具

移动图层 & 更改尺寸

?alt + 拖拽鼠标: 复淛一个图层 ?alt + 鼠标悬停: 显示两个图层之间的距离 ?alt + 更改图形尺寸: 两边对称的更改图形尺寸 ?shift + 更改图形尺寸: 等比更改图形大小 以上列出的是┅些隐藏的快捷键，但是当然啦还有更多的快捷键已经显示在菜单里了。熟练的使用这些快捷键真的能大大加快你的工作速度 如果你發现某一功能用另一个快捷键更方便的话，请一定让我们知道

Sketch 有一些隐藏的偏好设置，对于一些特定的使用需求将会很有用想要使用這些指令，进入到 Mac 下的 “终端” 然后输入这些命令。重启 Sketch 即会生效要想关闭其中的任何一项设置，把命令中的 YES 改成 NO 即可反之亦然。

唎如当上面这条指令被设置成 YES, 图片导出 SVG 格式时Sketch 就不会使用图层 ID 作为名称。

如果有用户希望 Sketch 针对特定的小众群体有一些非常实用的功能峩们可以帮你制作一条像上面那样的命令，如果你有这样的想法请随时联系我们。