本文目录一览:
30个值得拥有的sketch插件(4)完结篇
21 选择相似图层-Select Similar Layers
如果你常在sketch里面绘制适量插画,那这个插件绝对能够弥补你内心的空洞(哈哈)。这个插件可以自己抓去具有相匹配填充颜色、描边颜色、描边宽度、字体、透明度、叠加模式或者名字的图层。一旦拥有,你后半生绝对离不开。
传送门 Get it now
22 等分对齐工具-SketchDistributor
相比sketch内置的对齐工具,这个插件能够自动等分图层间距。严格规定几个图层间距有时是很有必要的,sketch具有等分间距的功能。
SketchDistributor插件帮助你选择一组图层,输入像素级精确的间距。然后你就可以去喝杯咖啡了啊,再也不用因为一像素一像素调整间距或对齐而diaocuo啦。
传送门 Get it now
23 贴合8像素-Sketch Nearest 8
跟对齐像素插件相似,这个插件能够保证图层贴合像素格。这个插件不同之处在于,在对齐像素的同时还能扩展宽高,保证跟下一个图层间的数值保证8像素的原则。如果在android的设计中,这个插件一定能够省大量的时间和能量。
传送门 Get it now
24 sketchy饼状图-Sketchy Pies
Sketchy饼状图插件可以快速的将原型转换成饼状图,你只需输入颜色值然后用逗号隔开。当然,生成后也可以编辑每一部分的颜色和描边。
提示:缩小每一部分的描边,可以做环形的饼状图。
传送门 Get it now
25 排序-Sort Me
我们常常要注意Sketch画板的整洁,但是画板有时候会乱序。Sort me这个插件可以快速的按图层列表的名字的数字和字母顺序调整图层顺序。你甚至可以选择升序或者降序排列你的文件,就像你想要他的那样。
传送门 Get it now
26 解锁所有图层-Unlock All Layers
这个插件弥补了sketch工具栏中的漏洞。它能帮你避免一个图层一个图层寻找未锁定图层的麻烦。当然,有一天这个功能或许会被内置到sketch里,但是至少今天你还需要它。
传送门 Get it now
27 人人都是艺术家- AutoDraw
这个插件跟 AutoDraw 功能一样,甚至命名都一样,你敢信。不过它是sketch里的插件了。有了它,妈妈再也不用但是你的画画啦。
传送门 Get it now
28 生成中文名
生个娃,不知道起啥名字?你需要这个插件(哈哈哈)
传送门 Get it now
29 自动填充unsplash的图片-unsplash it
绘制矩形,运行插件,然后去倒杯咖啡,回来后,一切刚刚好~
传送门 Get it now
30 一键生成曲线
能够自动生成渐变曲线,跟ai的功能一样。cool~
传送门 Get it now
完结咯~希望这些插件能够给你节省更多的时间和精力~撒花撒花~~~
80%的人不知道的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 的图片。
巧用Sketch描边绘制饼图
除文本图层外,Sketch的所有图层都可以包含任意数量的边框(即描边),而且支持设置描边的颜色、位置、厚度和混合模式。
另外,点击边框右边的设置按钮,可以看到更多的自定义设置选项,包括边框路径的起点和终点、箭头的形式以及虚线设置。
这里的虚线设置有4个可输入数字的,用于配置虚线的文本框,这里怎么理解呢?举个例子,如果是水平的一条直线,在文本框中分别输入5-4-3-2,则该水平线将绘制5px的点距,4px的间隙,然后是3px的点距,2px的间隙,然后重复。
理解描边的属性和大致配置后,我们就可以利用描边的特点绘制饼图了,首先使用椭圆工具拉出一个圆形,取消填充,并设置描边位置为“Inside”。
然后,我们可以设置边框的厚度“Thickness”,厚度值越大,边框就越大,我们可以发现随着厚度值的增加,圆形逐渐变成了圆环图,最后变成了实心圆。
在实际使用中,饼图通常由几个部分组成,或者用不完全闭合的环形表示占比,这意味着我们需要开放路径的饼图,这时,我们可以使用边框的虚线设置来绘制不完全闭合的环形。先在第二个文本框(间歇)中输入1000,然后在第一个文本框中输入数字即可调节圆环的比例。
推荐阅读:
最新版: Sketch51正式版更新解读:更多箭头端点样式选择
实用手册: Sketch中文手册(2018)
好书推荐: 新书《Sketch交互设计之美:从零基础到完整项目实现》上架