Create Custom Radio Button - Part I

How to make Custom Radio Button???

Now I try to make it very easy. First of all I am using “Firework” for this article. I learned the same step by step by making radio image. Then I learned how to implement that with “jQurey”.

Step 1 :

Start Firework and Make a new document  (Ctrl + N ).

Step 2 :

Press ( U ) or select Rectangle tool and drow it like below image size and position.

Step 3 :

Select Ellipse tool then draw like that.
This Radio is main display image.Border color: #999, Opacity: 75%, Select Radial Gradient. and it’s positon x to y and top to bottom see in image.

Select Both Rectangle box and Ellipse then group it  ( Ctrl + G ).

Step 4 :

Now Create Hover image. Select Rectangle and copy paste. and Select 2nd Rectangle and Ungroup ( Ctrl + Sift + G ) then Make new circle in side the 2nd Rectangle. See in the below image.

Change Opacity : 100%, and Glow property same like below image.

Then Select 2nd Rectangle + Circle + in side Cricle and Group it ( Ctrl + G ) .

Step 5 :

Now Making Selected image. Select 2nd Rectangle and copy paste. Then Select 3rd Rectangle and Ungroup it ( Ctrl + Sift + G )

change the Glow Property same as below image. change the color of inside circle. and change the main cricle border color.

Step 6 :

Select all Object ( Ctrl + A ) then Ungroup ( Ctrl + Sift + G ) and only Select all Rectangle and Delete.

Step 7 :

Now We are Export the image ( Ctrl + Sift + X ) and set the propety below image.