Adapting your iPhone 5 designs for iPhone 6 & 6 Plus with Antetype

With the announcement of new iPhone sizes from Apple yesterday, let’s just have a quick look at how quickly an Antetype design can be adapted for the two new phone sizes and even in the landscape orientation.

Settings-iPhone5-PortraitSettings-iPhone6-PortraitSettings-iPhone6-Plus-Portrait

Below are the steps needed to adapt the design to any screen size, but in this case we will show the examples for the new iPhone 6 and iPhone 6 Plus

1.Open the iOS 7 – Phone  Settings Template

Press ⌘+N to Open the Template Chooser, then select the iOS7 – Phone Category and choose the Settings template

2. iPhone 5 / 5S / 5C sized template – 320 x 568

3. Set the screen to the iPhone 6 dimensions (375 x 667)

N.B. The screen should be selected when you open the file – if not the wrong cell will be changed.

This now shows the extra area of the new iPhone 6, but the content is still sized for an iPhone 5

4. Select the Settings object

Open the Screen Inspector (⌥⌘1) and select the Settings cell from the list (1)

5. Open the Size Editor

Note the size of the Settings object is set to Manual Width and Height resizing

6. Change the resizing to Stretch

This means the Settings cell will now stretch to the size of the screen

7. Select the screen again

Make sure the screen from the upper list is selected (1) and nothing is selected in the lower list (2)

8. The content now stretches to take up the entire screen.

9. Change the size to match an iPhone 6 Plus (414 x 736)

The content again stretches to the size of the iPhone 6 Plus

10. Check out the content for an iPhone 6 Plus in Landscape (736 x 414)

Again just change the size of the screen to match

Comments are closed.