Web Interface Design – Create an Attractive Active and Inactive Radio Button in Photoshop

This tutorial will show you how to create an active and inactive radio button in Photoshop.

01. Open a new document and choose your background color.

02. Create a new layer (Layer – New – Layer), take the Elliptical Maquee Tool and drag a circle, then choose color white, the Brush tool and color the selection to white.

03. Double click on your circle layer in the layers window (Window – Layers) and choose Gradient Overlay. There set the Gradient from light grey to white – light grey being the upper color. Set the angle to 90.

04. Then go to Stroke, set the size to 1, fill type to Gradient and choose the gradient from grey to lighter grey, darker being the upper color.

05. Now go to Drop Shadow. Choose the color white, blend mode to Normal, Distance to 1, and size to 1.

06. Then go to Inner Shadow – Blend mode to Overlay, Angle to 90, Distance 2 and Size 4. Press OK. Now your inactive radio button is ready!

07. Lets create an active radio button. First lets duplicate the inactive – right click on the inactive button layer and choose Duplicate Layer. Mve your duplicate next to inactive button. Now take the Ellipse tool and make a small circle in the middle of your duplicate. Don’t cover it completely, just a smaller circle right in the middle.

08. Double click on your new circle and choose Gradient Overlay. There set the gradient similar with your background color. Don’t forget to set the angle to 90.

09. Then go to Stroke and set a small 1px stroke around your circle. Set the Fill type to Gradient and then choose colors a bit darker than your circle main colors are.

10. Now go to Drop Shadow, lower the opacity, set the angle to 90, distance to 2 and size also to 2.

11. And to finish up, go to Inner Shadow and add a tiny white shadow on the upper part of your circle. Blend mode to Normal, color white, angle 90, distance 1 and size 0.

And your active and inactive radio buttons are ready to use!

Leave a Reply