As Apple’s mobile devices continue to gain popularity, more and more designers are looking to implement similar designs on their websites. This tutorial will show you a method to create iOS-style navigation buttons.

iOS Buttons in Photoshop

The first step, as always, is to create a new document. The size really doesn’t matter, as long as you have enough room to create a nice sized button. I’m going to fill my background with a light blue color so that I’ll be able to see all the effects later on.

There are a few ways to create the basic button shape, but to ensure symmetry, we’re going to start with a Rounded Rectangle, which can be found in your Tools Panel on the left. It may be hiding with the other shapes if you don’t see it right away. Once you have the tool selected, check out the Options Bar at the top. We need to define the radius of the corners.

I found that a Radius of 10px works well. Go ahead and draw out your rectangle on your document. Don’t worry if the shape isn’t 100% to your liking. You can always go back and tweak the shape later on.

This step is optional, but I’m going to drag out a Guide, going through the middle of my button. If you do not see your Rulers on the top and left side of your workspace, use the Command+R (Mac) or CTRL+R (PC) shortcut to activate them. Drag a Guide from the top ruler to the middle of your button. It should snap right into place.

You’ll see why we added the guide in a minute. Now we need to create a pointed edge to our button. To do this, we’re going to adjust the anchor points. On your Tools Panel, grab the Direct Selection tool. It’s the white cursor icon.

When you have the tool selected, click right on the edge of your shape. You should see the path appear, along with it’s anchor points. When you see the points, select the point at the top, closest to the middle. In the image below, it’s the point highlighted in black.

Once that point is selected, using your down arrow key, move it to about the middle guide. To the same for the bottom anchor point as well. Try to move both points the same distance.

Now that the anchor points are closer together, drag a box around them to select both at once. Both points should turn black. Once they do, move them to the left. You can hold your Shift key, while pressing the left arrow key, to move them in larger increments.

Your final shape should look a little like this:

Now that we have our shape more-or-less complete, let’s start adding some Layer Styles! We’ll start with a Drop Shadow. Head up to Layer > Layer Styles > Drop Shadow. Even though “Shadows” are typically dark, they can also be light as well. All of the Layer Styles are down below.

As always, you’re free to change any of the settings to achieve the result you’re looking for. Now that the style is complete, let’s add our text! Grab the Type Tool from the left, and direct your eye to the Options Bar at the top. Again, you’re free to use any font or size that you wish. This is what I found to work well.

Type your desired text inside the button, and position it towards the left side of the shape.

Obviously, this button is too long for this text, so we need to shorten it a bit. Something very important to pay attention to. If you simply use the Transform Tool to squish the button horizontally, your rounded corners will be effected as well. We want to again use our Direct Selection Tool for this job. Grab it from the Tools Panel again, and this time, select all the anchor points on the right side of the button.

Use your Shift+left arrow key to move the side of the button inwards. You can also use the Direct Selection Tool to scale the button vertically as well. Tinker with the shape of the button until you’re happy with the result. In the end, you might have something that looks like this:

And that’s that! If you want to download this PSD, click HERE! Hope you enjoyed, and we’ll see you next time!