There are a lot of amazing things you can create in Adobe Photoshop that are useful online, ranging from simple picture frames to complex UIs. One of the most useful things you can create in Photoshop are 3D buttons, which will come in handy if you run a blog or website with a custom interface.
In this article we will show you how to create 3D buttons using Photoshop, along with visual “up” and “down” states, so you can animate them. (We won’t be covering animation itself in this article.)
Step 1: Prepare Your Document
While 3D buttons pop up most frequently on websites, it’s important to note that there are other applications for them, such as animated GIFs, mock-up product displays, and mobile games. Depending on what you’re creating this button for, your final file format and the dimensions of it may vary.
To create a 3D button in Photoshop, you’ll need to create a custom document for it. To do this, open Photoshop, and click on Create New > Custom. Start typing in your values.
To create a 3D button, you’re going to want a horizontal document. For ours, we used:
- 900 x 300 pixels high
- 300 Pixels/Inch
- RGB Color Mode
While these specs are definitely not a hard and fast rule, this will ensure that you have more than enough room to work with, and the ability to scale your button size up and down as needed.
Step 2: Set Up Your Rectangle for Your 3D Button
After you set up the specs for your file, you’ll be brought into your workspace. You’re going to have a horizontal white canvas in a single layer, and this is where you’ll start building your button.
To build your 3D button, click on the Rounded Rectangle Tool on the left-hand side of your screen, seen here in red. You can also use the shortcut U to access it.
Click once on your white layer: this will automatically bring up your Create Rounded Rectangle box. You will be using this box to specify the dimensions of your rectangle.
For our button, we went with:
- 300 pixels wide
- 75 pixels high
We also made sure that the corners were rounded by 10 pixels. Not too high, and not too low, either. Then we pressed OK.
Note: Buttons vary by size and shape, so don’t feel like you have to use these exact dimensions. Additionally, if you’re looking for more info on shortcuts, here are some of the most useful Photoshop keyboard commands.
When you press OK, Photoshop will create a rounded rectangle with these dimensions inside your layer. You can change its Fill and Stroke colors by using the dropdown menus in the top left-hand corner of your screen.
For the purpose of this tutorial—and to illustrate what an “up” and “down” button might look like—we’re going to make our “down” button red.
Step 3: Make Your Button 3D
After you create your basic button and choose its color, you’re going to want to adjust it in the Layer Style dialog box. This is to make it look more 3D.
To access your Layer Style dialog box, you can go Layer > Layer Style from the top menu. You can also double-click on the layer that contains your button, to bring it up automatically. This way is much quicker and we personally prefer it.
Once your Layer Style box is up, go to the option Bevel & Emboss. Turn it on.
This is a quick and easy way to give the edges of your button a more raised, “3D” look. For this tutorial, these are the settings we used:
Structure
- Style: Inner Bevel
- Technique: Chisel Soft
- Depth: 605
- Direction: Up
- Size: 5
- Soften: 1
Shading
- Angle: 90
- Altitude: 37
- Highlight Mode: Color Dodge, 55% Opacity
- Shadow Mode: Multiple, 25% Opacity
The trick is to make the settings high enough that you can see some difference, but not so strong that it’s overwhelming.
After we finished with Bevel & Emboss, we went to Contour and turned that on, too. Contour makes the definition of Bevel & Emboss a little bit stronger, and for this tutorial we chose the setting Cone – Inverted.
Next, turn on Gradient overlay. This is what gives a button that rounded, slightly “glossy” look. The settings are as follows:
- Blend Mode: Overlay
- Opacity: 90
- Style: Linear
- Angle: 90
- Scale: 100
Finally, we turned on Drop Shadow, to make the button look a bit “raised” from the white background of a website or blog. Again, here are the settings:
Structure
- Blend Mode: Multiple
- Opacity: 35
- Angle: 90
- Distance: 2
- Spread: 6
- Size: 8
Quality
- Contour: Linear
- Noise: 0
- Layer Knocks Out Drop Shadow: On
Now it’s time to save these specs as a Layer Style.
Step 4: Save as a Layer Style
Once you finish with your button’s settings, it will begin to look 3D. Because the chances are high that you’ll be creating more than one 3D button, we need to find a quick and easy way to do this.
Here’s how.
Before clicking OK in the Layer Style dialog box, click on New Style. When you do, Photoshop will save this layer style that you’ve made for your button.
If you’re using Photoshop CC, this new style will be saved to your Libraries section, as you can see above. It’s very quick and easy to access.
Step 5: How to Use a Saved Layer Style
Now that you’ve designed your button and you’ve saved it as a Layer Style, let’s see it in action for your “up” state. No word of a lie, this will cut your working time in half.
First, let’s create another button directly above the red button layer, like so. Let’s make it green, for emphasis.
Next—instead of double-clicking on the layer itself to bring up the Layer Styles dialog box—double-click on the layer style in your Libraries panel.
When you do, Photoshop will automatically apply your saved style to your new button layer, while keeping its new color and shape. You now have two buttons—one in an up state, and one in a down—and it’s so simple to do. I love this shortcut.
Step 6: Add Text to Your Button
Next, we’re going to add text to the button.
To add text, create a new layer above your two button layers. Click the Type tool to begin typing.
For this tutorial, we’re going to write the word “subscribe” because it’s something you see quite often on websites and social media platforms.
We’re also going to use a san serif web-safe font. The final choice of which one you use for your own button is up to you. Montserrat, Proxima Nova, Arial, and Verdana are all widely-used alternatives, and safe for the web.
After this is done, however, there’s still a few more subtle changes that you need to make in order to get this text to “pop.”
First, double-click on the layer that contains your text so you can bring it up in your Layer Style dialog box.
Next, click on Inner Shadow, to add a bit of a depression (or sunken area) to your text. This makes it look like the letters have been engraved into the button. The exact settings that we used for this tutorial are below.
Structure
- Blend Mode: Multiply
- Opacity: 35
- Angle: 90
- Distance: 2
- Choke: 4
- Size: 1
Quality
- Contour: Linear
- Noise: 0
Next, apply a Gradient Overlay to those letters, to make them blend more easily into the button without appearing flat. Again, the settings for ours are:
- Blend Mode: Color Burn
- Opacity: 90
- Style: Linear
- Angle: 90
- Scale: 100
Step 7: Finishing Up
After you create this text style—especially if you want to use it again—go to New Style and save it before you click OK.
With that wrapped up, you can quickly switch back and forth on the visibility between your two button layers, to see what the “up” and “down” states look like.
Pretty cool, huh? To save your file, go File > Save As, and save it as the proper file format for whatever project you may be working on.
Customize Your Blog With 3D Buttons and Widgets
Now that you know how to create 3D buttons in Photoshop, you can get creative with it, designing your own 3D buttons to suit your needs. And with these skills in your arsenal you can make a product that is not only professional, but personal-looking, too.
Want to know about other things that you can do with this program? Here’s how to remove a background in Photoshop.
Read the full article: How to Create 3D Buttons Using Adobe Photoshop
