Make an iPhone Interface


This is my first tutorial, so I will do it as good as I can.. And maybe there is some english mistakes, because my english isn’t perfect.

This is what we are going to make:

So if you follow this tutorial, you should have a complete iPhone interface.

Step 1.
Create a new image with size 320×480.
Step 2.
Find a picture that we will use as wallpaper, and set it as background on the image.
I’m using this picture:

Step 3.
Now we will create the status display. Create a new layer, and create a small rectangle selection with your Rectangular Marquee Tool.

Step 4.
Fill the selection with black, and set the opacity to 50%.

Step 5.
Now we will create the time display, so create a new layer, and draw a rectangle selection with your Rectangular Marquee Tool.

Step 6.
Fill it with black, right click on the layer and go to blending options, then go to Gradient Overlay, and click the gradient preview.

Step 7.
Make a new gradient with these settings:

Step 8.
Then make a 1px black stroke.

Step 9.
Now make an outer glow with these settings:

Step 10.
Press ok, and then set the opacity to 65%.

Step 11.
Now duplicate the layer, and move the new layer to the bottom of the image. This will be the background for the unlock slider.

Step 12.
Go to the Rounded Rectangle Tool (u), and set the radius to 10 pixels. Now draw a rectangle like this:

Step 13.
Now make a selection of the layer by clicking the layer thumbnail while holding CTRL.

Step 14.
Then go to the layer behind (the Unlock background), and press delete. Now we got a hole in the layer, that’s because we don’t want the shine effect on our slider (because we’ll make it transparent).
So if you try to hide (press the eye on the left of the layer) the slider layer, you would see a hole in the background like this:

Step 15.
Show the layer again (press the square where the eye was before), so we can continue making the slider.

Step 16.
Right click on the layer, and choose Blending Options. Then press Gradient Overlay, and make a gradient with these settings:

Step 17.
Then press ok, and set the opacity to 60%. It should now look like this:

Step 18.
Now take the Rounded Rectangle Tool and draw a rectangle like this:

Step 19.
Go to blending options, then Gradient Overlay, and make a gradient with these settings:

Step 20.
Okay… Now we got the backgrounds, now to the icons and the text.

