前端切图学习--每一个图层都能很精细的切出来

自从换了新工做，切图成了个人新问题。由于不是专业的美工， 对photoshop的操做也只限于基本操做， 之前虽然也有遇到不切图的UI, 可是之前作的都是电商扁平化网站， 图片都很简单，差很少都是方方正正，即便有一两个像素不对， 也没有问题，用css写对就行。 而后如今从事的是游戏公司的网站， 并且美术不负责切图， 就只能本身动手了， 第一次拿到多边形的时候，我傻眼了。不知道怎么下手。 第一次的时候仍是找前同事的UI 帮忙的。可是不能每次都找别人帮忙啊， 第二次的时候就本身动手了。切图都花了1天多（惭愧，羞愧，懊恼。。。），由于这些， 没被产品少投诉。

 

言归正传， 因为被投诉效率低， 第一次项目完了以后， 我就开始找一些能够提升效率的方法。  首先，切图是最重要的第一步。 偶然在慕课网看到切图的工具， 真是及时雨呀， 因而我认认真真把视频看了两遍，还一边看一边操做，真是好用， 下面把详细步骤贴出来。（下面我拿御龙三国手游官网来进行步骤举例）

 

1. 下周photoshopCC 2014, 安装， 至因而否破解， 你本身决定。

 

2.打开文件-------> 脚本---------> 将图层导出到文件。

 

 

 

3. 设置下面的设置， 如图所示。 若是是想要jpg等其余文件， 能够在文件类型那里设计

 

 

4.点击运行。 大功告成。 完成的时间， 由文件里面的图层以及电脑的配置决定。 个人电脑装了固态硬盘， 内存8G, 导出一个很是多的图层的文件， 花了5-6个小时。 也许你会说这个效率尚未手工的高，是的，我也有同感，可是对于ps的小白， 这儿能够很精确的导出想要的图层文件， 真是太好了。 只要晚上把电脑开着， 就能够安心回家睡觉了， 早上来的时候， 一切都ok了。

 

 

5. 固然，这样子是不行的， 后来我想了几个办法。 把图层分组， 有些美工已经把这儿事情作了。 而后把哪些须要的Ctrl+E合并成一个图层，还有， 你想要的也合并为一个图层， 这样psd里的图层就减小了。这个方法很是有效， 我试了一下， 10几分钟就获得了那些我想要的图片。

 

 

7. 固然还有更好的方法。这也是在慕课网的视频上学的。 ctrl+K出来首选项（编辑-->首选项），而后设置增效文具。 

 

8. 再设置 文件----->生成---->图像资源。 （这个设置了下次才生效，设置不上就重启ps）

 

 

 

9.设置psd里面图层文件名称。到psd痛目录下面，生成了一个 源文件-asset文件， 打开会有惊喜哟。 是否是分分钟解决了难题。

 

 

10.总结； 没事就到慕课网去看看， 怎么感受像打广告呢。 算了， 总结就是没事的时候多在网上多逛逛， 就会发现个人这个经验。

 

 

 

 

11. 添加一个重要的线索。 由于手机上，若是原图大小，可能已经会出现锯齿， 因此最好的作一个2倍大小的文件。 表达式这样子写： 200% 源图层名称 @2x.jpg。

 

 

12.生成不一样质量 源图层.jpg8 生成质量问80% 质量的jpg文件在assets