Photoshop Tutorial – How to Make a Simple 3D Button in 5 Minutes!

I’ve been learning Photoshop for years (and I didn’t go to school or anything like that, just picked up things here and there) and I think I’ve gotten pretty good at it, not completely professional but I can make a 3D button in just a minute or so.

Anyways, it’s not that hard to do, let me show you how to make a very simple and basic 3D button in just 5 minutes of your time:

First, open up Photoshop. (duh!)

Next, hit Ctrl+N to create a new image. Make sure you start learning all the shortcuts in Photoshop, it will make your life easier.

For image size, I used 500×500 pixels here:

And I like to start out with Resolution of 300 pixels/inch, this is because you can have a higher-quality image in the end plus you can always crop/downsize it later.

Next, let’s make our button a rounded rectangle, I think it looks nicer so go select on “Rounded Rectangle Tool”.

Use the Rounded Rectangle Tool to make your desired shape like I did.

Next you can use the text tool to put something on there, like “Press Me”.

Next, go to your layers and select the Rounded Rectangle you made, Right Click, then select “Blending Options”.

Next, you select Bevel and Emboss, choose “Inner Bevel” and change the Size to around  20px and Soften to 4px.  (You can play around with this until you get the desired 3D button look.)

Now our 3D button looks a bit more 3D but we need to add some shadows to make it pop out more and realistic so let’s go back to the Blending Options and add shadow:

Select “Drop Shadow” and play with the Distance and Size values until you get it just right.

As you can see, now the 3D button looks like a real 3D button.

Next, let’s jazz up the text a bit, it looks a bit weird just leaving it plain.

Go to layers again, select the text, then Right Click to Blending Options again.

Choose “Bevel and Emboss”, then Outer Bevel.  Play with the Size value until it looks good.

So this is the finished 3D button, not too bad for 5 minutes of work?

You can use this method to make a 3D button in Photoshop quickly.  Whether you need a Buy Now button or perhaps custom buttons for your website, this is a good and simple way to make a button.  Of course, there’s more you can do with it but this is the quick and dirty method I use for my websites.

Next time, I will show you how to make dynamic 3D buttons for a website or a blog so when visitors visit your blog and hover over the button, it will press down like a real physical button.  Stay tuned, I am working on that in the next hour or so.


Leave a Reply

Your email address will not be published.

Other interesting stuff at , , ,
Check out more interesting categories: Computer, DIY, Featured, Featured DIYs, Featured Hacks, Hack, HOWTO, Photoshop, Projects.

Related News and Resources