Creating Badges

A couple of days ago we had a forum entry on how to create badges, like those used on Bartelme Design to indicate new entries. So here is a short description of how to create them using Adobe Photoshop.

Photoshop’s Tools PaletteThe best choice to create a badge like form is to use one of Photoshop’s basic shape tools. Activating the “Polygon Tool” in the tool palette (1) and define the number of sides of the polygon in the properties pane at the top of the screen (2). In our case a number between 26 and 30 will be ideal. If you now draw a polygon, you will just get a circle like shape — so we have to define further settings.

Click the arrow button (3) next to the input field, in which we have just defined the number of sides, in order to reveal a drop down menu holding further polygon related options. Activate the checkbox “Star” (4) and define some indent (5).

Photoshop’s Tools Palette

If you now draw a polygon the result should look similar to the one displayed in the screenshot below. After applying some gradient, a border and a drop shadow, our badge is finished. That’s it. Hope you enjoy. If you are intersted in how to turn your basic shape into a glossy, three dimensional badge, check out the second part of this tutorial.

Photoshop’s Tools Palette

26 comments so far

Skip to comment form

Tom November 12, 2005 at 01:52 AM

Now, that saved me a TON of time. I used to create squares and rotate them… :(

Martin Labuschin November 12, 2005 at 01:57 AM

Dankeschön! das Tutorial ist simple aber genial! MfG

Tom November 12, 2005 at 02:02 AM

Nice work Wolfgang.
I appreciate your tutorials very much!

But one more question…How can I get so nice *.gif quality?
The normal way to save ‘em?

Brutal November 12, 2005 at 02:03 AM

Hehe. You only showed us the easy part :)

Olivier Lanctôt November 12, 2005 at 02:08 AM

Why is the gradient rounded…

and how to make a “border”
you should add more steps!!

thx!

Martin Labuschin November 12, 2005 at 02:13 AM

Irgendwie hat Brutal recht…

Martin Labuschin November 12, 2005 at 02:21 AM

Done! Link

Tom November 12, 2005 at 02:21 AM

Look at this.
what a terrible gif quality…

Link

Peti November 12, 2005 at 04:14 AM

Did you try it with ‘Save for web’, Tom?

Thame November 12, 2005 at 05:54 AM

I just finished doing my own star tutorial. What can I say, incredibly amazing smart geniuses think alike :D

Maybe I’ll still post it since it’s a Fireworks tutorial…

Steve Williams November 12, 2005 at 07:47 AM

Neat, I’d been using one of the predefined shapes when creating stars.

Now, if only I could create highlighted editable text… so easy with CSS, but I’m stuck when replicating it intelligently for layout ideas in Photoshop?

Koka November 12, 2005 at 08:36 AM

chique :)

Chris November 12, 2005 at 09:42 AM

Awesome tutorial! One thing, though, and Olivier has already pointed towards this…it would be helpful if you could show how to achieve that particular look from the gradients in photoshop. Thanks!

Jeremy November 12, 2005 at 12:53 PM

Its simple.


  1. Make a gradient over the star (anyway you like)

  2. select the star (command click the layer)

  3. take the circle select tool (set to minus from selection)

  4. take out half of the selection

  5. go to select > (something i forgot but you can find youst look in the select menu) > contract. And contract it by “1 pixel”

  6. get the gradient tool out and make it so you have 1 color white and the other transparent.

  7. set the gradients opacity to 50-70% (whatever you like the best, try it a few times)

  8. then make a gradient (click and drag from around the upper left hand corner of the star to a bit off of the bottom right hand corner of it)

  9. Add a drop shadow (layer effects, which i assume you know how to get into, then make its distance a bit far off, like 3-5 depending on how you want it to comeout)
    were done! enjoy

Stefan November 13, 2005 at 03:08 PM

great, no I can consult your site as often as I need a badge without having to ask you again. Thank you for your instant help on Saturday ;-)

Wolfgang November 13, 2005 at 04:10 PM

No problem :)

Chris November 13, 2005 at 09:42 PM

Jeremy, I appreciate the mini-tutorial very much! I’m having a small problem with step #8, though, and please forgive me for my ignorance on the matter. I’ve done lots with Photoshop, but this is really my first intro into advanced gradient procedures. Anyway, the problem I’m having is that when I go to draw the gradient on the badge shape, Photoshop says that “the content of the layer is not directly editable.” When I first created the shape, I created it as a Shape Layer, and of course, you get the vector mask and all the garbage that comes along with it. Is that the problem? Should the shape just be a Fill Layer or what? Or am I just missing a crucial step?

Vitaly Friedman November 13, 2005 at 10:42 PM

Very nice work, indeed ;)

adrmis November 14, 2005 at 04:24 AM

Simple and good. What more can i say;)

Jeremy November 14, 2005 at 05:28 AM

Chris, right after step 7 make a new layer. then click the layer under it (the actual badge) to apply the drop shadow. Thanks for pointing out the mistake. I’ll edit the post

Jeremy November 14, 2005 at 05:29 AM

it seems i am unable to edit the post. But A Part 2 of this tutorial has been made. Just use that instead.

Heiko November 15, 2005 at 05:26 PM

Short but a really nice tutorial, excellent!

Heloym November 19, 2005 at 05:56 AM

Thank you so much!!!!

renowe November 20, 2005 at 09:10 AM

thx for the tip

megan November 28, 2005 at 04:59 AM

great help thanks

Lisa McMillan December 08, 2005 at 02:22 AM

Wicked tutorial man, and I’m not sure if I just missed it here, but I thought I’d add it for your readers. If you aren’t sure how many points you want on the star, click and hold the mouse, and press the up arrow on the keyboard until you get the number you want. Same works the other way: easy peasy triangle can be created by holding down the down arrow key while you drag out a polygon.
——-

Commenting is not available in this weblog entry.