Advanced Search

The BoxedArt Guide to Using Website Templates

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%





Note:To get the Polygon Options click on the shape Gemotery Options and the window of the
Polygon Options will pop up and you can do the settings there.

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.

Path Option


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.

Layer Setting


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.




Great Here you are... your final and complte badge.

Let's try and insert the badge into a web template. You can change the text and the color of your badge to matches your website design


Back to Design Tutorial