23/4/09

iPhone-like button in Photoshop Tutorial

Filed under:
Photoshop, Tutorial, iPhone

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:

The button image

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.

Comments: 12 responses to this post

  1. 1

    I love how you designed this post… and PSD is ok, too, I guess :p

    Marko Dugonjić on April 23, 2009

  2. 2

    Thanks :P

    Bojan on April 24, 2009

  3. 3

    Nice. Glad to see YIH up again :)

    Boris Strahija on April 25, 2009

  4. 4

    Thnx Boris, I am glad to see it up again as well :)

    Bojan on April 25, 2009

  5. 5

    Bravo momci,
    baš koristan sajt, samo napred!

    Sasa on May 7, 2009

  6. 6

    [...] iPhone-like Button [...]

    Pingback 30 Useful Photoshop Buttons and Badges Tutorials : Speckyboy Design Magazine on August 11, 2009

  7. 7

    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.

    Buzzlair Voufincci on September 26, 2009

  8. 8

    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.

    Bojan on September 29, 2009

  9. 9

    Well explained but image not attached with definition each steps. Hope next time i will get that . Thanks for sharing this nice tutorial.

    clippingimages on October 10, 2009

  10. 10

    Very nicely done

    My site will really benefit from this tut

    Photoshop CS5 on October 27, 2009

  11. 11

    Also, you can make a pushed down button by reversing the step 2 gradient.

    Anonymous on December 14, 2009

  12. 12

    This button looks great. Thanks.

    pcm on January 29, 2010

Leave a comment

Web log categories

Previous blog post

Don’t publish undated content

Next blog post

The Do’s & Don’ts of Modern Web Design