Shiny buttons is a very great eye catching for people to look at. Few sites are using shiny buttons also commonly known as
Web 2.0 style to enhance the quality of there site. Making shiny buttons in photoshop is very easy. Here is a step by step procedure on how to make one.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48TGVThsjN0ZbpDuj7NmPFNZYOvJO_qXWUselBZGbrV2-v9lH4LtOyCK-sjTutLAFOvuPNa7tDPDI4PYot-MzDT_Plqug6NiCCRvKkwXbJV3FxTbycGmc0ErVW2-i_5dWhGnOl5y2xYc/s400/141.jpg)
1.
Create a New Layer (CRTL+N). Name the layer “
Button1“.Using
Elliptical Marquee Tool (M) create a circle.Hold
SHIFT while dragging so you can form a perfect circle. Once you have a circle choose
Gradient Tool (G). Use color
#1081ed on Set Background Color and
#05335e on Set Foreground Color then drag your mouse inside the circle.once your done it will look like this.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XfyOtG6Pc2Uv8mBHGW5XgvTQ5rq923_2Ajlw0FnyFu8BhYeFA6QqmrfbL8BeYYjRX413Xp9-7_jU5wddqqnd9zJ9f5KjmrNiA28uo8iJ88uqAIyVGvH3hSpNH6KGBD1Oay4079lg9Y4/s400/14.jpg)
2.Now Right click the Button1 layer then choose Blending Options. Then select
Inner Shadow and follow the format on the image below.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiWFr8oP3N4XGYxUY1dFZvelFivZMB9_QWJAEys8dzkzobjNWR1zLbRgei5N88aNa1VTmEmj7YeZE5QTvUGADMiwzbbCR4mGLvyl06K2PCOIqXkltacomZyoKHmIRjwwM92etdYpx110c/s400/34.jpg)
3. Choose
Ellipse Tool (U).and make an ellipse shape on the upper part of the circle. Name the Layer “
Ellipse1“. Right click the Layer Mask on the Ellipse Layer and choose
Razterize Vector Mask. After that you’ll come up with something like this
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGfXbYfZmz5XEfmOAv27T83XNUBMgSCiSilBBciSPTOQ_Mi5JvW1FqokTiaZw9_Oi1qZ5zrdIhMfU9WzVbdxAhv58h43MDpifzrPeHE3F4C9M3OrgZSlwIY_iAKXJPtIm5dSV4zODNLU/s400/44.jpg)
4.Click on
Add Vector Maskand choose
Gradient Tool (G) then set it in Foreground to Transparent. (I showed that already to you on my past tutorial so lets continue).So after you set it in Foreground to Transparent, drag your mouse down to up.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1d7g47QWF2E80bdN1Q9gH_DlWogpSLSo8oz15zG4eIMDndabXGXXkX2tO7qMGHo3k4eIr-kss2EhZA9Z8hW7AuDjnspuuYIFkHp2oOYq9QhSL5d65F4E3C6qNBkPe8Wuar9bvm1FPpvY/s400/8.jpg)
5.Create a New Layer between Button1 Layer and Ellipse1 Layer. Use color
#00c6ff.Choose the
Ellipse Tool (U) again and make an ellipse shape this time on the lower part of the circle. Name the Layer Ellipse2 then Right click on the Ellipse2 Layer Vector Mask then choose
Rasterize Vector Mask.it will go like this.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhRiUTlDWI-P8JAxbS1UUVQFIon3BY81pkmtr4FG-ZQ6_X0mr2FvhMnmjmGb4PsM69clEfnRXDld0LstDnWya2nzJMoXOI9dBB836azzupR6ZIToh_nt_jYtY0i8o34NnMBUvphGCtE8/s400/63.jpg)
6. Now go to
Filter>Blur>Gaussian Blur.Then Set Radius into
12.Then it will look like this.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicHewiUwy1SHTPX5dB66MeUjun3lKyinJP4nc414JLYmuw_gcik9X6ecfbeK-tB7y5x2ZA7f2aH0rKqXospgBfoqid2rFtuDXDDkRA9uZxcnQlIfVOYCIqEp47K5FyRJC1O2fK7SIWosk/s400/72.jpg)
7.Now set your Set Foreground Color in
#f2f2f2 and Set Background Color in
#716e6a. Then right click on Button1 Layer then go to Blending Options.Now Choose Stroke and follow the format on the image below.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-2dO8Fwlc1UWe4hAtblhvQ4qUWd7M3HTjjVPdhECr0pPfw0O53zrMitbqBHUkdpw_J2yuM85-9wxo097r0dYr6O9tyT-8Wo38HhjlF4F8Wu7GgunJiHliRiHaFpl3Sf6Y7PGm5HkHjag/s400/91.jpg)
Then when you click
OK it will look like this
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRpRREo4qKuYC5znjcObcC8IZA_p2hbjY7CDiPCsurlEhbgqvgg3gsEHGUHglpi98GJ5rsXhsAxb-WQy74PrL5OOJMjiA6iXAgrFRlZVZx7Qap65fI600eyHLj_qjagptpMZAQOkQKqPE/s400/10.jpg)
8.We need to use stoke again on the Button1 Layer.Now Heres a trick. In order to use the Stroke again on Button1Layer create a new Layer then select the two Layer which is Button1Layer and the New Layer by holding SHIFT. Then right click on the 2 selected Layers then choose Merge Layers.Then Name it again in Button1.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhB-rs2bG2n74LRdz992RD6J7fTkz1T4q0Y81mdw4mwhMOOAgoDkQRCUdPLQfWQS5rs18uWZEbJ_O5wM2UAKmutlpAC3XcDJCa92cGI8JQojOIjjWO1teUrEGdNVKhkyOYSJncjmr36Jw/s400/111.jpg)
9.Now we already merge the 2 Layers.Set the Foreground Color in
#b7b9c5 and in Background color in
#f5f6f6. Then right click Button1Layer and go to
Blending Options again.Follow the image below for the setting.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPj8t4qomVrr1XTaosU94-ZgMMWPDbrYZcgARQsqdj0ShTU77Nyff289Gwsa2NDwboEICas38ytXOX4QFDsawUv9rTHKmgMfMQKGbHiXd9bP5R0DkEXDAG_FodblmDQKc2jfre645bHM/s400/121.jpg)
After that your button will look something like this.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Vz-4BDMoP_143NP-YZz5GiAzHiN4WTMz7ZPYOF8-uJGbgJCNd_eDKZLNTyfKTnpBnJqDeLKqkQb1MPIOuiPZ-ScXOQ4LBGTkPq1ITlSXetQgB0wQpVGNhPUYkPj6kX3v_czi8oderCI/s400/131.jpg)
Now you can put whatever shape you want on the center of the button. You can also play whatever color you want.
heres what i made.
1 comments:
thanks 4 comment.i like ur blog . can u join in gtalk.
Post a Comment
Hey readers, plz post comments related to topics only... :)