Step 21.
Let’s create the status bar icons. First, we will create the signal icon. Just take the rectangle tool, and create 5 bars (#cfd9d4) like this:

Step 22.
Now write “AT&T” on the right of the bars, with 14pt Arial #cfd9d4, I’ve made my text bold.

Step 23.
Now we will create the IR or Bluetooth icon (doesn’t know what the icon means), the easiest way is to take the Custom Shape tool, and take Bull’s Eye icon:

(If you can’t see it, then press the small arrow on the right of the box, choose “All” in the menu, and press ok.)

Step 24.
Then draw a #cfd9d4 Bull’s Eye in same size and place like the picture.

Step 25.
Then rasterize the layer (right click the layer -> rasterize layer), take the polygonal lasso tool (l) and make a selection like the picture, and then press delete.

Step 26.
Then move the layer so it is the correct place.

Step 27.
Now we will make the padlock icon, so just draw a rectangle with the Rectangle Tool (#cfd9d4) on the top centre, rasterize the layer, and paint the circle with the pencil tool like on the picture:

Step 28.
Now to the battery icon… Create a rectangle for the middle, rasterize the layer, and then draw the border with pencil tool (2px).

Step 30.
Ahh… That was the hardest part… Now we are going to make the text on the clock.

Step 31.
Take the type tool, set the colour to white, and write the time with an 80pt Arial font.

Step 32.
Then go into blending options, and make an Inner Shadow with these settings and press ok:

Step 33.
Now write the date using a 14pt Arial with the colour #bcc7ca.

Step 34.
Yearh! The clock is finished! Now to the slider. We will make an arrow on the slide button, so take the Custom Shape Tool and choose an arrow. I’m using “Arrow 9″. Then draw the arrow like the picture with this colour #8796a3.

Step 35.
Then add an Inner Shadow with these settings:

Step 36.
Now we just need the “slide to unlock” text (yes, it’s only small characters), so write “slide to unlock” with a 24pt Arial colour: #bababa.

Step 37.
Yes! We are finish with the interface! And we got this nice picture:


I hope that you liked this tutorial, and please write a feedback.

Written by Elias Sørensen

Popularity: 100%

403 Responses to “Make an iPhone Interface”

  1. It’s truly a nice and helpful piece of information. I’m
    satisfied that you simply shared this useful info with us.
    Please stay us informed like this. Thanks for sharing.

  2. Unquestionably consider that which you stated.

    Your favourite justification appeared to be on the net the easiest thing to have in mind of.

    I say to you, I certainly get irked while other folks think about worries
    that they just don’t realize about. You controlled to hit the nail upon the top as well
    as defined out the entire thing with no need
    side-effects , folks could take a signal. Will likely be again to get more.


  3. rp gratuit says:

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet
    my newest twitter updates. I’ve been looking for a
    plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.

    Please let me know if you run into anything. I truly enjoy reading your
    blog and I look forward to your new updates.

  4. coat says:

    I could not resist commenting.Very well written!

  5. homepage says:

    A motivating discussion is worth comment. I think that you
    ought to write more about this subject, it may not be a taboo subject
    but generally people do not discuss such subjects.
    To the next! Best wishes!!

  6. Cartier LOVE Bracelet, A bracelet easy to screw on thanks to an ergonomic screwdriver. A Cartier icon, the Love collection is both a provocative talisman and a bold symbol of passionate love.
    Cartier Earrings On Sale

  7. Allow yourself to become one with your partner, possess or let yourself be possessed? How far would you go for Love?
    Cartier Gift Boxes

  8. Allow yourself to become one with your partner, possess or let yourself be possessed? How far would you go for Love?
    Faux Cartier Love Wedding Ring 18K White Gold With Diamonds

  9. coats says:

    Hello there, simply changed into aware of your blog via Google, and found that it’s truly informative. I’m gonna be careful for brussels.

  10. Good info. Lucky me I ran across your blog by chance
    (stumbleupon). I have book-marked it for later!

  11. Then after being remarried again for a year, the
    cabin burns down, destroying everything. Playing games is not only
    for youngsters, it’s also for the youthful generation. As your village grows, you need
    to explore uncharted territories for Gold and
    Wood which are the 2 key resources you will require in start of the game
    ( there is also Stone resource, which you discover later in the game ).

  12. Excellent post. Keep posting such kind of information on your page.
    Im really impressed by it.
    Hey there, You have done a fantastic job. I’ll certainly digg it and in my opinion suggest to my
    friends. I am confident they’ll be benefited from this web site.

  13. kochrezepte says:

    Thanks for ones marvelous posting! I genuinely enjoyed reading it, you are a great author.

    I will ensure that I bookmark your blog and will come back
    later in life. I want to encourage one to continue your great posts, have a nice day!

  14. Awesome! Its in fact amazing paragraph, I have got much clerar idea
    regarding from this post.

  15. This light then burst forth from your forehead of Adam Kadmon in an try and stop the
    chaos. It includes a slim low profile spyder design and one LED
    controller. Led light bar qld When we placed our drink orders we got that we
    were holding beamed in wirelessly to the bar (I ordered a San Miguel beer).

    The thermally efficient housing is also very able to dissipating the heat
    generated by the large variety of LEDs. The light bar itself should be functional in all kinds of weather, whether it be raining or snowing.

    Any how by the next issue the death will be old news,
    but to not mention the loss could be unthinkable. The training and
    tests make sure that clients are capable to receive quality academic papers.
    young,, led light bar roof mounts dodge ram Usually
    free coaching plans include unreliable information but that’s far from your truth in the event of IIU.

    The point that I wish to prove is that there is certainly no
    harm in borrowing ideas from movies knowning that too,

  16. The cabin sleeps 6 people, 1 king bed, 1 queen, 2 twins along with a sleeper sofa
    inside loft. These days, you can get a comfort sleeper
    sofa and in case you sleep into it, you may feel like you’re floating inside the air.
    However, if you can afford a top-of-line sleeper sofa, you need to be
    in a position to find a cushty one.

    This sofa can also be called couch but this type which is sectional have an overabundance of pieces compared to the one
    piece you might see inside our homes. The trend of designs presents models which are
    more attractive that this normal everyday sofas.

    One from the best ways in which EAL students could develop
    and improve their writing skills is by reading a great deal of materials.
    He’s just gonna enter a bar where he goes over a regular basis.

    Sleeper sofa vs air mattress Therein, http://Www.Search.Utah.Edu, And that is certainly that, you might have successfully got your first article
    online with these few simple tips. Then, pounce on it at the set time, end up a timer or set a cellphone to
    15 minutes and see that which you come track of.

  17. Great article! We will be linking to this great content on our website.
    Keep up the good writing.

  18. sablon kaos says:

    right away shaving your face your dogs skin in the market allocated for your tattoo design, the very skin icon singer will most likely move the facial skin when on a paper documents napkin as well as putting surface detergent unpick almost any loose he…

  19. Visalus says:

    )Do you seriously want to take your Visalus home business to a new level.
    As mentioned earlier, Visalus seriously isn’t a gimmick.
    7 million which was up $ 110 million compared to
    the year previous.

  20. Amee says:

    This really is cool to stay in independent from all of companies and judge
    your data plan determined by your desires and wishes.
    Becoming unlocked nowadays is noticeably simpler than it used to be even 24 months ago.

  21. This paragraph provides clear idea designed for the new people of blogging, that in fact how to do blogging.

  22. Dolls Houses says:

    I aam regular reader, howw are you everybody? This piece of writing posted
    at this website is genuinely pleasant.

  23. Isidro says:

    If you are going for finest contents like me, just pay a visit
    this site daily because it gives quality contents, thanks

  24. You need to take part in a contest for one of the greatest websites online.

    I am going to highly recommend this blog!

  25. I read this article completely regarding the comparison of
    most up-to-date and earlier technologies, it’s amazing article.

  26. Previously you’ve to have efficacious online income strategies to get you started across experiencing details excellent for an individual’s web-based business organisation. e-wallet
    Ray Ban Ultra Wayfarer Guld Limited Edition Rb 2157K

  27. Thanks for sharing such a pleasant opinion, piece of writing is good, thats why i have read it fully

  28. silk plants says:

    Wow, that’s what I was seeking for, what a material!
    present here aat this blog, thanks admin off this site.

  29. Tobias says:

    Valuable information. Fortunate me I discovered your website accidentally, and I’m surprised why this twist
    of fate did not took place in advance! I bookmarked it.

    website (Tobias)

  30. Oh! Wow its genuinely a funny and jockey Make an iPhone Interface posted here. thanks for sharing it.
    North Face Down Jacket sale

  31. I think the admin of this website is truly working hard in favor of his site,
    because here every stuff is quality based material.

  32. Just want to say your article is as amazing.
    The clearness on your put up is just excellent and that
    i could suppose you’re an expert on this subject.
    Well along with your permission allow me to snatch your feed to
    stay updated with impending post. Thanks a million and please carry on the enjoyable work.

  33. Oh my goodness! Awesome article dude! Many thanks, However I am
    having problems with your RSS. I don’t know why I am unable to join it.
    Is there anyone else having the same RSS problems?
    Anyone that knows the answer will you kindly respond?

  34. Hi there to all, the contents existing at this website are
    really remarkable for people experience, well, keep up the nice work fellows.

  35. Puravol says:

    Remarkable things here. I am very satisfied to see your article.
    Thank you so much and I am having a look ahead to contact you.
    Will you kindly drop me a mail?

  36. Hi there I am so happy I found your weblog, I really found
    you by mistake, hile I was looking on Aol for something else, Anyhow I am here now and
    would just like to say many thanks foor a tremendous post and a all round entertaining blog (I also love the theme/design), I
    don’t have time to browse it all at the moment but I hhave bookmarked it annd also ihcluded our RSS feeds, so when I hage
    time I will be back to read much more, Pleawse do keep up the exdellent work.

  37. Tremendous things here. I am very glad to peer your post. Thanks a lot and I am having a look
    forward to touch you. Will you kindly drop me a mail?

  38. blog says:

    I am actually grateful to the holder of this website who has shared this enjormous
    paragraph at here.

  39. Now I am going to do my breakfast, when having my breakfast coming over again to read additional news.

  40. Vonnie says:

    I like looking through an article that can make people think.
    Also, thank you for allowing me to comment!


  1. Knight’s Links…

    Get all the latest info from this site…

  2. […] "Photoshop Tutorial + iPhone Theme" Bekommste zb sowas wie hier ausgespuckt: Make an iPhone Interface – Tutorials 2.0 Ansonsten kann ich mich Lucky soweit nur anschlie

  3. […] Make an iPhone Interface – Tutorials 2.0 – Como fazer a interface do iPhone no Photoshop […]

  4. tramadol withdrawal…

    buy tramadol without a prescription. tramadol worse. tramadol 180 tablets. buy generic tramadol no prescription. …

  5. iphone earphones…

    […]Make an iPhone Interface[…]…

  6. do more with your phone…

    […]Make an iPhone Interface[…]…

  7. Title…

    […]we came across a cool internet site that you simply may possibly get pleasure from. Take a appear in case you want[…]…

  8. oakley outlet online…

    right away shaving your face your dogs skin in the market allocated for your tattoo design, the very skin icon singer will most likely move the facial skin when on a paper documents napkin as well as putting surface detergent unpick almost any loose he…

  9. says:…

    Make an iPhone Interface…

Leave a Reply