PS切图技巧

为什么要切图？

了解iphone界面和Android图标的尺寸

在实际设计过程中，为了降低设计成本，一般选择分辨率最高的设备作为设计稿的原始尺寸，因为1倍图放大成为2倍图远比2倍图缩小成1倍图来的模糊！

Android开源自由的代价就是设备规范的不可控，市面上充斥着各种品牌的android手机，有着各种各样的尺寸和分辨率，为了适配各种不同分辨率的设备，同一个图标需要切成N份，每一份对应一个尺寸。另外需要注意的是，Android里面开发用的尺寸单位是dp或sp（dp为元素表现尺寸，sp为字体尺寸）而不是iphone中的px。

对于分辨率繁多的android设备，为了方便原生应用的界面适配，Google按照dpi大小将它们分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI），如下图所示。

px与dp的换算关系

一般情况下，手机分辨率与所运行的dpi模式是匹配的，例如hvga(320×480像素)的手机屏幕一般在3.5英寸左右，运行在mdpi模式下。当运行在mdpi下时，1dp=1px：也就是说设计师以320×480作为设计稿的尺寸时，在PS里定义一个item高48px，开发就会定义该item高48dp；Photoshop中14px大的字体，开发会定义为14sp。

对于一部wvga（480×800像素）的手机（G7、N1、NS），一般是运行在hdpi模式下。当运行在hdpi模式下时，1dp=1.5px：也就是说设计师以480×800作为设计稿的尺寸时，在PS里定义一个item高72px，开发就会定义该item高48dp；Photoshop中21px大的字体，开发会定义为14sp。

iPhone应用切图尺寸与Android应用切图尺寸的对应关系

在Android应用中，以MDPI为基准界面尺寸，恰好对应上面提及的iphone应用的基准界面尺寸（320×480），所需的切图图标为iphone中对应的1倍图；XHDPI则对应2倍图，HDPI和XXHDPI可依此类推。

从上图可以看出不同分辨率对应不同的倍率，这样的话我们适配的时候就知道怎么切图了，@2x表示两倍图，@3x表示三倍图；以上的那些尺寸图，重点看这张图就可以同时适配iOS和Android的切图了。

---

如何切图？

原生ps切图

1、调出首选项Command（Ctrl）+k，勾选启用生成器，默认是不够选的。

2、文件-生成-图像资源，这个是后期的时候用的比较多的一个选项。

切图要点

1、不同的模块建立不同的切图文件夹存放。

这样做的目的：一方面，方便自己以后查找；另一方面，方便咱们的开发工程师查找文件，因为有时候是分工合作，需要第一时间找到对应的文件。

2、命名规则
建议采用以下方法命名：

公式：模块类别功能_状态.png
例子：new_icon_share_nor.png
说明：最新图标分享_正常.png

备注：2倍图和3倍图的时候需要在后面加2x、3x，以便明确这是几倍图，比如：new_icon_share_nor@2x.png new_icon_share_nor@3x.png；命名的下划线一定要用“_”这个不能用“—”这个，在安卓上面不支持，并且使用这个符号也不是很规范。.png绝对不能丢，因为CC需要这个后缀来进行切图的输出，没有的话就输出不了。

3、常用命名单词

4、切图文件大小必须是偶数，格式为PNG-24

5、iPhone的3倍图怎么切？

如图所示，左边是需要切的icon，右边是命名，@2x图和@3x图，从图中可以看到有一个红框，刚开始肯定会纳闷，@2x图和@3x图唯一的区别就是前面多了百分比150%，后缀变成了@3x，命名没变，为什么是150%的比例而不是其他的？

这是由iPhone6和iPhone6plus的屏幕尺寸比得来的，750/1080≈1334/1920≈2/3，因为iPhone5/s与iPhone6的屏幕分辨率是一致的，都是326ppi，所以它们用的是一套图，也就是@2x图，6和6plus的屏幕宽高比是2/3，当5/6使用@2x图的时候，6plus使用的@3x的图，也就是5/6的图片资源宽高的各1.5倍，换算成百分比刚好就是150%。

6、切图尺寸大小怎么统一？

这是一个坑，并且还是亲自被埋过，埋得死死的，然后才爬起来的，当时也是查资料，来回试了好几次才找到方法，刚开始我在做的时候就纳闷，为嘛我的切图切出来大小不一样，大的大，小的小，还有一些乱七八糟的尺寸。

怎么处理的呢？在上面的第五点中可以看出，命名截图的旁边有个黑色的东西，那是啥？有人想到了，那是蒙板，不错，那就是蒙板，使用蒙板就可以解决掉了尺寸大小不一致的问题了，是不是很简单，虽然简单，但是，这个坑没踩过，你是记不住的，也不知道怎么处理，下面来看看具体怎么做。

这个切图的尺寸是140*140px的，我在做的时候是用矩形选取框画了这么大的区域，让切图文件居中对齐，拉参考线，这个时候的图层是图1的样式，然后，点击添加图层蒙板（图2），图层变成了图3，多了一个图层蒙板，蒙板里面白色是高亮的，是要保留的区域，黑色的部分就是去掉的部分（去黑留白），白色区域的大小决定你的切图文件的大小，这样就解决了切图文件大小不统一的问题。

注意事项：整个过程中不要取消选区，不要误触了Ctrl（command）+D。

7、输出
这个时候，就开始输出了，因为咱们的准备工作都已经弄完了，下面就需要用到CC2014或CC2015的图像生成器了，前面的利其器的部分的增效工具里面的启用生成器一定要打勾，然后就可以直接操作，文件>生成>图像资源，然后你会看到，切图文件的旁边多了一个文件夹，文件夹的名称一般是“文件名-assets”，里面就是你的切图文件了。

安装Cutterman切图工具

安装及教程见cutterman

---

参考链接：
切图小科普！聊聊原生APP切图那些事儿（附神器推荐）
这种切图方式你会吗？简单6步帮UI设计师高效完成切图
Cutterman - 最好用的切图工具