Bullet Buttons
|
|
| 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 |
![]() |
| 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 |
![]() |
| 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.
|
|






