Blog
Tutorial: The 5 minute glossy button
8 years, 9 months 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.

step1

 

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.

step2

 

Step3:

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

step3

 

Step 4:

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

step4

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.

step5

 

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.

step6

 

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.

step7

 

Step 8:

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

step8

 

 

Step 9:

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

step9

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.

step10

Step 11:

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

step11

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

step12

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).

step13

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.

step14

 

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.

finished

One Response

Leave a Reply





  • Copyright © 2011. OwenDevelopment. All rights reserved.