This is my first tutorial on this blog. I have one idea to create a beautifull badge for your website. Take a look this !

Open your new document on Photoshop, I use default size.

Step 1

Choose your shape tool, grab it on the canvas area. Well you will see a new shape like this:

Step 2

With direct selection tool, edit your shape.
Play your mouse, to move or modify. Something looks likely difficult ? just follow the red arrow.

Step 3

Apply Gradient Overlay, for Shape layer. Just choose Menu Layer > Layer Style : Gradient Overlay

Here are my gradient option :

End the option window by clicking OK button

Step 4

We will create a glossy effect for the shape. Duplicate your main shape once, by hit the key [CTRL+J]. Then hit [CTRL+T] or choose menu Edit > Free Transform, trasform it ! smaller than before

Note: If the layer style on badges copy still appear, clear it by right click on the layer, then choose clear style

Step 5

Apply the mask for badges copy.

Then choose the gradient tool, with this setting:

what you see next ? the new glossy effect was appear for you !

Step 6

Transform it to to the right, then hit [ENTER]

Step 7

Create a new shape with pen tool, like this figure:

Step 8

Edit for each of path point, use convert point tool to do it !

If the details too small in your eye, zoom it, to modify.

Step 9

Well .. apply gradient overlay layer style and glossy effect too, as showed to you on Step 3 - 5

Step 10

To make it a realistic shadow, I need to grab blur effect on the bottom of badges layer. Create new layer, then use eliptical maruqee tool, to make a new selection

Fill the selection with dark color

Now choose menu Filter > Blur > Gaussian Blur. Give the radius about: 20 pixels. Then trasform it, to make it compatible with badges position.

Some of badges, will looks like this: