Glossy Photoshop Web 2.0 Badge for Web Design

Glossy Photoshop Web 2.0 Badge for Web Design

The 3D badges are everywhere! Yes, it is the latest trend on those Web 2.0 web designs. These are the star-shaped labels that you see stuck on web pages, alerting you to something important.
Here we start with creating the shape of the badge. Select the Polygonal Tool under your tool bar. Then do some setting for ythe polygonal shape so it will be a star shape. Set the sides to 15 and the options to star shape and the indent sides by 20%

Then start with drawing the shape of your badge. Remember to set your path option to either filled pixels or path, while here filled pixels are being used.

Now we need to add in some nice radial gradient to make it look 3D. Let’s try some nice bright green #aeff00 and a darker green for the shadow #77ae00. Before that remember to lock the layer of your star badge and select the radial gradient. Now pull the gradient from top right to bottom. Just like below.

Now to make it stand out, we need to add in some effects on it. Double click the layer that have the star shape, and the Layer Style will pop up, just add in the effects accordingly. You can see the difference below, after adding the effects

You are almost there to complete your web2.0 3D badge. Now we need to add some highlight to the badge. Use the pen tool and draw a shape like below. The go to your path palette, hold on to the ALT key and click on the path layer, it will make a selection of the path you just drawn, then filled it with white. The duplicate the highlight layer and add a gradient overlay to the layer. After that set the layer opacity to 60%.
Now make a selection of your star shape layer, and go to Select > Modify > Contract, set 2px and then go back to your highlight layer and click Select > Inverse and press delete. It will delete the unused highlight outside the star shape. You will get something like the 3D badge below.

Now to complete your 3D web 2.0 Badge, add in the message you wanna shout for. Let’s add “newly added” with a nice bold fonts to it. I uses the common fonts here, you can use any fonts of your preference. The setting og the fonts are below, just set accordinly if you like it this way. Then for the final touch up, double click the text layer and add in the layer style. After that click Edit > Transform > Rotate, and give it a -25 degrees to it. And Voila! You are done and enjoy adding the 3D web Badge to your web template now.









From boxedart.com