Sketch 3中文手册

Sketch 中文手册

欢迎使用 Sketch 中文手册,手册翻译自 Sketch 官方英文手册,内容同时适用于新手及熟练用户。

概述

Sketch 是一款适用于所有设计师的矢量绘图应用。基于矢量的绘图方式也是目前进行网页、图标以及界面设计的最好方式。除了矢量编辑的功能之外,Sketch 还增加了一些基本的位图处理能力,例如模糊和色彩调整。

官方尽量将 Sketch 设计的功能强大且易于被理解使用,有经验的设计师花上几个小时便能将自己的设计技巧在 Sketch 中自如运用。对于绝大多数的数字产品设计 Sketch 都能替代 Adobe Photoshop、Illustrator 和 Fireworks 等传统工具。

为什么选择 Sketch

Sketch 有着出色的界面且为图标和界面设计而生。它拥有统一、单窗口的操作界面,所有你需要的工具都触手可及。支持对单个文档进行多重填充,同时拥有最棒的文本渲染及文本样式。并且画布将是无限大小的,你可以轻松导出多种分辨率的素材。

你可以用矢量(分辨率无关)模式来查看画布,或者打开像素模式精确预览每一个像素导出后的样子。

Sketch 不能做哪些事

Sketch 不是一个位图编辑应用。也就是说如果你想修正一张照片或者用笔刷来画画,那么这不是你要找的应用。

界面

Sketch 的界面设计的非常简洁。

顶端的工具栏包含了最重要的操作选项。右侧的属性检查器方便你调整选中图层的属性,左侧的图层列表面板则会列出当前文档中的所有图层,中间当然就是你正在创作的画布。

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

画布

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

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

你可以用矢量(分辨率无关)模式来查看画布,也可以打开像素模式来查看每一个像素导出成 JPG 或 PNG 等位图文件后的样子。可在像素缩放章节查看到更多内容。

值得注意的是,有些像模糊或者投影类的效果,会强制将画布的一部分以像素模式显示,因为模糊类的效果本身就是一个基于像素的效果。

属性检查器

界面右侧的属性检查器可以让你对正在编辑的图层或正在使用的工具进行属性调整。当你选中一个图层时,你会发现属性检查器被划分为几个区域。

通用属性

通用图层样式属性在属性检查器的顶端区域:图层位置、大小、不透明度、叠加模式(取决于图层类型)以及一些特殊选项,例如调整矩形圆角半径或多边形的边数。

你可以在属性检查器文本框中执行数学运算,进行加、减、乘、除操作,以加快设计工作流程。一些情况下还可输入百分比来调整形状,如下图所示。例如,选中一个图层,然后执行(+、-、*、/)和(%)操作。在半径调节框中,可以直接输入百分号。当然,你也可以分别指定每个圆角的值,使用“/”分隔即可(比如 40/0/40/0)。

样式属性

每一个边框填充阴影模糊属性都有它们独自的选项。

要添加新的边框或填充及阴影,只需分别点击标题右侧的 + 按钮即可:

添加后点击颜色按钮,会弹出一个专门的颜色检查器供选择颜色:

你可以将每一个边框和填充左边的选框取消后,点击垃圾桶按钮将其删除:

需要更改填充或边框的选项,点击齿轮按钮进行操作:

导出

位于属性检查器底部你会发现 Make Exportable 选项。要添加一个需要导出的图层或者是组,只需点击“+”按钮,你会在导出界面发现不同的导出选项

图层列表

图层列表列出了当前页面的所有图层(包括切片画板),并且每个图层都会有一个小小的预览。你可以在这里:查看图层是否被锁定、不可见、使用了蒙版或被标记为可导出;重新排列图层,或为图层执行布尔运算,例如减去顶层形状;对图层进行编组或重命名来保证它们是有序的。

多页面操作

Sketch 支持多页面操作,你可在图层列表面板上方的下拉箭头进行添加 / 删除或切换到其它页面(也可使用 Page Up / Page Down 键来切换)。图层列表面板始终只显示当前页面图层。

如果你想添加 / 删除页面,或在页面之间来回拖动图层,可以打开页面列表控件:

单击 + 按钮添加一个页面,鼠标右键单击页面名称弹出的菜单可以进行复制 / 删除页面的操作:

你还可以拖动页面进行重新排序。

此外,你可以从一个页面拖动图层和画板到另一个页面(同时按住 option  键为创建副本):

画板

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

蒙版

在图层列表里,那些使用了蒙版的图层名前会有一个小点,它的蒙版则是底下紧接着不带小点的图层。进一步了解蒙版

布尔运算

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

元件和共享式样

