Full Web Building Tutorials

Learn How To Draw Glossy Button Using Your Photoshop
Drawing Glossy Button

Step 1: Create a new document and use the Gradient tool () with Radial Gradient
(
) and choose a gradient color to draw your background. I used light orange to red (#ffda53 to #c00000)


Step 2: Use the Horizontal Type Tool to type your text


it will be like this

Step 3: Double click on this layer in the "Layers" tab (if you don't see it then go to Window>Layers to open it) to bring up the Layer Style box. We will use three effects on this text:

 + Drop Shadow: make a shadow beneath the text


 + Gradient Overlay: apply a gradient color to your text colors  #D8F303 and #4EA301


 + Stroke: create a visible edge around your text


After all, click OK and you will see something like this:


It is really nice, isn't it?

Step 4: Next we will make a glossy effect on the top of the text. Create a new layer and Ctrl-left click on your text layer to select it

then use the Elliptical Marquee Tool () with Intersect with Selection option and draw a ellipse on it top. After releasing your mouse, you will notice that the remaining area is the intersecting area of the two previous selections

Fill the selection area with white (Edit>Fill and choose White from drop down box)

Step 5: Change the blending mode of this layer to Overlay and reduce its Opacity and Fill to suitable values


It's all! You can see the final result below:


It is just a simple technique but is widely used by many designers. Hope you can learn something from this tutorial!
in: | Posted on Apr 25th, 2009 | views 8,425
you can see also [tutorials]:
  1. Drawing Glossy Button
About the author
i'm moustafa from egypt i love doing one thing 'web programming & designing', This year I've got 19 years old and i'm in the english College of management (in Business Administration part soon)