How To Design A Gorgeous Big UI Button In Photoshop

In this tutorial we’re going to be creating a gorgeous and modern user interface button suitable for the web or a mobile interface design.

We’ll be using a handful of Photoshop techniques that are bound to come in handy for more than just creating buttons; in fact, the techniques we’ll be using are often used in most UI elements.

Step 1

Create a new Photoshop document (I’ve used a 1000×1000 pixel RGB 72dpi document for this tutorial – keep in mind this will need to be a high resolution if you’re designing for a mobile device with a high resolution display such as an iPhone 4). Fill your background layer with a color of your choice, I used this lovely mid-blue color.

To add a nice little bit of texture to our background I’m using a lovely vintage-style photograph of a cloud. I used one from this Vanilla Sky Texture Pack. You can insert the image by going to File > Place and then locating your file and clicking OK. Position your texture/image so it sits in the center of your image.

With the textures layer selected, go to Image > Adjustments > Desaturate to turn your image black and white.

Lower the opacity of your layer to somewhere in between 5-25%. Play around with this setting as it varies depending on the color of your background. As you can see this adds some nice unique shades and noise to your background.

Step 2

Select the Rounded Rectangle Shape Tool from your Tools Panel. In the Toolbar at the top of you screen, change the Radius of the corners to 15px (again, this can vary depending on the size of your document – you might have to test this!). It doesn’t matter which color your shape is, as this will be changed in the next step. Draw a wide and narrow rectangle like below.

Step 3

Right-Click on your new shape layer and select Blending Options from the menu to open your Layer Style window. Select the Overlay Color tab and select a color that is a little dark than your background – I used a mid-dark blue.

Now click on the Inner Shadow tab. This will add a shadow on the inside of our shape that will make it look like it has been cut out from the background. Apply a black shadow with an Overlay blending mode and a 90 degree angle. Distance and Size should be set to 5 pixels, although this, once again, could vary depending on the size of your shape. Feel free to experiment with different settings!

We’re now going to apply another shadow, so click on the Drop Shadow tab. The Drop Shadow styles settings can be modified in such a way that it doesn’t look like a shadow at all, like in this example. We’re going to create what is more of a 1px stroke on the bottom of our shape rather than a shadow. Change the blend mode to Normal; this is needed as we’re going to be using white as our shadow color, which doesn’t show up with the default shadow blend mode.

Change the angle to 90 degrees, and drop the distance and size to 1px. This means the shadow only comes 1px below our shape, and the blur/size of the shadow is very minimal. You can also set this to 0px which will turn it into a thin 1px line with no blur. Using these settings gives our shape a transparent white line that looks like a highlight on our shape.

Step 4

Duplicate our original shape by going to Layer > Duplicate Layer. Remove all of the layer styles by Right-Clicking on the new layer and selecting Clear Layer Styles.

Go to Edit > Transform > Free Transform. Hold the Alt+Cmd-Keys simultaneously and pull one of your corner anchor points in towards the center of your shape. Holding the Cmd-Key will reduce the size of your shape whilst holding the correct proportion, and holding the Alt-Key resizes it whilst keeping the center of your shape in the same place.

Step 5

With the shape resized, open up the Blending Options / Layer Style window. Click on the Gradient Overlay tab and apply a gradient similar to below using your own color scheme (or the same if you’re following this tutorial word for word!). The color on the left of my Gradient Editor is a color selected from the background, and the other is just a lighter version of this. Make sure the angle is set to 90 degrees.

We’re now going to add some shadows as we did with our cut out shape in the background. This time however we’re going to use the shadows to make our button look like it is coming towards us rather than away from us.

Click on the Inner Shadow tab. Change the blend mode to normal and the color to white, and drop the opacity to 60%. Change the angle to 90 degrees and the distance to 0px. You can change the size to 0px. This creates what is essentially a 1px stroke to the top of our shape.

Select the Drop Shadow tab and change the opacity to 40% and the angle to 90 degrees. Drop the Distance to 1px and the size to 0px. Keep the blend mode and color the same.

