求,ps如何调整原图尺寸,尺寸跟6plus高清的,急急急

iphone6和IPhone6plus图片_百度知道
iphone6和IPhone6plus图片
iPhone:配置4.7英寸显示屏的iPhone 6和配置5.5英寸显示屏的iPhone 6 Plus。 iPhone 6看起来与iPhone 5S非常相似,只是尺寸更大。iPhone 6的电源键被移到了侧边,边缘略微呈弧形,这使得它像是第一代iPhone的回归。尽管“高清视网膜”乍一看与视网膜差别不大,但分辨率为像素的显示屏看起来确实很棒。尽管iPhone 6采用了A8处理器,以及多种新芯片和传感器,6.9毫米的厚度低于iPhone 5S和iPhone 6 Plus。尽管感觉更像是iPhone和iPod touch的混合体,但人们一眼就能识别出它是一部iPhone。  iPhone 6确实比以往型号的iPhone要大,但并不让人感觉到太大。即使对于手相对较小的用户,iPhone 6拿在手里的感觉也很好,至少在这款产品上,苹果的单手操作模式不再是必需的了。iPhone 6 Plus是另外一回事,但iPhone 6给人的感觉是任何人都可以轻松地使用的一款手机。  使用iPhone 6 Plus的体验处于之前型号的iPhone和iPad之间。试用后的感觉是,有了iPhone 6 Plus后就没有必要再购买iPad mini了。  如果之前看过有关报料文章,相信大家对iPhone 6 Plus已经有相当的了解了,但试用后会发现,它与你的预期不完全一样。  首先,它拿在手中比笔者预期的要小得多——使我有这种感觉的主要原因在于它的厚度。显示屏使人感到吃惊,与以往的型号相比,用户更像是在触摸像素,圆角的设计方便用户握持。笔者的手比较大,也许需要问一下手相对较小的用户的感觉
其他类似问题
为您推荐:
你好%D%A乔布斯老大应该知道的,现在iphone6应该有设计图的.%D%A
iphone6的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁APP适配IOS8,iPhone6和Plus截图简要说明
有幸在9月25日拿到了iP6和iP6 Plus的真机,恰好又要做适配APP的工作(从iphone5上适配到iphone6和ip6 plus上),所以在真机上研究了下苹果官方在不同分辨率下对系统APP所做的适配。同时在网上也没找到相关的真机对比截图说明什么的,又有朋友问我要IP6和PLUS的真机截图回去自己研究,既然这样,那么干嘛不利用自己已有的资源,让更多的设计师受益呢?所以那就说点什么吧,抛砖引玉,希望大家可以共同研究,少走些弯路,共同成长。之前看过@jingdesign&的关于适配ip6的文章:。 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &还有@罗磊的文章:。作为参考(有摘抄部份)。------------------------------------------------------------------正文:首先我们先看一下iphone5,iphone6和iphone6 plus的一些数据对比:& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & iphone5/s & & & iPhone 6 & & & & & iPhone 6 Plus尺寸 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 4”& & & && & & & & &4.7” & & & & & & & & 5.5”Viewport’s device-width (in CSS pixels) & & & & & & & & & & & 320 & & & & & & & & 375 & & & & & & & & & 414Viewport’s device-width (Android设备同分辨率参考) &&360& & &&&& & & & & 360 & & & & & & & & & 400Device Pixel Ratio 像素比 & & & & & & & & & & & & & & & & & & & & & & & &2 & & & & & & && & & &2 & & & & & & & & & & & 3 &(近似值) &Rendered Pixels 渲染像素 (默认 viewport size * dpr) & & &640x1136 & & &&750×1334 & & & & Physical pixels 物理像素(手机显示像素) & & & & & & & & & & &&640x1136 & & &&750×1334 & & & & PPI&每英寸所拥有的像素数& & & & & & & & & & & & & & & & & & & & & & & & 326 & & & & & & & & 326 & & & & & & & & & 401Status Bar&状态栏高 (px) & & & & & & & & & & & & & & & & & & & & & & & & &40 & & & & & & & & & 40 & & & & & & & & & & 60Title Bar &&导航条高&(px) & & & & & & & & & & & & & & & & & & & & & & & & & 88 & & & & & & & & & 88 & & & & & & & & & & 132Tab Bar &&底栏高&(px) & & & & & & & & & & & & & & & & & & & & & & & & & & & 98 & & & & & & & & & 98 & & & & & & & & & & 147桌面 icon &(px) & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 120 & & & & & & & & 120 & & & & & & & & & 180图片资源后缀名& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&@2x && & & & & & &@2x & & & & & & & & &@3x& & & & & & & & & & & & & & & &&& &&这里是给前端参考的:iPhone 6与 iphone 5一样,像素比都是2,但是另一方面 iPhone 6 plus 401的dpi真实的像素比值应该大约是2.60。为了解决这个问题,苹果又整了个新概念rendered pixels 渲染像素,如果像素比是3x,那么理论上一个css宽设为414px的屏幕应该拥有1242px的物理像素(现实中是1080px,小了13%)。(像素比的计算方法是:前端的代码是把iPhone4,5的屏幕宽度写为320px,而此时 iphone4,5的所有产品实际宽的像素是640PX,所以像素比是2,iphone6的 CSS 中是375px,实际像素是750px,像素比也是2,而 plus 就不是了。)因此,如果你使用一个3x的图给高清的安卓设备,同样这样图也会适配 iPhone 6 Plus 但是iPhone 的浏览器在渲染在屏幕之前首先会调整图片大小。然后我把3个屏幕的App Store界面截图拿来对比一下:(无法查看原图?)点击这里可以查看高清大图:一:Title bar和Tab bar 高度Title bar :&ip5/6的 高度是88px,plus 的高度是132px &(88x1.5=132) &&Tab bar &:&ip5/6的 高度是98px , plus 的高度是147px &( &98x1.5=147)ip5和ip6的Title bar和Tab bar的高度没变,并且tab bar的icon的大小也没变,只是整栏的宽拉伸了,所以IOS工程师在早期开发的时候如果用的是Autolayout自动布局会很爽,如果是布局写死了,那真是要一个界面一个界面的改了。结论:类似的状态栏高度不变,可以直接拉伸宽度调整间距即可,还有设置界面等,甚至代码是自动布局的话间距都不用调。二:Tab bar的icon大小图中标识的是排行榜的大小:ip5=46x46px&, ip6=46x46px,ip6plus=69x69px(是46px的1.5倍)。结论:ip6的icon,大多可以直接使用ip5的资源,plus的icon需要把ip5的icon资源x1.5倍即可,(我们当时开发xx软件的时候,android的设计尺寸是基于1080P的,我把android的资源拿出来用在plus上是完全可以的,所以开发android用的是1080P屏幕的设计师有福了,以上划线文字是原文,有错误不严谨的地方,1080P,可以将就用,我曾经把我们的 android 的1080P资源名称改成@3x,没调整大小直接放到 xcode里,模拟器跑起来 icon是很清楚的,这也可能是我们的 android 并不是640直接缩放到1080,而是每个界面手动调整的,所以资源可以暂用到 plus 上,我初期刚适配的时候是这么干的,后来发现部分图标无法识别,所以现在我又在把那些资源一个一个手动的调整成 plus 可用的 3倍(@3x)大小。)(在解释一下:例如ip5的某个icon名为:star@2x.png,那么我把android里面相同的icon拿过来改名子为 star@3x.png,直接扔到star@2x.png的同文件夹里面,xcode可以识别为plus的资源的,并且模拟器跑起来后icon的确变成高清的了,和别的没有替换的区别很明显。)&img src="lores.png" srcset="hires.png 2x, superhires.png 3x"&在上面这段代码的例子中,iPhone 6 Plus 的像素比是3x,它会加载superhires.png这张图片,而iPhone 5s,iPhone 6 则会加载hires.png这种图,其余的则加载lores.png。顺便说一句:以前IOS6,IOS7的时候看到app store首页更改了排版的样式,之前的样式记得是每个分类两排向下无限列出,现在界面内的每个分类使用的是横排可以无限滑动的样式,也就是可以不用固定在一屏内,ip6出现前并不理解这种排版样式,也没有发现这个排版的好处,当ip6和plus出现后,这种排版的样式的好处则显而易见,因为这样会更容易方便的适配各种分辨率的屏幕。所以,当你的APP单个界面有多个分类并且内容很多需要排列的时候,建议参考app store的样式,如果有更好的样式也可以分享出来哦。根据 app store 的截图来看,在未来设计 APP 的时候,资源有限的情况下,建议设计2套尺寸,以640x1136px为基础去适配 iphone4,5,6,(ip6可以在ip5的基础上空白区域拉伸即可,资源同用 ip5的,位图则要等比缩放),以px的尺寸去设计 iphone6 plus, 因为 xcode 的工程文件及 plus 代码及截图都是px的分辨率,只是屏幕物理大小是px,所以按照px的尺寸去设计,plus 上显示的物理大小才会正常,并且切图也才会是@3x.如果用1080P切图,图标资源肯定会不清楚。(如果你们的设计师人数足够多,当然iphone6也要单独设计一套。)------------------------------------------------------------------三:bannerip5的banner是640x260px,ip6是750x304px (即ip5的640x260px等比缩放后的大小)。ip6 plus排版已变化,banner图的样式变的和ipad类似,显示3个,其中1个主显示,2个是可预览的。主大小为795x387px. 比例和ip5,6都不一样,所以各家app可能需要根据自己的需要去重新排版调整了哦。结论:类似的位图,ip6等比放大即可,plus需要单独重新排版调整。在看一下手机拍的真机截图,Title和Tab bar在真机上的物理高度都是相同的。根据的提醒,此处物理高度并不相同,非常接近,我自己重新计算了下,iphone5和 iphone6的 Title bar物理高度为 9.971mm =(128*88.51 /1136),iphone6 plus 的Title bar物理高度为10.591mm =(192*121.8 /2208)。不过此处的数据用处并不大,只为求解物理高度是否相同,所以大家不用记,不过还是要感谢的认真。------------------------------------------------------------------四:相册在看相册的变化(ip6 plus 对比 ip6截图),类似的位图应该都是等比放大的,并没有像 app store单行增加数量,ip6相册单个图片的大小是186x186px,plus 的单个大小是309x309px,所以类似这样的界面, 可以等比缩放就可以了。------------------------------------------------------------------五:桌面 Icon:在来看一下桌面icon的大小对比iphone5=120x120px & & &iphone6=120x120px & &&iphone6 plus=180x180px (是iphone5/6的1.5倍,即@3x)结论:icon要出一套180x180px的尺寸。同理:关于启动图,也就是闪屏,如果你的webapp有一个启动图,那么你又得增加两行代码适配新 iPhone 了。闪屏iPhone 6对应的图片大小是750×1334px,iPhone 6 Plus 对应的是px.------------------------------------------------------------------六:自动布局及 svg 等苹果好像在IOS6的时候就提供了一种解决方案,自动布局Auto Layout :,如果设计师了解html和css会容易理解一些,我自己也只是了解html的皮毛,设计师在设计界面的时候标注的数据最好不要写固定的多少px,使用绝对定位那是iP4之前的方案,尤其现在出来了ip6和plus,如果现在还用绝对定位,设计师和工程师效率会很低,所以我们和工程师沟通的时候最好使用的是靠左,右多少,居中,及控件在屏中大小及位置是几分之几之类的标注,Auto Layout可以根据不同的设备尺寸自动计算UIView的frame,这样会更有效方便的适配更多的尺寸。Xcode6已经开始支持 FDP/svg 格式的矢量图片了,和我们的工程师沟通说可以直接出一张 PDF 的图片即可,我用 PS 导出pdf到xcode上测试可用了,顺便问一下,大家没有可以批量导出psd图层为pdf格式切图的方法,难道只能一个一个切?------------------------------------------------------------------所有的ip6&plus真机截图放在附件里面供大家下载研究。(压缩包是mac自带压缩的,在windows解压可能会乱码,哪位朋友方便可以重新上传一次分享给大家哦。)转载请保留以下信息,因为我还会针对不严谨的地方及新的发现随时修改。(最后更新于 &09:40)————————————————————————————————————————————本文转载自UI 中国,作者@ youngxkk原文地址 ————————————————————————————————————————————
打开微信“扫一扫”,将本文章分享到朋友圈
快给朋友分享吧!
1145人已收藏
小U妹文章推荐
Ctrl+Enter
Ctrl+Enter专为0基础小白量身打造的UI设计入门课程(ps,ai软件+图标技巧),在线学习2个月包教会(公开课3位师傅),拜师费1666,随到随学,可插班。抢名额请加qq群:咨询。
再过10天IPHONE6就开卖啦,大家是不是很捉急啊。对于UI设计师来讲,最近操心的应该是怎么适配新的IPHONE尺寸的问题吧,今天虎哥找到youngxkk同学写的这个攻略,希望能帮助你解开心中疑惑,那么咱就开始吧!
有幸在9月25日拿到了iP6和iP6 Plus的真机,恰好又要做适配APP的工作(从iphone5上适配到iphone6和ip6 plus上),所以在真机上研究了下苹果官方在不同分辨率下对系统APP所做的适配。同时在网上也没找到相关的真机对比截图说明什么的,又有朋友问我要IP6和PLUS的真机截图回去自己研究,既然这样,那么干嘛不利用自己已有的资源,让更多的设计师受益呢?所以那就说点什么吧,抛砖引玉,希望大家可以共同研究,少走些弯路,共同成长。
之前看过@jingdesign 的关于适配ip6的文章:
还有@罗磊的文章:Web开发者和设计师必须要知道的 iOS 8 十个变化:
作为参考(有摘抄部份)。
首先我们先看一下iphone5,iphone6和iphone6 plus的一些数据:
iPhone 6 Plus
Viewport’s device-width (in CSS pixels)
Viewport’s device-width (Android设备同分辨率参考)
Device Pixel Ratio 像素比
Rendered Pixels 渲染像素 (默认 viewport size * dpr)
640×1136
Physical pixels 物理像素(手机显示像素)
640×1136
图片资源后缀名
然后我把3个屏幕的App Store界面截图拿来对比一下:(无法查看原图?)
点击这里下载高清大图
从图上可以看出来:
一:Title bar和Tab bar
ip5和ip6的Title bar和Tab bar的高度没变,并且tab bar的icon的大小也没变,只是整栏的宽拉伸了,所以IOS工程师在早期开发的时候如果用的是Autolayout自动布局会很爽,如果是布局写死了,那真是要一个界面一个界面的改了。
结论:类似的高度不变,可以直接拉伸宽度的,还有设置界面等,甚至代码写的是靠左对齐和靠右对齐的话间距都不用调。
二:Tab bar的icon大小
图中标识的是排行榜的大小:ip5=46×46, ip6=46×46,ip6plus=69×69(恰好是46的1.5倍)。
结论:iphone6的icon,大多可以直接使用ip5的资源,plus的icon需要把ip5的icon资源x1.5倍即可,(我们当时开发xx软件的时候,android的设计尺寸是基于1080P的,我把android的资源拿出来用在plus上是完全可以的,所以开发android用的是1080P屏幕的设计师有福了。)(在解释一下:例如ip5的某个icon名为:star@2x.png,那么我把android里面相同的icon拿过来改名子为 star@3x.png,直接扔到star@2x.png的同文件夹里面,xcode可以识别为plus的资源的,并且模拟器跑起来后icon的确变成高清的了,和别的没有替换的区别很明显。)
二:banner
ip5的banner是640×260,ip6是750×304 (即ip5的640×260等比缩放后的大小)。
ip6 plus排版已变化,banner图的样式变的和ipad类似,显示3个,其中1个主显示,2个是可预览的。主大小为795×387. 比例和ip5,6都不一样,所以各家app可能需要根据自己的需要去重新排版调整了哦。
结论:类似的位图,ip6等比放大即可,plus需要单独重新排版调整。
在看一下手机拍的真机截图,Title和Tab bar在真机上的物理高度都是相同的。
在看相册的变化(ip6 plus 对比 ip6截图),类似的位图应该都是等比放大的,并没有像 app store单行增加数量,ip6相册单个图片的大小是186×186,plus 的单个大小是309×309.
在来看一下桌面icon的大小对比
iphone5=120×120
iphone6=120×120
iphone6 plus=180×180 (是iphone6的1.5倍,即@3x)
所有的ip6&plus真机截图放在附件里面供大家下载研究。(压缩包是mac自带压缩的,在windows解压可能会乱码,哪位朋友方便可以重新上传一次分享给大家哦。)
原文地址:
转载请注明: &
学UI就上学UI网!越努力,越幸运!
“学UI网 ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!
【特色推荐】
海量APP截图,让你灵感爆发!国内最好的APP截图站。
同一个APP,IOS和安卓截图对比分析,并且提供5种以上尺寸的APP截图打包下载,真贴心。
专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?
【学UI网 原创文章 投稿邮箱:,也可以找各个群的管理】
你可能喜欢的:

我要回帖

更多关于 instagram 原图尺寸 的文章

 

随机推荐