Tutorials
Bullet Buttons

Bullet Buttons
Programs Used: Photoshop 5+
Skill Level: Basic

1. Create a new 200 x 200 canvas in Photoshop
2. Using the Ellipse Marquee tool and holding down the <SHIFT> key, make a perfect round circle to fill the majority of the canvas.
3. Create a new layer.
4. Select the Gradient Tool (G) and then click on the Radial Gradient
5. Make sure that you have a WHITE forground and BLACK background selected and then drag your gradient diagonally across your canvas. (Holding down the <SHIFT> key at this point gives you a perfect 45° angle)
6. Deselect the canvas and then using the Ellipse Marquee tool again draw a perfect circle, but this one should be about 25 pixels smaller.
7. Go to SELECT >> FEATHER and use a value of 5 pixels.  
8. Use the Radial Gradiant tool again but to drag in the opposite direction, doesn't that look nice and smooth? That's because of the feather.
9. Now we could leave the button at this stage but I want to add another layer to this canvas.
10. On the new layer make ANOTHER selection but this time, make the selection in a bit more say another 10 pixels.
11. Again go to SELECT >> FEATHER and use a value of 5 pixels
12. Use the Radial Gradiant tool again but to drag in the original direction.
13. Now this look doesn't have to be the one that you go with.... you can easily vary the values of the selections to have many varied and brilliant effects.
14. To color the button, we should flatten the layers and then go to IMAGE >> ADJUST >> HUE / SATURATION and make sure that the "COLORIZE" box is ticked. Choose any color combination you wish...

15. The only other thing which you may need/want to do is scale the image down to the size needed:

 


Wasn't that easy? I hope to see lots of these kind of buttons used everywhere! One way that I like to implement these graphics is as a rollover. So I may take the button from step (8) above with our final image and then use Dreamweaver to add a mouseover/rollover effects. It looks very nice.

 

Copyright © 2000-2007 Bluedesignstudios.com We accept secure payments by