sketch动效设计教程(一款轻量易用的矢量设计UI工具)(1)

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

画布

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

编辑器

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

position:坐标

size:大小

trasform:角度

flip:对称

radius:圆角

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(2)

样式属性

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

带“ ”的都可以重复多次添加(叠加)

opacity:透明度

blending:叠加模式

fills:填充

borders:描边

position:位置(描边)

shadows:内阴影

inner shadows:外阴影

gaussian blur:高斯模糊

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(3)

图层列表

多页面操作

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

画板

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(4)

蒙版

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(5)

布尔运算

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(6)

共享组件

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(7)

工具栏

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(8)

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

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

图层

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

添加图层

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

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(9)

图层:单击选择,双击编辑

同时选择多个图层

按住 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动效设计教程(一款轻量易用的矢量设计UI工具)(10)

描边

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

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

・纯色填充

・线性渐变

・径向渐变

・环形渐变

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(11)

描边属性设置

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(12)

阴影

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(13)

模糊

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(14)

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

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

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

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

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

编组

command G

添加画板

添加新画板,添加 > 画板 (Insert > Artboard), command D 的快捷键来重复添加画板。

画布

放大

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

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

距离

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

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(15)

导出

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

图层 VS 切片

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(16)

sketch动效设计教程(一款轻量易用的矢量设计UI工具)(17)

选中画板或者切图,单击检查器底端的 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 作为名称。

,