Here’s a quick tutorial to show you how I made my lovely stylised ‘Pay Now’ button in just 10 steps and 15 minutes…

Follow these step-by-step instructions to create your own slick 3d web button using PhotoShop Layer Styles. Layer Styles are something I’ve recently started using to create allsorts of great effects in my web designs. Once you’ve been through this tutorial I’m pretty sure you’ll be using them over and over too.

how to make a 3d button

1. Getting started: Open a new document in PhotoShop and type some text for your button

2. Draw the button background: use the rounded rectangle tool to draw your button background. Use a corner radius of between 3-5 pixels to give it a modern look – very rounded lozenge shapes can look a bit dated

3. Style your text: to give your text depth you need to add a drop shadow but subtlety is the key here. Open the Layer Style screen and add the following Drop Shadow; Blend Mode: Normal, Angle: 120, Distance: 1px, Spread: 0%, Size: 0px

4. Add a gradient: the gradient is what gives the button its 3d appearance. Again be subtle, just enough to raise it from the page. Open the Layer Style screen and add the following Gradient Overlay style; Top Colour: #a4c723, Bottom Colour: #75b11d, Opacity: 100%, Angle: 90 (unclick Global Light first)

how to make a 3d web button

5. The details: the devil really is in the detail when you’re trying to make slick web buttons. Modern versions are really quite sophisticated and have many subtleties that really make them stand out. One of the first things to do is create a Stroke. Open the Layer Style screen and add the following Stroke style; Size: 1px, Position: Inside, Fill Type: Gradient, Top Colour: #f4ffd2, Bottom Colour: #c8e08c

how to make a 3d web button

6. More details: next you need to add some contrasting colour next to the stroke to make it stand out. Open the Layer Style screen and add the following Outer Glow style; Colour: #314d01, Spread: 100%, Size 1px

how to make a 3d web button

7. Add a drop shadow: adding a slight drop shadow to the button gives it depth and helps it to stand out from the page.Open the Layer Style screen and add the following Drop Shadow; Blend Mode: Multiply, Opacity: 43%, Distance: 0px, Spread: 0px, Size: 5px

how to make a 3d web button

8. Draw a circle: adding graphical elements to the button makes it look even better. A right pointing arrow indicates a stage progression so that’s what I used. First draw a circle and fill it with Colour: #c8e08c. To make it look part of the button, give it a drop shadow. Open the Layer Styles screen and add the following Drop Shadow style; Opacity: 16%, Angle: -45 (unclick global light), Distance: 2px, Spread: 0%, Size: 0px

9. Drawing the arrow: use the Custom Shape tool to draw your arrow (I have to admit that I didn’t even know this existed before this tutorial!) and make it fit inside the circle you drew earlier – leave a little space around it as you’ll be adding some special touches next.

how to make a slick web button

10. The last drop shadow: to add a drop shadow to your arrow open the Layer Styles screen and add the following Drop Shadow; Opacity: 49%, Angle: 129 (unclick global light), Distance: 1px, Spread 0%, Size: 0px

That’s it you’re done! Save out your button and use extensively :)

This tutorial draws heavily on a tutorial in issue 168 of Web Designer magazine that was written by Danny Outlaw.

Please share this post if you've enjoyed it...
  • LinkedIn
  • Twitter
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • Google Buzz
  • Yahoo! Buzz
  • Google Bookmarks
  • Technorati
  • Tumblr
  • Posterous
  • Reddit

Tags: ,

Get Adobe Flash playerPlugin by wpburn.com wordpress themes