iPhone-like button in Photoshop Tutorial

Estimated reading time
2 minutes, 33 seconds

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.

Post to Twitter

42 thoughts on “iPhone-like button in Photoshop Tutorial”

Comments are closed.