网络上已经有很多适配教程,可是看了半天总是半懂不懂。。最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气)

如果有跟我一样情况的:

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

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

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

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

美术交付给开发的资料有

1、  标注图(以640为宽度尺寸为基准标注)

2、  2x切图(以640为宽度尺寸为基准切图)

3、  3x切图(以1280为宽度尺寸为基准切图)

开发看到这份标注图,可以自己用上面的数字,乘以1.5得出3X的数字。字号也是如此

以淘宝为栗子

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

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

具体的步骤来了

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

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

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

举栗

4、  保存好后,然后CTRL+ALT+I(图像大小),把宽度640像素改成1280像素,因为直接放大的2倍,是不会出现虚边的。

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

6、  接下来把PSD中的“组”合并成智能文件。直接CTRL+E合并成图层也是可以的,智能文件还可以修改强迫症患者心里舒服些。合并智能文件快捷键设置方法:编辑>键盘快捷键>图层>智能对象>转换为智能对象>设一个自己顺手的快捷键

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

8、  “切图-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

然后实例操作,建议跟之前的方法对比着看,简便了多少!

具体步骤

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

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

举栗

3、 点 生成>图像资源

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

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

6、 没有了。。。

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

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

亲测无论图层组是显示还是隐藏状态都一样可以导出,只要后缀名改了就行,没加后缀名的图层是不会被导出的!所以改名的时候,,如果有遇到图层你不要切的,多点下Tab就跳过去了,试一下很快捷~

然后直接导出不同尺寸的切片的用法(详细请看原链接)亲测如果原图层是矢量的则保持清晰,原图层是位图或智能对象的会变模糊。

据说是cc2014之后的版本才有的功能,各位装一个!

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

转载于:https://www.cnblogs.com/sunshq/p/5382975.html

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

  1. 【轮子狂魔】手把手教你用JS给博客动态增加目录 - 超级懒人版

    动态显示目录的作用 不用每次写博客的时候繁琐的人工整理目录,又可以动态浮动在右下角,方便快速跳到感兴趣的位置同时也可以快速的对文章内容有一个大概的了解. 实现原理 首先根据个人喜好,我习惯了用 h1 ...

  2. 手机里的照片导入计算机的方法,如何把iphone照片导入电脑 四种方法分享【图文】...

    前些天小编的朋友突然告诉我,手机里面的照片太多,不知道该怎么传到电脑.我想遇到这种情况的不止是小编的朋友,生活中遇到手机照片显示已满的同学不在少许,如果手机内存不够大,照片稍微一多片会显示储存空间已满 ...

  3. iphone照片如何传输到android,如何把iphone照片导入电脑 四种方法分享【图文】

    前些天小编的朋友突然告诉我,手机里面的照片太多,不知道该怎么传到电脑.我想遇到这种情况的不止是小编的朋友,生活中遇到手机照片显示已满的同学不在少许,如果手机内存不够大,照片稍微一多片会显示储存空间已满 ...

  4. 超简单的修改本机MAC地址的方法分享

    现在的生活越来越离不开电脑,电脑越来越离不开网络,有些时候上网必定会收到限制,所以才会出现各种各样所谓破解的方法,今天笔者就说一下如何更换本机MAC(Media Access Control)地址,骗 ...

  5. Photoshop切图简单设置+工具介绍+以及切图方法

    一,photoshop的基本设置 1*将点选上的拖动到右侧工具栏中进行调整以及待用 2*视图(下的) ---显示---智能参考线打开 ----标尺 将库 / 颜色 / 通道 /路径*********关 ...

  6. lisp工具箱for中望_CAD二次开发LISP视频_小懒人CAD工具箱_CAD插件_CASS插件_LISP代码...

    CAD二次开发LISP视频_小懒人CAD工具箱_CAD插件_CASS插件_LISP代码 LISP教程,CADLISP开发视频,LISP视频 CAD二次开发视频 CASS开地教程 LISP视频 LISP ...

  7. 一键dd重装linux,一键Linux系统重装脚本 – 懒人版,自定义DD,智能判断网络

    支持重装的系统: Debian 9/10 Ubuntu 18.04/16.04 CentOS 6/7 自定义DD镜像 特性/优化: 自动获取IP地址.网关.子网掩码 自动判断网络环境,选择国内/外镜像 ...

  8. 读《大道至简-- 第二章 是懒人造就了方法》 有感

    社会的进步.科学的发展,无不是靠这些"懒人". 懒人造就了方法,这句话一点也没错.突然间想想那些聪明的人,大多都是懒人.因为想得多,所以做得少.因为想得多,所以思维得到了锻炼,变得 ...

  9. XCode - 无法对iPhone真机调试的解决方法!

    XCode - 无法对iPhone真机调试的解决方法! 参考文章: (1)XCode - 无法对iPhone真机调试的解决方法! (2)https://www.cnblogs.com/sunylat/ ...

最新文章

  1. bwapp之xss(blog)
  2. 【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )
  3. vue 时间刻度_vue时间轴风格式的图片展示
  4. 使用vuex实现父组件调用子组件方法
  5. samtools idxstats
  6. IIS日志作用与分析
  7. C#超市管理系统试题
  8. Brush notes:stack、queue、heap
  9. AndroidStudio安卓原生开发_android中使用StringUtils类_引入commons-lang的jar---Android原生开发工作笔记132
  10. Qt C++ QSerialPortInfo的测试
  11. Android使用FFmpeg 解码H264并播放(二)
  12. 常工院计算机学院,常亚楠-华中师范大学计算机学院
  13. 复杂电路简化经典例题_复杂电路的简化策略
  14. base64图片压缩到指定大小
  15. CSDN的博客搜索功能太弱,教你怎么搜索自己博客的文章
  16. python逐步回归筛选变量_特征选择与逐步回归分析
  17. 渗透测试中信息收集的那些事
  18. 饿了不能吃的11种食品
  19. VirtualBox映射端口到windows访问失败(如:3000)
  20. LED显示行业之上位机软件编程篇:

热门文章

  1. R语言--数据抽样的实现
  2. 计算机科学技术知识体系--转载
  3. 刘备学Android Word文档下载地址和序言
  4. JAVA做一个五星评论打分字体_我的评论 - JavaMuse - BlogJava
  5. 与单片机研发密不可分的常见的晶振21个问题解析
  6. linux下创建php的mysql扩展 (pdo_mysql和mysqli)
  7. 六年级上册计算机知识点总结,六年级上册知识点总结.doc
  8. P1533数字翻转 升级版
  9. 静电放电试验、防护及整改措施
  10. 软件项目怎么快速响应用户需求