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 58x58px @ 160ppi, not including drop shadow. I made the icons in this kit exactly the size of the ones in the scaled doc.

iPhone icon .psd kit


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

psd kit

Discuss this post

Thanks, very useful kit.

Thiemo Gillissen said this on August 16th, 2008

As a web UI designer looking to cross over to the iPhone platform, I appreciate the groundwork you’ve done here. Thanks for sharing!

Jason said this on August 17th, 2008

Happy to help! Soon I will provide a better tutorial and .psd kit. Keep your eyes peeled!

Buck said this on August 17th, 2008

heya’ – my understanding is tthat apple adds the corner rounding, shading, etc. to your flat icon. Is that anyone else’s understanding?

Nick said this on August 25th, 2008

@Nick: for native applications it’s both possible to let apple add the rounding/shading or to provide a ‘pre-rendered’ icon for your iPhone app

Joris Kluivers said this on August 27th, 2008

nicely done!!!

Anonymous said this on September 8th, 2008

Cool! This is the perfect start for getting that coveted iPhone look on other devices.

Anonymous said this on September 9th, 2008

Thanks for the post! But according to Apple’s tech specs, the DPI is 163ppi… here’s a snipped:

“3.5-inch (diagonal) widescreen Multi-Touch display, 480-by-320-pixel resolution at 163 ppi”

Konstantin said this on September 10th, 2008

Ah, thanks for the info, Konstantin! This was created before any of the stats were released. I really need to update this .psd!

Buck said this on October 4th, 2008

Now, How do you put that icon in your app?

vibe said this on October 7th, 2008

@vibe Edit the Info.plist and add the icon’s filename under “Icon File”. If you want to get rid of the apple rendered gloss, add UIPrerenderedIcon = false to the plist as well.

Ross said this on October 23rd, 2008

Excellent! Thanks a million!

Nerdhappy said this on October 28th, 2008

thanks so much :)

Adhamox said this on November 14th, 2008

thanks bro!

brenden said this on November 26th, 2008

wow, thanks. these are _perfect_ for what I needed.

I think I owe you a drink or something

Joel Bradbury said this on November 27th, 2008

Thanks so much for sharing!

Kat Black said this on January 11th, 2009

thanks a lot my frnd…really it helps a lot….

babou said this on January 21st, 2009

iPhone home screen icons are actually 57×57.

jfm429 said this on January 26th, 2009

Cool thank you

Anonymous said this on January 26th, 2009

great kit, this really helped – to give me a jump start with my customs buttons – Thanks – keep up the good work

Anonymous said this on February 1st, 2009

Thank you very much for sharing this, much appreciated!

Dave said this on February 5th, 2009

Good quality sharing! Thank a lot!

ken said this on February 16th, 2009

Thanks a lot, great and just what I was looking for…..

toni said this on February 28th, 2009

thanks a lot bro

maxy said this on March 3rd, 2009

Thanks…exactly what I needed!!!

valerie said this on March 23rd, 2009