ios切图(一倍图+二倍图+三倍图)

工作中,一直做移动端app(不包括ios和ipad),所以对一些手机端的比较熟悉,但没做过ipad端的,今天工作中正好有碰到一个ipad设计(效果图+切图),刚开始以为和手机端一样,但做的过程中发现还是有不一样的地方,比如常识性的切图(一倍图,@2x,@3x),我开始以为只要图片够大,就不用整什么两倍图,三倍图的,只要图片能自适应各种屏幕就行了吧,但后来发现还是必须要有的,ios系统必须要这个bg@2x.png和bg@3x.png,加上一倍图bg.png就是这三张图必须要有,不管你的原图多大,多高清,你设置的多自适应,这三张图你必须提供!呜呜呜..........常识性的东东.......

这过程中找了一些资料,搜集整合,分享给一些有需要的伙伴们!

 

一,ios开发为什么要弄@2x和@3x两套图 ?

1.对不同size的屏幕会自动匹配不同的图片。代码中只要写前面的图片名就好了,系统会自动找到对应图片的。

2.@2x 和 @3x 名字是一样的,系统会自动判断添加哪套图的

3.@2x给Retina屏幕用的,@3x是给6plus用的

例如:

一个是30px*30px的PNG图片,用原名来命名即可,例如sample.png。

一个是60px*60px的PNG图片,这个要用原名@2x来命名,例如sample@2x.png。

一个是90px*90px的PNG图片,这个要用原强调内容名@3x来命名,例如sample@3x.png。

这样把这三张图片导入进工程,你会神奇地发现,这三个文件居然会被iOS统一识别为sample.png

 

二,应用场景

(1) 1x的图标用于1:1的屏幕,非视网膜屏,例如iPhone 3GS、(/20140414DEL/ //早期iPhone 4)

非视网膜屏的众多iPad等。

(2) 2x的图标用于1:2的屏幕,大部分视网膜屏,机型如(/20140414ADD/ iPhone 4、)iPhone 4S

、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。

(3) 3x的图标目前应用于1:3的屏幕,即iPhone 6Plus

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页