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.
Create a new image with size 320×480.
Find a picture that we will use as wallpaper, and set it as background on the image.
I’m using this picture:
Now we will create the status display. Create a new layer, and create a small rectangle selection with your Rectangular Marquee Tool.
Fill the selection with black, and set the opacity to 50%.
Now we will create the time display, so create a new layer, and draw a rectangle selection with your Rectangular Marquee Tool.
Fill it with black, right click on the layer and go to blending options, then go to Gradient Overlay, and click the gradient preview.
Make a new gradient with these settings:
Then make a 1px black stroke.
Now make an outer glow with these settings:
Press ok, and then set the opacity to 65%.
Now duplicate the layer, and move the new layer to the bottom of the image. This will be the background for the unlock slider.
Go to the Rounded Rectangle Tool (u), and set the radius to 10 pixels. Now draw a rectangle like this:
Now make a selection of the layer by clicking the layer thumbnail while holding CTRL.
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:
Show the layer again (press the square where the eye was before), so we can continue making the slider.
Right click on the layer, and choose Blending Options. Then press Gradient Overlay, and make a gradient with these settings:
Then press ok, and set the opacity to 60%. It should now look like this:
Now take the Rounded Rectangle Tool and draw a rectangle like this:
Go to blending options, then Gradient Overlay, and make a gradient with these settings:
Okay… Now we got the backgrounds, now to the icons and the text.
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:
Now write “AT&T” on the right of the bars, with 14pt Arial #cfd9d4, I’ve made my text bold.
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.)
Then draw a #cfd9d4 Bull’s Eye in same size and place like the picture.
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.
Then move the layer so it is the correct place.
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:
Now to the battery icon… Create a rectangle for the middle, rasterize the layer, and then draw the border with pencil tool (2px).
Ahh… That was the hardest part… Now we are going to make the text on the clock.
Take the type tool, set the colour to white, and write the time with an 80pt Arial font.
Then go into blending options, and make an Inner Shadow with these settings and press ok:
Now write the date using a 14pt Arial with the colour #bcc7ca.
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.
Then add an Inner Shadow with these settings:
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.
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