Icons and images for iPhone and iPad
When designing interfaces for iPhone and iPad, creating image assets at exactly the right size is critical to creating the best possible visual effect in the user interface. It can be easy starting with a blank canvas for yet another design to become too reliant on templates, previously used assets or conversion tools and overlook the fact that very small moves away from the guidelines provided by Apple can result in vastly inferior results.
For instance, the excellent Unretiner utility (formerly Unretina) – available free from the Mac App Store – can be a great time saver in that it allows a designer to produce purely “@2x” high-res images for the iPhone 4 Retina display, and then simply drag and drop them on to Unretiner to produce low-res images renamed accordingly for non-Retina displays. However, as with all such tools, it’s critical to understand when to use Unretiner and when to recreate images by hand (by which I mean, sub-standard results aren’t the fault of Unretiner but of inappropriate usage of the tool). Unsurprisingly, all icons should be re-created by hand at the required size, but often other interface assets such as buttons or table-row backgrounds also benefit from bespoke creation at the correct sizes, and can gain significant clarity and vividness.
It’s a shame Apple don’t produce easy to print “cheat sheets” of the iOS guidelines as I’m sure this would increase adoption of the positive parts of the guidelines rather than them often getting lost amongst the sometimes overly generalised parts. A good place to start to ensure optimum image production for interfaces is the Custom Icon and Image Creation Guidelines.
