iPhone Icon Style .psd Kit
August 9th, 2008
This post was originally written in June of 2007, before the iPhone was originally released, on Jotlet’s blog. I am mirroring the post here, because it really doesn’t pertain to Jotlet.
I was working off of screenshots posted on Apple’s site. However, upon release, they changed the design of their icons. Most notably they’ve gotten rid of the underglow and the inside stroke.Expect an update in the next week or so, with a proper video tutorial.
I was creating an iPhone widget icon for the Jotlet app (primarily for fun) and I noticed a few things and thought I’d share them with you, and create a psd kit for anyone wanting to do the same thing. I’m all about making things look uniform, so I used the traditional Apple iPhone app buttons as a template.
The first thing I noticed is that the iPhone screen is 160ppi. I’m not sure I’ve ever worked with a medium in a ppi other than 72 (other than print, of course), so I’m hoping I did this ok. I first created an empty photoshop doc sized 480 x 320 at 160ppi. I took the image of the iPhone here and cropped the screen out maintaining 3×2 aspect ratio. I pasted the result into the psd and scaled it up to fit. The icons in the result wound up being roughly 58×58px @ 160ppi, not including drop shadow. I made the icons in this kit exactly the size of the ones in the scaled doc.
A few things to note:
- The inner glare at the bottom of the icon is a mixture between straight white and overlayed white. For some colors the overlay may be too aggressive (bright), for some, not aggressive enough. You can just adjust the opacity of that layer to get the right effect.
- The drop shadow is actually two drop shadows. One for the softer shadow on the sides/bottom, and one for the sharp bottom shadow. I couldn’t get it quite right using just one effect.
- For custom icons, be sure and put a small (1px to 2px) stroke on it with the same color as the bg color so it looks a little beveled on top of the glare. I tried to build this into the kit by making the stroke black/soft light blend mode, but again, it didn’t look quite right.
Ok that’s all for now! I’m not sure what Apple intends to include for developers when the iPhone is launched. All I have to go on is this article that states developers will be able to create applications that “look and behave” like iPhone applications. This may or may not include other UI elements. Keep your eyes peeled here for some more iPhone related goodies!
note: digg logo property of Digg Inc. Apple icons, interface, screenshot, etc. as well as the iPhone trademark property of Apple, Inc
Thanks, very useful kit.