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:
I hope that you liked this tutorial, and please write a feedback.
Written by Elias Sørensen
Popularity: 78%
Cool, thanks for the tips and the tutorial.
nice design.. i’ve seen many iphone widget designs.. but not the interface itself…
looks real enough…
splendid!
Great stuff. That is just like the real thing. I learn t some new tricks here. Great stuff!
awesome. ive just started learning photoshop and ur guide was easy and looked good at the end! thx a lot
As above, just started photoshoping, and this tutorial was great, thank you! =)
(My results)
http://i17.tinypic.com/6c31tug.jpg
http://i17.tinypic.com/4qyo86q.jpg
I loved the tutorial! heres my result! WOWOWOW!!!THHANKY UUU
http://img526.imageshack.us/img526/3420/slidetofuckhe8.png
DILDOOOOOOO!!!
Hejsa suttegøj!
Helt udemærket tutorial der! Keep it coming son
-Anders
Thanks for all the comments, nice that you like the tutorial, maybe there is more coming up
And a little danish message du Anders:
Ja, det kunne du lide, hva’ ?
Tak for det, du må have være meget hurtig til at læse den haha..
Awesome tutorial. The first I really like
I can hardly believe that this is your first one ^^
Nice job
Thanks! Nice that you like it! It is my first tutorial, but i’ve been using photoshop in 2 years
Anyone that got ideas to my next tutorial?? Don’t know what I’ll make..
Great tut!
Nice background image to start with too!
A useful tutorial will see if I can execute it.
Maybe a dumb question… But this thing will be recognized by the iPhone as a useful slide to unlock interface or this is only a nice png?
Don’t know excactly what you mean? This is how to reproduce an iphone like interface in photoshop, so you can’t use it as a theme or something. It’s only a JPG you can get out of it
)
Was that what you meant?
i meant.. how to replace the default lock screen with one i created using this tutorial…
If this is possible, how can i use your tutorial to create one?
Hmm hmm… My tutorial looks nearly as the same as the real slidescreen, so maybe it’s just the wallpaper/background you have to change?
)
You could take a look at modmyiphone.com and this forum thread: http://www.everythingicafe.com/forum/iphone-modifications/read-this-iphone-modding-info-6592.html to learn more about modding your iphone
If you’re designing a website or app for the iPhone, check out this comprehensive PSD file at http://www.320480.com
thanks for interface tutor. Along with tips add PSD file also…
Great stuff! I’ve added you to my blog log!
Hmm…the images don’t seem to be loading.
Comfortabl y, the post is really the freshest on that laudable topic. I suit in with your conclusions and also can thirstily look forward to your next updates. Simply just saying thanks can not simply be enough, for the fantasti c clarity in your writing. I definitely will perfect away grab your rss feed to stay abreast of any kind of updates. Nice work and much success in your business dealings!
¿Por qué este Web site no tienen otra ayuda de las idiomas
Hello this was a great post. I found your blog on google and am glad I did. I was looking for a way to subscribe but couldn’t see one? Thanks for the post, hope to hear back from you. cheers
Wow!it’s so cool!
Please, can you PM me and tell me few more things about this, myself am really fan of your site! myself just subscribed to your feed.
I a blog owner too.
cheap ugg boots
I am hoping the same finest operate from you inside upcoming as nicely.Genuinely the blogging is spreading its wings rapidly.ugg boots discount
Greetings from the Hungarian
Catalog pages. Welcome
Comfortabl y, the post is really the freshest on that laudable topic. I suit in with your conclusions and also can thirstily look forward to your next updates. Simply just saying thanks can not simply be enough, for the fantasti c clarity in your writing. I definitely will perfect away grab your rss feed to stay abreast of any kind of updates. Nice work and much success in your business dealings!
Great stuff! I’ve added you to my blog log!
Make a new gradient with these settings:
where is the settings?
Exceptional short article! I¡¯ll rss rectify these days wth excellent feedreader application!¡Â
Great stuff! I’ve added you to my blog log!
Many thanks for this article. I would also like to mention that it can end up being hard if you are in school and just starting out to establish a long credit rating. There are many individuals who are just trying to endure and have long or favourable credit history can be a difficult factor to have.
fsJC8c http://wnbUj5n0mXqpcvm27Hms.biz
I like to check out your site a couple times a week for new entries. I was wondering if you have any other subjects you write about?
I’ve learned new things by your blog. One other thing I would like to say is that newer laptop operating systems tend to allow extra memory to get used, but they furthermore demand more memory space simply to operate. If one’s computer is not able to handle additional memory as well as the newest software package requires that storage increase, it is usually the time to shop for a new Laptop. Thanks
When can you start? young little tiny lolita rfi little woman lolitas top 834657 lolita pics nude underground kesj bbs loli ranchi russia %( lol pussy tiny image jsmu photos lolas kid naked :-] charming angels home lolita =OOO lil lolita nude pix 7450 lolitas mpg pornostar italiana gbvjnx nude lolita 12 yo qqrryo
I was made redundant two months ago Nude Latino Lolita Photos
njukye Free Lolitas Naked Picture
nwii Little Spanish Lolita Preteens
2540 Preteen Models Lolitas Galeries
440321 Nubiles Little Lolita Lolita
efidc Top 100 Lolita Galleris
>:-((( Russian Nude Loli Tgp
046 Lolita Cp Kid Pd
619193 Ls Magazine Crazy Lolita
45611 Lolita Free Homemade Movies
erdpc
What’s the last date I can post this to to arrive in time for Christmas? Preteen Incest Stories
=DDD
Punk not dead young actress naked 8-]
It is extremely useful for me. Large thumbs up for this weblog post!
Do you like it here? nude virgin. 2759
I prefer to make use of some of the content on my weblog. Naturally I’ll offer you a link on my web blog. Thanks for sharing.
Your place is valueble for me. Thanks!…
I liked as much as you will obtain performed right here. The sketch is tasteful, your authored subject matter stylish. however, you command get got an impatience over that you want be delivering the following. in poor health indisputably come more beforehand again as exactly the same just about very steadily inside case you defend this increase.
I’m sorry, she’s Underage Cute Preteen
442718
I’m training to be an engineer Preteen Lolita Pussy
15783
gIliAltPe ugg boots outlet qIgzOycOy http://peternorthcott.com