Tutorial: The 5 minute glossy button
9 years, 1 month ago Posted in: Blog 1

So I thought I’d do a quick tutorial, buttontutorialstep-by-step – showing you how I drew this fancy-looking little button, using Photoshop CS4.  There are many ways to do this button with a shadow, but as I named this post “the 5 minute glossy button’, I’m going to opt for a really simple and quick way of designing this high-quality icon.

You can obviously spendmore time on it to perfect the realism, maybe adding some layers of gradients to make the button look transparent and glassy.  This tutorial will show you how to create a button that looks great for any purpose.

So without wasting time, let’s get stuck in.

Step 1:

Create a new workspace and draw yourself a circle.  Any colour will do.



Step 2:

Fill the circle with a gradient.  This can be any colour you want.  For this example, I chose #1a2fcf for the dark colour and #91bffd for the top – where it’s a little lighter.




Here, I also added an inner glow (of #023d6b) and a 1px stroke as well.



Step 4:

Add some text.   Open a new layer, and add a text box.  Here, I have put in ‘OD’.


Step 5:

Add a gradient to the text to give it a bit of shading, and I’ll also add a drop-shadow with ‘zero’ distance and size at 3px.    Add Bevel & Emboss with a size of 4 and depth pf 103%  as well.



Step 6:

Your text should now resemble something like below.  You need to aim for something that looks like it has a shadow, and is slightly raised form the surface of the ball itself.



Step 7:

Select the ‘Elliptical Marquee tool’ and create a circle within the ball.  Aim for something that fills the top half of the ball itself.



Step 8:

Create a new layer (still with the marquee selection),  and fill it with a white-to-transparent gradient, just like below:




Step 9:

Once the gradient has been applied (as below), reduce the opacity of the ‘shine’ down to 62%.


Step 10:

Let’s add the shadow.  Create a new layer and use the circle shape tool to create an oval that it just a little smaller than the widest width of the ball.


Step 11:

Fill the new oval shape with a colour, any colour.


Step 12:

Now this shadow looks lame and too sharp.  Now, sometimes designers fill this with a gradient, sometimes a radial gradient with blur.  But here’s how I do it.

Hit Ctrl + T to ‘Transform’ the selected shadow item


Step 13:

Simply move the new circle up into the main body of the blue glass ball.  You have to make sure this layer is BEHIND the ball layer, so it gets hidden once you’ve moved it.  (I’ve changed the colour of the main ball just to show you).


Step 14:

What we’ve done here, is created an object.  We then add a drop shadow to this hidden oval, and increase the distance of the shadow until it fits where it should to the main blue ball.    The ‘Angle’ should be 90 degrees.  The Distance on my example was 151px, and the size around 32px.

This creates a drop shadow effect that actually is cast from the hidden oval we placed behind the blue ball, but actually looks like the shadow from the blue ball itself.



Step 16:

You’re done!.


Sometimes it takes a little playing around with the levels of each until you get to a ball and shadow that you like.  The more time you spend on it, the better it looks – but don’t overdo it, as sometimes ‘less is more’.  And that’s it, within 5 minutes, you have a nice looking web 2.0 button.


One Response

Leave a Reply

  • Copyright © 2011. OwenDevelopment. All rights reserved.