How to Design an iPhone App in Photoshop

In this tutorial, we will use Adobe Photoshop, to design a simple 3-page directory listing app for iPhone. This article will guide you through the steps, and cover all of the basic principles of designing iPhone apps using Photoshop.

Start off your project by deciding what the main purpose of your app is. And what is the simplest, most effective way to achieve that goal. For this project, we will be designing a simple 3-page directory listing app. The end goal is find a business near the user, and provide them with contact details, or driving directions. So, I decided that page 1 would feature a search bar, and live updating results. There should also be a popup that gives you an option to filter the results by category. 5 results will be displayed at any one time, and when you scroll down on the page, another 5 are automatically loaded. Page 2 is the information page for the users selected result, it features a larger picture, reviews, location, and contact details. Page 3 is the settings page, with general options for the app, and sorting preferences for the results. Once you know the essential information your app needs, do some sketches on paper, to plan the rough layout of your app. Try these Wireframe Sketch Sheets to speed things up a bit. In this tutorial we will design the first screen of the iPhone app.

Step 1: New Document

Open Photoshop and create a new document. Set the width to 640 pixels and the height to 960 pixels. If you plan to print off your concepts, the resolution of the Retina iPhone screen is 326 ppi. Fill the background with Black.

Step 2: The Top Bar

The top bar with signal and battery information should always remain a constant on iPhone apps. Unless your app is a game or has some other good reason to be full screen. As the bar is always the same, you can save time by using a pre-made image: Save, or copy and paste the image above and paste it into your Photoshop document.

Step 3: The Background

Use the Rounded Rectangle tool to draw a white shape, that fills the rest of the document. The corner radius should be 10 pixels. Let's apply a bit of texture to the background. Here is a free download of one of the textures in our Soft Grunge Seamless Textures pack. Apply this texture as a Pattern Overlay.

Step 4: The Title Bar

Draw another rounded rectangle, about 640 pixels wide and 94 pixels high. Place it just below the top bar. With the Delete Anchor Points tool selected, remove the two points highlighted red in the image below. With the Convert Point tool selected, click once on each of the two points highlighted red in the image below. The last two actions should have resulted in a rectangle that is rounded on the top corners and straight on the bottom corners. Tweak the shape if necessary so that it is exactly 640 pixels wide and 84 pixels high. Use the Direct Selection tool to select and nudge anchor points. And use the Transform tool to check the dimensions of the shape.

Step 5: Apply Styles to the Title Bar

Open the Blending Options for the title bar layer, and apply a drop shadow with the settings shown below. Apply an Inner Shadow: And finally, a Gradient Overlay:

Step 6: The Title

Use the Type Tool to create the title. Center it middle of the title bar, and apply a drop shadow:

Step 7: The Title Bar Buttons

Draw a 56 x 56 pixel rounded rectangle, and align it to the right side of the title bar, as shown below: Apply a Drop Shadow: Inner Shadow: And finally, Gradient Overlay: Place this icon from the iPhone Toolbar Icons set, just above the button. And give it a subtle Drop Shadow: Copy the button across to the left side of the title bar, as shown below: Use the Rounded Rectangle tool to draw 3 shapes, each 34 pixels wide and 7 pixels high, as shown below. Also apply a subtle Drop Shadow to all 3.

Step 8: The Leather Texture

Duplicate the Title Bar layer and move it up (ctrl+]) until it is above the title, and both buttons. Se the Fill Opacity to 0, and apply this seamless leather pattern as a Pattern Overlay with the following settings:

Step 9: The Page Background

Use the Rounded Rectangle tool to draw a shape that fills most of the remaining space. Leave a thin even margin around the shape, as shown below: Apply a Drop Shadow to the shape: Duplicate the layer twice, then select the middle layer and nudge the bottom points up 10 pixels with the Direct Selection tool. Then repeat with the top layer, but nudge it up 20 pixels.

Step 9: The Search Field

With the Rounded Rectangle tool selected, set the Radius to something high, for example 100px. Then draw a shape at the top of the page, as shown below: Apply an Inner Shadow with these settings: Place this Search Icon from the Vector Application Icons set, on the left side of the search field. Add some text: Draw a divider below the search field, using the Line Tool.

Step 10: The Thumbnail

Draw a rounded rectangle about 100 x 100 pixels, and apply a Drop Shadow as shown below: Place this icon from the iPhone Toolbar Icons set, in the middle of the shape.

Step 11: Listing Information

Add some text for the title of the listing: Add some text for the location of the listing: Use the Polygon Tool to draw 5 star shapes: Apply a Gradient Overlay to some of the stars to illustrate the rating of the listing. Add some text for the "Reviews" link.

Step 12: The More Info Button

Draw a Rounded Rectangle, the same height as the thumbnail, on the right side of the page. Apply a Gradient Overlay: Place this icon from the Vector Application Icons set, in the middle of the shape.

Step 13: Arrange the Results

Draw a divider with the Line Tool: Group all of the layers that make up the listing result. Duplicate the group 4 times and arrange them as shown below: And there you have it. The first screen of our iPhone app! These techniques can be applied to most elements of iPhone app designing in Photoshop. You can download the PSD of the end result here.