Designing for iPhone 5/6/7?
Choose 'iPhone 5' from the guiDesigner project properties drop down.
Read on below for details why!
The new Apple iPad has a native resolution of 2048 x 1536.
The iPhone 6+/7+ has a native resolution of 2208 x 1242 (downsampled to 1920 x 1080).
The iPhone 6/7 has a native resolution of 1334 x 750.
The iPhone 5/5C/5S and latest iPod Touch has a native resolution of 1136 x 640.
The iPhone 4 and previous iPod Touch both have screens with a native resolution of 960 x 640.
These are all at least twice or three times the resolution of the older models.
However, all apps are still designed in non-retina resolutions (1024×768, 568×320 and 480×320) and then iOS automatically scales the applications to the higher resolution of the “Retina Displays”. In the scaling process, Apple implemented a method of using higher resolution graphics on these devices, whilst using the original graphics for the low resolution devices.
Because all apps are still developed in the lower resolution, you also still need to use that resolution for your project size in guiDesigner. By default, any images you use in your design will be automatically scaled up to suit the Retina Display resolution.
But if you want to take advantage of the higher resolution and create a crisper interface with no scaling, you need to take one extra step for every graphic in your project.
For every graphic used in your project, you create a matching graphic that is exactly twice the pixel size of the original, and append @2x to the filename.
For example, if you had a button graphic that was 50×50 pixels, named btn_off.png you would need to create an additional graphic that is 100×100 pixels, named btn_off@2x.png.
The @2x must be appended to the end of the filename, but before the file extension.
This additional graphic does not need to be added anywhere in guiDesigner, rather just placed alongside the original file, in the same directory.
So you just create your GUI as per normal, at 1024×768 or 568×320 or 480×320, then once that is all done you must create double resolution graphics.
iViewer will automatically use the higher resolution graphics when loading the GUI file if it is run on a device with Retina Display support.
You can also create all your graphics in @2x filename convention, and guiDesigner will automatically render the images at half size. This way, if you are only targeting retina devices, you do not have to create the original lower resolution graphic at all.