最美UI

80%的人不知道的Sketch小技巧

最美说:使用sketch的朋友不能错过的Sketch小技巧,这些技巧操作可以提升你操作使用sketch的效率。有哪些小技巧是你不懂的呢?

钢笔工具

绘制矢量图形时,你可以按住 shift 键再画之后的点,Sketch会自动帮你对齐到前一点的45度角方向,这在你绘制直线时会非常方便。如果你是在两点之间添加新的锚点时按住 shift 键,你便会得到两点间的锚点。

如果你按住 command 键,单击两点间的线条,Sketch则会帮你在线条的正中间添加锚点。

矢量图工具

绘制

如果你想改变图形的起始点,你需要按住空格键,这样你将会修改起始点,而不是图形的大小

大小

我们有一个很特别的输入框,鼠标悬停上去时你会看见上下两个小剪头出现在文本区域右边,你可以单击他们来增减图形的大小。如果你按住 shift 则会以 10 为单位变化。如果你按住 option 键,则会以0.1 为单位变化。

一旦你开始直接编辑输入框,上下剪头就会消失,但这个功能依然可用,你可以用键盘上的上下方向键配合 shift 或 option 键来完成。

渐变

你可以按下1-9的数字键来在渐变线的 10%-90% 的位置添加新的节点,所以如果按下 5,就能将节点添加在正中间。

如果你想在两个节点的正中间添加,则按下 = 键即可。

还可以使用 tab 键快速的在不同节点中切换,用方向键(也可以同时按住 shift 键)移动节点。

背景模糊

背景模糊是在苹果发布 iOS 7之后添加的功能,需要确认有一个半透明的图层在表面应用了背景模糊,这样下层的内容才会出现模糊效果。

需要注意的是,模糊是一种非常消耗资源的渲染效果,图层越大,模糊就需要占用更多的内存空间和处理器能力。尽量少使用模糊,如果你一定要在背景模糊和普通模糊中选择,那么选择普通模糊吧。

分离路径

所有的复制图形都会被视为原图形的子路径,如果你想让他们成为完全独立的图层,你只需从菜单栏进入 编辑 > 路径 > 分离 (Layer > Paths > Split)即可。

文字

转曲

不要将很长一段文字都转化为矢量图形,这会大大减缓文件的运行速度。

将一小段文字转化为大量包含布尔运算的子路径是非常非常消耗系统内存的,如果你不得不转换一段文字,那么你可以先将一段文字尽可能分成多个短文本,然后再一个个的转化为矢量。

不过既然你现在可以直接在文本上运用渐变等效果,大多数时候你都不会需要将文本转化为轮廓。

路径文字

当你进入顶端的编辑菜单 > 文本路径 (Edit > Text on Path),Sketch会帮你把文本图层贴合的放在它下一层的矢量图形上面。值得注意的是,两者的顺序必须是矢量图形在文本图层的下面,才能得到这样的效果。

抗锯齿

顺利实现子像素抗锯齿效果,文本必需出现在一个不透明的(有色的)背景上,因为系统需要知道最终的颜色对比结果是什么样的。这一点与图层混合模式是相冲突的。要实现图层混合模式,Sketch 需要在一个透明背景上渲染所有的图层,这样这些图层才能像你所期望的那样混合在一起,最终结果再渲染回 Sketch 的白色画布上。

如果没有一个不透明背景我们就不能渲染抗锯齿的文字,但是有了不透明的背景我们又不能渲染图层的混合模式了。这就意味着,一旦你的画布中出现了一个有混合模式的图层,Sketch 就不得不运用透明背景的算法,而无法给文字实现子像素抗锯齿效果了。

图片

色彩校正

如果你想微调一张现有图片的颜色,那可以使用检查器中的色彩校正面板来实现,在这,你可以改变图片的饱和度,亮度和对比色。

需要注意的是,这一个不破坏原图的操作,所以你稍后还可以再次更改这些参数。

九宫格

正常情况下,你缩放一个位图时,他们会对称的向各个方向变化。但有时这并不是你想要的,比如说你在做一个网页设计,你也许会想要一个 safari 里的白色背景,随着网页内容变多而变长。

我们特意增加了针对图片的九宫格缩放来解决这个问题。进入图层 > 转化为九宫格图片 (Layer > Convert to Nine-slice Image),你会发现图片被划分为了9个区域。你可以单击拖拽四个中心点的任一个来调整9个区域。

