Tag Archives: PSD

How to Get Started Designing iPhone Apps – My Experience

As I started to design our first app I found that it was very difficult to know where to start. Apple doesn’t seem to have many resources for designers but has loads available for developers. So the first direction I went was to understand the dimensions of the iPhone and I made a PSD that work with those dimensions. However, I need something better.

After some poking around, I came across a great Photoshop file available for download for free by Teehan + Lax.[1] It had all the iPhone user interface buttons and sliders and menu bars, and it also had the iPhone body. I started to use that (note: it’s a very large file so you need to have a fair amount of RAM available) and it was such a timesaver. It also made it easy for creating the screenshots and mockups of what the UI would look like on the phone.

So about halfway through the design proces, I to realized that I needed to up-convert my design for the iPhone 4, and this presented a really confusing challenge for me because I knew that iPhone 4 had a much higher resolution than the previous generations and that it displayed 326 dots per inch. So this confused me until I realized that I didn’t have to make my Photoshop file at that size and dpi.  All I needed to do was double the size of everything I designed for the regular iPhone. A 48×48 button on the 3gs becomes 96×96 on the iPhone 4.

But beginning at 48×48 and converting upwards is very time consuming. It makes much more sense to start at 96×96 and then export at half the size. In other words, work from iPhone 4 resolution downward. By now I’m sure you’re wondering if Teehan + Lax made an iPhone 4 version of their fantastic psd, and the the answer is YES![2] I’m very appreciative to them for this great asset because it seems like a lot of work when you read their blog article, and they’ve presented quite a resource for us designers. So hopefully after reading this, you will have learned from my mistakes and be able to get over that initial slump am not knowing how to begin.

Link Footnotes:

1. iPhone GUI PSD Version 4
2. iPhone 4 GUI PSD (Retina Display)