Mac下的切图神器！Slicy使用说明

@蘇暮鹧 ：切图作为设计师出图的最后一步，向来都是令人头疼的工作，其工作内容繁琐枯燥，但又必不可少。同时，作为IOS开发者，我们往往需要为程序准备两套图片资源，以应对低清屏和Retina屏的不同需求，随之而来的是切图工作量的成倍增加。今天为大家推荐一款Mac下的切图小工具——Slicy，以上烦恼皆可得到妥善的解决。

Slicy 官网：http://macrabbit.com/slicy
Examples：http://macrabbit.com/slicy/help
App Store：https://itunes.apple.com/tw/app/slicy/id512533449

相关文章推荐：
《高效神器！21款强大实用的Photoshop扩展插件》
《神器一箩筐：创建高保真的移动Demo（工具篇）》

软件特性：

1. 切图方便，简单的拖放即可，傻瓜式操作2.
2. 培养为图片资源合理命名的好习惯
3. 自动生成@2x两套图片，极大方便IOS开发者

二、软件使用

1、PSD文件的预处理

这一步可以由设计师来处理，不过个人推荐程序员亲自完成这一步骤，因为这里涉及到图片的命名，我们自己来对图片进行命名可以更好的使之符合整个项目的命名规则，方便在项目中对对应图片资源进行调用和管理。

首先用PhotoShop打开设计师给你的PSD文件，如下图：

图中的绿色状态图标即为本次需要切出的素材图片

在右侧分组面板中，选中对应的组"Statues"

对"Statues"组的组名进行重命名，将其重命名为"Statues@2x.png"，全部完成后保存PSD文件即可。

这里要注意别忘了@2x后面的".png"。同时，这里的命名即为图片素材被切出后的名字，因此建议大家在命名时考虑到项目整体的命名规则和调用的方便来进行命名，避免图片切好之后再来修改名字，浪费时间。

到这里，PSD文件的预处理就完成了，事实上这一步也是整个流程中比较繁琐的一步了，完成了这些，今天的切图工作就已经完成了八成。

二、令人愉悦的切图工作

• 问：使用Slicy切图总共分几步？

• 答：总共分2步

• 第一步：把PSD拖进去
• 第二步：把图片拖出来

是的，就是如此简单，打开Slicy的主界面，你可以看到其主界面也是如此的简单。。。

第一步

将我们预处理好的PSD文件拖进去，在一段令人愉悦的动画之后，我们会看到这个：

第二步

按住Command + A快捷键全选，将图片拖到你需要的地方。

可以看到，一套严格命名，大小合规的图片已经被切好导出了，就是这么简单！

小结

Slicy的存在使得原本繁琐的切图工作变得轻松惬意，尤其是当程序猿霸气的对设计师妹子说："看你那么辛苦，今天的图我来切"时，相信大多数设计师妹子都会感动的痛哭流涕有木有。。。

综上，Slicy使用简单，小巧清爽，实在是居家旅行，杀人灭口勾搭设计师的必备神器。

原文地址： akring.github
作者：@蘇暮鹧

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量70万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：