How to Design an iPhone App in Photoshop

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. design an iphone app in photoshop 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. design an iphone app in photoshop Fill the background with Black. design an iphone app in photoshop

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: design an iphone app in photoshop Save, or copy and paste the image above and paste it into your Photoshop document. design an iphone app in photoshop

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. design an iphone app in photoshop 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. design an iphone app in photoshop

Step 4: The Title Bar

Draw another rounded rectangle, about 640 pixels wide and 94 pixels high. Place it just below the top bar. design an iphone app in photoshop With the Delete Anchor Points tool selected, remove the two points highlighted red in the image below. design an iphone app in photoshop With the Convert Point tool selected, click once on each of the two points highlighted red in the image below. design an iphone app in photoshop The last two actions should have resulted in a rectangle that is rounded on the top corners and straight on the bottom corners. design an iphone app in photoshop 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. design an iphone app in photoshop

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. design an iphone app in photoshop Apply an Inner Shadow: design an iphone app in photoshop And finally, a Gradient Overlay: design an iphone app in photoshop

Step 6: The Title

Use the Type Tool to create the title. Center it middle of the title bar, and apply a drop shadow: design an iphone app in photoshop

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: design an iphone app in photoshop Apply a Drop Shadow: design an iphone app in photoshop Inner Shadow: design an iphone app in photoshop And finally, Gradient Overlay: design an iphone app in photoshop Place this icon from the iPhone Toolbar Icons set, just above the button. And give it a subtle Drop Shadow: design an iphone app in photoshop Copy the button across to the left side of the title bar, as shown below: design an iphone app in photoshop 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. design an iphone app in photoshop

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: design an iphone app in photoshop

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: design an iphone app in photoshop Apply a Drop Shadow to the shape: design an iphone app in photoshop 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. design an iphone app in photoshop

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: design an iphone app in photoshop Apply an Inner Shadow with these settings: design an iphone app in photoshop Place this Search Icon from the Vector Application Icons set, on the left side of the search field. design an iphone app in photoshop Add some text: design an iphone app in photoshop Draw a divider below the search field, using the Line Tool. design an iphone app in photoshop

Step 10: The Thumbnail

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

Step 11: Listing Information

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

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: design an iphone app in photoshop Place this icon from the Vector Application Icons set, in the middle of the shape. design an iphone app in photoshop

Step 13: Arrange the Results

Draw a divider with the Line Tool: design an iphone app in photoshop Group all of the layers that make up the listing result. Duplicate the group 4 times and arrange them as shown below: design an iphone app in photoshop 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.

Comments

X

You've successfully logged in!