Sketch 中文手册 • 摘改

注:本文全部内容摘录整理自《Sketch 中文手册》,感谢 Sketch 中文网 以及网站作者 匡雪婷

1. 基本操作:

  • 按住 shift 键来绘制等边图形;按住 option 键来从中心绘制图形,而不是从左上角绘制。
  • 按住空格键,改变图形的起始点。
  • 拖拽一个范围,同时按住 option 键,则只会选中完全被包括在所画范围内的图层。
  • 右击鼠标,从菜单中选择「选择图层」(Pick Layer),便会显示出鼠标底下的所有图层列表。
  • 按住 option 键,Sketch 会选中第二层图层,而不是最上层的。
  • 按住 Command 键,来直接选择埋在组里的图层。
  • 按住 Shift 键来拖动,则会让图层严格按照垂直或者水平方向移动。
  • ⌘→ 会将图层宽度增加 1px,⌘← 则会将宽度减少 1px。同样的,⌘↓ 和 ⌘↑ 则分别将长度增加和减少 1px。如果你同时按住 shift 键,每一次更改的数值将会变成 10px。
  • 一个 10x10 的图形上 1px 的描边在这个图形被拉伸至 50x50 的时候,将仍保持 1px 的描边。想要更改图层大小的同时一起更改式样,那就使用编辑菜单当中的缩放工具吧。
  • 单击图层外任一点,来随时退出图层的编辑模式。

2. 路径和绘图:

  • 点是组成每一个图形的基本单位,他们会被直线或曲线连接成一条路径。
  • 多个路径则是通过布尔运算组合在一起的。
  • 点模式:
    • 直线角(Straight):当你刚刚点击画布的时候,会添加一个直角,也就是说没有任何锚点,你所得到的便是一条直线。
    • 镜像(Mirrored):锚点会镜像对应。两个锚点将会与主点距离相同并且正好相互对立。当主点并非直角时,镜像便是默认的点模式。
    • 不对称(Asymmetric):两个锚点到主点之间的距离是独立的,但他们依然相互对应。
    • 断开连接(Disconnected):锚点之间完全独立,互不影响。
  • 按住 shift 键再画之后的点,Sketch 会自动帮你对齐到前一点的 45 度角方向,这在你绘制直线时会非常方便。如果你是在两点之间添加新的锚点时按住 shift 键,你便会得到两点间的锚点。
  • 按住 command 键,单击两点间的线条,Sketch 则会帮你在线条的正中间添加锚点。
  • 布尔运算:
    • 合并形状(Union):合并的结果是会得到两个矢量区域的总和。
    • 减去顶层形状(Subtract):这一项的结果是顶层矢量的区域会从下一层的图形上移去。
    • 与形状区域相交(Intersect):与形状区域相交的结果是会保留原图形重叠的部分。
    • 排除重叠形状(Difference):排除重叠形状的结果是只保留原图形不重叠的部分,它是「与形状区域相交」这一运算的反向。
  • 你所选的布尔运算将这一层和下一层的图形相组合,他们的结果再与另一层相组合。
  • 如果你只想往一个方向拉伸,按住 Command 键再拖动鼠标就好。

3. 蒙版和文字:

  • 如果你不想接下来所有的图层都被蒙版剪切,那么你可以将蒙版和想要被剪切的图层单独编组,来限制蒙版的使用情景。
  • 如果无法编组:
    1. 选中一个你想从剪切蒙版中释放出来的图层。
    2. 编辑 > 忽略底层蒙版(Edit > Ignore Underlying Mask)。
    3. 这一层图层和它以上的所有图层就都不会被蒙版剪切了。
    4. 调整图层顺序的时候则需要格外注意,个别图层可能会意外的被蒙版剪切。
  • 在画布上同时选中一个图形和一张图片,选择 编辑 > 用所选图形做为蒙版(Edit > "Mask with Selected Shape"), 就可以直接将这个图形作为选中图片的蒙版了。
  • 所有的复制图形都会被视为原图形的子路径,如果你想让他们成为完全独立的图层,你只需从菜单栏进入 编辑 > 路径 > 分离(Layer > Paths > Split)即可。
  • 每当你在为 iPhone 或者 iPad 设计交互页面,你都需要记住这一点:在画布上,Sketch 会帮你对文字进行子像素抗锯齿渲染,但在移动设备上,文字并不会被这样处理。你需要告诉 Sketch 无需进行子像素抗锯齿渲染,通过 Sketch > Preferences > General,取消选择 subpixel-antialiasing。
  • 当你进入顶端的 编辑菜单 > 文本路径(Edit > Text on Path),Sketch 会帮你把文本图层贴合的放在它下一层的矢量图形上面,两者的顺序必须是矢量图形在文本图层的下面。
  • 现在渐变填充,阴影和内阴影都能包含在文本式样当中了。

