In my free time, I have been experimenting with the iPhone home screen icons. I was initially pleased by the icons, but found several to be lacking after having looked at them for prolongued periods of time. Since I don’t want to be greedy, I will share some techniques, know-how and tips with you to help you get up to speed designing icons for your own iPhone. I will also look at my upcoming set of icons and discuss why I am changing so little to the look of the default icons.
First off, the basics. iPhone icons generally come in two sizes, one of which you see most; the home screen icons are 57×57 pixels, whereas some icons can also be seen in 29×29 list size; an example of the list sized icons can be seen in the iPhone settings. For all icons, it is wise to ensure proper clarity at this smaller size as well; several applications boast icons in a list view. On the home screen, it’s a good idea to restrict yourself to a fixed radius of the rounded corners; mixed corner styles get annoying pretty quickly. When designing my icon set, I took in mind the style of the device and the UI to ensure a coherence in the design. My colleagues of mezzoblue made some observations about this and I recommend you do the same; flip through menus and applications and go back to the home screen. Some designs are more obvious when you have gotten around to using the applications behind them. Keep this method in mind when testing new icons.
When you’re eager to look at the iPhone resources on your Mac or PC, you’ll have a hard time opening the files; Apple uses a custom PNG format for the bitmap resources of its applications. You can use the commandline utility fixpng, made by my fellow Dutchman Marco. Surprisingly, you won’t have to modify your own PNG graphics to use them – apparently, the iPhone can handle either without problems. The icons for each application on the home screen can be found in the bundles, which you can find on your iPhone’s /Applications folder. For changing the Weather app icon, for example, you have to place your icon.png in /Applications/Weather.app/, overwriting the existing icon.png. It’s worth noting that apart from not using ICNS files like in regular OS X, the iPhone also uses PNG format icon resources instead of the default of TIFF on OS X.
I compiled a set of resources for the interested, with high-resolution versions of the default icons and Photoshop files of base shapes you may want to use. Feel free to use these shapes and their associated styles for your own iPhone icon or graphic. I do want to mention that the original icons are property of Apple Inc. and should be treated as such.
It’s worth bearing in mind that the iPhone’s pixels on the screen appear very close together to the point of blending; no wonder, given the iPhone boasts an additional 40 pixels or so per inch of screen. May this also serve as a reminder to proof your icons on the actual screen; some details can get lost, and things look invariably different on your iPhone.
Now, on to my icons; So far, I have completed 4 icons that I use as replacements of Apple’s defaults. I think at several points, that there is room for improvement and consistency with the aesthetic of OS X on the desktop, and the UI of the applications that the icons are supposed to represent. Here is a shot comparing the old icons to the new icons; note that there are some color mismatches between the old icons and the new ones that don’t exist in reality (the left side is oversaturated) and the Notes icon is still a bit rough.
Old and new. Click for full size.
As you can observe, I have changed the Settings, Weather, Notes and Calendar icon so far. I will discuss my changes for each.
Settings; Settings had an odd problem; the dislocation of the iPhone settings icon and the Leopard System Preferences seems to be obvious; iPhone uses odd pointy gears with a strikingly oversimplified background. After about a week, I found this icon incredibly annoying and fixed up a better icon to replace it. Here’s a comparison of the Leopard System Preferences icon, the iPhone settings icon, and my new iPhone settings icon.
Apple, you can do better than this.
I am not sure of your preference, but mine certainly lies with the Leopard icon.
Weather What I found interestingly annoying about the Weather icon was that it didn’t really relate to the UI of the application behind it. Louie Mantia also re-colored the icon to the ‘widget’s’ interface colors, and I think that’s a good idea. I chose to add more detail to the icon, matching the composition of the neighboring Maps icon to balance out the shapes and represent the UI more accurately.
Calendar and Notes; I found the icons for these quite flat, given the ‘multi-document’ nature of the applications behind them. I have redrawn the calendar icon to temper the over-saturated colors of the default icon and add more subtle shading, like you can see on your desktop in the iCal icon.
Clock; Now here’s a very curious icon; it seems the icon has been taken straight from the widget on OS X, not bearing in mind that the application doesn’t even feature clocks on a black background. I have always found the dashboard clocks quite ugly on black and I really like the appearance of the clocks in the iPhone application. It was a no-brainer to make the background of the clock match the application’s toned-down silver-ish background.
Over the next few weeks, I intend to replace the SMS, Phone and iPod icons with something a bit more photorealistic, and changing the Maps, Photos and Camera icons to less generic imagery (I would like to see satellite imagery for Maps, and the Camera would be nice if it looked more like it actually is in real life). I have an ongoing effort for these icons, but I found it’s quite hard to get something at the same level of quality as the defaults and just blends in. Of course, your input is welcome, as are requests.
Feel free to download the iPhone shapes and styles here, and a complete set of hi-resolution JPEG’s of the default iPhone icons here. I will release a set of freeware iPhone replacement icons in a week.
Feel free to digg this