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 的选项。
  • 背景模糊会比普通的模糊更加复杂和消耗资源,所以如果想模糊一整张图片,那还是用普通模糊吧,不要用背景模糊。
  • 如果多个画板上都有大面积的阴影和模糊效果,文件操作起来就会很慢,解决这个问题最简单的方法,就是把一部分画板移到新的页面上去。
  • 将文本转化为轮廓是要格外谨慎。其实无需矢量化,文本也可以直接应用渐变效果。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容