|切图提效：让你的设计一天顶两天
编辑导语：设计师们对于切图一定不陌生 ， 切图虽然并不复杂 ， 但是需要精心的优化才能在使用的时候得心应手 。 本篇文章中 ， 作者以切图为出发点 ， 结合了自己的工作经验 ， 为大家总结了节省时间 ， 提升效率的方法 ， 让你的设计能一天顶两天 。
本文插图
切图是设计师将设计稿交付开发非常基础的一环 。
它主要解决的是开发童鞋无法用代码去实现的东西 ， 比如一个素材、一个图标、一幅插画、一段特殊字体等等 。 虽然它很简单 ， 但是依然有很多提效优化的空间 。
我由去年年底到现在使用sketch大概一年之久 ， 切图虽然感觉不怎么顺手但也没怎么去注意 。 直到前段时间才发现 ， 我一直在使用的切图方法 ， 简直是低效到爆 。
如果你和我有着一样的问题 ， 那么继续往下看 ， 相信我总结出的三个提效办法能帮你省去大量的时间 。
一、自动组内切图
切图的操作分为点切和拖切 ， 前者是直接切出原尺寸 ， 后者则是切出任意区域 。 但是如果图片带有圆角或者是非矩形 ， 点切时就会出现背景 ， 而非透明底 。
切透明背景图标的方法大家应该都很熟悉 。 它需要将切图与其对应的图片置于一组内 ， 再勾选仅导出组内内容（export group contents only） 。
本文插图
乍看之下没毛病 ， 可是一旦图层多了 ， 就会这样——
本文插图
由于sketch的点切式切图默认将切图置顶 ， 所以你不得不手动将其拖到所在到组 。 而一旦你没有提前命名这个习惯 ， 光搜寻图层就得耗费相当到时间 。
我之前一直是用到这种笨法子 ， 所以每次一到切图环节都会感觉特累！如果你也正经历着和我一样到问题 ， 那接下来的这2个办法将会彻底解决这个痛点 ， 而且很简单 。
1. 方法一
按住切图快捷键s的同时 ， 按住cmd ， 点击即可！
本文插图
2. 方法二
先选中组内需要切图的对象 ， 再进行切图操作！因为切图（点切）生成的位置默认在选中层所属空间的顶部 ， 所以只要选中组内的对象即可将其组内置顶 。
当然如果有切图组内存在多个对象 ， 整体编组即可 。
本文插图
两种方法随意选择 ， 只是我个人更习惯用第二种方法 。 因为方法一在按住cmd后 ， 默认只能选中对象中的一个图层区域（即使编组） ， 局限过多 。
二、自动生成切图文件夹
产品并不是上线后就了事了 ， 后期的营销活动（比如为实现拉新、促活、提升gmv等业务目标而进行的一系列活动等）都需要我们的运营童鞋来进行 。
而营销活动所需要的banner则是由我们提供给运营 ， 再由他们于oss后台上传 。
拿一次大促活动来说 ， 一个banner会跟随其所在的场景呈现不同的尺寸诉求 ， 比如顶通、霸屏、着陆页banner、内页banner、后台专题头部banner等等 。
另外 ， web产品往往需要适配触屏端 ， 那每个场景下的banner又会额外细分成不同设备断点处的banner 。 仅仅单个专题的banner就可能达到数十张 ， 更别提多个专题了！
如果我们按照传统的办法输出到一个文件夹内 ， 再分门别类得整理到子文件夹方便运营查看调用 ， 那无疑需要耗费相当多的精力和时间 。
下面的办法解决的就是这个问题：
如果你对sketch的核心功能——symbol比较熟的话 ， 你应该知道symbol的命名格式 。
推荐阅读
- 小慕电竞|次世代开启，你的PS5准备好了吗？
- 黑评数码|华为EMUI11将正式推送，37款计划升级，你的手机支持吗？
- 数码奇点|速看！华为鸿蒙系统2.0升级清单流出，有你的手机吗？
- 国工智能|MES系统的未来发展了解，缺不了你的存在。
- 东莞市光耀环保公司|80后、90后创业首选，解决你的后顾之忧！
- 苹果笔记本|你的老MacBook和mini支持macOS BigSur吗
- |“双十一”来袭！大战过后，你的双手还好吗？
- 清晨的木鱼|54颗闪光灯！华为Mate40Pro手机壳，299照亮你的美
- 人脸识别技术|当你的脸变成一串“密码”之后……
- 人脸识别技术|当你的脸变成一串