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.


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    Haziq

    Haziq

    Thanks a ton! You saved my life ;)

    Oct 26, 2011 at 8:58 am
  • Reply »
    Giacomo Colddesign

    Giacomo Colddesign

    Great tut thanks!!

    Oct 27, 2011 at 3:23 am
  • Reply »
    tutspress

    tutspress

    Thanks for this tutorial. Really awesome!

    Oct 27, 2011 at 10:53 pm
  • Reply »
    Rebecca

    Rebecca

    Nice. Thanks for sharing this!

    Dec 5, 2011 at 12:27 am
  • Reply »
    CSS Criminal

    CSS Criminal

    Really clean looking app and a well documented tutorial. Thanks for sharing!

    Jan 24, 2012 at 8:06 am
  • Reply »
    Mohd Musharif Khan

    Mohd Musharif Khan

    Nice tutorial

    Feb 10, 2012 at 4:23 am
  • Reply »
    Bithy

    Bithy

    Thanks you very much.I was in a great confusion what will be the size ?  in the time of learning ...but now I know it…its for you :) Thanks again….

    May 5, 2012 at 12:23 pm
  • Reply »
    Mathew

    Mathew

    I am trying to apply the Inner Glow settings for the title bar but the image showing the settings is not displaying correctly, can you report please.

    http://www.medialoot.com/images/directory-iphone-app-tut/12.jpg

    Thanks and great tut so far :]

    Jun 25, 2012 at 10:28 pm
  • Reply »
    Azeem

    Azeem

    Sir Tomy Thomas,

    thanks for sharing…............

    Jul 11, 2012 at 3:26 am
  • Reply »
    Jennifer

    Jennifer

    That was great! Thanks so much

    Aug 14, 2012 at 5:55 pm
  • Reply »
    Günter Wagner

    Günter Wagner

    I wear for a few years to realize the idea its own iPhone app. With this workshop, you can very well make the UI ideas. A good app must really be not only functional, but also look perfect. Thank you. ;-)

    Aug 30, 2012 at 9:47 am
  • Reply »
    jared

    jared

    Thanks for the breakdown. We’ve been looking to design a new app for the iPhone and wanted to use Photoshop for it.

    Sep 20, 2012 at 7:48 pm
  • Reply »
    Hassan

    Hassan

    Nice work ... Kindly tell some useful fonts ... i am new at apps designing ... my e-mail ID is : abualhassanpervaiz@gmail.com ...

    Oct 12, 2012 at 1:26 am
  • Reply »
    alex

    alex

    Merciiii !

    Dec 8, 2012 at 11:05 pm
  • Reply »
    johny

    johny

    It is really a good visiting here .I’ll bookmark your blog and check again here regularly. I am quite certain I will learn a lot of new stuff right here! Best of luck for the nexthttp://www.achat-web.com

    Dec 27, 2012 at 11:47 am
  • Reply »
    dimpost

    dimpost

    Just amazing

    May 4, 2013 at 12:33 pm
  • Reply »
    Varun

    Varun

    Thank you for the great tutorial. I m having problems at step 7, some of the images are not properly loading and the color values are incorrect. Can someone re-upload those images or help me with the correct images. My e-mail id is varunkhanduja@gmail.com

    Jul 18, 2013 at 12:09 am
  • Reply »
    Marin

    Marin

    thanks for medialoot!

    Jan 19, 2014 at 12:45 am
  • Reply »
    Santhosh Kumar PP

    Santhosh Kumar PP

    Nice!! Thanks for sharing

    May 22, 2014 at 4:36 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      No problem, we’re glad you found the tutorial helpful!

      May 22, 2014 at 9:48 am
      • Reply »
        Berke

        Berke

        Hi, I already designed application templates on photoshop like screenshots of all pages but I don’t know how to transform them to a real application. Can you please help me ?

        Sep 4, 2014 at 9:16 am
        • Reply »
          Jenn Coyle

          Jenn Coyle

          Hi Berke, I recommend Googling app development tutorials.

          Sep 4, 2014 at 11:16 am
  • Reply »
    Purchase custom boxes

    Purchase custom boxes

    Great inspiring article really like it and impressed your working style it’s very good. I just want to say thanks for sharing interesting post.

    Dec 17, 2014 at 7:41 am
  • Reply »
    steve

    steve

    The i phone design is very tech work but its new technology for every one ,thanks for sharing it

    Apr 23, 2015 at 2:12 am
  • Reply »
    noname

    noname

    Thank you for this tutorial

    Feb 9, 2016 at 7:56 am
  • Reply »
    Name

    Name

    Hi! i’m really loving this tutorial and i’m finding it very useful, but step 5 and step 7 some images are not showing. Please help I really want to finish it. Thanks. My email is ivanmedrano677@yahoo.com

    Mar 11, 2016 at 7:58 am
    • Reply »
      Brad Lenox

      Brad Lenox

      Hey Ivan, thanks for alerting us to the issue. We will look into updating the images. If you have any specific questions about the tutorial, please feel free to contact us at info@medialoot.com.

      Mar 11, 2016 at 10:02 am
  • Reply »
    Short Bio

    Short Bio

    How to code that app after design ??

    May 25, 2016 at 10:21 pm
  • Reply »
    Max

    Max

    Good design probably costs a lot, and that is a pressing problem especially for startups and small businesses. They say here http://erminesoft.com/how-much-does-it-cost-to-design-an-app/ that it depends on location, and, I guess, quality. That is one more thing to keep in mind.

    Jul 25, 2016 at 7:45 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all