Part Two: Splash Screens and App Icons
In the first post of this series, we illustrated how to create optimised versions of your photos at various required sizes for output. Using these same principles, in this post, were going to show you how to create images for your splash screen and home screen.
One thing to think about if you havent already is the visual identity of your field guide. What will it look like in terms of a logo, branding, colours and featured imagery? This is based on your intended audience and the feeling you'd like to convey. Also give some thought to the consistency of the brand across the various aspects of your app. Using only one or two typefaces and a consistent colour scheme helps your app appear not just professional, but like you've put some thought into how your app represents your content, which you've no doubt been crafting for a long time. If this all sounds foreign to you, its worth getting a graphic designer involved to help you through this process.
So once you have a look that would make Beyoncé jealous, youll need to think about what it is you want to display when your users start up the app the splash screen or launch image. This is the first thing users will see once they launch your app. It only shows for a few seconds, so keep it as simple as possible. Think of your splash screen as a billboard. If you're driving down a freeway and see an advertisement on the side of the road, you've got a couple of seconds (if that) to read it. So it's best to save that essay for inside the app.
As far as technical requirements are concerned, there are a few versions to consider. For an iPad app splash screen, youll need a PNG or JPEG image with dimensions of 768 x 1004 pixels. The iPhone and iPod Touch splash screen requires a 640 x 960 pixel image for the Retina Display (Apples 326ppi high density display). You'll also need to supply a version at half the size (320 x 480) for iPhones and iPod Touches that arent young enough to have a Retina Display. Here are some examples of the screens we created for the Museum Victoria Field Guide..
To get a feel for how your splash screen will look in the real world, you may like to preview these at their native size on the device before you proceed with development. One way to do this is to import the images into iPhoto and then sync them with your iPhone, iPod or iPad.
There is one more image that your users will see before theyve launched your app in fact, before they've even downloaded your app which is the application icon. This is used as an icon on the home screen as well as acting as a badge in the app store. This must be an opaque square image with 90 corners. Apple requires that you provide this with dimensions of 57 x 57 pixels, 72 x 72 pixels for iPad, 114 x 114 pixels for Retina Display and 512 x 512 pixels for the App Store. In iOS, your icon will automatically be displayed with rounded corners and a drop shadow. Your icon will also have reflective shine unless you create a pre-composed image, which you can specify in your apps Info.plist file.
For further information on these image specifications, you can view the Image Creation Guidelines on Apples website.