4. 符号运用:

  • 进入 添加 > 符号 (Insert > Symbol),在画布中重复使用符号。继续复制粘贴符号,Sketch 会自动将所有副本链接。任何针对某一副本的编辑,都会同步到其他副本上。
  • 选中符号中的文本,勾选「从符号中排除文本」(Exclude Text Value from Symbol),这样,所有针对文本的编辑就都是独立的。
  • 添加 > 符号 > 管理符号 (Insert > Symbol > Manage Symbols)。在符号名中加入斜杠「/」,Sketch 会将它视为组的分隔标志。如:两个分别名为 Button / Normal 和 Button / Pressed 的符号会被一起编入叫 Button 的组内。
  • 符号始终会按照字母顺序排列,而不是创建时间。

5. 检查器和式样:

  • 输入框:按住 shift 会以 10 为单位变化;按住 option 键,以 0.1 为单位变化。也可以用键盘上的上下方向键配合 shift 或 option 键来完成。同时,支持简单四则运算。
  • 先按 return 键来确认输入框中的任何编辑,然后再按一次 return 键,方可返回到画布中。
  • 复制粘贴式样:共享其中一部分元素,但不让图层始终保持链接。
  • 选中一个图层,按 1-9 将图层透明度从 10% 调至 90%,按下 0 则会将透明度调至100%。
  • 填充选项从左至右分别是:
    • 纯色
    • 线性渐变
    • 径向渐变
    • 环形渐变
    • 图案填充
    • 杂色填充
  • 关于渐变:
    • 渐变线上每一个点都是一个色彩滑块。在渐变线中间单击,你就会看见一个新的色彩滑块被添加。
    • 径向渐变的渐变线上的第一个点便会是径向渐变的中心。在渐变色的外圈上的另一个点,拖拽它使渐变范围在正圆和椭圆当中变化。
    • 先添加新节点后,按下 1-9 在渐变线的 10% - 90% 的位置添加新节点;按下 5,在首末节点正中间添加。按下 = 键,在两个节点的正中间添加。
    • 渐变条:你能看见渐变的每一个节点,以及从左至右的变化。
  • 单击第一个色彩填充旁边的 + 按钮来添加新的填充,每一个图层都可以有无限的填充,填充会按照从下至上的顺序叠加,每一层填充也都有自己可调节的混合模式和透明度。
  • 当模糊半径被设置为0的时候,文本图层的内阴影才是最好看的。
  • 模糊:
    • 高斯模糊(Gaussian Blur):能让你的图层均匀的模糊。
    • 动态模糊(Motion Blur):仅向一个方向模糊,造成一种运动的错觉。
    • 缩放模糊(Zoom Blur):从一个特定的点向外模糊。
    • 背景模糊(Background Blur):将图层下一层的内容模糊。
  • 拾色器是基于 HSB 色彩模式,饱和度和亮度分别按照水平和垂直方向变化。下面两个滑动条,分别供你调整色相和透明度。

6. 编组和画布

  • 按住 Command 键,便可直接进入组选择想要的图层。
  • 如果只想将编组工具用于组织图层列表,而不想每次都先双击,你可以勾选编组检查器中的「直接选择」(Click-through when selecting)。
  • Sketch 里的画板是在「无限的」画布中的一块「固定大小」的画框。
    • 如果是设计网页,针对不同大小的屏幕进行设计,则可以将每一个屏幕尺寸设定为一个画板。
    • 如果是设计图标,同样可以将不同的图标尺寸设定为画板,以限制在默认的图标尺寸中创作。
  • 要添加多个刚才置入的新画板,可以按 Command + D 来重复添加画板。
  • 直接在画布上单击拖拽某一画板的名字来移动它。
  • 每一个画板都是在画布上相对独立的创作空间,每个画板都有自己的标尺和网格选项。
  • 一个 Sketch 文件内可以包含多个页面。将多个相关页面放在一个 Sketch 文件中:
    • 符号和共享式样将在页面中通用。
    • 把过多的画板分布在多个页面中会高效很多。
  • 用 Z 键来快速放大某一特定区域,单击画布任一点拖拽出矩形区域即可。
  • 智能测量:
    • 按住 option 键,Sketch 会显示出已选中的图层和鼠标现在所悬浮的图层之间的距离
    • 在移动一个对象时,移动到和另外两个对象的距离相等时,Sketch 会给出提示。
    • 调节一个图层的大小时,Sketch 会显示出具有相同长度或宽度的图形的数据。

