Icons on iOS and OS X

Sometime I need some small table to resume quickly the artwork required for the iOS and OsX applications. They are often the same image, but in different resolutions. Here they are:

OsX

	Resolution	Notes
Icons	1024 x 1024 pixels 512 x 512 pixels 256 x 256 pixels 128 x 128 pixels 32 x 32 pixels 16 x 16 pixels
Toolbar icons (inside control)	19 x 19 pixels	Outline style, recommanded to be black
Toolbar icon buttons	32 x 32 pixels	Color with antialiasing
Sidebar icons	16 x 16 pixels 18 x 18 pixels 32 x 32 pixels	Black and white with alpha, all three resolutions required

More information for Os X here: Icon Design Guidelines

iOS

	Resolution	Notes
Icon for iPhone	57 x 57 pixels	Suggested name: Icon.png. No shadow or round corners required.
Icon for iPhone with Retina Display	114 x 114 pixels	Suggested name: Icon@2x.png. No shadow or round corners required.
Icon for iPad	72 x 72 pixels	Suggested name: Icon-72.png. No shadow or round corners required.
Small icons iPhone (Spotlight and settings)	29 x 29 pixels
Small icons iPhone High Resolution (Spotlight and settings)	58 x 58 pixels
Small icons iPad (Spotlight)	50 x 50 pixels	It trims the side pixels (safe area 48x48)
Small icons iPhone (settings)	29 x 29 pixels
Toolbar icons for iPhone	20 x 20 pixels	Approximately
Toolbar icons for iPhone High Resolution	40 x 40 pixels	Approximately
Toolbar icons iPad	20 x 20 pixels	Approximately
Tab bar icons iPhone	30 x 30 pixels	Approximately
Tab bar icons iPhone High resolution	60 x 60 pixels	Approximately
Tab bar icons iPad	30 x 30 pixels	Approximately

More information for iOS here: Custom Icon and Image Creation Guidelines

Open source/free toolbar icon sets

Some link to free/open source iPhone toolbar icon set:

• TWG Retina Icons
• PP Free iPhone Toolbar Icons
• Glyphish

How to check if our app is running on an iPad or iPhon

The easiest way is using the UI_USER_INTERFACE_IDIOM macro. Only SDKs 3.2 an later support it. Here an example:

if (UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPad) 
{
  NSLog(@"I'm on iPad");
}

In the same way:

if (UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPhone) {
  NSLog(@"I'm on iPhone or on an iPod touch"); 
}

The macro uses the [[UIDevice currentDevice] userInterfaceIdiom] method. If you are sure that your SDK supports the userInterfaceIdiom selector, you can also use something like this:

[[UIDevice currentDevice] userInterfaceIdiom]==UIUserInterfaceIdiomPad

How to take screenshots directly on the iPhones

If you want to take a screen-shot directly from your iPhone/iPod touch/iPad, and find it directly in your photo library, there is a simple procedure:

1. Press the Home button, without releasing it;
2. Press and release the Sleep button;
3. Release the Home button.

That's all! Now go in your camera roll, and enjoy the image of screen. Some more thing on screen-shots here!
The (so called) Home and Sleep buttons are marked in red in the picture.

iPhone screenshots for the App Store

Apple suggests formatting the screenshots for iPhone and iPad with a specific resolution, and, possibly, without the status bar. If you use XCode to take the screenshots you can find that they are not exactly that way, and they are stored in png format.

Updating the screenshots could be a boring task, so why don’t you write a script taking advantage of ImageMagick that automatically crop your images and convert them in jpg? In that way they will be ready to be posted on the App Store and on your web site.

We want to do the following steps:

1. Crop the images to a specific width and height
2. Convert them in jpg to reduce their weight
3. Prepare some thumbnail for our web site

ImageMagick has several tools, we will just use mogrify. Our first goal is to cut the status bar. If you took the screenshot from an iPhone with the Retina Display, the bar will be 40 pixels tall. On the iPad will be 20 pixels tall. For example here there is a screenshot taken from our Sudoku:

The operation we want to apply is the “crop”. The original image’s size is 640x960 pixels on portrait Retina Displays (768x1024 on iPads). We want to take the area starting at 40 pixels from the top, with the size of 640x920 pixels. The way mogrify do this, is using the –crop flag:

mogrify –crop 640x920+0+40 imagename.png

If we want contextually convert the image to the jpeg format we can add the ‘-format’ flag

mogrify -format jpg –crop 640x920+0+40 imagename.png

What about the thumbnails creation? You just need to add another flag, ‘-thumbnail’ with the maximum thumbnail’s width and height

mogrify -format jpg –crop 640x920+0+40 -thumbnail 120x120 imagename.png

For more information you can check the ImageMagick Web Site (www.imagemagick.org), or take a look at their books:

Here is the complete script. It assumes that you called the screenshots with the names: screenshot_iphone_n.png and screenshot_ipad_n.png (where n is the picture number, e.g., screenshot_iphone_1.png, screenshot_iphone_2.png, …), and it stores the thumbnails in a subdirectory.

#!/bin/sh

# Installation directory of ImageMagick (if not in PATH)

IMDIR='/ImageMagick-6.6.7/bin'

# Crop flag for iPhone with Retina Display

CROP='-crop 640x920+0+40'

# Crop flag for iPad

CROPIPAD='-crop 768x1004+0+20'

# Thumbnails directory

THUMBSDIR=thumbs

# Thumbnail flag

THUMB='-thumbnail 120x120'

# Adjust the screenshots

$IMDIR/mogrify -verbose -format jpg $CROP screenshot_iphone*.png

$IMDIR/mogrify -verbose -format jpg $CROPIPAD screenshot_ipad*.png

# Make the thumbnails

mkdir $THUMBSDIR

$IMDIR/mogrify -format jpg $CROP -path $THUMBSDIR $THUMB screenshot_iphone*.png

$IMDIR/mogrify -format jpg $CROPIPAD -path $THUMBSDIR $THUMB screenshot_ipad*.png