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

Tom

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

Martin Labuschin

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?

Tom

Hehe. You only showed us the easy part :)

Brutal

Why is the gradient rounded… and how to make a “border” you should add more steps!! thx!

Olivier Lanctôt

Irgendwie hat Brutal recht…

Martin Labuschin

Done! Link

Martin Labuschin

Look at this. what a terrible gif quality… Link

Tom

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

Peti

I <em>just</em> 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…

Thame

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?

Steve Williams

chique :)

Koka

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!

Chris

Its simple. <ol> <li>Make a gradient over the star (anyway you like)</li> <li>select the star (command click the layer)</li> <li>take the circle select tool (set to minus from selection)</li> <li>take out half of the selection</li> <li>go to select > (something i forgot but you can find youst look in the select menu) > contract. And contract it by “1 pixel”</li> <li>get the gradient tool out and make it so you have 1 color white and the other transparent.</li> <li>set the gradients opacity to 50-70% (whatever you like the best, try it a few times)</li> <li>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)</li> <li>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</li> </ol>

Jeremy

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 ;-)

Stefan

No problem :)

Wolfgang

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?

Chris

Very nice work, indeed ;)

Vitaly Friedman

Simple and good. What more can i say;)

adrmis

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

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

Jeremy

Short but a really nice tutorial, excellent!

Heiko

Thank you so much!!!!

Heloym

thx for the tip

renowe

great help thanks

megan

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. -----

Lisa McMillan