7. 导出和导入

  • 当要导出时,Sketch 会列出画布、画板、切片中所有可导出的图层。可以导出部分或全部的图层:
    • 如果选好了图层再点击导出按钮,Sketch 默认只导出这一图层。
    • 可以无需建立切片直接导出图层。
  • 只导出一个图层:
    • 先选中图层或组,然后单击检查器底端的 Make Exportable。
    • 单击 + 按钮,添加新的导出尺寸。
  • 关于切片:
    • 添加 > 切片(Insert > Slice),并在画布上单击拖动鼠标创建一个新的切片区域。
    • 直接单击一个图层,Sketch 会围绕这个图层建立一个新的切片。
    • 图层若有一个小刀的图标,说明这个图层是可导出的。
    • 直接在列表中将图层拖到 Finder 或者其他 App 里,Sketch 会迅速导出一张 PNG 图片。如果按住 option 键,则会将它以 PDF 数据写入剪贴板中。
    • 切片能将画布中的特定区域导出为一个文件。一个 Sketch 可以有无数个切片,每个切片都能导出不同的文件。
    • 切片被视为普通图层。把想要导出的多个图层编组成一整个切片,当移动这个组的时候,切片也会跟着移动。
    • 如果在文件名中加入斜杠(/),Sketch 会新建一个文件夹并把此文件放入其中。举个例子:如果将切片命名为 foo/bar.png ,那 Sketch 会先创建一个叫 foo 的文件夹,然后在里面创建一个叫 bar.png 的图片。
    • 每个切片都有一个选择框:仅导出组内图层(Export Group Contents Only),这样就只会到导出那些在组内的图层,而不会导出表面的或者背景图层等等其他切片内的东西。
    • 「修剪」:选中它之后,每个被导出的切片的透明外围都会被剪去。
    • 若暂时不想整理画布上的切片,可以在图层列表最底下关闭小刀按钮。
  • Sketch 里的画板无需先创建切片就可直接导出,先添加一个画板的导出尺寸,下次单击导出时,Sketch 就会导出画板。
  • 编辑 > 复制 CSS 属性(Edit > Copy CSS Attributes),Sketch 便会为选中的对象声明 CSS 中的边框,填充,渐变,阴影以及文字样式。
  • 支持导入 / 导出的文件格式:
    • JPG:照片文件所常用的格式,但并不支持透明度。
    • PNG:如果你画的内容中有透明的像素,这将是最好的选择。
    • TIFF:支持透明度,但这种格式的文件会更大。
    • PDF or EPS:保存矢量对象,目前基本支持。
    • SVG:能很好的保留图形和文本的导出,但是并不支持阴影。使用这种格式主要可以让该文件在其他应用中导入。
  • 不支持导入 / 导出的文件格式:
    • PSD:PhotoShop 文件是封闭且不支持导出的,可以将 PS 文件导出为 .PDF,并导入 Illustrator。
    • AI:Sketch 目前不支持 .AI 文件,但是 Illustrator 可以打开从 Sketch 里导出的 .PDF 或 .SVG 文件。

8. 偏好设置

  • Sketch 会将多个相似的操作视为一组,比如你连续多次按下方向键以移动图层,但是只需一次撤销,即可恢复原来的位置。
  • 当你为 Mac 或网页设计时,往往会打开「子像素抗锯齿效果」,但是为 iOS 设计时,往往会关掉它。
  • 如果不想使用 Retina 这个功能,只想让显示器显示实际的每个像素,那么可以关闭 Retina Canvas 的选项。
  • 背景模糊会比普通的模糊更加复杂和消耗资源,所以如果想模糊一整张图片,那还是用普通模糊吧,不要用背景模糊。
  • 如果多个画板上都有大面积的阴影和模糊效果,文件操作起来就会很慢,解决这个问题最简单的方法,就是把一部分画板移到新的页面上去。
  • 将文本转化为轮廓是要格外谨慎。其实无需矢量化,文本也可以直接应用渐变效果。

推荐阅读更多精彩内容