Web 2.0 Badge Photoshop Tutorial
Filed Under (Design, Lessons, Tutorials) by admin on 16-02-2006
Have you ever wanted to learn how to make those trendy web 2.0 badges? No web 2.0 site is complete without one. Here is a quick guide to get you started with your badge.
1) First thing we need to do is select the “Polygonal Tool� from the shape drop down.
2) Once selected we need to change the polygonal options for this shape. Set the number of sides to 12, this can be changed to your liking but to get a big juicy badge 12 is usually a good setting. Check the star box, this makes the corners indented. Indent sides by 20%. this can also be changed to fit your likings.
3) Time to draw your polygon shape, make sure you pick a trendy color (light blue, green, orange or pink :P)
4) Time to add some blending properties to your star shape. Drop shadow: Opacity 50%, Distance 0px, Spread 0px and Size 5px. Stroke: Size 3px, Position ‘Inside’ and Color #FFFFFF. You should now have something that looks like this.
5) Time for the lighting. Select the gradient fill tool and select white as your primary colour on the color picker. Now in the options toolbar there are premade color selections, choose the second option which shows a white gradient that fades to an opacity of zero (0) and fill type to radial.
6) Now click on your star layer holding Ctrl, this should bring up a marquee around your shape. Now with the marquee showing create a new layer above your shape. With the marquee still showing go to Menu->Select->Modify->Contract and put the setting to 4px.
7) Now with the new layer you created draw your gradiant depending, I usually like to put the gradient in the top left but it will work anywhere. Play with the opacity and blending modes until you are satisfied.
Time to add some trendy text I recommend “Ozzie Black�, don’t forget to rotate yor text by 45 degrees.
Hey, this is great, thanks!
I made my own great looking button in 2 minutes
Awesome tutorial. I love it.
Nice!! I’ve been looking for this tutorial everywhere!
i made one…couldnt find where to put it on my site, so i slapped it right in the middle
http://www.codecraig.com
For the text, it’s usually good to add a border. In this case, black.
FYI: In CS2, I had to right click the shape in the layers panel, and select “Group into New Smart Object” before I could select the layer with my Majic Wand. After that everything else worked fine
Thank you for this tutorial! I was looking for something like that. But now I’m still searching for the real name for this “badget”. Does anyone know?
Trendy? Not in my cyber village.
very nice tut, thnx!
Trendy Web 2.0 applications are being targeted by internet crooks stealing personal and financial information, security vendor Symantec warns.
what is happen to it.
Great tutorial, i’m going to try right now !
Thanks for the quick and easy howto. Submitted post at howtohut http://www.howtohut.com/web2_0_badge_in_photoshop
Looks nice, thanks!
Nice badge, but wtf does it have to do with “Web 2.0″?
Awesome tutorial. Thanxs!
cool tutorial was having a hrad time making a badge using stars in illustrator.
thanks!
I am using CS2 and I still cannot figure this thing out! If someone is kind enough to send me one of these as a CS2 file, I will be forever great-full. You can reach me via pedroishistory (@) [yahoo].com
Great job.
Keith Knutsson
@Button: I’ve been seeing the word ‘Violator’ POP up a bit lately as a name for these badges. As in, it breaks out of the natural flow and rhythm and palette to generate a bit of interest.
Wow, awesome tutorial =D
Nice and simple, easy enough me to understand,,
Thanks!
finally i found this here… thank you.
Very nice and userfull lesson, thank you! =)
thanks a lot! just used it on my site as a competition badge!
Great tutorial. Very effective, but simple to achieve!
thank you!i have studied much in tutorial.
Has anyone been able to re-create this badge in Illustrator? I love the way it looks, and would love to have the same look in vector…
Thanks,
–Joe
Thanks very much. It very useful !
oh…man.That’s great…Thanks for this tutorial………
I really need it.
Thx a lot. i really like it.
excellent tutorial… thanks!