Learn How To Create A Mobile App’s Style Layout

Mobile Apps are becoming ever increasingly popular so in todays tutorial I’ll be walking you through creating your very own mobile apps style layout from scratch using adobe photoshop.

In Interface

What We’ll Be Creating

Learn How To Create A Mobile Apps Layout

Resources Used In This Tutorial

Drafting Out The Header

Create a new (Ctrl + N) document 1200 x 1150 pixels with a white #ffffff background. Select the “Rectangular Marquee Tool” (M) and drag out a rectangle at the top of the canvas 1200 pixels wide and about 220 pixels in height.

Learn How To Create A Mobile Apps Layout

Once you have created the rectangle label the layer “Header”. Now select the “Rounded Rectangle Tool” (U) with a radius of 20 pixels.

Learn How To Create A Mobile Apps Layout

Drag out a rounded rectangle just above the bottom of edge of the header rectangle, this rectangle should be around 950 pixels wide and about 60 pixels in height.

Learn How To Create A Mobile Apps Layout

Label the rounded rectangle layer “Navigation”. Reselect the “Rounded Rectangle Tool” (U) then just above the navigation rectangle on the right hand side drag out a small rectangle big enough to be a search field. Label this new layer “Search”.

Learn How To Create A Mobile Apps Layout

Bringing The Header Area To Life

Select the “Header” layer then add the following layer styles using the settings below.

Learn How To Create A Mobile Apps Layout

Learn How To Create A Mobile Apps Layout

Create a new layer above your “Header” layer and label it “Header Glow”. Make a selection around the “Header” layer by going to “Layer > Load Selection” then select the “Gradient Tool” (G) with a “Radial Gradient”. In the fill options bar change the gradient type to “Foreground To Transparent”.

Learn How To Create A Mobile Apps Layout

Drag the gradient from the top center of the header, once you have applied the gradient set the opacity to around 15%. You should have something like this.

Learn How To Create A Mobile Apps Layout

Bringing The Navigation To Life

Select the “Navigation” layer then add the following layer styles using the following settings.

Learn How To Create A Mobile Apps Layout

Learn How To Create A Mobile Apps Layout

Learn How To Create A Mobile Apps Layout

Inside of the navigation bar add some textual links using the “Text Tool” (T).

Learn How To Create A Mobile Apps Layout

In between each navigation item, create two 1 pixel lines next to each other on a single layer, the two lines should be the same height as the navigation rectangle.

Learn How To Create A Mobile Apps Layout

Once you’ve created the lines set the layer blend mode to “Overlay”, you should have something like this.

Learn How To Create A Mobile Apps Layout

Next, we’ll create a hover state for one of the navigation items. Select the “Zoom Tool” (Z) then zoom into one of the navigation links, draw a white #ffffff single line along the stroke on the navigation rectangle. The line should start at the left divider and end at the next divider line.

Learn How To Create A Mobile Apps Layout

Once you’ve drawn the line add the following layer styles.

Learn How To Create A Mobile Apps Layout

Learn How To Create A Mobile Apps Layout

The navigation should now look something like this.

Learn How To Create A Mobile Apps Layout

Adding Detail To The Search Field

Select the search field layer then add the following layer styles using the settings below.

Learn How To Create A Mobile Apps Layout

Learn How To Create A Mobile Apps Layout

Learn How To Create A Mobile Apps Layout

Once you’ve added the layer styles add a small white #ffffff magnifying glass icon which can be found in the custom shapes library. Then add the text “Search Here…” inside of the search field using the “Text Tool” (T).

Learn How To Create A Mobile Apps Layout

Finishing The The Header

To finish the header off simply select the “Text Tool” (T) and add your website title and slogan. The font i used for the website is “HelveticaNeue LT 55″.

Learn How To Create A Mobile Apps Layout

Creating The Featured Area

On a new layer underneath all the header elements select the “Rectangular Marquee Tool” (M) and make a selection similar to the image below.

Learn How To Create A Mobile Apps Layout

Once the selection has been made fill (G) the selection with any random color, then add a “Gradient Overlay” using the settings below.

Learn How To Create A Mobile Apps Layout

Learn How To Create A Mobile Apps Layout

On the left hand side of the featured area add some example featured text, leaving space on the right for an image.

Learn How To Create A Mobile Apps Layout

Download the “HTC Pad” from the resource list.

Then copy over the HTC Pad and place it inside of the featured area on the right. Resize the HTC Pad with the “Free Transform Tool” (Ctrl + T).

Learn How To Create A Mobile Apps Layout

Next, download the Loupe: Screenshot Magnifier from “Premium Pixels” then drag the magnifier onto the canvas over the HTC Pad.

Learn How To Create A Mobile Apps Layout

On a layer above the magnifier layer drag a bigger version of the HTC Pad, right click the bigger version of the HTC Pad layer and select “Create Clipping Mask”. The bigger HTC Pad should disappear inside of the magnifying, simply move (V) the bigger HTC Pad until you have something like this.

Learn How To Create A Mobile Apps Layout

Creating The 2nd Navigation

On a new layer below all your other layers select the “Rectangle Tool” (U), then drag out a rectangle underneath the featured area.

Learn How To Create A Mobile Apps Layout

Add a “Gradient Overlay” to the 2nd navigation rectangle using the settings below.

Learn How To Create A Mobile Apps Layout

Inside of the 2nd navigation rectangle add a couple of sub headings with a small description. In between each sub heading add the little divider lines as we did with our 1st navigation.

Learn How To Create A Mobile Apps Layout

