Create a badge 2.0 with Photoshop

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Well … after the tutorial to make fire text with photoshop, In this tutorial I’ll show you how to make a badge with Photoshop.

The are is a tipical graphic elements of the web 2.0, a lots of site use the badge. Usually I see that are used a lots in the Header of the pages, some in the logos, with reflection text, anyway, this give to your website a little touch of 2.0.

If you don’t want to make your own badge but you want something like “download and use”, you can download a fantastic badge sets, psd source included, from Dezinerfolio, a great blog with a lots of free resource, one of my favorite blog.

Open Photoshop and create a a new document 300*300 px with blank background.

From the Tools Palette, choose the Polygon tool, and use these settings :

badge 2.0

Now draw the badge usig #dc0b0b like first color now you have this :

badge

Now go to blending options (right click on the layer in the layers window) and use these settings :

Drop shadow opacity 50% , distance 5 spread 0 size 15

Bevel and emboss size 2 soften 0 direction up

stroke size 5 position inside color #FFFFFF

And this should the result :

badge settings

Now we need to create the blur on the top of the badge. With the elliptical marquee tool, make a selection in the top left corner of the badge and create a new layer from the layer menu :

Switch the main color to white and select the gradient tools and from the gradient color menu choose foreground to transparent and trace a line from the top left corner to the bottom right corner of the badge, after deselect all, ctrl +d and apple+d in mac, go to the layers window and low the opacity to 35% and fill to 75%, this should be the results :

badge

Finally you can personalize the badge on your way :

badge 2.0 with photoshop

Enjoy!

Create a fire text with Photoshop With this tutorial I want to show you how to...
Text reflection with photoshop Another amazing effect used today in the web 2.0 is...
Rain effect with photoshop in 6 steps Here we are! This is my first post on my...

Related posts brought to you by Yet Another Related Posts Plugin.

If you liked this post , consider to subscribe to the Rss.