Step 6

Duplicate your newest shape layer by going to Layer > Duplicate Layer. Remove the layers applied styles by Right-Clicking on the layer and selecting Clear Layer Styles. Change the color of your shape to white.

Go to Filter > Noise > Add Noise and add around 60-90% Uniform Noise with Monochromatic checked. Click OK.

Change your new shapes Blending Mode to Multiply. This will hide the white in your layer and leave you with just the black dots.

Go to Filter > Blur > Gaussian Blur. Blur your noise layer by around 0.5-2px. Click OK.

Whilst holding the Cmd-Key, click on the thumbnail of your noise layer in the layers panel. This will make a selection of its content. Go to Select > Select Inverse to make a selection of everything but your shape. Hit the Delete-Key. This will remove any specs of noise that overlapped our button when we blurred it.

Change the noise layers opacity to around 5-20%. This hides the noise somewhat, but still adds that little bit of texture and depth we wanted.

Step 7

Select the Text Tool and draw a text box over your button. Start typing in some text. I typed “this is a”.

Change your text to a font of choice; I used Minion Pro Regular set to 25pt and aligned it to the center.

Hit the Enter-Key to type something else on the next line. I typed “VERY BIG BUTTON” and changed the font to Myriad Pro Regular set to 44pt.

After playing around with the kerning and tracking, I ended up with this…

Step 8

We’re now going to add some simple styles to our type to make it fit in with the rest of the button. Open up the Blending Options / Layer Style window for your type layer. Click on the Inner Shadow tab and add a default color/blend mode shadow using an opacity of 25%, an angle of 90 degrees, a distance of 2px and a size of 1px. This creates a simple shadow on the top inside of our text that makes it look like it has been cut out of the button.

To finish this off, we’re going to use the Drop Shadow effect to give the bottom side of our type a highlight, making the cut-out text look more realistic. Change the blend mode to Normal and the color to white. Drop the opacity to 25% and the distance to 1px. Everything else should be set to 0. Click OK and our type is done!

Step 9

Duplicate your last shape once again by going Layer > Duplicate Layer. Fill the shape with pure black.

We’re going to blur the shape to create a shadow. Normally we could do this with the Drop Shadow layer effect, but we used this earlier to make our button appear 3D, so are creating a shadow manually. Go to Filter > Blur > Gaussian Blur and blur your black shape by about 2-4 pixels and click OK.

Move your blurred black shape layer beneath your main button layer.

Reduce the opacity of the layer to somewhere between 10-50% – play around with the level to see what looks best for your button size and color scheme.

Step 10

Create a new layer folder in your Layers Panel by clicking on the folder icon. Call it “Non-Active State” and put all of your layers in it (other than your main background).

Duplicate the folder, and call this one “Active State”. Move the whole folder and it’s contents beneath your original button using the Move Tool and Cursor-Keys to nudge it down. Try holding the Shift-Key to do this a little fast (moving it 10px at a time instead of 1px).

Step 11

We’re now going to make the active state of our button (what it will look like when people press/click the button). This is surprisingly easy and won’t take any more than a minute or two – we basically need to reverse everything… Open up the Layer Style window for your active button shape. Click on the Gradient Overlay tab and change the angle from 90 degrees to -90 degrees, making the shadow go from dark to light instead of light to dark as it is with the non-active state.

Open the Blending Options / Layer Style window for your type layer. Click on the Inner Shadow tab and change the shadows blend mode to Normal and color to white, with a distance of 1px and an angle of 90 degrees.

Now select the Drop Shadow tab and change the blend mode to Normal, the color to black, the opacity to 50%, angle to 90 degrees and the distance to 1px.

Reopen the Layer Style window for your main button shape. Select the Inner Shadow tab and change the shadow color to black.

Select the Drop Shadow tab and change the shadow color to white.

Conclusion

After changing the text color to white for the active button, we’re done! Below is slightly scaled down preview of the inactive and active button states.

The below example is the exact same button, just desaturated. I personally prefer this version – so remember to play around with different colors to achieve what you want!