You’ve seen them everywhere. No self-respecting Web2.0 site would be without them; those little splashes of color that jump out at you and scream “HEY LOOK AT ME! OVER HERE!” Yes, that’s right. We’re talking about perhaps the most over-used trendy little design fad to come out of the two-oh movement-the badge!
Admit it. They’re pretty cool, huh? So let’s make one…
Crack open a new Photoshop file and create a new layer. Call it “badge” or something like that. Now grab the shape tool and select the 8 point star shape from the dropdown palette of available shapes.
Note: If this shape isn’t available for you, you may need to load it into Photoshop by clicking on the options menu icon (>) in that same palette and selecting “shapes” and then when prompted, choose “append.”
Now that you’ve done this, draw a shape the size of your badge. Make sure you’re creating either using either filled pixel shapes or paths, not vector shape layers. For this example, I’m using paths.
Next, Ctrl+Click on the path in your paths palette to load its selection and fill it with a color. Any color will do for now.
Next, hit Ctrl+J to duplicate the layer. Now go up to Edit - Transform - Rotate. Enter a rotation amount of 23 degrees in the rotation options. Alternately, you can just eyeball it if you like. It’s pretty easy to see when everything is lined up correctly. This rotation will finish creating your badge shape, so merge the two layers by hitting Ctrl+E.
Now click on the “Lock transparent pixels” icon in the layers palette for the “badge” layer. Set your foreground color to #ff8400 and your background color to #ff4900. Using the gradient tool, with the foreground to background gradient selected, drag from the top left or your badge to the bottom right. Hold down the shift key to constrain your gradient on a 45 degree downward angle.
Now let’s add some layer styles. Double click on the layer to bring up the layer styles dialog and apply the following:
Now create another new layer and call it “highlight”. Using your circular marquee tool, make a selection just big enough to encompass the badge shape. Fill it with white and move it so that it obscures the upper left half to two-thirds of the badge. Alt+Click between the “badge” and the “highlight” layer in the layers palette to group them together. Now lower the layer’s opacity to 30%.
Now click on the layer mask icon for the “highlight” layer in the layers palette. Select a black to white gradient and drag from the top left of the badge down to the bottom right, just as we did above.
Great! We’re almost done. Let’s add some text. Of course, be sure to use a nice, trendy Web2.- font.
That text looks a little plain. Let’s give it a simple layer style to make it pop out more (or in, in this case). Double click on the text layer and apply the following style.
There you have it, our finished badge!
If you liked this tutorial or want to take a closer look, you can also download the PSD file.
All thanks to http://freephotoshopguides.com
Share This Post
