[超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)

网络上已经有不少适配教程，但是看了半天老是半懂不懂。。最后仍是要综合多个教程再动动脑子动动手，最好有程序大哥帮你试一下（这得有多大的福气）

 

若是有跟我同样状况的：

1.       有人说用sketch自动导出多套尺寸切图和SVG矢量格式，表示没钱买MAC

2.       有人说用切图神器cutman，表示用CC以上版本PS不支持

3.       另…不喜欢/用不惯/不会用ps自带切图工具的

目前iPhone有10种型号，5种屏幕尺寸，再加上6plus的“降采样”（Downsampling）（1080-1920），还有iPhone6和6+上的放大模式（1125-2001）和默认模式（1242-2208），是否是感受好恐怖？可是不用怕，我分享一套超简单的适配方法，看完你都不信有这么简单~

 

美术交付给开发的资料有

一、  标注图（以640为宽度尺寸为基准标注）

二、  2x切图（以640为宽度尺寸为基准切图）

三、  3x切图（以1280为宽度尺寸为基准切图）

 

开发看到这份标注图，能够本身用上面的数字，乘以1.5得出3X的数字。字号也是如此

以淘宝为栗子

好的，标注的事儿解决了，再来看怎么切图

我使用的切图方法很傻瓜，就是使用PS自带的“将图层导出到文件”脚本

 

具体的步骤来了

一、  以640为宽度的尺寸来设计界面，保证里面用到的尺寸都是个整数而且是偶数哦（已经有设计好的界面的请看下一段）

二、  另新建一个640为宽度的空白PSD，命名为“切图-2X”

三、  把设计稿里须要切图的图层、组，拖到“切图-2x”里面，每一个切片保存为一个组（好比说一个按钮包含3层，2个状态，分别合成2个组），再检查下命名

举栗

四、  保存好后，而后CTRL+ALT+I（图像大小），把宽度640像素改为1280像素，由于直接放大的2倍，是不会出现虚边的。

五、  1280宽的版本保存为“切图-3x”PSD。

六、  接下来把PSD中的“组”合并成智能文件。直接CTRL+E合并成图层也是能够的，智能文件还能够修改强迫症患者内心舒服些。合并智能文件快捷键设置方法：编辑>键盘快捷键>图层>智能对象>转换为智能对象>设一个本身顺手的快捷键

七、  而后激动人心的时刻到了，直接 文件>脚本>将图层导出到文件，设置为PNG格式，设好导出的文件夹，点肯定~而后喝杯咖啡去~PS大大就自动帮你保存好了

八、  “切图-2x”的PSD也如此操做一遍便可。记得分别放在不一样的文件夹里，不然PS会自动覆盖掉命名同样的图层的。

超级啰嗦：

1.为何3x切图要以1280来为宽度？

其实iPhone6+的尺寸1242*2208做为3X，怎么算都又难记又不能整除，咱们直接640*2获得1280跟1242相差也没几十个像素，最重要的是不虚边啊，放在真机上看（处女座除外）看不出差异的。

2.为何只设宽度？

为了保持长宽比例。iPhone的这几个尺寸不是正好的，宽度放大后高度总差那么几个像素，这没关系，千万别去改高度，手机屏幕是能够上下滑动的嘛。不能够滑动必须保证一屏显示的除外，手动去调整好了。

3.为何开发不是乘以2而是乘以1.5来算尺寸和字号？由于大屏手机就是要显示更多内容而存在的。纯等比放大界面看起来傻大傻大的，实验证实1.5倍是正好的。

4.使用智能对象要注意的

若是你有使用智能对象的习惯请必定记得直接放大智能对象是会糊的，要把智能对象内部的图层拿出来放大再切图哦~！

5.须要怎样跟开发去沟通适配原则

这张图表示的很是清楚，在这里借用一下，原连接再ui中国已经失效了，还有这个连接能够看原文

http://www.xueui.cn/experience/app-experience/ios-app%E8%AE%BE%E8%AE%A1%E4%B8%80%E7%A8%BF%E6%94%AF%E6%8C%81iphone5iphone6plus%E8%AE%BE%E8%AE%A1%E6%B5%81%E7%A8%8B.html

 

再讨论下以大屏为基础设计缩小切图的方法，若是按1242来设计那各类缩小都不成整数比例会虚边，按我说的1280的话那么你设计时必须每一个内容尺寸是4的倍数，由于2X时除以2,1X时又要除以2，不能整除又要虚边了。数学很差的仍是蒜了吧~目前主流仍是2X尺寸，啥时候3X大屏成主流了咱们再说~

这就是天下无敌最最偷懒的方法了吧，不用装插件也不用改稿，我但是走了无数弯路总结出这么傻瓜的方法。各位不要吝惜求点个赞吧！

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

更新啦！最近发现CC2014版本一个更好用的切图方法，懒人就要懒到底，今天来分享一下！

原连接先奉上

http://www.xueui.cn/tutorials/photoshop-tutorials/photoshopcc-qietu.html

而后实例操做，建议跟以前的方法对比着看，简便了多少！

具体步骤

一、  以640为宽度的尺寸来设计界面，保证里面用到的尺寸都是个整数而且是偶数哦

二、  直接把须要切图的图层以切片为单位合成一个一个的组，命名加个.png

举栗

 

三、 点 生成>图像资源

四、 连咖啡你都没有时间喝。。你就会在这个psd存储的路径下找到切图文件夹，已经搞定了。。内牛满面

五、 切3x图的时候，把psd文档改个名字，好比说加个后缀-3x这样。把宽度640像素改为1280像素，而后再点一次 生成>图像资源。

六、 没有了。。。

 

怎么样！一共其实就命名和生成两个步骤啊！！生生省了2杯咖啡！更多扩展用法请看原连接~另有一个小窍门，改文件夹命名的时候，把“.png"复制一下，双击组名，使之变成这样

而后点Tab键、→、ctrl+v、Tab键、→、ctrl+v.....一直点就改好了

亲测不管图层组是显示仍是隐藏状态都同样能够导出，只要后缀名改了就行，没加后缀名的图层是不会被导出的！因此更名的时候，，若是有遇到图层你不要切的，多点下Tab就跳过去了，试一下很快捷~

而后直接导出不一样尺寸的切片的用法（详细请看原连接）亲测若是原图层是矢量的则保持清晰，原图层是位图或智能对象的会变模糊。

听说是cc2014以后的版本才有的功能，各位装一个！

不要太感动哈。。。点个赞啊各位亲！