元件是一种特殊的组,通过它你可以在画板和页面之间复用元素。元件会以紫色同步按钮图标显示在图层列表中(普通编组则是蓝色的文件夹)。进一步了解元件

共享式样可以使多个对象(图形及文本)的样式保持一致,如果一个图形或者一段文本使用了共享式样,它们名称前的预览图标将变成紫色调。进一步了解共享样式

隐藏和锁定图层

所有图层和组都可以从画布中隐藏,只需点击图层列表右侧小眼睛图标。小眼睛图标可见,说明这个图层被隐藏了。

同样的,按住 option  键点击图层列表,一个小锁图标会替代小眼睛图标。这表明此图层在画布中是锁定的,除非将它解锁,否则不能被选择或者移动。

工具栏

Sketch 的工具栏涵盖了你创作过程所需的所有工具。在默认状态下,第一组工具是用来添加新图层:图形、图片、元件等。

编组(Group)和解组(Ungroup)能有效的保证文档的条理性。元件(Symbol)让你快速复用内容。接下来的几个章节中,你将看到:编辑现有图层:旋转(Rotate)、变形(Transform),通过布尔运算来组合图层,以及在图层列表中上移或下移图层,添加网格和布局,Sketch Mirror 和本地共享。

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

不同于其它绘图应用,Sketch 把常用工具放在顶端的工具栏,而不是放到一侧垂直排列,但如果需要,你可以通过鼠标右键工具栏,进入“定制工具栏...”(Customize toolbar...)将没有显示在工具栏中的图标放置在上面,以添加工具。

图层

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

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

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

添加图层

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

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

高级选项

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

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

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

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

选择图层

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

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

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

同时选择多个图层

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

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

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

重叠图层

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

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

快速选择组中的图层

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

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

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

移动图层

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

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

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

移动被遮盖的图层

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

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

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

对齐图层

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

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

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

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

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

改变大小

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

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

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

使用属性检查器缩放图层

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

  • l: 从图层左边开始缩放(默认)

  • r: 从图层右边开始缩放

  • t: 从图层顶部开始缩放(默认)

  • b: 从图层底部开始缩放

  • c/m: 从图层中心开始缩放

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

键盘

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

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

缩放

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

编辑图层

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

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

图形

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

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

额外选项

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

图形术语

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

图形编辑

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

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

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

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

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

不同的曲线调节模式

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

