VIP Membership 486px * 60px

Create an iPhone App Website in Photoshop

In this tutorial you will learn how to create a simple, yet beautiful application page for your iPhone app. 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. – Cool silver charms and leather bracelets design! Totally awesome sterling silver bracelets.

Final Result

Tutorial Resources

Lets Get Started

1. The first thing we want to do is create a new document with the dimensions of 1020×1097.

2. With your Paint Bucket Tool (G), fill your background layer with #242424. Using your Rectangle Marquee Tool (M) make a selection a little smaller than half the size of your background and fill it with white.

3. Now insert the following blending options onto its layer:

4. We want to add a slight texture to the red in our background. Command+Click on your red gradient layers thumbnail in the layers palette to make it an active selection. Then create a new layer and fill your selection with #CF5656 on the newly created layer.

5. Next we want to go to Filter>Noise>Add Noise and insert the following into the dialogue box that appears:

6. Lower your layers opacity to about 25% and you should have something that looks very similar to the following:

7. For your logo we want to use the font Creampuff from the tutorial resources at the top of this page.

8. On your font layer add the following blending options:

9. From the rising sun brush pack in the tutorial resources at the top, add one of the brushes that has the edges fade behind your logo in a similar way to the following. Lower its layer opacity to about 28% when doing so.

10. The navigation will be placed in the top right side of our layout. Using your Rounded Rectangle Tool (U), make a #000000 rectangle similar to the following. Reduce the fill to 59%.

11. Add the following blending options to your buttons layer:

12. I then added an icon from the Nexius Icon Pack from the tutorial resource list and added my link with the color #F2F1F1. For the remainder of the links I used icons from various packs that can be found within the resource list at the top of this page.

13. The right side of our template will show our iPhone preview of our app. For this tutorial I provided you with an iPhone you can place on your document, along with the AppStore badge. Using the same technique we used for adding a starburst behind our logo, add another one behind your iPhone. For the text under the App Store Badge I used Georgia with the color #C5C5C5.

14. The content area that will house the description for your application will be located on the left side of our document. Using your Rounded Rectangle Tool (U), create a rectangle will a 15px radius that looks like the following:

15. Next we need to create our content header. Right click your Rounded Rectangle Layer you just created and choose rasterize. Make a selection similar to the following of the top of your Rounded Rectangle layer and then hit Command+C and then Command+V to paste it on its own layer (you may need to align it after being pasted).

16. On your newly created layer insert the following blending options:

17. I used the Safari app icon for this tutorial, but you can place your app icon in the top left side of the content header. Using a font similar to Myriad Pro, place your text in a similar fashion with the name of your app and a little bit of a description. Make sure both lines of text are on their OWN layer.

18. Insert the following blending options onto your text layer:

19. Add the same blending options to your description text layer and you will have something that looks similar to the following:

20. We want to make a secondary pagination offering the user to view the features, screenshots, and reviews. To show our active page, we want to make a white tab that blends into our content area. To do this use your Rectangle Marquee Tool (M) and make a selection with a fill of #FFFFFF.

21. Now add the following blending options to your white tab layer.

22. Your active links will be the color #67A9CC, and your non-active links will be #323232. Arrange them in the following manner.

23. All that is left is to lay out how our content will be displayed. For our headings, I used the font Myriad Pro with the color #F88B8B. The body text is #323232.

24. The last step is to add a footer. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #141414 and then add your copyright information and any other lines of text you desire.

25. When it’s all said and done your template will look something like the following:

Check out our latest design resources.



This was written by Matthew Heidenreich

Leave a Reply

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