How to do a glossy and animated jQuery button 1/2 Photoshop part

You have probably already met this style on Internet, it’s a really nice and particular good effect. I have previously looked for a long time how to do it, and today I’m proud to share this knowledge with you! This webdesign tutorial is composed of two parts.

The first one is How to create a glossy button in Photoshop, and the second one is How to use HTML/CSS and jQuery to animate the button.

But before to start this tutorial I would like to say Thank you to Jacob Gube who published the post “Create an Animated Call to Action Button” on Sixrevisions. They posts are similar to mine it is why I send them my congratulations!

So we are ready, start now with part one!

Step one – Open Photoshop

To start the creation of your glossy button, you have to create a new document, go to File> New (Ctrl/Cmd + N) and: edit the name (Glossy button in my example), change the canvas with (180px) and height (45px).

Step two – Create some guides

To help you to do the button, you should add some guides on your canvas! But before to add them you must turn the rulers on, so, go to the menu View> Rulers (Ctrl/Cmd + R to turn on and off). You’ll create 4 different guides: on the top, on the right, on the left and on the bottom.

How to create a guide on Photoshop?

Really easy, for example, to create a vertical guide on the left of your canvas, click on the left ruler and drop it on the left border! Then, you can move it (every time) click on the guide with the Move tool (V) and move it where you want!

Step three – Create the main shape

Select the Rounded Rectangle Tool (U) and look at the options bar on the top of your screen. Verify that the first icon is activate (Sharpe Layer) and to finish, edit the radius to 40px.

Now you can create a rounded rectangle. If your foreground colour is black, your shape will be black, the foreground colour is important because it defines the style of your button. But don’t worry, it’s really easy to edit this colour, double-click on the shape layer “Shape 1” to change the colour.

In this example I use a darkgrey : #292929.

Step four – First reflect

Create a news layer and name it “First reflect” (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). Then create a selection around the shape button (Ctrl/Cmd + click on the layer shape 1’s thumbnail (in the layer panel).

Now you have to modify the selection, go to Selection> Modify> Contract (by 1px) and click on Ok.

Change the foreground colour to the white and select the Paint Bucket Tool (G). Go to Edit> Fill (Shift + F5).

Select the Rectangular marquee tool (M) and create a selection around the half bottom. Then delete the pixels (Delete).

To finish the reflect, go to Layer> Layer Mask> Reveal All. Select the Gradient Tool (G) and in the options bar, open the gradient picker and choice the second thumbnail (Foreground to transparent). Change the colour of the foreground to the Black and create a new gradient on the Layer mask.

Step five – Little stroke

Hide the guides (Cltr/Cmd + and create a new layer, name it “White stroke” (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). And do once more time step 4 …

“create a selection around the shape button (Ctrl/Cmd + click on the shape layer one’s thumbnail (in the layer panel)… Now you have to modify the selection, go to Selection> Modify> Contract (by 1px) and click on Ok… Change the foreground colour to the white and select the Paint Bucket Tool (G). Go to Edit> Fill (Shift + F5)”

Get down the selection of 1px. And delete the pixels (Delete).

To finish, add a new Layer mask on “White stroke” and with the Gradient tool (G) create a gradient on the half top part.

Step six – Last gradient

Create a news layer and name it “Last gradient” (to create a new layer go to Layer> New> Layer or Ctrl/Cmd + Shift + N). For the third time create a selection around the shape button, contract it by 1px, change the foreground colour to the white, select the gradient tool (G) (Foreground to transparent) and create a smooth gradient on the half bottom part. Press Ctrl/Cmd + D to deselect.

Great ! the button is still finished

Step seven – Drop shadow

To finish the button it’s easy; you must add a drop shadow on the layer “shape 1” but after that, you have to increase the height of your canvas (add 3 pixels => height will be 48pixels // Ctrl/Cmd + Alt + C or go to Image> Canvas size). Then click on the layer “shape 1” and go to Layer> Layer style> Drop shadow.

Edit the options like that:

Step eight – create the text

Select the tool Text (T) and create a new rectangular text area from the left to the right, in the options bar, click on the centre text icon. Then type your text (Sign-up Now!).

To finish the text, add a new layer style, go to Layer> Layer style> Stroke. Change the size to 1px, the colour to the black.

Step nine – duplicate the button

Finally you must duplicate the button to make the hover button. Create a new group and name it “Button” (go to Layer> New> Goup). When the group is created, move all layer into the group.

Rename a layer or a group ?

To rename a layer or a group in Photoshop, double click on its name to edit it. It’s easy!

Now, you have to increase the canvas size again, go to Image> Canvas size and change the height to 96 pixels (48*2=96).

Right click on the group and select Duplicate group (edit the name like “Button hover”).

Step ten – Change the color

Use the Move tool (V) to get down the second button and double-click on the layer shape 1’s thumbnail to edit the colour. You see it’s easy, change the colour to change the style of your button. In this example I used the green : # 3d960c.

Look at the result:

And look at the same button with different colours.

Conclusion

I do believe I’m going to stop this tutorial now, because ten steps is really long and especially difficult. I’ll publish the explanations regarding the HTML/CSS & jQuery tomorrow on this blog

Download the Free PSD

Click here to download the Photoshop .psd files

Troubles, questions, comment or more

So if you have trouble with an explanation or something else on this tutorial, let me know, use the comment to ask me. I hope you enjoy with this tutorial, thanks to you to read my new post on 2expertdesign.com

How to do a glossy and animated jQuery button 1/2 Photoshop part

Step one – Open Photoshop

Step two – Create some guides

How to create a guide on Photoshop?

Step three – Create the main shape

Step four – First reflect

Step five – Little stroke

Step six – Last gradient

Step seven – Drop shadow

Step eight – create the text

Step nine – duplicate the button

Rename a layer or a group ?

Step ten – Change the color

Conclusion

Download the Free PSD

Troubles, questions, comment or more

Related Blogs

No comments yet.

More Profitable Readings

.. more ….

Bank Money Fast With PLR Video Series MRR

43 WordPress Tutorial Videos

How To Hire A Virtual Assistant Video Series

PLR Payout Training Guide

Work From Home Mastermind Video Course MRR

The Tweets