sketch动效设计教程（一款轻量易用的矢量设计UI工具）

Sketch的界面设计非常简洁。工具箱包含了最重要的操作。左侧管理图层，右侧编辑图层，中间就是创作的大画布。

画布

Sketch 的画布尺寸是无限的，可以随意发挥。可以在画布上直接创作，也可以新建固定尺寸的画板创作，画板数不受限制。

编辑器

对齐、坐标、大小、透明度、对称、角度、圆角

position：坐标

size：大小

trasform：角度

flip：对称

radius：圆角

样式属性

边框与填充你可以根据需要勾选，可以控制它们的透明度与叠加模式，也可以分别控制它们的颜色、透明度与叠加模式等。

带“ ”的都可以重复多次添加（叠加）

opacity：透明度

blending：叠加模式

fills：填充

borders：描边

position：位置（描边）

shadows：内阴影

inner shadows：外阴影

gaussian blur：高斯模糊

图层列表

多页面操作

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

画板

蒙版

布尔运算

共享组件

工具栏

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

你还可以根据自己的习惯在自定义，右击工具栏，进入Customize toolbar…来添加工具和快捷键。

图层

图层是 Sketch 中最基本的构成单位。在 Sketch 里每个对象都有自己的图层。

添加图层

添加图层最简单的方式便是直接从工具栏选择一个标准图形，或使用快捷键。

图层：单击选择，双击编辑

同时选择多个图层

按住 Shift 键选择多个图层。反之按住 Shift 键去点击一个已经选中的图层，则会取消选择。

快速选择组中的图层

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

当然，一次直接选中某一具体图层，按住 command 键，来直接选择组里的图层。

同时按住 shift 键，则能选择多个图层。

移动图层

按住 alt 键拖动图层拷贝图层，也可以command c/v。command D重复拷贝。

键盘

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

缩放

改变一个图层的大小时，它的式样元素并不会随之变大变小：一个 24x10的图形上 4px的描边在这个图形被拉伸至 240x240的时候，将仍保持 4px的描边。想同时改变的话那就需要使用编辑菜单当中的缩放工具。

图层透明度快捷键

选中一个图层，按 1-9 的数字快捷键来快速将图层透明度从 10% 调至 90%，按下0则会将透明度调至100%。

填充

Sketch 里为图形填充纯色、渐变、图片（或图案）以及杂色。

填充选项从左至右分别是：

・纯色

・线性渐变

・径向渐变

・环形渐变

・图案填充

・杂色填充

描边

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

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

・纯色填充

・线性渐变

・径向渐变

・环形渐变

描边属性设置

阴影

模糊

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

・高斯模糊（Gaussian Blur）：能让图层均匀的模糊

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

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

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

编组

command G

添加画板

添加新画板，添加 > 画板 （Insert > Artboard）， command D 的快捷键来重复添加画板。

画布

放大

按住 command 键并滚动鼠标滚轮来放大查看。

按住Z 键 鼠标框选来快速放大某一特定区域（option Z缩小）。

距离

按住option 键，Sketch会显示出已选中的图层和的鼠标现在所悬浮的图层之间的距离。

导出

文件 > 导出… (File > Export…) 或者直接单击工具栏中的导出按钮。

图层 VS 切片

选中画板或者切图，单击检查器底端的 Make Exportable，设置前缀，选择图片格式。

添加切片

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

命名

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

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

支持导出的文件格式

JPG、PNG、TIFF、PDF、EPS、SVG:

不支持导出的文件格式

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

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

导入

支持导入的文件格式

JPG、PNG、TIFF、SVG（Sketch 支持导入 SVG 文件，但是可能并不是100%,目前 SVG 有一些概念我们还不支持）、PDF 、 EPS（Sketch 支持导入 PDF 和 EPS 文件，但是和 SVG 一样，有一些概念无法支持，文件内容可能无法完整显示）

不支持导入的文件格式

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

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

快捷键

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 即可，反之亦然。

defaults write com.bohemiancoding.sketch svgExportSkipAssignIdToLayerName -bool YES

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

,