Jan 9th

Simple iPhone Application Website Layout in Photoshop

Simple iPhone Application Website Layout in Photoshop

In this tutorial you will learn how to make a simple and clean layout for your iPhone application. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.  If you want your own iphone website template it’s quick and easy.

Lets get started

1. First thing we want to do is create a new document with the dimensions of 1024×863.

2. On a new layer, use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #000000.

3. We want to add some Blending Options to this layer, so insert the following by right clicking your layer in the layers pallet and choosing blending options from the drop down menu.

4. To add a little texture to the top half of our background, we want to CTRL+CLICK on the thumbnail of the layer we just created to select it. On a new layer, fill your selection with #000000

5. Next go to “Filter > Noise > Add Noise” and insert the following options

6. Set your layers blend mode to Soft Light and it will look something like this:

7. I wanted the texture to be a little darker, so duplicate your newly created texture layer and you will have the following result:

8. On a new layer, make a selection of all the white space on your document with your Rectangle Marquee Tool. Once you have your selection, fill it with #1B1C1F on its own layer. Then insert the following blending options onto its layer.

9. This is it for your background, and it should look something like this

10. Next we want to create a Rounded Rectangle that will house our content. Using the Rounded Rectangle Tool from your tools pallet with a radius of 10px, make a Rectangle similar to the following.

11. Insert the following blending options onto its layer

12. To start things off, we want to go ahead and place an iPhone on the document that will display our application. Go to teehanlax.com to download the iPhone template we will be using for this tutorial. Place it on your document in a similar fashion to the following (the screenshot for devise function can be found here):

13. This is how we want to layout our title and description to the right of our iPhone:

14. The font used was Helvetica for todays template. The blend options for the “DeviseFunction” text logo are the following:

The gradient used here, is the same one you can use on the tagline below DeviseFunction.

15. For the “What it does?” text, I used the following blending options:

The “it’s free!” text uses the same gradient as the one above, and the description is just #FFFFFF.

16. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

17. Now insert the following blending options onto its layer

18. We now want to add a couple buttons for opening in iTunes and a link to contact us. Using your Rounded Rectangle Tool, set the radius to 30px and make a rectangle similar to the following:

19. Insert the following blending options onto your Rounded Rectangles Layer

20. Next add some text to your button, and add the following blending options onto your text layer

21. Add an arrow icon to your button, and then repeat the process for a contact us icon and your document will look something like this

22. The last thing we need to add is a spot for your features and requirements to run the application. We want it to look something like this:

23. For your “Features:” text, we want to use the color #636773, and for the rest we want to use #FFFFFF. For our Rounded Rectangle use a rectangle with a 5px radius, and then add the following gradient to its blending options:

24. All that’s left now is to repeat the process for a “Requirements” sections, and add an “Available on the iPhone” badge and your template is nearly complete. The last step is to add some text at the bottom for your copyright notice, and your done! our final document will look something like this:

If you want to become expert in web designing then join testkings online training course and learn about different web layouts in photoshop using SY0-201 guide and 642-813 tutorials.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts18 Comments

  • ShutteR77 January 10th, 2010 at 12:39 pm

    Wow! It’s a very cool tutorial. I like it!
    And i notice that it is you first tutorial and wish you in future make another cool and fresh tutors like this.

    • Matthew Heidenreich January 10th, 2010 at 1:30 pm

      Thanks! And yes, we will have tons of tutorials coming out ;-)

  • Ampangkor January 14th, 2010 at 2:25 am

    It’s nice, simple and clean design. All the best to you.

  • Ryan January 16th, 2010 at 11:05 am

    Nice tutorial, will be helpful to many.

  • Alyssa February 6th, 2010 at 7:30 pm

    Woah, I LOVE this one!! I couldn’t figure out the right gradients whenever I was making buttons similar to the ones above.. I was forgetting a middle color in the gradient! I wonder if that’ll help! :D

  • Robby February 16th, 2010 at 5:05 pm

    Wow! nice work! Thanks for this tutorial. I just downloaded the source files though. Sorry, I cheated. =(

  • Yasmin Lawsuit March 17th, 2010 at 2:26 pm

    Nice and clean layout. Great tutorial.

  • clippingimages June 8th, 2010 at 12:35 am

    Wow!! its nice…….

  • Daniel Yu October 21st, 2010 at 9:17 am

    Great tutorial site! Learn a lot from you, thanks.

  • Jimmy Nguyen March 30th, 2011 at 5:33 am

    I already read several tutorials on your site. In deed, i can found all techniques/tips that i need to be “pro” on PSD.
    And this post shows “Simple iPhone Application Website Layout” that is quite familiar interface i need for Product view in my small e-commerce site. Thank alot

    Jimmy

  • IAN May 2nd, 2011 at 4:35 pm

    Love the tutorial… I’m a photoshop newbie and I have learnt so much from following this! Very clear and informative – Thanks!
    One question though…If I recreate this design, by following your tutorial, am I allowed to use it for my own app site… albeit changed slightly?

    Thanks again,

    Ian

  • Elmo Serravalli October 14th, 2011 at 9:06 pm

    hi!,I like your writing so much! proportion we communicate extra about your article on AOL? I require an expert in this space to unravel my problem. Maybe that’s you! Looking forward to peer you.

  • how to do marketing on facebook December 6th, 2011 at 5:39 am

    If the 100pt scale were so dandy we would see critics in a lot of fields use it. But they dont.

  • Web Hosting February 13th, 2012 at 6:19 am

    nice simple yet sleek design!

  • Taupo Accommodation February 28th, 2012 at 1:15 am

    Simple and easy. Best of luck to you!

  • Building Inspections Auckland March 7th, 2012 at 9:16 pm

    Simplicity is beauty! nice one :)

  • What is an app on facebook April 3rd, 2012 at 4:40 pm

    Many companies today are generally developing their own cellular applications. rEgrettably, simply because you are the app maker, that doesn’t mean that the prospective customers could be desperate to …iPhone App

  • jerralyn July 11th, 2013 at 8:37 pm

    Hi Matthew, I’m currently looking for a design tutorial for web app. Your article caught my attention. This is really nice and clear. Thank you for Sharing.

Leave Your Response