Apr 20th

Create an iPhone App Website in Photoshop

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.

LusterForever.com – 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 testking 70-293 videos and testking 156-215 tutorials to learn professional web designing. Become expert in web art using testking 312-50 design resources.

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 Thoughts26 Comments

  • PSDhome April 20th, 2010 at 5:23 am

    Very good design…

  • Lee Fuller April 22nd, 2010 at 5:51 am

    Nice clean design..

  • khim April 23rd, 2010 at 5:19 am

    Wonderfull tutorial!!!!!!

    Greed work.

  • Amy April 23rd, 2010 at 10:19 am

    Very good design…

  • Roger April 26th, 2010 at 2:01 pm

    Sucks.

  • Tirath April 27th, 2010 at 10:32 am

    Awesome tutorial Mr Matthew with nice web layout
    Thanks so much for posting It
    Keep educate us Genus
    God bless you :-)

  • indirmeden izle May 1st, 2010 at 6:41 am

    this is wonderfull tut. thanks for sharing

  • clippingimages June 8th, 2010 at 1:13 am

    Very good design:)

  • Joe December 16th, 2010 at 10:48 am

    To be honest, I think this is one of the ugliest web layouts I’ve seen in a long time. It looks like you’re trying to mix a horribly red retro look with the sleekness and modernness of the iPhone and they just don’t go well together. Plus the content are is lackluster at best.

  • free business cards May 12th, 2011 at 9:55 pm

    Nice work – will keep an eye open for more designs

  • Umit June 14th, 2011 at 1:41 pm

    Hi, I create this layout’s CSS3 & HTML template!
    You can check from here: http://www.umitkaraosmanoglu.com/blog/html-templates/free-css3-iphone-app-website-template

  • Stefano September 5th, 2011 at 12:01 pm

    Nice tut,a very good design

  • Galaxys2 Smartphone September 9th, 2011 at 5:41 am

    Hey there just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same outcome.

  • window 7 phones September 13th, 2011 at 8:15 pm

    Do you mind if I quote a few of your articles as long as I provide credit and sources back to your blog? My blog site is in the very same area of interest as yours and my users would really benefit from a lot of the information you present here. Please let me know if this okay with you. Thanks!

  • babu September 14th, 2011 at 4:22 am

    Nice …..

  • HtcMerge Phone September 20th, 2011 at 12:13 am

    Thanks for a marvelous posting! I definitely enjoyed reading it, you are a great author.I will make certain to bookmark your blog and will eventually come back in the future. I want to encourage that you continue your great posts, have a nice day!

  • fern October 4th, 2011 at 3:09 am

    love it! Thx for sharing :)

  • Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:09 am

    great tutorial, very useful.

    thank you very much.

  • tardive dyskinesia lawyer October 31st, 2011 at 1:28 pm

    It’s simply amazing and artsy, thanks for putting it up.

  • jewellery models November 15th, 2011 at 11:02 pm

    To be honest. Promotion , publicity & promoting mail messages fantastic goods is not really enough only by ensure that victorious together with http://www.indiantradeshows.com

  • nanomatik December 5th, 2011 at 5:26 am

    great tutorial, very useful.

    thank you very much.

  • Photoshop Cs4 Training December 11th, 2011 at 10:57 am

    Very Professional finish great tutorial!

  • limo conroe tx March 24th, 2012 at 8:06 pm

    Is it alright to reference part of this on my page if I post a backlink to this page?

  • gue March 27th, 2012 at 9:04 pm

    Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is great, let alone the content!. Thanks For Your article about Create an iPhone App Website in Photoshop .

  • Deep Mehta August 31st, 2012 at 3:35 pm

    #Awesome..!!
    Really amazing tutorial.!! :) loved it.! how did u twisted those sun rays? and now how to convert this PSD into HTML..? do u have any tutorial for that!

  • e liquid flavors September 4th, 2012 at 5:34 pm

    wow thats really cool and looks easy enough for me to use with my beginner knowledge

Leave Your Response