Web 2.0 Badge
Photoshop Tutorials |
|

1. Create a work area large enough for your badge and fill it with your background color. It's best not to have it TOO big, so don't make really gigantic badges because they loose their visual appeal the bigger they get.
2. Now create a new layer and select the Polygon tool. Set the sides to 35 and make sure Star is checked and that you have Smooth indents selected. Select 35% for the indented sides. It should look like this...

3. Now select your foreground color to the badge color you want. For mine I used #78DAFF. Don't make the shape too big but create something large enough that'll work for you. Once you've got your shape on the screen, here's where the fun begins... apply my layer options to the shape we created as specified below. You can drag my images right into your Photoshop window and use your color selection tool (looks like an eye dropper) to get my exact colors...




After all that work we should have an image that looks something like this...

4. Now create a new layer and then hold the Ctrl key while clicking on the OTHER layer to select it. The keys might be different on an Apple keyboard.

5.
Now go to Select -> Modify -> Contract and contract the selection by 2px. Fill the selection with white (use your paint brush if you want). Once filled in with white, press your down arrow once and your right arrow once on the keypad to move the selection slightly. Now hit the delete key and it should look like this..
6. Now create a new layer. If the selection disappears when you create a new layer, click on the OTHER layer again like we just did above. Now you'll want to contract by 3px this time instead of 2px like we did before, and you're ready to go. Now select your gradient tool and make sure your foreground is set to white and your selection is set to foreground to transparent and you're using 35%. Check out my options below if you're confused. Now create a gradient at an angle like \ for the best effect...

7. Now get out your Eclipse Marquee Tool and make an oval covering half the image sort of at an angle and hit the delete key to create your shine/shadow effect and you're done! This oval/circle you make is going to be really big. Check out how big and funky I had to get for the effect I ended up using for this tutorial!

Slap on the some text and make sure you had a 1px stroke (layer options again!) the same color you went with for your badge but a little bit darker and then move the text over at an angle and you've got one sexy looking end result!

Using a white or light background? Lower the drop shadow opacity (layer options) to lighten up the shadow.

|
Sorry about the late reply to your comment. Hah. Would you mind explaining to me
what you mean by er, short sites chopping up my footer? And the reason my
footer's background isn't transparent is because in some browsers the background
turns out white. From my experience, anyway. Which I daresay isn't a lot. |
 |
|