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),是不是感觉好恐怖?但是不用怕,我分享一套超简单的适配方法,看完你都不信有这么简单~

  美术交付给开发的资料有

  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.需要怎样跟开发去沟通适配原则

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

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

时间: 2024-10-01 15:33:31

iPhone 6 plus 适配切图方法分享的相关文章

photoshop高效切图方法技巧分享

给各位photoshop软件的使用者们来详细的解析分享一下高效切图方法的技巧. 技巧分享:   有人会发现一个问题,6S.6S plus的尺寸呢?因为他们的分辨率和6.6 plus尺寸一致的.   从上图可以看出不同分辨率对应不同的倍率,这样的话我们适配的时候就知道怎么切图了,@2x表示两倍图,@3x表示三倍图;以上的那些尺寸图,重点看这张图就可以同时适配iOS和Android的切图了. 工欲善其事,必先利其器 现在PhotoshopCC2015已经出了切图就更方便了,但是对于电脑的配置要求比较

切图技巧分享—圆角背景色

原文:切图技巧分享-圆角背景色 一.设计稿 要实现下面这样一个效果,本文重点说的是下面"自动续费,可随时取消"这部分的实现. 我把问题简化一下,变成了 二.解决问题的思路 1.p标签加背景色 一般,很容易想到用p标签实现,代码如下: <style type="text/css"> .box { width: 154px; height: 90px; float: left; border: 1px solid #bfbfbf; border-radius

Photoshop三种调整GIF动图方法分享

给各位Photoshop软件的使用者们来详细的分享一下三种调整GIF动图的方法. 方法分享: 相比静态图,GIF动态图更加能让你的设计作品吸引人们的眼光.本期国外精品翻译教程就跟大家一起学习三种在Photoshop调整GIF动态图的方法. 用Photoshop CS5.CS6或创意云版本打开GIF动态图;在主菜单栏中选择"窗口>时间轴"或者"窗口>时间轴";在主菜单栏中选择"窗口>图层". 一.调整图层 在图层面板,选择顶端图层

美图秀秀怎么合成长图 合成长图方法分享

给各位美图秀秀软件的使用者们来详细的解析分享一下合成长图的方法. 方法分享: 1.首先,点开美图秀秀,在美图秀秀的页面中找到并选择拼图选项,再在左侧的选项中选择图片拼接.   2.大胆的添加你要拼接的图片,按照自己的拼图需要拼接你的图.   3.如果制作无缝长图文,边框大小一定要调成0,最后点击确定,保存就好啦.   好了,以上的信息就是小编给各位美图秀秀的这一款软件的使用者们带来的详细的合成长图的方法解析分享的全部内容了,各位看到这里的使用者们,小编相信你们现在是非常的清楚了合成方法了吧,那么

美图秀秀怎么溶图 溶图方法分享

给各位美图秀秀软件的使用者们来详细的解析费你想一下溶图的具体方法. 方法分享: 第一步:打开美图大娘   第二步:打开素材一   第三步:右键,点"插入一张图片"   第四步:插入原图   第五步;调整好位置   第六步:正片叠底(融合)   第七步:保存(保存为png格式)   第八步:插入另一张图片   第九步:调整好位置   第十步:插入刚刚保存的图片   第十一步:调整好位置   第十二步:合并 第十三步:调色   第十四步:美容-磨皮祛痘-自动磨皮-快速磨皮-调到轻 第十五步

适用于IOS、安卓和web前端等领域的PSD图标素材全自动切图方法

屌丝个人开发者经常遇到的尴尬问题是,自己不会设计UI素材又请不起专业的美工.最好的方式是去网上下载符合自己需求的素材修修改改直接用上.但是,在这个过程中会发现很多下载下来的素材是PSD格式的,很多图标资源以图层的方式共存于一个PSD文件中.最傻的办法是新建一个图层,把需要的某个图标土层复制过去然后再保存.这种图的掉渣的方式确实影响工作效率,程序员岂能浪费时间在这种事情上?本文采用一种全自动的方式提取出这个PSD里面的所有图标并生成png.jpg.@2x图标,整个过程是傻瓜式的.Let`s go!

超全面的切图规范指南

设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言.合适.精准的切图可以最大限度的还原设计图,起到事半功倍的效果. 如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力. 设计切图的原则 设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求. 其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量. 最后,输出的切

怎样在Photoshop中进行规范的切图工作

  Hi 大家好- 第一次分享个人经验.这是工作这些年自己的切图方法.无论是给PC客户端还是android,iPhone切图,我都用这个方案.主要是方便多人协作以及中间的管理/维护. 分类: PS入门教程

photoshop切图后图片过大压缩教程分享

给各位photoshop软件的使用者们来分享一下切图后图片过大的压缩教程. 教程分享: 首先如果只是压缩的话,建议使用 ImageAlpha(专门压缩PNG) 以网上的一副海报为例(侵删) 正常从PS导出的PNG大小:     原本是 1.1 MB     在 ImageAlpha 中打开后可以看到在默认参数下可压缩 65%.     压缩后 379 KB.而且是几乎无损画面细节的.我一般在输出切图资源的时候都是靠 ImageAlpha 来完成素材的压缩. 而且 ImageAlpha 还可以通过