Creating Badges: Part 2
Due to popular demand I’ve decided to write some kind of follow up tutorial to the “Creating Badges” tutorial. In the second part you will learn how to turn your basic shape into a glossy, three dimensional badge.
This tutorial starts from the assumption that you know how to create a badge like shape in Photoshop — this is discussed in the first part. So after creating the basic shape open the “layer style” window of the respective layer and assign a decent drop shadow as well as a linear gradient. You may choose similar values as shown in the screenshot below.
Now your basic shape should already look more badge like — but there are still some more steps to be performed. First of all we will create the subtle reflexion: Load the shape’s selection by “Cmd” respectively “Ctrl” clicking the respective layer in the layer palette. Afterwards contract the selection by one pixel — this can be achieved via “Select — Modify — Contract”. Create a new layer and fill the selection (6).
In a next step set the layer’s blending mode to “Overlay” and reduce its opacity to about 40% (7). Now select the elliptical marquee tool from the tools palette, select the lower part and press the delete button (8). In order to get a similar result than shown in step 9, switch to the quick mask mode and draw a gradient, similar to the one show in the screenshot below. Now switch back to the standard mode and press the delete button.
Now our badge already looks quite okay, but it’s still some kind of flat. Of course we could use Photoshop’s bevel and emboss effect… but I prefer another technique: Once again load the selection of the basic shape, contract it by one pixel, create a new layer, fill the layer, set its opacity to 40% and its blending mode to “Overlay” (10). Now load the selection of the newly created layer, move it down one pixel (11) and press the delete button (12).
Now we create the bottom bevel the same way — but instead of “white” use “black” as fill color and reduce the layers opacity to about 20%. Congratulations you’ve just finished your glossy, three dimensional badge (13).
46 comments so far
Skip to comment form
Reinier - Djust.nl November 12, 2005 at 06:37 PM
Clear and well explained. This is great stuff.. especially since I need it for an assignment today.
Steve Williams November 12, 2005 at 07:21 PM
Simply brilliant! Thank you.
Tim November 12, 2005 at 09:23 PM
Perfection! Thanx a bunch!!!
Yannick November 13, 2005 at 12:05 AM
Nice followup. Easy to follow also. Thanks.
Benke November 13, 2005 at 12:49 AM
Well done, nice tutorial. My badge looks very eatable now. However I never came across a Layer Style named „Overflow“ — refer to step 10. Have you got a special Photoshop edition or am I missing the point?
Wolfgang November 13, 2005 at 02:00 AM
Well this was actually a mistake — it’s not “layer style” but “blending mode”. I’ve already corrected it. Thanks for the hint,
pickupjojo November 13, 2005 at 02:12 AM
Oh, very nice job, thanks a lot ! :-)
Louis November 13, 2005 at 02:28 AM
I apprantly can’t find the Overflow blending mode… It’s not there when I open the blending options. Could someone please point out where this overflow style is?
Wolfgang November 13, 2005 at 02:39 AM
Well, obviously I kinda mixed up Photoshop and CSS settings. Of course the respective option isn’t “Overflow”, but “Overlay”. Sorry guys.
Olivier Lanctôt November 13, 2005 at 04:57 AM
Thanks!!!
Bryan November 13, 2005 at 06:00 AM
Dude, you rock, this is awesome. :)
Tom November 13, 2005 at 06:10 AM
Excellent step-by-step tutorial!
Ingo November 13, 2005 at 06:15 AM
Hi Wolfgang,
very nice tutorial. Thank you very much!
Zachary Jones November 13, 2005 at 06:18 AM
Well this should come in handy. Slightly different from my method, but I think I like yours better. Hmm..
Genny November 13, 2005 at 06:27 AM
Awesome tutorial… so simple… yet so very cool.
thanks for sharing
Joshua Illichmann November 13, 2005 at 07:13 AM
Good tut, thanks for that mate :)
Michael November 13, 2005 at 07:41 AM
Exactly tutorial. However, I am fairly new to PhotoShop and would greatly appreciate it if some of the steps where further explain (e.g. how to apply the gradiet, what is the optical marquee tool etc.). Without understanding those steps and a few more, I am stuck with only a solid colored polygon.
Thanks in advance.
Nik November 13, 2005 at 07:56 AM
Looks absolutely great, thanks so much for this great tutorial.
melted November 13, 2005 at 08:59 AM
tnx on this… good stuff… now copy — paste and archive somewhere… :)
Thame November 13, 2005 at 10:12 AM
Gorgeous tutorial…this is beautiful. I feel much dumber posting mine now :(
andr3 November 13, 2005 at 11:20 AM
Thanks for the follow-up. As if the 1st part wasn’t good enough. You should do this more often… ;)
I’m sure the tips in this post will be useful for other stuff as well. Thanks.
zonovo November 13, 2005 at 05:59 PM
Thanx for your good tutorial…
Awesome work!
zonovo November 13, 2005 at 06:05 PM
One more thing…
Can you share us how to add the “sunk” words on it.
eddit November 14, 2005 at 02:00 AM
any thoughts on making a vector version, probably in illustrator?
Julian Schrader November 14, 2005 at 03:00 AM
Very nice tutorial, Wolfgang! This will improve my bagdes — with your technique they simply look better…
Nathan November 14, 2005 at 04:15 AM
Nice of you to come back with round 2. Thanx.
Sean Hayford O'Leary November 14, 2005 at 12:26 PM
This was really cool — just tried it out.
Marc November 14, 2005 at 07:19 PM
Hi Wolfgang,
Excellent tutorial! I always like to see how the “real designers” create their stuff… Very instructive and inspiring!
Even more than the visual appearance, I love the way the badges disappear after a few days. Guess you have done that using some php coding or something? Would be great if you can make a third part about doing this.
But hey, who am I to ask? ;-)
Reginald B. Goodridge, Jr. November 14, 2005 at 11:56 PM
Your a cool guy!
Pat November 15, 2005 at 01:35 AM
Awesome! Thank you so much for posting this.
Chris November 15, 2005 at 07:40 AM
So money. You knew you couldn’t get away with tutorial number one :)
Thanks for sharing! The world’s gonna be a better place now. Well, at least it will “pop” a little more and look more three-dimensional.
pulaski November 16, 2005 at 09:32 PM
Thanks! :)
FusiunDesign November 17, 2005 at 12:46 PM
Great Tutorial.. very clear and very easy to fallow. Thanks a bunch mate :D
Nina November 18, 2005 at 02:59 AM
Schöne Anleitung :-)
… auch wenn diese Badges inzwischen leider zu oft genutzt werden um noch “cool” zu wirken ;)
Videlin November 18, 2005 at 05:10 AM
I’m very, very impressed. Very helpful and nice explained. During this step-by-step tutorial I used light blue (156, 180, 215) and blue (13, 80, 178) as colors and in step (13) I used 100% opacity instead of 20%. Also I put white stroke on the top layer and it looks great. Thanks again.
Krithika November 22, 2005 at 03:31 PM
awesome tutorial, happened upon your site from css beauty and glad i did. i’ve been looking for something that explains this effect for some time now =)
Steff November 24, 2005 at 11:27 PM
Sehr schönes Tutorial THUMBSUP
Patrick Haney November 29, 2005 at 12:55 AM
Hey! You’re giving away my secrets!
Actually, I should write up a tutorial on how to do this in Fireworks, since that’s what I used and what many others use for web graphics as well.
ravenziel December 01, 2005 at 07:30 AM
Awesome tutorial
straight, simple and sooo cool and effective
I love U dude ;)
jumbosheep December 01, 2005 at 08:15 AM
very nice and well explained
jupiter December 06, 2005 at 11:37 PM
This is golden, and even if patches are used a lot meanwhile — these stand out!
Phil Thompson December 08, 2005 at 09:46 PM
Thnaks for this, it’s exactly what I’ve been looking for!
will December 12, 2005 at 08:19 AM
Wonderful, Nice and easy to follow ! :)
——-
Kramerica October 16, 2006 at 02:14 AM
You say to create the top and bottom bevels the same way, but I think with one you want to nudge UP before deleting and the other nudge DOWN.
Anonymous October 16, 2006 at 11:34 AM
Great tutorial. Really like the site.
milo October 16, 2006 at 06:00 PM
Ok, the first tutorial was kinda useful, but if you follow the steps of the first tutorial, then this one here was easy to made up at your own,