Make an iPhone Interface

Hi,

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:

240_96x96

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

Written by Elias Sørensen

Popularity: 100%

377 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.

    Thanks

  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!
    coat http://www.monclejacketsfrance.com

  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 http://www.cafesahar.com/cartier-earrings-c-4.html

  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 http://www.prefabricadosluisbarros.com/cartier-Acc-c-5.html

  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 http://www.cafesahar.com/faux-cartier-love-wedding-ring-18k-white-gold-with-diamonds-p-41.html

  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.
    coats http://www.cheapcanadagoosejacket.com

  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.

Trackbacks/Pingbacks

  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. Byensdaek.dk says:

    Byensdaek.dk…

    Make an iPhone Interface…

Leave a Reply