thumbnail_iphone_layout

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.

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:

 

 

This was written by Matthew Heidenreich

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>