Take the 2-minute tour ×

For every developer arrives the day to improve the user interface experience because apps are evalutated mainly from the ui carefulness.

So, i've took a look around the websites and I found some psd where to start to desing my apps.

My question is: How to transform a psd prototype to a well-working app?

I don't unserstand how a mockup can help a developer to build a ui...

Can someone make me some clear the situation?

share|improve this question
You just need to slice the PSD into PNGs and apply them to different areas of your app. It depends a lot of how your app will look like, but as you get more experience you'll learn more tricks to achieve different things in different and better ways. –  EmilioPelaez Apr 16 '12 at 13:53
Using mock-ups also helps a lot just from the view point that you have a plan when you start programming. You are less likely to forget about something and have to add it in after the fact (which can sometimes be difficult) if you have mock ups that include everything that you (and your customer) wants. –  lnafziger Apr 16 '12 at 14:04

1 Answer 1

up vote 3 down vote accepted

Well, I'd be careful to make a distinction between the graphics an app uses and the actual User Interface. Certainly the graphics are part of the UI, but the UI is soooo much more than that. Depending on how it is done, photoshop mock ups can be simple graphics you can use for your interface to complexes 'scenes' describing how the app functions. In the latter case, the mock-up can be useful for UI design, in the former case it just gives you pretty images to use (which can certainly be useful).

But to more directly answer your question, most people take 'slices' (individual pieces) of the photoshop image and export them as .png images (or .jpg). If the .psd file doesn't already have the images 'sliced', look up 'photoshop image slicing' on Google. You can then import them into Xcode and use them as background images for the controls you want to use. Especially since iOS 5.0, images can be used for a lot of controls. Also, you'll probably want to make sure you make the image resizable with proper UIEdgeInsets. This will allow the image to resize without pixilation by setting an area that can be tiled within the image.

share|improve this answer

Your Answer


