Designing Glossy (Web 2.0) Badges

This is a relatively basic Photoshop tutorial, but you should have basic knowledge of Photoshop and its tools to follow through to the end.

We’ll be learning how to design these glossy “Web 2.0″ badges in Photoshop. We’ll start off making the shape then styling it using layer styles and additional separate glossy layers.

1. Set up a New Document

Start by creating a new document in Photoshop; for this tutorial I’m going to be using a 400 x 400 document. After you’ve created a new document, design a nice background for your canvas; I used a light blue gradient and some simple white scan lines.

2. Making the Shape

Now let’s make the shape of the badge - in your Photoshop Tools Menu, find and get the Polygon Tool (U).

Be sure that your settings are set up correctly near the top of Photoshop:

Click the drop down arrow that is highlighted in the above image and use these settings:

Now you’re pretty much set to create the shape, although you might want to change some of the settings so that it will be more suited to your tastes. Create a new layer (layer > new > layer) then drag your shape onto the canvas. The color I’ve used for my shape is #4fb2ea.

You should have a badge something like this one:

Well, that’s how to make the basic shape, now move onto the next step to make it look a little nicer

3. Slight Effect (Layer Styles)

In your layers palette, you’ll want to right-click your badge layer and go into the Blending Options. Click and apply the following layer styles/settings:

1. Outer Glow
2. Inner Glow
3. Gradient Overlay

You should now have something like this:

Looking a fair bit better now. Next thing to do is add some gloss and highlights!

4. Highlights

Create a new layer then select the badge pixels by holding ctrl and clicking the layer thumbnail (in the layer’s palette).

Contract your newly-made selection by about 2 pixels by going to select > modify > contract and using an input that you think fits.

Again in a new layer, fill your selection with white (#ffffff), press the down and left arrow keys once each, finally press the delete key on your keyboard then you should be left with something like this:

Next, change the layer mode for this layer to Overlay and lower the opacity if you think necessary. I lowered mine to around 70%.

Make the selection around the badge layer again and contract the selection again by 2 pixels (or whatever amount you used before), on another new layer make a White to Transparent gradient from the top left to the middle area like so:

Find and get out the Polygonal Lasso Tool and use it to make a diagonal selection from the bottom left to the top right somewhere, then delete your selection like shown below:

Change the layer mode for this layer to either Soft Light or Overlay, and lower the opacity to around 30-70%. Now you should have a nice result like this:

5. Finalizing

Looking much nicer now! Finally, you may want to add some text onto your badge, such as ‘Beta’ as the joke goes

I simply added the word “Web 2.0″ onto my badge, using a simple font such as Arial. If you use white as your text color, you may want to add a blue drop shadow to your text layer.

Complete + PSD

Thanks very much for reading this tutorial! I hope you enjoyed it. If you need any help, you can of course download the PSD file from this tutorial from here: Designing Glossy “Web 2.0″ Badges PSD (93kb)

Or feel free to leave a comment.

You must be logged in to post a comment.

67 responses

roraz said:October 10th, 2006

i get confused around the part where it says:

On a new layer fill this selection with white #FFFFFF. Then press the down and left arrow keys once each. Press delete.

when i do that, theres nothing on the layer - and I can’t do the rest of the tutorial??

Eli said:October 11th, 2006

roraz: be sure you have the selection tool out..

Steven said:October 27th, 2006

Pretty Nice, But I think you should maybe use the seal tool, alot lot better.
Steven

Abraham said:November 8th, 2006

Cool… thanks. I was able to follow it exactly…
hats up for u…!

just someone said:November 11th, 2006

Dude - the outer glow settings screen dump just goes to a pic of the finnished star…

Nissim said:November 20th, 2006

How did you make those scan lines in the back?

joker said:December 12th, 2006

What settings did you use for Outer Glow?

yet another responder said:January 4th, 2007

How do you make those scan lines?!?! I’ve seen them all over the web. but I have NO idea how to make them.

Disco said:January 14th, 2007

step 3 the outer glow link goes to the wrong image

prismatico said:March 9th, 2007

Thanks an excellent tutorial!!

Laura said:March 19th, 2007

how do you make those scan lines? I can’t get them.
thanx for all, I’ve been trying several and they are just great and easy to follow.

Adrian said:June 15th, 2007

WOW awesome technique, thanks!

url redirect said:July 12th, 2007

Nice blog, I really like how you have the colors, and the outlook is great as well. Many people do not do this good of blogs, very good indeed, article is very mind capturing I really like it. Keep up the great work let me know when you have more done.

sleepig said:July 20th, 2007

Nice design! Please show me how to create those scan lines. Thanks..

David said:August 28th, 2007

If you download the PSD, you’ll be able to see the “missing” settings for the Outer Glow style.

Barna said:September 13th, 2007

I am a new user in photoshop.That’s why many options i can’t know.If you please inform me from which site i can start, it is too much pleasure for me.I also face a problem in my pc. It is when i select the photoshop gradient in any layer then it shows gradient progress. what’s problem is there?Please inform me. Otherwise i can’t use photoshop gradient which is too much needed.

How can i select the light blue gradient and some white scan lines in gradient.

I waiting for ur response and oblige me thereby.Thanks

ThOmas said:November 1st, 2007

I think the gloss & crystal design it’s so cool, i don’t speak too much English but your tutorials are amazing and make me love all buttons and designs to make my web with those glossy shapes!!!
=)
greetings!

paramjeet kaur said:November 8th, 2007

your shapes are exilant.pleas sent more
tutorial on my email ID.

Vista Themes said:November 9th, 2007

Awsome result .

Girls Games said:December 19th, 2007

Thank you so much, I wıll use this at my site.

Blogerko said:December 22nd, 2007

Amazing, thank you for this tutorial, it is really nice

akash said:December 26th, 2007

very impressive……..i love ur work thnx pal!!

Inspiks said:January 9th, 2008

Excellent Tutorial!!!….I had a rush job at work today, your tutorial was very easy to follow and I completed my project on time!!….THANKS!!

web design said:March 16th, 2008

looking cool, thanks and for PSD file.
Dimi

wii_128 said:March 17th, 2008

How do you do a white to transparent gradient?

Eli said:March 26th, 2008

wii_128:

To make a white transparent gradient, get the gradient tool then go into the preset gradients, theres one that will use the foreground color to transparent, if you know what I mean.

media said:April 21st, 2008

Useful. Thanks an great tutorial !

M said:May 5th, 2008

I would recommend using Shape Layers over a straight fill to keep things as scalable and flexible as possible. To achieve the highlight effect just use an Inner Shadow turned to White with a Normal or Overlay Blend.

kamal said:June 14th, 2008

Nice sources for web 2.0
thanks
kami