蒙板

普通蒙板

Sketch里的蒙版可以让你有选择性的显示出图层的一部分。比如说在一个图片上圆形蒙版,那么这张图片就只会显示出圆形内部的内容。

所有的图形都可以变成蒙版,你只需要先选中图形,然后进入图层 > 使用图形蒙版(Layer > Use as Mask), 所有在这个蒙版上面的图形都会被剪切成蒙版的内容显示出来。

限制蒙版

如果你不想接下来所有的图层都被蒙版剪切,那么你可以将蒙版和想要被剪切的图层单独编组,一次来限制蒙版的使用情景。一旦蒙版被编组,其他一切在组外的图层就都不会被蒙版剪切了。

在无法编组的情况下,你还可以通过以下方式限制蒙版:

・选中一个你想从剪切蒙版中释放出来的图层

・进入图层 > 忽略底层蒙版 (Layer > Ignore Underlying Mask)

这一层图层和它以上的所有图层就都不会被蒙版剪切了。当你调整图层顺序的时候则需要格外注意,个别图层可能会意外的被蒙版剪切。

ALPHA 蒙版

默认情况下,一个蒙版会显示出所在区域的图片,隐藏其他的地方。另一种使用蒙版的方式是通过 ALPHA 蒙版建立渐变区域,来具体选择图片的各部分是否可见

使用这个方法你可以先选中蒙版,选择 图层 (Layer) > 蒙版模式 (Mask Mode) > ALPHA 蒙版 (ALPHA Mask) 来实现。

图层

复制

command + D,Sketch则会重复你刚才的操作,复制出一个一样的图层。

编组选择

想从深深的编组层级中直接选中某一具体图层,你可以按住 command 键,来直接选择埋在组里的图层,无需不停的双击以进入更深的层级,这将省去你不少的时间。同时按住 shift 键,则能选择多个图层。

叠加选择

右击鼠标,从菜单中选择 “选择图层”(Pick Layer),便会显示出鼠标底下的所有图层列表。

按住 option 键,Sketch 会选中第二层图层,而不是最上层的。如果某个区域有多个图层重叠,而你想选择第三层,那么还是需要用到上面说的右击鼠标的方法来选择了。

鼠标框选

如果你同时按住 option 键,则只会选中完全被包括在所画选取内的图层

改变大小

可以直接使用键盘调整图层大小。按住 command 键和方向键来操作。⌘→会将图层宽度增加 1px,⌘←则会将宽度减少 1px。同样的,⌘↓ 和 ⌘↑则分别将长度增加和减少 1px。如果你同时按住 shift 键,每一次更改的数值将会变成 10 px。

改变一个图层的大小时,它的式样元素并不会随之变大变小:一个 10x10的图形上 1px的描边在这个图形被拉伸至 50x50的时候,将仍保持 1px的描边。想要更改图层大小的同时一起更改式样,那就使用编辑菜单当中的缩放工具吧。

图层扁平化

当你使用扁平化功能( Flattening),Sketch 会试着将一个图形里的多个子路径呈现为一个路径——也就是将层级结构变得更扁平。但是有些图形是无法扁平为一个路径的,比如说一个环状图形,将只能被呈现为两个路径:一个是外圈路径,一个是内圈路径

Sketch 不能完成扁平化的命令时,会出现一个小警告,如果你继续坚持,那有的子路径可能被替换,也许比之前少,也许和之前一样多。

也许在你之前使用的绘图应用中,你每次添加布尔运算后到要让图层扁平一次,但在 Sketch 当中大可不必这么做,你可以尽情添加无数曾布尔运算,而无需使用扁平命令。

多页面操作

你可以用无限精准的分辨率无关模式来查看画布,或者打开像素模式来查看每一个像素导出成JPG或者PNG文件后的样子。值得注意的是,有些效果——比如模糊——会自动将画布的一部分以像素模式显示,因为模糊本身就是一个基于像素的效果。值得注意的是,当模糊半径被设置为0的时候,文本图层的内阴影才是最好看的。扩散并不适用于文本图层。

放大缩小视图

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

还能用 Z 键来快速放大某一特定区域,单击画布任一点拖拽出矩形区域即可。

切片

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

分享设计师:青春是打了鸡血的明天

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
Sketch真的很难上手?教你如何快速入门Sketch教程
下一篇
一枚GUI要不要学Sketch?说说关于使用Sketch的8大优势