I am wondering which image sizes are needed with new XCode 6 and iPhone 6 and iPhone 6 plus support.
So if I am now having a fullwidth image, which is
640 x 80 pixel
for an iphone 4s/5 series. So with "#2x". For iPhone 6 plus I need the "#3x" as well. So that would be
1242 x 80 pixel
?
Update:
My goal is it to have a fullwidth image which looks good on every iphone or ipad (Size class any any).
Assuming that your 640 x 80 image is #2x, the #3x image size would be 960 x 120 (960 = 640 / 2 * 3)
Related
Let's assume, I have selected 'View as: iPhone 8 Plus' on Main.storyboard in Xcode. We know these details:
Iphone X: 375 x 812 points (#3x) 1125x2436 pixels
Iphone 8 Plus: 414 x 736 points (#3x) 1242 × 2208 pixels
Iphone 8: 375 x 667 points (#2x) 750x1334 pixel
Let's assume I would like to put an UIImageView (top bar, header bar image) like below:
Remember, I have selected 'View as: iPhone 8 Plus'. So width of the image must be 414 points. And let's assume height of the image is 100 points. So image size must be 1242 x 300 pixels. (because 414points*3=1242px, 100points*3=300px)
so,
#3xBackground.png must be 1242 x 300 pixels.
#2xBackground.png must be 828x200, right? **(this is question 1)**
#1xBackground.png must be 414x100, right? **(this is question 2)**
What about IPhone X? Iphone X also uses #3xBackground.png image, right? (this is question3)
I see this image so sharp at iphone 8 plus. Because I create this image regarding to the iPhone 9 plus. But i can't see this image so sharp in iPhone x. Because width of iPhone X is 375points(1125 pixels) but my image width is 414 points(1242 pixels) Am i right? iphone x and iphone 8 plus use same image: #3xBackground.png. Device tries to put 1242pixel image in to 1125 px place. So how does this picture look so sharp?
Does Iphone X reduce height of the image when it puts 1242 pixel image in to 1125 px place ? (This is question 4) If reply yes. So it should be fine.
I'm working on the graphics for an app that will run in portrait mode only for the iPhone 5 - 6 plus. The images should be the total width of the portrait screen. Based on this page:
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions it looks as if my image widths should be as follows:
x = 640 pixels in width,
2x = 750 pixels in width,
3x = 1125 pixels in width
Does the above look correct?
When creating these images in Photoshop is it best to save them at 72 ppi?
Thank you for your assistance.
Not sure why your refer to them as "x", "2x" and "3x", but the screen widths (native for iPhone 4/5/6, virtual for 6 Plus) are:
640 pixels (iPhone 4/5)
750 pixels (iPhone 6)
1242 pixels (iPhone 6 Plus)
The ppi resolution doesn't matter if you set the sizes in pixels. It only matters if you set the size in cm, inches or similar length units. If you want to see them at their "real" size, you should select 326 ppi for iPhone 4/5/6 and 461 ppi for 6 Plus.
iPhone 4 and iPhone 6, when using image cassettes in a xib, use the same #2x image. Is it possible to use different images for each and not use scaled mode for windows 6/6+? I am trying to use a full screen image for each and the iPhone 6 image doesn't scale down correctly, and the iPhone 4 image doesn't scale up correctly.
For the launch image you can use the assets folder with the device specific launch images.
Here you can set the Retina HD 4.7 Launchscreen for the iPhone 6
1x = 320 x 480
2x = 640 x 960 - iPhone 4
Retina 4 = 640 x 1136 - iPhone 5
Retina HD 4.7 = 750 x 1334 - iPhone 6
Retina HD 5.5 = 1242 x 2208 - iPhone 6+
EDIT
Go to the General Settings Of your project and check your settings make sure you have selected the assets folder. Remove the Launch Screen File text.
After a lot of mess I am finally asking regarding the splash/launch screen confusion of iPhone and iPad. I visited many links but couldn't find an appropriate answer for that. I want the dimensions of iPhone and iPhone launch screens. Currently what I did for
for
iPhone
Default-568h.png (320 x 568)
Default-568h#2x.png (640 x 1136)
Default#2x.png (640 x 960)
I used these three dimensions and they are working on all iPhones(from 4s to 6 plus). But there is a launch xib now provided. So whether this xib will run for the ios 7 or not?
Now if I use these two dimensions provided above for 4s, 5 and 5s, no doubt the 640 x 1136 is also applying in iphone 6 and 6 plus, but there may be some pixel blurring in launch of iphone 6 and 6 plus. Can anyone provide a generic way for launch screen for all devices (4s to 6 plus) with ios 7 and 8 support too.
iPhone 6 and 6plus
6+ (1242x2208)
6 (750x1334)
Question:-I know these dimensions are used for iphone 6 and 6+ but what will be the name of .png for these two devices just like we used Default-568h#2x.png etc for other devices if in case we don't use launch xib.
iPad
Default-Portrait~ipad.png (768 x 1024)
Default-Portrait#2x~ipad.png (1536 x 2048)
Similarly for landscape
Default-Landscape~ipad.png (1024 x 768)
Default-Landscape#2x~ipad.png (2048 x 1536)
Question:-Is any other dimension is required with some other name?
ICONS
I used to to do entry in .plist with Icon Files and the dimensions are
29 x 29
40 x 40
50 x 50
56 x 56
57 x 57
58 x 58
60 x 60
72 x 72
76 x 76
80 x 80
100 x 100
114 x 114
120 x 120
144 x 144
152 x 152
512 x 512 for iTunesArtwork.png
1024 x 1024 for iTunesArtwork#2x.png
Question:- I listed almost all icon dimensions are but What will the the minimum number of icons that I need for all iphones (4s to 6 plus) and iPad? How many icon dimensions can I disgard from the above list. Any help will be appreciated in clearing the confusion.
Thanks
Launch screen
If you only support iOS 8.0+.
You only need LaunchScreen.xib.
Otherwise use Images.xcassets.
You can enable it in "Target > General > App Icons and Launch Images"
Select LaunchImage in Images.xcassets.
You can select support device and os in inspector.
Then XCode will tell you how many images you need.
You don't need to care image name just drag and drop it.
Icons
Use Images.xcassets.
I got the following numbers for iPhone devices, from PaintCodeApp website
Device Zoom display Points Rendered pixels Scale
W H W H
iPhone 6 Plus Off 414 736 1242 2208 #3x
iPhone 6 Plus On 375 667 1125 2001 #3x
iPhone 6 Off 375 667 750 1334 #2x
iPhone 6 On 320 568 640 1136 #2x
iPhone 5 - 320 568 640 1136 #2x
iPhone 4 - 320 480 640 960 #2x
iPhone 3GS - 320 480 320 480 #1x
Since my apps were designed for iPhone 3GS up to iPhone 5, the supported points frames are 320x480#1x, 320x480#2x and 320x568#2x.
I assume that on an iPhone 6 with the zoom mode enabled, the display should be the exact same as the iPhone 5, since the points frame is 320x568#2x as well. This might be wrong, since I cannot find no confirmation.
Now, what I'm really wondering is how my apps shows on iPhone 6 with the zoom mode off, and on iPhone 6 plus with or without the zoom mode, since the points frames are 375x667#2x, 375x667#3x and 414x736#3x.
Apple Developer Support couldn't give me no hint nor documentation to read on the subject. Since I haven't bought the new devices, is there anyone who knows what actually happens with old apps ?
For those like me who wonder how are treated legacy apps, I did a bit of testing and computation on the subject.
Thanks to #hannes-sverrisson hint, I started on the assumption that a legacy app is treated with a 320x568 view in iPhone 6 and iPhone 6 plus.
The test was made with a simple black background bg#2x.png with a white border. The background has a size of 640x1136 pixels, it is black with an inner white border of 1px.
Below are the screenshots provided by the simulator :
iPhone 5 simulator : http://i.stack.imgur.com/b2E5K.png
iPhone 6 simulator : http://i.stack.imgur.com/4Qz8N.png
iPhone 6 plus simulator : http://i.stack.imgur.com/hQisc.png
What we can see on the iPhone 6 screenshot is a 1px margin on top and bottom of the white border, and a 2px margin on the iPhone 6 plus screenshot. This gives us a used space of 1242x2204 on iPhone 6 plus, instead of 1242x2208, and 750x1332 on the iPhone 6, instead of 750x1334.
We can assume that those dead pixels are meant to respect the iPhone 5 aspect ratio :
iPhone 5 640 / 1136 = 0.5634
iPhone 6 (used) 750 / 1332 = 0.5631
iPhone 6 (real) 750 / 1334 = 0.5622
iPhone 6 plus (used) 1242 / 2204 = 0.5635
iPhone 6 plus (real) 1242 / 2208 = 0.5625
Second, it is important to know that #2x resources will be scaled not only on iPhone 6 plus (which expects #3x assets), but also on iPhone 6. This is probably because not scaling the resources would have led to unexpected layouts, due to the enlargment of the view.
However, that scaling is not equivalent in width and height. I tried it with a 264x264 #2x resource. Given the results, I have to assume that the scaling is directly proportionnal to the pixels / points ratio.
Device Width scale Computed width Screenshot width
iPhone 5 640 / 640 = 1.0 264 px
iPhone 6 750 / 640 = 1.171875 309.375 309 px
iPhone 6 plus 1242 / 640 = 1.940625 512.325 512 px
Device Height scale Computed height Screenshot height
iPhone 5 1136 / 1136 = 1.0 264 px
iPhone 6 1332 / 1136 = 1.172535 309.549 310 px
iPhone 6 plus 2204 / 1136 = 1.940141 512.197 512 px
It's important to note the iPhone 6 scaling is not the same in width and height (309x310). This tends to confirm the above theory that scaling is not proportional in width and height, but uses the pixels / points ratio.
I hope this helps.