Sketch 是一款矢量绘图工具,因此特别适合进行网页、图标、以及界面设计。除了矢量编辑功能外,也添加了一些基本的位图工具,例如模糊和色彩校正等等。
一句话,Sketch 是为图标设计和界面设计而生的。
界面非常简洁,顶层为菜单,往下为常用工具栏,左侧为图层面板,包括页面(Page)、画板(Artboard)、分组(Group)、组件符号(Symbols)导航,中间为画布和画板,最右侧为属性面板。
菜单包括了所有功能。
- Sketch - 通用设置
- File - 文件操作,打开、导出等
- Edit - 编辑
- Insert - 插入
- Text - 文本操作
- Prototyping - 原型
- Arrange - 排列
- Plugins - 插件管理
- View - 视图
- Window - 窗口
- Help - 帮助
图标列表可以操作多个页面。
一个页面有无线画布,可以创建多个画板,画板中可以存在多个图层,图层可以聚合分组。
图层是 Sketch 中最基本的构成单位。不同于其他将图层和对象混为一谈的应用,在 Sketch 里每个对象都有自己的图层。所以在这个手册中,我们所说的“图层”和“对象”其实是一样的意思,这两个词是可以相互替换的。
另外,如果某个元素被创建为 Symbol 之后,所有页面可以共享该 Symbol。
画布是无限延伸的,如果你想在画布中设置一个固定的画框,你只需新建一个或多个新的画板(Artboard)。举个例子,设计移动应用界面时,很多设计师会为应用的每一个屏都创建一个画板,然后排列开来以便查看。
你可以用无限精准的分辨率无关模式来查看画布,或者打开像素模式来查看每一个像素导出成JPG或者PNG文件后的样子。值得注意的是,有些效果——比如模糊——会自动将画布的一部分以像素模式显示,因为模糊本身就是一个基于像素的效果。
只有存在画板时,才能进行预览 Preview。
工具栏显示了部分常用工具,可以右键选择 'Customize Toolbar' 进行自定义,查看所有可用的工具,并选择自己最常用的添加到工具栏。
另外,工具有三种显示模式:只显示图标、只显示文字、图标文字一起显示。
Space 工具可以用来给工具栏添加空格,便于工具栏分组。
检查器被划分为几个区域。
- 通用属性:图层所在位置、透明度、混合模式、矩形和多边形的不同点模式等。
- 样式属性:填充、边框、阴影、模糊、反射等。
在编辑图形的时候,检查器会显示出四种不用的点模式:
- 直线角(Straight):当你刚刚点击画布的时候,会添加一个直角,也就是说没有任何锚点,你所得到的便是一条直线。
- 镜像(Mirrored):锚点会镜像对应。两个锚点将会与主点距离相同并且正好相互对立。当主点并非直角时,镜像便是默认的点模式。
- 不对称(Asymmetric):两个锚点到主点之间的距离是独立的,但他们依然相互对应。
- 断开连接 (Disconnected):锚点之间完全独立,互不影响。
一个路径可以是封闭的也可以是开放的。封闭图形的最后一条边会与第一条相连接,开放图形则会在起点和终点间留出一个间隔。
绘制矢量图形时,你可以按住 shift 键再画之后的点,Sketch会自动帮你对齐到前一点的45度角方向,这在你绘制直线时会非常方便。如果你是在两点之间添加新的锚点时按住 shift 键,你便会得到两点间的锚点。
布尔运算可以将简单图形组合成复杂图形。
- 合并形状 (Union):合并的结果是会得到两个矢量区域的总和。
- 减去顶层形状 (Subtract):这一项的结果是顶层矢量的区域会从下一层的图形上移去。
- 与形状区域相交 (Intersect):与形状区域相交的结果是会保留原图形重叠的部分。
- 排除重叠形状 (Difference):排除重叠形状的结果是只保留原图形不重叠的部分,它是“与形状区域相交”这一运算的反向。
图层列表的顺序是从下至上的,布尔运算的工作原理也是一样,即你所选的布尔运算将这一层和下一层的图形相组合,他们的结果再与另一层相组合。
当你使用扁平化功能( Flattening),Sketch 会试着将一个图形里的多个子路径呈现为一个路径——也就是将层级结构变得更扁平。但是有些图形是无法扁平为一个路径的,比如说一个环状图形,将只能被呈现为两个路径:一个是外圈路径,一个是内圈路径。
也许在你之前使用的绘图应用中,你每次添加布尔运算后到要让图层扁平一次,但在 Sketch 当中大可不必这么做,你可以尽情添加无数曾布尔运算,而无需使用扁平命令。
Sketch里的蒙版可以让你有选择性的显示出图层的一部分。比如说在一个图片上圆形蒙版,那么这张图片就只会显示出圆形内部的内容。
剪刀工具可以用来剪去矢量图形的线条。
这个工具能复制选中的图形,并按照一个特定的中心点旋转。例如绘制一朵花,你可以先画出一片花瓣,然后复制12片花瓣并旋转,即可得到一朵花的图案。
Sketch 使用操作系统原生的字体渲染,因此文本看起来都会很棒。
Sketch支持文本渲染路径。我们只需要两个东西来实现这个效果:一个矢量图形和一个文本图层。
当你进入顶端的 编辑菜单 > 文本路径 (Edit > Text on Path),Sketch会帮你把文本图层贴合的放在它下一层的矢量图形上面。值得注意的是,两者的顺序必须是矢量图形在文本图层的下面,才能得到这样的效果。
符号是 Sketch 3 里一个重要的新功能,它让你方便的在多个页面和画板中重复运用某组内容。但他们保存在某一文件中,并不能在不同文件中共享。
符号本身其实就是一种特殊的组,在图层列表中也是以组的形式出现,但是不同于普通的组的蓝色图标,符号会有一个紫色的文件夹图标。
- A: 添加画板(Artboard)
- R: 添加矩形(Rectangle),
- O: 添加椭圆(Oval)
- U: 添加圆角矩形(Rounded Rectangle)
- L: 添加直线(Line)
- T: 添加文本(Text)
- V: 添加矢量(Vector)
- P: 手动绘图(Pencil)
按住 shift 可以绘制等边形状,按住 option 键来从中心绘制图形,而不是从左上角绘制。
单击来选中图层,这时选择框的四角和边框上会出现8个小手柄,值得注意的是,万一你没看见这些小手柄,那么有可能是你不小心将手柄隐藏起来了,你可以进入视图
菜单栏,打开显示选区手柄
(View > Show Selection Handles)。
选择多个图层,可以:
- 画板进行框选
- 也可以在左侧图层面板,按住 shift 多选
- 如果不想连续,可以按住 command 进行单点选择
右击鼠标,从菜单中选择 “选择图层”(Pick Layer),可以方便选择某个元素的底下的图层。
编组能方便的管理内容,有时还能预防无意的编辑操作。单击组,整个组会被视为一个图层,双击才会进入组内选择具体图形。
可以按住 command 键,来直接选择埋在组里的图层。
按住 Shift 键来拖动,则会让图层严格按照垂直或者水平方向移动。
当你移动某一图层(或者修改尺寸)时,Sketch会自动帮你将它与相邻的图层对齐。如果没出现自动对齐,那可能是参考线功能被不小心关闭了,你可以选择 View > Canvas > Show Layer Highlight
打开。
可以右键菜单复制,更快的方式是按住 alt 键,移动某个对象,同 Photoshop 拷贝操作。
另外,我们可以右键菜单复制某个图层的 CSS 属性,然后粘贴到其他图层上去。
双击某个图层(对象)进入编辑模式,按 ESC
或者回车退出编辑。