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%

330 Responses to “Make an iPhone Interface”

  1. Paragraph writing is also a fun, if you be acquainted wikth afterward you can write if not it is difficult to write.

  2. I aam really inspired togdther with your writing talents and also wih the format for your blog.
    Is this a paid theme or did you customize it yourself?
    Anyway stayy upp the excellent high qualiy writing, it
    iis rare to see a great blog like this one these days..

    My weblog: Munchausen outpatient treatment

  3. Wow, this article is nice, my younger sister is analyzing these
    kinds of things, therefore I am going to let know her.

  4. Good post. I learn something totally new and challenging on sites I stumbleupon everyday.

    It’s always interesting to read through articles from other
    writers and use something from other web sites.

  5. ??????????? says:

    Wonderful, what a weblog it is! This web site presents valuable data to us, keep it up.

  6. Pamper your game interests by logging into one of these websites and you will find yourself in a complete entertainment world.
    You start your adventure as a rookie trainer, collecting all 8 gym badges and
    stop an evil organization. Even kids who do not start with their schooling but are
    capable of holing a pen or a pencil are made to sit with the same.

  7. Nicole says:

    I’ve been made redundant lotto madness slot staff and/or by patients / clients? If tensions or inappropriate interactions exist, related
    vibrant butterflies slot machine common disease common disease states with relative and infrequent or with sophistication

  8. Lillian says:

    I work here spellbound slots The OSD display is assumed to be used for large projection sizes with a projector or the like.
    jungle king slot machine 320 Other Insurance Information Inconsistent

  9. Fabric Scraps ‘ Use leftover fabrics to wear, jars,
    jar lids of homemade preserves or some other goodies.
    Have you ever looked into building your personal Garage or Shed Doors for additional security.
    The entrance on the house on the garage really should be fire resistant in the event of an attached garage.

    Here is my weblog garage door openers

  10. Hello There. I discovered your weblog using msn. This is a very
    well written article. I’ll make sure to bookmark it and come back
    to learn more of your helpful information. Thankk yoou for the post.
    I will certainly return.

  11. Your Desire Z will reboot and start the flashing process. In the simplest form you need
    to write the “Chinese New Year”, “Cambodian New Year”, “Sinhalese New Year, India”, “Tamil New Year”,
    and “Rosh Hashanah (Jewish New Year)” across the top of a poster board,
    you also need to write a characteristic for each of these New Year’s celebrations on an individual note card.
    So pity the Uzbeks and Kyrgyz as they peer suspiciously at one another during a sudden time of scarcity and insecurity.

  12. What Does Universal Health Care Mean?

  13. Elizabet says:

    Yes! Finally something about 7 ways to get your ex back.

  14. Make an iPhone Interface

  15. Hello, i believe thast i nticed you visited my website thus
    i came to return the choose?.I am trying to to fiind issues to improve mmy web site!I
    suppose its good enough to make use of some of your ideas!!

  16. Woah! I’m really digging the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between usability and visual appeal.
    I must say you’ve done a great job with this. Additionally, the blog loads super quick for me on Opera.
    Exceptional Blog!

  17. Your means of telling everything in this paragraph is in fact pleasant, every one be able to easily understand it, Thanks a lot.

  18. Hiya! I know this is kinda off topic but I’d figured I’d
    ask. Would you be interested in exchanging links or
    maybe guest authoring a blog article or vice-versa?
    My website discusses a lot of the same topics as yours
    and I believe we could greatly benefit from each other. If you are interested feel free
    to shoot me an email. I look forward to hearing from you!
    Great blog by the way!

  19. My family members always say that I am wasting my time here at web, except
    I know I am getting familiarity everyday by reading thes fastidious posts.

  20. This is the perfect blog for everyone who wishes to understand this topic.

    You realize so much its almost hard to argue with you (not that I actually would
    want to…HaHa). You definitely put a new spin on a topic which has been written about for decades.
    Excellent stuff, just wonderful!

  21. May I just say what a relief to uncover somebody who really knows what they are
    discussing over the internet. You definitely realize how to bring a problem to light and make it important.
    A lot more people need to check this out and understand this
    side of the story. It’s surprising you aren’t more popular since you most certainly have the gift.

  22. It’s actually a nice and useful piece of info. I’m satisfied that you simply shared this useful information with us.

    Please stay us up to date like this. Thanks for sharing.

    Feel free to visit my website … comment creer un blog


  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…

Leave a Reply