在编辑图形的时候,检查器会显示出四种不用的调节模式。直角(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 蒙版

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

使用这个方法你可先选中蒙版图层,执行菜单命令图层(Layer)> 蒙版模式(Mask Mode)> Alpha 蒙版(Alpha Mask)。

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

剪刀

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

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

旋转复制

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

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

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

分离路径

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

铅笔

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

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

文本

Sketch 使用操作系统原生的字体渲染模式,因此字体显示看起来很不错。使用原生字体渲染的好处就是当你进行网页设计时,你可确定设计稿中的字体效果和真实网页中效果一致。Sketch 同时支持文本样式,所以可以让多个文本图层使用共同的字体、大小、和字间距等。

添加文本

你可以从工具栏中选择文本(Text)工具。当光标变成文本输入样式时,在画布中任何区域点击以添加文本图层。你会看见新的文本图层已被选定,直接开始打字吧。

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

调整文本大小

当你直接拖拽文本框,文本框内文字本身的大小并不会相应改变,但你可拉动文本框底部的缩放手柄来一起控制文本框和文字大小。

文本检查器

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

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

紧接着是选择字体和字重,点击齿轮按钮(Options),可选择一些列表样式和文字修饰样式,比如下划线和删除线。再往下区域可选择字间距、分别可以调整字间距(Kerning)、行间距和段落间距(段间距以是否输入回车来区分)。

文本颜色

编辑文本时,你可以通过字号和齿轮中间的颜色按钮为文本设置单独的颜色。

你也可为文本图层应用一个通用的填充式样,例如渐变,但任何填充都将针对整个文本图层,这将覆盖之前对文本的颜色设置。

值得注意的是,要在文本上渲染渐变效果,必须先将文本转化为矢量图形。

自动和固定大小文本框

文本框的宽度属性(位于对齐选项的下面)可设置为自动或固定。自动大小文本框意味着它会自动扩展以容纳你输入的一切文本。固定大小文本框则会在你输入更多内容时保持现有宽度不变,而增加文本框的高度。

行高

Sketch 在调整行高时,总会保持一致的基线对齐方式。如果修改了字体或字号,这个文本图层会改变自身的位置,但是基线的位置是不会变动的。

只要文本图层有固定行高,一致的基线位置边缘同样会保持一致,不管你是否更换字体。这种方式会产生良好的排版效果。当不设定固定的行高时,Sketch 会使用字体默认的行高。

当创建一个新的文本图层时,它会使用自动行高而非之前设置的数值。文本图层的自动行高和设定相同数值的自动行高是有区别的,属性检查器中默认使用自动行高数值作为占位。

共享样式

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

值得注意的是,文本样式只能在单独的文档中共享,同个文档中的不同页面不同画板都能够共用。

创建样式

想要创建新的文本样式,你需要先选中一个文本框,然后执行菜单命令 图层(Layer)> 创建共享样式(Create Shared Style),此时你会发现属性检查器立即显示出了当前图层的文本样式,你也可以在这里给样式重命名。

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

新的文本图层

你可和通常一样的添加方式添加第二个文本图层,然后在属性检查器中给这个文本使用之前创建好的样式。另一个直接添加特定样式文本图层的方法是,执行菜单命令(Insert)> 样式文本(Styled Text),然后选择你想要的样式,接下来的步骤和添加普通的文本图层一样的了。

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

文本路径

Sketch 支持文本渲染路径,例如下面的例子:

只需两块内容来实现这个效果:一个矢量图形和一个文本图层。执行菜单命令文本(Type)> 文本路径(Text on Path),Sketch 就会将文本图层贴合的放在它下一层的矢量图形上面。值得注意的是,两者的顺序必须是矢量图形在文本图层的下面,才可得到这样的效果。

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

转化为轮廓

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

警告

但是,请额外留心这个操作。不要将很长一段文字都转化为矢量图形,这会大大降低文档的运行速度。

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

不过现在可直接在文本上运用渐变等效果,大多数时候都不需要将文本转化为轮廓。

图片

Sketch 不是一个位图编辑器,所以位图编辑功能比较有限。但 Sketch 3 改进了这一点,现在能更好的处理文档中的位图。

值得注意的是,你可将任何图层转换成一个扁平的位图,执行菜单命令图层(Layer)> 将选区变成位图(Flatten Selection to Bitmap)。

位图编辑

Sketch 的位图编辑已有很大的提升,现在也有一个得体的 UI 界面来专门呈现它。

 

选中一个位图,双击它进入编辑模式,你会看见属性检查器里出现了一组特殊的工具,但你需要先在位图上设立一个选区,然后再使用编辑工具。

・选区(Selection):在位图上选择一个矩形区域。

・魔棒(Magic Wand):点击位图上任一点开始拖拽以选择一个区域,拖拽的范围越大,容差就会越大。

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

・反选(Invert):当前未被选中的区域会被选中,反之亦然。

・裁切(Crop):减去选区之外的区域,只保留选中部分。

・填色(Fill):为选区填充特定颜色。会出现拾色器供你选择颜色。

・矢量化(Vectorize):将选区转变为的形状图层,与魔棒工具结合能发挥强大功能。

当你要结束对位图的编辑,只需点击位图外任一点,或按 return / esc 键即可退出编辑模式。

色彩调整

如果想微调一张现有位图的色彩,可使用属性检查器中的色彩调整面板来实现,在这,你可调整位图的色相、饱和度、亮度和对比度。

需要注意的是,此项调节不会破坏原图,你随后可再次更改这些数值。

元件

元件是 Sketch 3 里一个重要的新功能,它让你方便的在多个页面和画板中复用元素。

在 Sketch 3.7 中,官方从头至尾重新设计了元件功能,引入了扁平化元件图层及可编辑主元件的概念。

创建元件时,此元件会自动被放置于名为 Symbols 的页面(Page)中。在主元件上做调整时,这个改变会针对所有使用此元件的画板和页面生效(在同一文档中)。另外,每一个元件可被分别订制。下面的视频展示了如何使用元件来节省工作时间和改进工作流程的方法。

元件是单独的图层,这个图层与主元件内容同步。在图层列表中,元件以紫色同步按钮图标表示。元件最常见的使用场景诸如按钮、表格等可复用内容。

创建元件

要创建一个元件,首先选中一个组、画板或一些图层,再点击工具栏上的创建元件(Create Symbol)按钮,或执行菜单命令图层(Layer)> 创建元件(Create Symbol)。

此时会弹出提示框,输入元件名称及选择是否把此元件放置在元件(Symbols)页面中。如果不选择此选项,主元件将会放置于当前页面中,同时一个实例会放置于此位置。在创建元件之后,你会看到此内容已经被扁平化为图层列表中的一个单独图层。

你可执行菜单命令插入(Insert)> 元件(Symbol),在画布上插入新的元件实例。同理,你也可拷贝、粘贴或剪切现有元件,Sketch 会自动同步这些元件。

要创建一个嵌套元件(Nested Symbols)很简单,拖动一个实例到主元件即可。

要让实例从元件中分离,在此元件上点击鼠标右键,在弹出的菜单中选择脱离元件(Detach from Symbol),这个实例即从元件变为普通图层。

编辑元件

有两种编辑元件方法,可通过进入主元件来编辑它,或通过编辑独立的、使用重写(Overrides)的实例。

编辑主元件

要编辑一个元件内容,可双击进入这个元件,直接进入主元件内部进行编辑。如果你将主元件放在元件(Symbols)页,你还可通过手工方式进入该页面,在这个画板中编辑它。

在主元件中的任何修改都会实时反馈在文档中,在完成需要的修改后,点击工作区左上角的返回实例(Return to Instance)即可返回主界面查看效果。

当编辑比较复杂、带大量重复内容的文档时,元件可节省大量时间。例如,当元件中包含文本图层,你可在主元件直接修改文本图层的属性,或选中此元件后,使用重写(Overrides)功能直接在属性检查器分别设置元件中内容。在下面的内容里会讲解重写(Overrides)的使用方法。

重写

当选中一个包含文本或位图图层的元件实例,在属性检查器中会发现重写(Override)选项。在重写选项中可重写元件中的文本图层、位图和位图填充图层,还有实例的不透明度和叠加选项。重写选项允许独立的更新每个元件内容。如果此元件没有重写选项,将会在属性检查器中看到默认的主元件属性选项,查看下面的视频以快速了解此功能。

0:00
/ 5:22
重写位图内容,需要在主元件中放入位图图层,或位图填充图层。选中实例后在属性检查器中点击选择位图(Choose Image)或直接从 Sketch 之外拖拽位图到此区域即可。当需要保持设计样式的一致,但里边内容不同时,这是一种非常好的修改方式。

重写文本图层时,它的长度可能会发生变化。因此,Sketch 会自动改变图层的高度,及跟随文本图层后其它元素的位置,不管输入任何文字,都可很好的适配界面内容。

组织元件

当设计文档足够复杂时,把主元件放置在元件页面是明智的做法,这样非常便于统一管理。

另外,当执行菜单命令插入(Insert)> 元件(Symbol)时,会发现下方的二级菜单以字母顺序列出了所有在文档中使用的元件内容。

当元件中存在 / 符号时,Sketch 将把它们作为组独立对待。例如,两个元件分别命名为“Button / Normal”和“Button / Pressed ”,此时这两个元件将被归于菜单的“Button”分组中。

交换元件

你也可在属性检查器中的下拉菜单交换元件。在下面的这个例子中,会看到一个点击态按钮与一个常态按钮,它们可以通过属性检查器中的元件菜单彼此交换,然后你就可以使用重写(Override)操作来定义它的内容。

嵌套元件

可通过嵌套元件充分发挥元件的作用。

要创建嵌套元件,只需拖拽一个已存在的实例到另一个主元件中即可。任何主元件的更新都会及时生效,作用于整个文档,不管它是否在某一元件内部。同样,拖拽一个已有的实例到一个主元件中,然后通过工具栏插入它们,你也可选择多个不同元件中的实例,然后点击工具栏上的创建元件(Create Symbol)来创建新元件。

元件嵌套的层数没有任何限制,但值得注意的是,不能将一个元件置于它自己内部。

可再次查看下面视频,回顾嵌套元件部分:

样式

属性检查器会显示出选中图层的所有样式选项。

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

文本输入框

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

上下箭头

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

数学运算

文本输入框另一个很棒的功能就是可运算,进行加、减、乘、除操作,以加快设计工作流程。一些情况下还可输入百分比来调整形状,如下图所示。例如,选中一个图层,然后执行(+、-、*、/)和(%)操作。在半径调节框中,可以直接输入百分号。当然,你也可以分别指定每个圆角的值,使用“/”分隔即可(比如 40/0/40/0)。

如要调节某个存在于组中的元素,也可以对这个元素的宽高指定百分比数值。(例如,这个组的宽度是 960px,指定组内一元素的宽为 10%,则实际宽度为 96px)。

模糊值

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

返回画布

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

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

拖放

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

移除无用样式

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

为了让删除无用样式更方便,Sketch 增添了一个小垃圾桶图标,一旦属性检查器中出现无用的样式,这个垃圾桶就会显示出来,点击即可删除所有的无用样式。

复制粘贴样式

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

对齐

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

左边的对齐按钮则是让图层垂直或水平均匀分布,比如说水平分布,最左和最右的两个图层的 X 轴保持不变,其它图层则会均匀的分布在它们中间。更详细了解使用方式,可查看移动图层章节

图层不透明度快捷键

同样不是严格属于属性检查器相关的功能,但却非常实用。在选中图层时,可按 1-9 的数字快捷键来快速将图层不透明度从 10% 调至 90%,按下 0 则会表示图层完全不透明。

填充

Sketch 可为图层填充纯色、渐变、图片(或图案)以及杂色。如果你想知道如何编辑现有的渐变,可阅读渐变章节。

填充选项从左至右依次是:

・纯色填充

・线性渐变

・径向渐变

・环形渐变

・图案填充

・杂色填充

添加填充

你可点击属性检查器中 Fills 字样右侧的 + 按钮来添加新的填充,每一个图层都可有多个填充,这些填充会按照从下至上的顺序叠加,每一层填充也都有自己可调节的叠加模式和不透明度。

值得注意的是,如果最顶层的填充是完全不透明的,将无法看到在其下面的填充,但 Sketch 仍将渲染它们。

图案填充

你可在预设中选择图案来进行图案填充,或拖动图片到图片区域来完成填充,图案填充有两种展示方式:平铺(Tile)或者扩展(Fill)。

・平铺:图像被不断重复直至铺满整个区域

・扩展:图像被放大直至占满整个区域

杂色填充

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

Sketch 3 现包含了黑色、白色和彩色三种不同的杂色图片,你还可分别给它们设定叠加模式。

边框

除了文本图层之外的所有图层都可有多个边框,你也可给边框设定不同的粗细、颜色及叠加模式。

边框选项从左至右分别是:

・纯色填充

・线性渐变

・径向渐变

・环形渐变

边框位置

边框可以应用于路径的中间、内部或外部,对于一个封闭的图形,那么内边框会被绘制在图形的轮廓内,外边框则会在轮廓以外。

居中边框则会刚好在轮廓线中央,开放图形只能运用居中边框,例如一条直线只能运用居中边框,毕竟直线根本就不存在“内外”的概念。

纯色或渐变

边框可运用纯色或渐变来填充,你可在每个边框的取色器中修改,选择使用纯色填充或另外三种渐变填充方式。

编辑一个边框渐变和编辑填充渐变的操作方法一样。可在渐变章节了解更多。

虚线

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

例如,标示 4-2-4-2 的虚线效果:绘制出 4 像素线条,留出 2 像素间距,接着再画 4 像素线条,再留出 2 像素间距,并以此循环。一个 5-4-3-2 的虚线效果:则绘制出 5 像素线条,留出 4 像素间距,接着在绘制 3 像素线条,留出 2 像素间距,并以此循环。

阴影

外阴影和内阴影有着相同的参数设置和工作原理,唯一的区别是阴影一个在图形外部一个在图形内部。

每个阴影都有自己的叠加模式,可在颜色弹窗中进行调整。

扩散

每个阴影都可设置扩散值,它可增强图形的阴影效果。

需要注意的是,当模糊半径被设置为 0 的时候,文本图层的内阴影才是最佳效果。扩散并不适用于文本图层。

模糊

Sketch 为你提供了四种不同的模糊方式,你可在属性检查器的模糊选项中进行调节:

・高斯模糊(Gaussian Blur):均匀的模糊图层

・动态模糊(Motion Blur):向一个方向模糊,造成一种运动的错觉

・缩放模糊(Zoom Blur):由一个特定的点向外模糊

・背景模糊(Background Blur):将图层下边层的内容模糊

背景模糊

其它几种模糊方式大家都很容易理解,背景模糊则可能需要一点解释。

背景模糊是在苹果发布这是 iOS 7 及后续 iOS 和 Mac OS 系统常用的特性。你需要确认有一个半透明的图层在表面应用了背景模糊,这样下层的内容才会出现模糊效果。

性能

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

颜色

Sketch 里直接将取色器放在了属性检查器当中。你可选中一个图形,进入填充或者边框选择面板,再点击色彩按钮选择需要的颜色。

此时,通用检查器将会滑到一边,弹出一个新的色彩面板。色彩面板会根据你要编辑的颜色类型(阴影颜色、填充颜色、纯色还是渐变色)显示不同的选项,但是你会发现色彩面板很大空间都被取色器占据着。

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

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

HSB 色彩模式

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

常用颜色

取色器下面你会看见一排预设的颜色,这是 Sketch 自动抓取的颜色,它会自动分析你的文档,提取用到最多的颜色呈现在这里。

这样你就能方便的重复使用颜色,而无需手动的给每个颜色添加预设了。

渐变

要为图形添加渐变填充,可直接选中图形,点击填充按钮,此时色彩工具就会显示在属性检查器中。想了解色彩工具的使用方式,可先阅读颜色工具章节。在色彩面板的底部,你可选择填充纯色、渐变、图案还是杂色。

可选择线性渐变、径向渐变或是环形渐变,它们在 Sketch 中的工作原理都大致相同。

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

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

如果要移除色彩滑块,直接在渐变线上选中它,再使用键盘上 delete 键,或是 backspace 键即可。

径向渐变

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

环形渐变

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

渐变条

Sketch 3 里添加了一个新的传统样子的渐变条,你可看见渐变的每一个节点,以及从左至右的变化。

快捷键

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

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

边框渐变

Sketch 同样可对描边进行渐变渲染,使用方法和填充渐变类似,只需点击边框面板里的色彩按钮,再重复上文操作即可。

共享样式

共享样式在属性检查器一般图层选项和样式选项中间的白色区域里。

你可以通过选中某个形状,然后在鼠标右键的选项中选择创建新共享样式(Create New Shared Style)来创建它。样式的创建数量是没有限制的,通过共享样式列表面板,可以选择你先要的共享样式。

共享文本和图层样式使用手动同步而非自动同步方式,通过这种方式你可以更好的控制文档。通过按住键盘上的 option  键和 Sketch 中的恢复(Revert)按钮,可将样式恢复到同步之前的状态。

编组

除了像图形、位图、文本这样的基本图层外,Sketch 还有一些特殊图层类型,它们对图层的整理和导出等工作上非常有用。

你可对多个图层进行编组,并让它们以一个“层”的样子展现。你可以移动和改变组的大小,同时也可进入组修改每一个图层的属性。

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

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

编辑组

当一个组建立后,你可双击它去查看和编辑里面的内容,比如在组内移动单个图层或者直接新建图层。如果你选中了组外的任一对象,Sketch 会自动跳出组以便你选择文档中的其它图层。

此时如果你再选择某一组中的一个图层,Sketch 会自动帮你选中整个组。这和我们创作图形时的子路径是一样的。

穿透选择

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

如果你只想将编组工具用于组织图层列表,而不想每次都先双击,你可勾选组的属性检查器中直接选择(Click-through when selecting)选项。你也可在首选项中打开此选项,此时所有新建的组(之前建立的组无效)均可以使用穿透选择功能。

画板

Sketch 里的画板是在无限的画布中建立一块固定大小的画板,但这些画板完全是可选择的。

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

画板会有一点像一个特殊的,它们永远是开放的状态,你不用双击它才能选中内部元素。画板的大小也不会随着内容增多而自动扩展,如果你已给画板设定了一个固定大小,那么这个尺寸一直保留,直到你再次更改它。

添加画板

要添加新的画板,选择工具栏中的插入(Insert)> 画板(Artboard)或执行菜单命令,当然你也可使用快捷键 A 来创建它们。属性检查器预置了一些常用的画板尺寸,例如 iOS 设备尺寸,常用网页设计宽度,及图标尺寸。

点击这些预置内容即可将设定好的画板添加到画布中,也可选择预置画板组的标题,将所有组内画板都置入画布,你也可在检查器底部点击 + 按钮添加自己的预置画板。

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

移动画板

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

你可直接在图层列表中选中画板,然后在画布上拖拽,或是在属性检查器中更改它的位置和大小。还有一种方式,你也可直接在画布上点击拖拽某一画板左上角的标题,来移动它。

改变画板尺寸

画板可根据内部元素的多少来改变尺寸。只需要选中画板,然后在属性检查器中点击按钮适合大小(Resize to Fit)即可。这种方式尤其适合在手机上预览时需要精确高度来滚动的情况。

网格和标尺

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

近一步了解标尺、参考线和网格相关知识。

模板

另一个了解画板功能的例子就是官方内置在 Sketch 中的模板了,执行菜单命令文件(File)> 从模板新建(New from Template),如果你选择了 “Mac App Icon” 模板,就会看见官方为每种常用尺寸都创建好了画板。

页面

一个 Sketch 文档内可以包含多个页面(Page)。与其一个页面一个文档,不如将多个相关页面放在一个 sketch 文档中,这样的好处很多。

比如说元件共享样式将在页面中通用,但不能跨文档使用。

另一个多页面的好处就是,虽然每个页面都可轻松编辑 12 个画板,但是取决于不同的内容、大小和数量,你会发现把过多的画板分布在多个页面中会高效很多。

画布

Sketch 里的画布区域是无限大的。画布预览模式有两种,你可以用矢量(分辨率无关)模式来查看画布,也可以打开像素模式来查看每一个像素导出后的样子。可在像素缩放章节查看到更多内容

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

定位

画布中的定位是非常方便的,你可直接用鼠标滚轮滑动或 Macbook 的触摸板来控制方向。你还可按住空格键,然后按住鼠标左键来使用抓手工具移动画布。

最后,在没有任何对象被选中的时候,简单的使用键盘方向键也可以移动画布。

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

缩放

除此之外,你会在 Sketch 的视图(View) 菜单中找到很多用于缩放特定内容的快捷键。按住 command  键并滚动鼠标滚轮即可。

你也可以使用键盘 Z 键来快速放大某一特定区域,点击画布任一点拖拽出矩形区域即可。要回到上一个缩放状态,请使用 option  + Z + 点击。

查看更多方便的快捷键

command  + 2 缩放指定图层

command  + 3 将选中图层置于画布中央

像素缩放

在 Sketch 里,你可用来你两种方式来查看你的作品,具体用哪一种则取决于你的创作了。

这两种模式执行菜单命令视图(View)> 画布(Canvas)当中切换,也可用快捷键 control  + P 来切换,当然,将这个按钮放在工具栏上也是可以的。值得注意的是,当你在 100% 的尺寸(实际尺寸)下,这个两个模式是没有任何区别的,只有当你放大图片时,才会显示。

如果你很在意作品中每一个像素看起来的样子,那么像素模式就非常好的选择。你所看到的基本相当于先把作品导出为位图,再在看图应用中放大查看。

如果你不太在意上面这些那么矢量模式会更适合你,就算你放大,所有的图形也依然会有顺滑的曲线。

值得注意的是,有些像模糊或者投影类的效果,会强制将画布的一部分以像素模式显示,因为模糊类的效果本身就是一个基于像素的效果。

显示像素网格

像素网格能让你在低对比度,或者无法用肉眼分辨出的情况下区分出那些变模糊的像素。执行菜单命令视图(View)> 画布(Canvas)> 显示像素网格(Show Pixels Grid)即可打开(快捷键 control  + X)。结合像素显示模式,没有精确对齐像素网格的内容在缩放到高于 600% 的情况下都可以被发现。

近一步了解如何精确对齐像素的内容,可阅读像素精度章节。

标尺、参考线、网格

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

参考线

智能参考线在默认情况下是被打开的,可执行菜单命令视图(View)> 画布(Canvas)> 显示智能参考线(Show Smart Guide)切换打开和关闭状态。当你在调节一个图层的大小或移动位置时,Sketch 会自动帮你把这个图层与其它图层对齐。如果 Sketch 将某一图层自动与另一图层对齐,你会看见一条红线,两个图层便依据这条红线得知对齐的是什么位置。

当对齐网格选项被打开时,当你移动任何内容时,它们都将自动对齐到网格,此时对齐智能参考线功能将失效。

标尺

Sketch 中的标尺在默认情况下是被隐藏起来的,要激活它,执行菜单命令视图(View) > 画布(Canvas)> 显示标尺(Show Rulers)或使用快捷键 control  + R。正如之前说的,Sketch 里的画布是无限大的,所以标尺也不是固定的。你可任意拖动标尺以便定义自己的坐标轴:

如果你需要重新设置标尺原点,只需双击标尺交叉区域:

你可在标尺上任一处双击鼠标,便可添加横向或者纵向参考线,只要标尺是被显示的,这些参考线也会一直被显示。想移动标尺,只需拖拽标尺区域。想要移动单个参考线,你必须在标尺中选中参考线再拖拽。想要移除手动参考线,则只需把参考线拖到两条参考线的交叉区域,噗的一声便会消失:

鼠标右键点击标尺区域,可在关联的菜单中设置不同的标尺选项,当然,也可通过此选项移除所有横向或者纵向参考线。

网格

Sketch 支持两种不同的网格:常规网格和布局网格,你可根据所进行的创作来选择适合的网格,这两者的区别也非常显而易见:

常规网格

常规网格是典型的方形布局网格,它附带颜色块的大小,线的粗细等等这些属性。默认的常规网格是由长度为 20px 的小方块组成的,每 10 个小方块出现一条粗线条。

执行菜单命令视图(View)> 画布(Canvas)> 显示网格(Show Grid)来打开网格,在这里你还会看见网格设置(Grid Settings)的选项。

布局网格

布局网格允许你定义列和行,这种布局非常适合做网页设计。

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

Sketch 会尽力将网格放在画板的合适位置,不过一旦画板大小发生改变,网格内容可能会错位,这时你只需要按下 enter 键就可让网格对齐到画布中心。

你还可同时编辑多个画板的布局网格。

网格制作工具

如果你已经选择了某个层,并想分配均匀它们,你可执行菜单命令布局(Arrange)> 制作网格(Make Grid)。在这里,你可指定行或者列数,间距的值,来创建一个属于你的理想网格布局。

你也可使用这种方式来复制图层或者丢失的表格内容。

测量

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

距离

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

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

尺寸

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

导出

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

Sketch 3 极大改进了导出文件的流程。了解更多导出图层

当你点击工具栏中的导出按钮时,Sketch 会为你列出画布、画板、切片中所有可导出的图层。你可以从中导出部分或全部的图层。值得注意的是,如果你事先选好了图层再点击导出按钮,那么 Sketch 会默认的只帮你导出那些图层。

导出图层

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

图层 VS 切片

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

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

下面这段视频中,你可以看到的切片导出和图层导出之间的差异,以及更多关于 Sketch 导出功能的概述。

导出图层

如果你只想导出一个图层,你可以直接在检查器中实现。先选中图层或组,然后单击检查器底端的 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:能很好的保留图形和文本的导出,但是并不支持阴影使用这种格式主要可以让该文件在其他应用中导入。

不支持导出的文件格式

・PSD:Photoshop 文件是封闭且不支持导出的,如果你有 Adobe CC 的套件,那么你可以将 PS 文件导出为 .PDF,并导入 Illustrator。

・AI:Sketch目前不支持.AI文件,但是 Illustrator 可以打开从 Sketch 里导出的 .PDF 或 .SVG 文件。

画板

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

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

CSS 属性

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

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

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

打印

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

值得注意的是,Sketch 已经为你设置好了默认的 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 无法正确导入,可邮件联系 mail@bohemiancoding.com,他们会尝试在下次更新解决这个问题。

不支持导入的文件格式

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

・PSD:Sketch 只能以位图形式打开 .psd 文件。

・AI:Sketch 只能以位图形式打开 .ai 文件。

首选项

Sketch 的偏好设置分为通用、画布和图层设置。

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

exportCompactSVG

此命令告诉 Sketch 导出紧凑型的 SVG。通常情况下,Sketch 导出 SVG 的时候会自动对其添加一些数据,让它们更容易再次导入 Sketch。如果你确定你不会再次导入此文件,可以通过终端(Terminal)添加此命令以禁止 Sketch 自动为 SVG 添加数据:

defaults write com.bohemiancoding.sketch3 exportCompactSVG -bool yes

如果你需要禁用此功能,运行:

defaults write com.bohemiancoding.sketch3 exportCompactSVG -bool no

svgExportSkipAssignIdToLayerName

当此设置启用时, 图片导出 SVG 格式时,Sketch 就不会使用图层 ID 作为名称:

defaults write com.bohemiancoding.sketch3 svgExportSkipAssignIdToLayerName -bool yes

如果你需要禁用此功能,运行:

defaults write com.bohemiancoding.sketch3 svgExportSkipAssignIdToLayerName -bool no

通用设置

打开软件时

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

撤销

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

字体渲染

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

矢量导入

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

Sketch Mirror

让您选择 Mirror 是随时显示当前选中的画板,还是独立运行。

画布

Retina

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  + L:触发自动参考线

・control  + G:触发网格

space:抓手工具

return:编辑所选图层

・command  + 3:滚动至所选图层

・command  + 2:放大所选图层

Z:放大工具。按住 Z 键,用鼠标单击拖拽出一个区域放大。缩小则使用 alt + Z 再用鼠标单击。

Esc:退出当前工具,取消选择所有图层或返回检查器。

Tab / shift  + tab:在当前群组中切换不同图层。

添加图层

R:添加一个矩形

O:添加一个椭圆

L:添加一条直线

U:添加一个圆角矩形

T:添加一个文本图层

V:添加矢量图层

P:铅笔工具

移动图层 & 更改尺寸

・alt  + 拖拽鼠标:复制一个图层

・alt  + 鼠标悬停:显示两个图层之间的距离

・alt  + 更改图形尺寸:两边对称的更改图形尺寸

・shift  + 更改图形尺寸:等比更改图形大小

以上列出的是一些隐藏的快捷键,但是当然啦,还有更多的快捷键已经显示在菜单里了。熟练的使用这些快捷键真的能大大加快您的工作速度。 如果您发现某一功能用另一个快捷键更方便的话,请一定让我们知道。


我来说两句!

发表评论:

◎欢迎参与讨论,请在这儿发表您的观点。

«   2019年7月   »
1234567
891011121314
15161718192021
22232425262728
293031
about关于我

root.wang&老王SEO

邮箱:8#ie3.cn

微博:weibo.com/mldh

lofter

PHP攻城师

SEO攻城师

python爱好者

数据挖掘爱好者

智能硬件爱好者

摄影爱好者

网站分类
搜索
文章归档
友情链接