Here’s a tutorial on how you can design an iPhone-like (or Apple-like, if you will) button in Photoshop. You can quickly learn how to design the button even if you don’t consider yourself very skilled in PS.
The important thing is to closely follow the instructions, so be patient and read carefully.
This tutorial can come in handy if you want to design any sort of Apple or iPhone inspired interface.
- Knowledge needed
- Basic, getting around Photoshop
- Time needed
- 10-15 minutes
Here’s how your custom button will look once you finish the 5 steps of this tutorial:
Step 1
Create a new document and draw a rounded rectangle with, say, a 4px radius. I have used 90px by 30px but you can use any dimensions you like for the button.
Step 2
The button will have a shiny, modern gloss, which you can achieve with a simple gradient. Add a layer style on your rectangle and apply a Gradient Overlay.
The solid gradient has 4 points, with the following colors: #000000, #222222, #444444 and #666666. These points are at 0, 48, 52 and 100 percent respectively.
Step 3
Next we’ll add the Bevel and Emboss effect, specifically the Outer Bevel (Smooth Technique).
Depth: 100, Direction: up, size: 1px, soften 10px.
Now the important part — the shading. Use the -90 angle and in altitude of light box, add the value of 40.
Set the white to the Normal highlight mode at 100% and the black to the Multiply shadow mode at 80%.
Step 4
We’ll add one more effect to finish the button, the Stroke. Use #222222 on a 1px stroke, with 80% opacity, positioned on the inside.
Step 5
One final step — the text. On the text, we will use the Bevel and Emboss again. Use the Outer Bevel with the Chisel Soft technique, at the depth of 130.
Direction: down, Size: 1, soften: 0. Use the angle of 90 and the altitude of 30. White: Screen at 0, black: Multiply at 50.
That’s it, you’re all done! In the example, you can see I have used a light, metallic gray gradient for the layer below the button. If you were wondering, it was done with a similar type of gradient as the one in the button itself.
If you wish to do so, you can also download the original .psd.
I love how you designed this post… and PSD is ok, too, I guess :p
Thanks :P
Nice. Glad to see YIH up again :)
Thnx Boris, I am glad to see it up again as well :)
Bravo momci,
baš koristan sajt, samo napred!
Pingback: 30 Useful Photoshop Buttons and Badges Tutorials : Speckyboy Design Magazine
Pingback: 30个漂亮的Photoshop按钮和徽章制作 | 好易阁|Web技术|杀毒软件|免费资源
Pingback: Best Collection of Useful Photoshop Buttons and Badges Tutorials | guidesigner.net
Pingback: 30 Useful Photoshop Buttons and Badges Tutorials | huibit05.com
Pingback: Best Collection of Useful Photoshop Buttons and Badges Tutorials | Web Design GroundBreak
Pingback: 30 Faydali Photoshop Dugmeler ve Rozetler Tutorials
unappreciative person this guy is. check out the guy that do not say a single thanks to you
http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-like-button-in-photoshop/
i hope somebody could just hack this guy and shut the blog down.
Thanks for the heads up – I tried contacting him, but he ignores my e-mails and deletes my comments. Ah well, perhaps it’s better his tutorial is online – this way the whole world can see he stole it from me.
Pingback: 30 Photoshop Buttons and Badges Tutorials | oOrch Blog
Well explained but image not attached with definition each steps. Hope next time i will get that . Thanks for sharing this nice tutorial.
Pingback: Alexandra Ipate - Web design resources » Blog Archive » Photoshop Buttons & Badges
Very nicely done
My site will really benefit from this tut
Pingback: 40+ Best Photoshop Tutorials for Creating Buttons and Badges :: Reflex Stock Photo Blog
Pingback: Designing CSS Buttons: Techniques and Resources - Smashing Magazine
Pingback: typoglyphic.com » Designing CSS Buttons: Techniques and Resources – Smashingmagazine.com
Pingback: Designing CSS Buttons: Techniques and Resources | Buddy's Blog
Also, you can make a pushed down button by reversing the step 2 gradient.
This button looks great. Thanks.
Pingback: Designing CSS Buttons: Techniques and Resources | WebsGeek
i’ve looked at thousands of tutorials over the years. this is by far one of the finest yet, so concise. great job!
Great.
Your “steps” always just say “go and do this yourself”… instead of telling anyone *HOW* to do those steps.
I Loved The Explanation You Provided.. It Helped Me In Designing An Enquiry Button For My Customer’s Website
Though i am not an experienced photoshop user but following your tutorial i tried myself and really i am happy with my work.Thanks for your tutorial.
usually i don’t post while read, but this tutorial was really good, that was what i was looking for! tnx!
So cool……
Pingback: Modern UI and Layout Tutorials for Photoshop « UKWDS!
Great tutorial, simple design. Thanks for that. ;)
Pingback: 12 Photoshop Tutorials For Creating Web Buttons | VaneGraphics
Pingback: 40+ Best Photoshop Tutorials for Creating Buttons and Badges « Agus Media
Thanks great tut very helpful
sweet! thanks.
Perfectly written, simple and effective post. Thanks a lot.
Thanks for the well-written tutorial – It was definitely one of the easiest tuts I’ve ever read. I’m excited to use this for a “Need Help?” button on our company website.