Finally above one of the sub headings add a small arrow pointing upwards. This can be created using the “Polygonal Lasso Tool” (L).

Learn How To Create A Mobile Apps Layout

Creating The Content Area

Select the “Rectangular Marquee Tool” (M) then make a selection around the last bit of the white area, as shown below.

Learn How To Create A Mobile Apps Layout

Set the “Foreground” color to #cecece and “Background” color to #ffffff, select the “Gradient Fill Tool” (G) then drag a linear gradient from the top of the selection downwards a couple of pixels.

Learn How To Create A Mobile Apps Layout

Select the “Rectangular Marquee Tool” and create two 1 pixel lines on top of each other, just like we did for our navigation only this time create them horizontally. Place the lines where the blue navigation meets the gradient. Once created set opacity to 50%.

Learn How To Create A Mobile Apps Layout

In the space left over begin to build up your content, I’ve done nothing special just add some dummy text and a list for the blog entries. You can take more time on your content area and get it looking how you want to.

Learn How To Create A Mobile Apps Layout

Creating The Footer

For the footer simply select the “Rectangular Marquee Tool” (M), drag a selection out at the bottom of the canvas then fill (G) the selection with the color black #000000. Inside of the footer add your copyright information and maybe a small textual navigation.

Learn How To Create A Mobile Apps Layout

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Learn How To Create A Mobile Apps Layout

Download Source

  1. August 17, 2011 at 7:34 PM

    omg very very nice

  2. August 18, 2011 at 4:54 AM

    I love the navigation, its very cool, thanks for the tutorial

  3. August 18, 2011 at 2:02 PM

    Thanks for the detailed tutorial. I really like the glowing navigation bit. Cool!

  4. John
    August 18, 2011 at 2:39 PM

    Great Tuts Richard.. I will see when i have the time to try this out.. it has definitely some great outcome..much appreciated

  5. Infamous_LA
    August 18, 2011 at 5:31 PM

    Great outcome.

    Will you be doing a follow up on this tutorial – converting it to CSS/HTML?

  6. August 18, 2011 at 7:24 PM

    Thanks for all your wonderful comments, much appreciated.

    @Infamous: I might do PSD-CONVERSION over on my new website code-snippet when it goes live. Photoshop-Plus is mainly about design were as code-snippet is more about development

  7. August 19, 2011 at 8:25 PM

    Tnx Richard for tutorial
    A similar tutorial by me: http://rezabaharvand.wordpress.com/2011/08/19/modern-natural-web-layout/
    good luck

  8. natalie
    August 19, 2011 at 10:20 PM

    cool, thanks!

  9. August 23, 2011 at 11:26 AM

    nice tut! your the best!

    keep it up

    Tnx!

  10. August 24, 2011 at 7:03 AM

    Your tutorial very usefully an easy learn.
    Thanks for you….

  11. September 1, 2011 at 8:16 AM

    Amazing tutorial and thank you for sharing

  12. September 6, 2011 at 1:04 AM

    Really nice photoshop tute. Thanks for explaining all parts. You did a great job.

  13. October 14, 2011 at 1:05 PM

    Hi Dear,
    this is very informative and useful content and will help all users of this field.

  14. plas
    February 8, 2012 at 5:08 AM

    very good,

  15. plas
    February 8, 2012 at 5:09 AM

    very good tutorial photoshop, thanks

  16. February 8, 2012 at 2:35 PM

    Good tutorial. Thanks for sharing.

  17. March 15, 2012 at 2:19 AM

    Yep, Nice tutorial, you should to mention where you have found inspiration?

  18. April 23, 2012 at 4:14 PM

    excellent result and creative tutorial. thanks for sharing

  19. April 24, 2012 at 3:33 PM

    This is an extraordinary layout! I’ve modified it a little bit, but overall this will be a great design for my 1st page. Thank you for making it!

  20. May 3, 2012 at 3:30 PM

    Amazing tutorial bro, thanks for sharing :)

  21. May 19, 2012 at 5:21 AM

    Nice tutorial thanks for writing…

  22. July 19, 2012 at 7:17 PM

    A very thorough guide most helpful in the design of mobile web apps.

  23. August 6, 2012 at 7:07 PM

    Nice tutorial, the result looks very professional :)

  24. September 9, 2012 at 9:20 PM

    Very helpfull tutorial. Thanks for article.

  25. November 18, 2012 at 10:50 AM

    Professional psd

  26. December 10, 2012 at 11:49 AM

    Nice tut. :) helpful..

  27. January 14, 2013 at 9:37 AM

    very helpful step by step graphic tutorial…love this

  28. February 26, 2013 at 4:22 AM

    liked those posts really .great!

  29. February 27, 2013 at 3:11 AM

    thank u very munch for post.

  30. March 11, 2013 at 11:28 AM

    Thank you, very good lesson. Please tell me what font use in copyright, and news.

    Sorry for my English.

  31. May 23, 2013 at 6:34 AM

    Awesome tutorial to create a mobile app style. SImple to follow and I hardly face any trouble while trying to do this.

  32. June 20, 2013 at 9:55 AM

    It is very beautiful and useful for me .
    Thanks .

  33. August 9, 2013 at 7:59 AM

    Just loved it! Love the effects and the detailed theory!

  34. September 20, 2013 at 3:29 AM

    Nice simple layout, but flat design is conquer the world nowadays

  35. January 27, 2014 at 4:54 PM

    Very complete :)

  36. February 21, 2014 at 12:01 AM

    great article. thanks a lot

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 36 Comments On Learn How To Create A Mobile App’s Style Layout, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php