Convert Your App to iPhone 5 Resolution with 4-inch Tall Screen

No Comments

In iOS 6 Apple made it easy to convert your iPhone app to new 4-inch tall screen size. In XCode, select .xib or .storyboard file of your app, for example, MainWindow.xib or MainStoryboard_iPhone.storyboard, and go to File Inspector. Find “Use Autolayout” checkbox and check it. This will adjust all views according to screen size. Secondly, supply a larger default splash image of the new size 640 px by 1136 px and name it Default-568h@2x.png.

Within your app you can actually detect whether it is iPhone 5 or not and use the appropriate splash screen image. Use this code to detect iPhone 5:

#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON ) 

and later in your app delegate

splashImage = (IS_IPHONE_5) ? @"Default-568h@2x.png" : @"Default.png"; 

The splash image will tell iOS what resolution you use. Possibly you need to adjust some fixed size views if any. But all my apps worked with new resolution correctly.

iPhone, iPad App Icon Sizes and Rounded Corner Icon in Photoshop

No Comments

This tutorial will show what icon sizes are needed for iPhone or iPad development to submit your app into the AppStore. As an iOS developer, every time I make a new app I have to refresh my memory for the list of icon sizes and have to “google” or “apple” the details.

So, Apple requires the following icon sizes for iPhone, iPad apps to be submitted to the AppStore:

  1. Icon512.png – 512px
  2. Icon.png – 57px
  3. Icon@2x.png – 114px
  4. Icon-72.png – 72px
  5. Icon-72@2x.png – 144px
  6. Icon-Small.png – 29px
  7. Icon-Small@2x.png – 58px

You do not actually need to crop any of the images you use in the binary to submit to Apple. They should all be square and not have any transparency. Apple will automatically mask each icon in the appropriate context.

However, there are cases when I need to make a rounded corner icon for marketing and promotional reasons. Thus, the formula to calculate the rounded corner is:

10 / 57 * (new size)

where 57 is the base icon and 10 is its radius. You have to scale up or scale down to calculate the radius for different size icon. For example, if I want to know the radius of 114px icon I have to do this: 10/57*114. Result is 20 pixels. See the list of all icons and their corresponding radius below:

  1. 512px – 89.825
  2. 57px – 10
  3. 114px – 20
  4. 72px – 12.632
  5. 144px – 25.263
  6. 29px – 5.088
  7. 58px – 10.175

How to create a smooth rounded corner icon.

In Photoshop:

  1. Open your sized-down icon, say 114px, and double-click the Background layer to make it editable.
  2. Select the Rounded Rectangle tool from the Tools panel.
  3. In the Options bar, click the Paths mode button and change the Radius field to 20 pixels (see chart above for radius size). Make sure that the Rounded Rectangle tool is in Paths mode
  4. Click and drag diagonally to draw a box around the icon.
  5. In the Layers panel, make sure the photo layer is selected then add a vector layer mask by Ctrl +  Clicking the Add Layer Mask icon at the bottom of the Layers panel.

This will hide the area outside the rounded square, leaving you with lovely smooth corners on transparent background.