苏南大叔在本文中,描述一下sketch切小图标的方法步骤。在photoshop中,这个操作是很简单容易的。但是,这不是最近流行sketch嘛,所以,苏南大叔与时俱进,和美工MM学习了这项新技能:sketch切等尺寸透明小图标,并和大家进行一下分享。本文的目标:利用sketch软件,切出等大小的透明图标文件。

苏南大叔:sketch切图,如何得到等尺寸透明小图标? - sketch_ico
sketch切图,如何得到等尺寸透明小图标?(图6-1)

本文测试环境:mac/sketch@55.2。根据需求,本文中需要的图标规格是48*48@2x图。

这里有个操作技巧,就是:按住command键,然后鼠标移动到元素上,就可以可以凸显每个图层的轮廓,便于选择。

解组

对于苏南大叔拿到的sketch文件来说,因为目标小图标外面还有其他元素。所以,面临的第一件事情就是:解组。
点击目标图层组合,然后,反复操作解组。快捷键是:shift+command+g

苏南大叔:sketch切图,如何得到等尺寸透明小图标? - sketch-解组
sketch切图,如何得到等尺寸透明小图标?(图6-2)

切片

利用command可以突显每个元素的轮廓,点击目标元素。然后利用右上角工具栏中的切片工具(快捷键是S),圈选目标,然后调整切片尺寸。如果拖动的尺寸不够精准的话,可以考虑使用右侧的面版来精确调整宽度和高度。

苏南大叔:sketch切图,如何得到等尺寸透明小图标? - sketch-切片
sketch切图,如何得到等尺寸透明小图标?(图6-3)

对齐打组

然后再次shift点击目标图标,让其与切片工作在一个组里面,在右侧面版中,操作按钮使两者水平对齐,顺直也对齐。

苏南大叔:sketch切图,如何得到等尺寸透明小图标? - sketch-切片-对齐及尺寸
sketch切图,如何得到等尺寸透明小图标?(图6-4)

快捷键command+g把两者打包成一个组。

提升到顶层

打包后的组合可能会消失,这个时候,可以按着alt,那么顶部的工具栏左侧的“上一层”,就会变成“移动到顶层”。这种情况下,刚才的组合就会被提升到顶层。

苏南大叔:sketch切图,如何得到等尺寸透明小图标? - sketch-alt
sketch切图,如何得到等尺寸透明小图标?(图6-5)

导出

然后看左边的分层,点击分层的里面的切片。注意是选择组合里面的“切片”,而不是组合。然后看右侧的导出设置,预览一下是不是自己想要的样子。

切片,看右侧的设置,勾选第二个选项export group contents only,图标就会变成背景透明。然后选择2x图,就可以导出目标图片了。

苏南大叔:sketch切图,如何得到等尺寸透明小图标? - sketch-切片-transport
sketch切图,如何得到等尺寸透明小图标?(图6-6)

相关链接

总结

在本文中,苏南大叔描述了一个sketch切图标小技巧。更多sketch相关经验文字,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   sketch

本站的忠实读者小伙伴,正在阅读下面这些文章: