PS（photoshop cc）快速导出@1x @2x @3x 图的技巧

在移动端UI设计切图的时候，我们经常碰到需要切@1x @2x @3x的图；

那么@1x @2x @3x是什么？苹果为了便于程序员的开发，不同分辨率的设备开发时统一为一个尺寸而标记的。例如iPad2  是768 x 1024，iPad Retina 是1536 x 2048，开发时都按 768 * 1024 操作。但实际上两者有一倍差异。为了达到最佳效果，使用的图片大小不一样。这时候就用同一个名称，但 Retina 的图加上 @2x 后缀。

   @1x@2x@3x标示在iphone中的划分：

@1x 为非retina屏的iphone。iphone4以前，不包含4的手机需要使用这个标示。

@2x 为retina屏的iphone准备。iphone4/4s/5/5c/5s/6 使用该标示，最常用；

@3x 专为iphone6p准备。iphone6 plus使用该标示，比较常用 ；

    为了更好的适配各版本情况，下面演示分享一个利用PS CC 软件直接导出所需切图的技巧：

1.    打开PS软件，新建一个文件（以iphone5分辨率640*1136为例，这个分辨率下标注是@2x后缀  ）；

2.    新建一个图层，拖进一个在此分辨率下适中的图标（图标制作时，建议用几何体制作矢量图）；

3.    给这个图层命名为 100% icon@2x.png

如果我们想制作兼顾iphone4以前的版本就需要制作@1x图片，@1x是@2x图的一半，命名为 50% icon@1x.png

兼顾iphone6p时需要采用@3x 图片，为当前@2x的1.5倍，命名为 150% icon@3x.png

（注：icon是文件的命名 后缀@2x 会在iphone4/4s/5/5c/5s/6优先识别）

.png  为导出的png格式，除了可以导出png格式，我们也可以导出jpeg格式，只需将后面.png改成.jpeg 就可以了。

4．点击菜单栏“文件”>“生成”>选择“图像资源”(这一步很重要)

 

5．保存文件(暂命名icon)  在保存的文件旁会有一个 icon–assets 的文件夹，打开文件就可以看到你需要切的图。

 

   注意事项：

1.若要同时导出@1x  @2x  @3x 可在图层中复制一下图层，同时命名好三个图层名，一次性导出所需要的图片；

 

2.另外在制作图标时我们还会碰到，比如我要导出64*64尺寸 （注红色阴影部分为透明）png的方形的图标，

那么我们可以在这个图标图层上新建一个组，

在这个组里面，我们再新建一个64*64px 的矩形，填充白色，

将白色矩形的不透明度设置为1% （不能为0%，设为0%就没有透明部分） 填充部分放20%(大于17%就好）

然后将组的命名按照之前说的 100% icon_64@2x.png

下面参照之前步骤 勾选图像资源，导出后 ，

在icon-assets 文件夹中，找到所需要的图标;

（当然这个png 透明部分，是接近与空白的）

初次制作分享，欢迎各位互相切磋~