Perfect Shine Button or Icon



Ever cracking your head on how to design an awesome button or icon for your application’s GUI? and feeling of jumping out from Web 2.0 style once in a while? In this tutorial will be teaching you on how to create a cool looking button or an icon to suit your need.
**This would be a quite long tutorial


  1. As usual start a document of 500 x 500 px with 72 dpi. With the Eclipse Tool, draw 2 perfect circle as shown in the picture. Then by using the Layer Overlay, give them their color respectively as shown in the picture as well. Then rename the outer circle layer – Stroke and the inner circle layer – icon-bg

  2. Then ctrl+click on Stroke Layer’s thumbnail to have the outer circle selected, fill the selection with white(#ffffff) color. Name this layer – General Surface Glow. Now grab the pen tool and draw a illustration like what’s shown in the picture.

  3. Now convert the pen illustration to marquee. To do so, go to the Path tab which on the Layer Window. Click on the Load Path As Selection (the 3rd icon from the left and the bottom), shown in the above picture.

  4. With the marquee selection is active and the General Surface Glow layer selected. Inverse the selection by going to Select > Inverse or by pressing Ctrl+shift+I, then press Delete. Now using the circle marquee tool, draw a selection as shown in the above picture

  5. With the selection is active and General Surface Glow layer selected, go to Select > Feather or press Ctrl+Alt+D to bring out the feather window, give a 30px feather, and press Delete x 2

  6. Now draw another round marquee at the bottom of it as shown in the picture

  7. Same thing with the selection is active and General Surface Glow layer selected, go to Select > Feather or press Ctrl+Alt+D to bring out the feather window, give a 30px feather, and this time press Delete x 3. You will now get something like is shown in the above picture.

  8. After that, ctrl+click again on Stroke Layer’s thumbnail to have the outer circle selected, fill the selection with white(#ffffff) color. Name this layer – Upper Left Glow. With the selection still active, go to Select > Modify > Contract, give it a 4px contract. Inversethe selection, and with the Upper Left Glow layer selected, press Delete.

  9. ctrl+click on Upper Left Glow Layer’s thumbnail to have the circle that you just made selected. Then with the Marquee Tool is selected, drag the selection to the position as shown in the image.

  10. Bring out the feather window, give it 30px of feather, Inverse the selection. With the Upper Left Glow layer selected, press Delete x 2. You will then have something that is shown on the picture

  11. Then use the Eclipse Tool to draw a white oval shape to be put on top left corner, name this layer – Upper Conc Glow, and a smaller white oval shape on the bottom right corver, name this layer – Bottom Conc Glow. The Bottom Conc Glow layer, change the opacity to around 50 – 60.

  12. After doin the above steps, basically you would have done the inner part of the icon. The steps now onwards are actually to give an extra shine on this button/icon, therefore is optional. Ctrl+click on icon-bg Layer’s thumbnail to have the inner circle selected, fill the selection with white(#ffffff) color. Name this layer – Circular Glow.

  13. Bring out the Contract window, give a 4px contract. With the Circular Glow layer selected, press Delete.

  14. Now grab the Pen Tool again, follow the sharp edge of “circle” and draw an illustration as shown in the above picture

  15. Convert the pen illustration tool to marquee. If you forget how to do it, try recall it by referring to the above picture

  16. After converting to marquee selection, Invert the selection, with the Circular Glow layer selected, press Delete.

  17. Ctrl+click on icon-bg Layer’s thumbnail to have the inner circle selected, bring out the Contract window, give a 15px contract, then bring out the Feather window, give a 30px again. Now with the Circular Glow selected, press Delete 2 – 3 times and you will get something like is shown on the above picture

  18. Tweak a bit on the position by pressing Ctrl+T on the Circular Glow layer.

  19. Now create a new layer in between General Surface Glow layer and Icon bg layer. Put in your Icon Design inside and your icon is basically done!

  20. To add a little enhancement on it, Group all the above steps’ layers into a group, name it Icon. Create 2 perfect circle of the same size overlaping each other. Name the upper layer Black and have the color to be Black (#000000), and name the bottom layer to Grey where the color of it would be Grey (#8e8f91). Draw a marquee selection as shown in the above picture.

  21. Give the selection a Feather of 30px. With the Black layer selected, press Delete 3 – 4 times.

  22. Create a bigger circle behind the whole thing. Name this layer – border.

  23. On this Border layer, bring out the Layer Overlay window, give it a gradient overlay with the color as shown in the above picture

  24. Finally, duplicate the Icon group and merge the whole group.

  25. Bring out the Layer Overlay window for this Icon layer, give a Inner Shadow of the options’ figure shown on the picture. AND YOU ARE DONE WITH IT!!!

With this icon or button, you can also make quite a lot of effect on it. Not only by changing the red color to any other color, but also add some attractive/futuristic background on it. Something like shown below can be made with it as well.

Hope you enjoy the tutorial!




DiggThis


Related Entries


152 Comment(s) On This Topic

Nastasshea@Nesh said during April 16th, 2007 at 12:38 am

Wow looks cool! I gotta try that in adobe photoshop soon!!

Lolll said during April 16th, 2007 at 8:28 pm

nice,,,,

SGriffin said during April 17th, 2007 at 1:13 am

Hey do u have a tutorial for the backgrounds? The icon looks great!

TuanHoang said during April 17th, 2007 at 5:05 am

Thank you so much for the technique.
Look kool

Benzo Hartt said during April 17th, 2007 at 6:36 am

I’ve never seen a button tutorial done this nicely. The look is great and the directions are very simple. Thanx ALOT!!!

boon said during April 17th, 2007 at 10:39 am

hey, thanks for the reply guys ;) SGriffin, if lots of request on it then i might consider doing a tutorial on it ;)

Nathan Blevins said during April 17th, 2007 at 11:17 am

Great job. Wonderfully executed. I had no problems following this. I really like all of your tuts. Please keep ‘em coming!

reedme said during April 17th, 2007 at 2:37 pm

oh wth it dosent seem to work can you please send somthing very detailed

boon said during April 17th, 2007 at 2:50 pm

@Nathan Blevins: thanks for the support man!

@reedme: may i know which part u r stuck in?

the bla blad said during April 21st, 2007 at 4:04 pm

this is awesome man , you must be a professional to make a geat tutorial like this

blah blah said during April 21st, 2007 at 8:15 pm

Dugg. Most original ever.

boon said during April 22nd, 2007 at 4:04 am

hey, thanks for the digg! nope, i m not a professional FYI, still in the learning progress~

sssssssss said during April 24th, 2007 at 12:47 pm

What can I say….Just amazing!

Thanx for sharing your wisdom :D

boon said during April 24th, 2007 at 6:30 pm

no prob pal! ;)

marek said during April 27th, 2007 at 7:06 pm

woow, thats is cool buttons

rainwood said during May 2nd, 2007 at 2:26 am

The description of many steps are not clear and detail enough for a new user.

boon said during May 2nd, 2007 at 12:27 pm

@marek: thanks.

@rainwood: well, that couldn’t be help coz this tutorial is for users which already have an idea on how to use the basic photoshop tools. Besides, i already provide them screenshots on both the stage and layers windows plus with all the function’s position, so if there are people who still doesn’t know how to do it, they could always ask here :)

Kevin said during May 4th, 2007 at 12:48 pm

Hi,

Great tutorial – I was wondering if you had an action for this one.

prabhu said during May 4th, 2007 at 7:10 pm

ya very well

boon said during May 6th, 2007 at 12:46 am

@Kevin: Well, doesn’t have any now, but soon will be using on my coming up project ;)

@prabhu: Thanks~

Anonymous said during May 6th, 2007 at 8:01 pm

[...] Aprenda a criar um botão igual este da foto utilizando Photoshop. O tutorial possui todos os passos ilustrados e por isto é de fácil entendimento caso você já tenha algum costume com o photoshop (mesmo sendo em inglês). http://boonage.pjss2.net/2007/04/15/perfect-shine-button-or-icon/ [...]

Veronica said during May 9th, 2007 at 1:30 am

I was looking around for button tutorials and found this one. This is SOOO cool!! I can’t wait to get home and try it out. thank-you thank-you thank-you thank-you!!!

-v

boon said during May 9th, 2007 at 10:57 am

@Veronica: reminds me of archie comics :P anyway, glad u like it!

dalila said during May 9th, 2007 at 7:00 pm

hi hugh cool TUT..
I have anyhow a small remark to make: well as it is not precised the the initial measure of the first circle (the dark red one)I used one of my pleasure and it resulted too big: that is I had to use twice as much of feather (60px), contract selection (8px) ecc. to reach the same efect so it took me a little bit more of time that it should it be.
at any case a great suggestive work (i added same satin style in the last bradient outborder)
thank u

boon said during May 10th, 2007 at 2:08 am

ur welcome dalila ;)

well, it actually do depends on the resolution and the size of ur desire button, and the measure will sure varies base on it.

Anyway, glad u found ur own way solving it and also for adding up some style on it :D

Marijn said during May 17th, 2007 at 11:26 pm

Thank you for this!!

Martin said during May 18th, 2007 at 5:21 pm

This is the best tutorial on buttons one could get,its more than what i expected

boon said during May 19th, 2007 at 12:19 am

Appreciate the comments from u guys! ;)

Dale said during May 28th, 2007 at 9:48 am

great image, great tut. thanks alot. would love to see a tut for the boxes behind the button tho :P

boon said during May 28th, 2007 at 10:12 am

hmm..alright than, i would consider having my next tutorial on this boxes ;)

Calintz said during June 1st, 2007 at 11:16 pm

Excellent tutorial, I’m quite new to photoshop, and with abit of difficulty managed to learn how to use afew of the functions as well. Amazingly done, hoping to be as good as you someday.

boon said during June 3rd, 2007 at 12:34 am

hey Calintz, glad u like it and learn the functions that u mentioned ;) u surely can achieve what u wanted to one day!

Mukul said during June 6th, 2007 at 1:13 pm

Lovely tutorial! You’ve explained it really well the the final effect looks just awesome. Thanks!

boon said during June 6th, 2007 at 9:56 pm

Np at all my fren Mukul!

om_khoper said during July 10th, 2007 at 11:25 am

I like this…….. :-)

serb said during July 11th, 2007 at 7:53 am

Just beautiful, no words to describe it! :)

Lukas said during August 12th, 2007 at 7:50 pm

Is there a PSD file for this one?

10 Innovative Photoshop Rss Buttons Tutorials | Internet Vibes said during October 30th, 2007 at 7:50 pm

[...] Boonage – Perfect Shiny Button [...]

dungeon said during December 24th, 2007 at 3:42 am

Hi :O)

TX for this nice tut.

PERFECT!

Any chance to see a tut how to make one of this beautiful futuristic bgs you show (as example) at the end of this tut??

P L E A S E!

Web Sitenize 39 EÅŸsiz Photoshop Buton Tutoriali | Listeniz.Net said during December 28th, 2007 at 11:22 am

[...] Boonage: Mükemmel parlama efekti olan butonlar. [...]

Photoshop - 14 Button Tutorials | Newbie Game Programmers said during January 1st, 2008 at 12:38 am

[...] Perfect Shine Button or Icon by Boonage [...]

Boonage » Blog Archive » Headphone Icon Which Aid on Music Related Creation said during April 16th, 2008 at 4:36 pm

[...] of the example. If u are curious on how to make the red icon below, refer to my previous tutorial Perfect Shine Button or Icon. Hope u enjoy the [...]

shruthi said during May 7th, 2008 at 3:37 pm

nice

70 tutoriales gratuitos para crear efectos en Photoshop | Entre machacas y becarios said during May 30th, 2008 at 8:17 pm

[...] de Cristal. 54. Tutorial Glass. 55. Cobertura de miel. 56. Bala super real. 57. Pelota de golf. 58. Iconos con efecto glass. 59. Boton 2.0 con estilo industrial. 60. Menu estilo 2.0. 61. Logo Avanzado. 62. Black Zune 2. [...]

70 tutoriales para crear arte en Photoshop gratuitos | Pichicola.com said during May 31st, 2008 at 6:14 am

[...] de Cristal. 54. Tutorial Glass. 55. Cobertura de miel. 56. Bala super real. 57. Pelota de golf. 58. Iconos con efecto glass. 59. Boton 2.0 con estilo industrial. 60. Menu estilo 2.0. 61. Logo Avanzado. 62. Black Zune 2. [...]

Webincafe - Blog » 39 Photoshop Button Tutorials You Should Have in Your Arsenal said during June 25th, 2008 at 6:37 pm

[...] Boonage: Perfect Shine Photoshop Button Tutorial [...]

romoaldo said during July 4th, 2008 at 12:13 am

bom tutorial,agradeço valeu meu amigo ai dos estados unidos.

Simplicity said during July 10th, 2008 at 10:59 am

HEY BOON LOVE THIS TUT!!! REALLY WOULD LOVE TUTS ON THE FUTURISTIC BACKGROUNDS U A HAVE. SURELY WOULD APPRECIATE IT NICE WORK. OVERALL. BLESS & GUDIANCE…

40+ Hand-picked Photoshop Icon Designs [Photoshop Tutorials] said during August 1st, 2008 at 6:54 pm

[...] Perfect Shine Button or Icon [...]

fikissimo.it » Blog Archive » Più di 40 tutorial per fare le icone da soli said during August 1st, 2008 at 9:25 pm

[...] Perfect Shine Button Or Icon [...]

Photoshop’ ta Görsel ikon Hazırlama Dersleri +40 | EgitimTUBE said during August 3rd, 2008 at 4:54 am

[...] Perfect Shine Button or Icon [...]

Photoshop ile el yapımı icon dizaynları | Sadece Bir Blog said during August 3rd, 2008 at 8:58 am

[...] Perfect Shine Button or Icon [...]

40+ Photoshop图标设计教程和资源 | 帕兰映像 said during August 4th, 2008 at 10:13 pm

[...] 极其漂亮的发光按钮或图标 [...]

Photoshop’ ta Görsel ikon Hazırlama Dersleri +40 | said during August 16th, 2008 at 7:52 pm

[...] Perfect Shine Button or Icon [...]

tenchy said during August 19th, 2008 at 2:03 am

Great tut and kewl button.

Just one Q, a bit like dalila:
What size did you make the initial red circle(s) in step 1?

Firefly said during October 4th, 2008 at 1:45 pm

Thank you! I love this so much :-)

AllTuts - Photoshop Tutorials, Illustrator Tutorials, Free Photoshop Brushes and more said during October 4th, 2008 at 6:21 pm

Create a Perfect Shine Button or Icon…

Learn how to create a cool looking button or an icon in Photoshop.
……

Oliver said during October 11th, 2008 at 10:27 pm

Very great design. Perfect button for all websites…

Photoshop Packs » Pack 002: Twenty Photoshop Button Tutorials That Will Inspire You said during October 28th, 2008 at 11:59 pm

[...] Perfect Shine Button or Icon – “Ever cracking your head on how to design an awesome button or icon for your application’s GUI? and feeling of jumping out from Web 2.0 style once in a while? In this tutorial will be teaching you on how to create a cool looking button or an icon to suit your need.” [...]

Oswald Herman said during October 30th, 2008 at 10:21 pm

Hey, this is an awsome tut. Thankz. It’s simple, easy and no hassel to change the colour afterwords. Great man. Keep’em comming!

39 Tutoriales Photoshop para crear botones | www.Osfrix.com said during November 4th, 2008 at 12:38 pm

[...] Boonage: Perfect Shine Photoshop Button Tutorial [...]

39 Photoshop Button Tutorials You Should Have in Your Arsenal « Tamxiarang2612 ( Pls don’t close my blog !!) said during January 10th, 2009 at 4:33 pm

[...] Boonage: Perfect Shine Photoshop Button Tutorial [...]

phim online said during February 7th, 2009 at 9:49 am

great tut, where can we download the icon?

20+ Best Icon Making Tutorial | Greepit.com | Open Source Resources for Designers & Developers said during February 21st, 2009 at 6:56 pm

[...] Visit Website for Details [...]

web2.0按钮制作教程 | 崔凯,关注网站设计、前端开发、wordpress模板制作 said during April 14th, 2009 at 3:11 pm

[...] Boonage: Perfect Shine Photoshop Button Tutorial [...]

12 Great Web 2.0 Button Tutorials | Onextrapixel said during April 20th, 2009 at 4:54 pm

[...] Boonage [...]

Bob said during June 13th, 2009 at 3:10 am

Great, but not for beginners. If there were links to additional instrucstions on steps such as this it would be awesome.

“Now grab the pen tool and draw a illustration like what’s shown in the picture.”

There is a trick to getting the curves set, but a beginner would not have a cue.

Adding links for “more detailed step-by-step” would make the tutorial great for all levels.

Just a thought.

A very very nice effort, though.

Ple said during June 18th, 2009 at 5:27 pm

Thank you very much for the tutorial.

web2.0按钮制作教程 | 我是UI - 54ui.cn said during June 22nd, 2009 at 1:09 am

[...] Boonage: Perfect Shine Photoshop Button Tutorial [...]

Twenty Web 2.0 Button Photoshop Tutorials | Photoshop-Pack · Adobe Photoshop Tutorials, Interviews, Inspiration, Videos, Tips, and Support Forums said during June 24th, 2009 at 5:12 am

[...] Perfect Shine Button or Icon – “Ever cracking your head on how to design an awesome button or icon for your application’s GUI? and feeling of jumping out from Web 2.0 style once in a while? In this tutorial will be teaching you on how to create a cool looking button or an icon to suit your need.” button_14 [...]

Essam said during August 23rd, 2009 at 10:30 am

Thanks a lot, that was awesome.

40+ Hand-picked Photoshop Icon Designs | 9Tricks.Com - Tips - Tricks - Tutorials said during October 3rd, 2009 at 11:20 am

[...] Perfect Shine Button or Icon [...]

40+ Best Photoshop Tutorials for Creating Buttons and Badges :: Reflex Stock Photo Blog said during October 27th, 2009 at 10:36 pm

[...] Perfect Shine Button or Icon [...]

SEOmeu said during November 11th, 2009 at 8:48 pm

Very good tutor. Thank you so much.

Umka said during December 11th, 2009 at 5:06 pm

Hi!
great tut! but when i came to step “2″ i found my self in trouble. Coz later at step “10″ i saw that some layers were added. Could give a link to full tut or add discription what I (we) should do among this steps.
Thank you.
PS sorry 4 my english

22 Tutorials To Create Shiny Effect Using Photoshop | said during December 15th, 2009 at 9:02 pm

[...] 5. Perfect Shine Button or Icon [...]

Bluesoju said during January 28th, 2010 at 10:50 pm

Good tutorial, but some stuck on some parts and had to figure it out on my own. The last part I never figured out though, it told me to delete black, which I did and it came out totally different.

Also on one part it says to select 4 pixels, but the screen shot selects 20

MZL said during February 2nd, 2010 at 2:09 am

hey great tutorial man it jst look awesome
perfect for them who can work out

Borge said during March 10th, 2010 at 11:55 am

Thanks for this nice tutorial dude, love it awesome. And now I know.

Bavarian_Squirrel said during March 14th, 2010 at 10:32 pm

This is an awesome tutorial. Thank you, you helped me save lots of time to develop a button on my own!

Eye Blue said during March 15th, 2010 at 1:49 pm

This is an attractive tutorial. I like it very
much. Thanks for this tutorial. Please gave other various attractive tutorial.

konki said during March 19th, 2010 at 3:50 pm

please give the psd.

sid knee said during March 23rd, 2010 at 11:38 pm

thanks for the great tut. new to photoshop… some gr8 features highlighted here. mine doesn’t look exactly the same. But tx for taking the time to show the rest of us how to do glass looking icons. konki ~ now you’re just milking it!!!

40+ Hand-picked Icon Design Photoshop Tutorials | Tut7 said during May 8th, 2010 at 3:32 pm

[...] Perfect Shine Button or Icon [...]

SexyDesigner said during May 13th, 2010 at 11:56 pm

Hey, very nice tutorial. Did you try a Cool Button Designer? I think it is a best web button creator – if you dont have a photoshop or dont know how to use it. You can also apply the CSS to the graphics created in Cool Button Designer. I suggest you to try it, it has bunch of features, and creates a cool looking buttons. Just google for Cool Button Designer.

Chao.

55+ Photoshop &illustrator tutorials for icons Design  - Wsblogz.com – Web design magazine said during May 27th, 2010 at 1:51 pm

[...] Perfect Shine Button or Icon [...]

boo said during July 5th, 2010 at 12:40 am

Which ps version did you use? I’m stucked from step 2 to 3.

I used the pen tool and drew as illustrated. Then tried to convert the pen illustration to marquee but failed. I clicked the Path tab and the Load Path As Selection (as you’ve highlighted) isn’t click-able.

40-hand-picked-photoshop-icon-designs-photoshop-tutorials « feegk said during August 7th, 2010 at 6:46 am

[...] Perfect Shine Button or Icon [...]

Rachat de credit said during August 14th, 2010 at 5:10 pm

Great photoshop tuto. it’s really lots of good info. good site. bookmarked it.

Marijan IB said during August 24th, 2010 at 9:36 pm

Excellent work !
I really enjoy in this walkthrouts

Paul Madrid said during August 24th, 2010 at 10:54 pm

Fantastic tutorial. However I had problems with the feather amounts as my button was much bigger than yours. Do you have a copy I could download? Thanks

Ralf Pregens said during November 17th, 2010 at 8:08 pm

Well Done! Thank you for that inspiration!

Tom said during December 1st, 2010 at 3:40 am

Hi man

Nice tutorial… :D
One question though… I noticed, that you have some layer styles on your STROKE and ICON-BG layers. But I can’t seem to find any mention of those in your tutorial… Am I just beeing blind, or what ? :)

boon said during December 1st, 2010 at 9:21 am

hey man…actually the layer styles are only the color overlay and the colors applied are actually mentioned on the very first step :)

Mag said during December 12th, 2010 at 2:38 am

I enjoyed the tutorial, thank you. I also wonder how you made the other background shown in the last image and also the reflection. Can you post more? One other comment is that I could not find the eclipse tool then I figured out you meant the ellipse tool.

boon said during December 16th, 2010 at 3:32 pm

ahh..thanks for pointing out :P

Patrick said during February 3rd, 2011 at 11:56 pm

Hey… Really digging this tutorial, thanks for sharing. My icon turned out pretty great and it is so easy to customize once you have it finished.

One thing I was trying to do was to make a ‘push’ or ‘down’ state of this button. I have some decent success but was wondering if you had any advice for doing this. I would love to make a ‘click’ state for a website.

Thanks much!

Patrick said during February 4th, 2011 at 12:31 am

If you’re interested I think I got it pretty set. If you would like shoot me an email and I can send you my .psd for the down state.

Best Photoshop Tutorials for Creating Buttons and Badges, | egimirando.com said during February 10th, 2011 at 10:33 pm

[...] Perfect Shine Button or Icon [...]

dimitris said during April 14th, 2011 at 5:00 am

Thank you! I tried it and i found out that it’s a great tutorial!

*Although obvious, on step 13. the guideline could be corrected with “give a 20px contract” instead of “4px”, i guess, as correctly illustrated on the screenshot above.

UrPhotoshop » Blog Archive » 15 Amazing Photoshop Button Tutorials said during April 20th, 2011 at 6:03 am

[...] [...]

YouDoMeIDoYou said during May 2nd, 2011 at 3:39 am

Thank you so much – nice tutorial!

22 Tutorials To Create Shiny Effect Using Photoshop said during May 11th, 2011 at 10:14 pm

[...] 5. Perfect Shine Button or Icon [...]

40 + Hand-picked Icon Design Tutorials | SQUADOWNLOAD said during June 5th, 2011 at 5:34 am

[...] Perfect Shine Button or Icon [...]

Around 100 Best All Time Photoshop Button Tutorials said during June 14th, 2011 at 4:45 am

[...] 23.Perfect Shine Button or Icon [...]

Best Photoshop Tutorials for Creating Buttons and Badges | Psdtuts said during July 10th, 2011 at 9:24 am

[...] Perfect Shine Button or Icon [...]

nicartan said during September 1st, 2011 at 3:00 pm

I have pen tool issue. how do I load the path as selection ? can anyone send me a complete psd file so I can learn myself?

List of Top 10 Icon Design Photoshop Tutorials – Part 1 | DesigningTips.com said during September 14th, 2011 at 4:24 am

[...] Perfect Shine Button or Icon: Design a cool looking button or an icon to suit your need. [...]

chilldownload.com» Photoshop Tutorials to Create Badges & Buttons said during October 30th, 2011 at 6:03 am

[...] Perfect Shine Button or Icon [...]

15 Useful & Innovative Icon Photoshop Tutorials said during November 9th, 2011 at 2:22 am

[...] This tutorial will let you know how to design an awesome button or icon for your application’s GUI. Tutorial [...]

Robert said during November 20th, 2011 at 6:54 am

Great – love it.

melanie said during November 25th, 2011 at 5:53 am

wow. the embossing and shining effect looks real

rgregory said during November 29th, 2011 at 11:58 pm

Great tutorial, though try as I might, I can’t get it to work. I’m a photoshop newb.

Any chance of getting the .psd file to play with?

Excellent Buttons and Badges Tutorials in Photoshop | Earning Ways said during April 2nd, 2012 at 11:41 am

[...] 11. Glossy Button Tutorial [...]

30+ Excellent Photoshop Tutorials for Buttons & Badges - Tutorials-Share.com said during August 14th, 2012 at 5:22 pm

[...] Perfect Shine Button or Icon [...]

» 30 ottimi tutorials photoshop buttons - PYG Design Studio Blog said during August 24th, 2012 at 7:30 pm

[...] Perfect Shine Button or Icon [...]

phyo said during November 6th, 2012 at 5:59 pm

Really Thanks,, valuable tutorials for me.
I don’t know exactly how can I say “thank you”. :)

20 excellent tutorials photoshop to create buttons and badges said during February 16th, 2013 at 12:37 am

[...] in photoshop Cool Blue Buttons Tutorial Create Glassy Button colorful buttons in photoshop Perfect Shine Button Button Effect – Photoshop creating buttons in photoshop also lets you to design a page [...]

[PhotoShop] 40种按钮的做法 : Tang Monk said during March 6th, 2013 at 6:21 pm

[...] A photoshop tutorial where you will learn how to create a glassy effect badge. Perfect Shine Button or Icon [...]

20 Helpful Photoshop Tutorials in Making Buttons and Badges | AEXT.NET MAGAZINE said during March 31st, 2013 at 10:07 pm

[...] 10. Perfect Shine Button or Icon [...]

25 Photoshop Tutorials For Creating Buttons and Badges said during April 2nd, 2013 at 4:08 am

[...] Create a Perfect Shine Button or Icon [...]

45 Creative Buttons And Badges Tutorials - Blogs-design.com said during April 6th, 2013 at 9:13 pm

[...] Perfect Shine Button or Icon [...]

45 Creative Buttons And Badges Tutorials | iDevie said during April 12th, 2013 at 8:39 pm

[...] Perfect Shine Button or Icon Ever cracking your head on how to design an awesome button or icon for your application’s GUI? and feeling of jumping out from Web 2.0 style once in a while? In this tutorial will be teaching you on how to create a cool looking button or an icon to suit your need. [...]

22 Tutorials To Create Shiny Effect Using Photoshop said during May 9th, 2013 at 9:50 pm

[...] in a computer by scanner or digital photo camera or how to give it a luminescent effect.5. Perfect Shine Button or IconIn this tutorial designer will be teaching you on how to create a cool looking button or an icon to [...]

relevant site said during May 20th, 2013 at 6:24 pm

Howdy! I hope you don’t mind but I decided to post your weblog: http://boonage.pjss2.net/2007/04/15/perfect-shine-button-or-icon/ to my on-line directory website. I used, “Boonage

This Web site said during May 25th, 2013 at 10:06 am

Thanks for ones marvelous posting! I seriously enjoyed
reading it, you could be a great author.I will be sure to
bookmark your blog and will eventually come back in the future.

I want to encourage that you continue your great writing, have a
nice morning!

45+ Photoshop Button Tutorials | WPForces said during May 28th, 2013 at 4:59 am

[...] Perfect Shine Button or Icon – MORE / INFO [...]

50 Tutorials of Creating Buttons And Badges said during May 31st, 2013 at 7:37 pm

[...] Shine Icon or Button [...]

Design Magazine | Inspirational Resources For Web Designers & Developers said during June 1st, 2013 at 3:14 pm

[...] Shine Icon or Button [...]

50 Tutorials to Help You Create Buttons And Badges | Resources For Developers, Designers And Photographers said during June 9th, 2013 at 12:45 am

[...] Shine Icon or Button [...]

Stella said during June 12th, 2013 at 7:09 am

Hey there terrific website! Does running a blog
like this take a lot of work? I’ve virtually no knowledge of computer programming however I was hoping to start my own blog in the near future. Anyways, if you have any suggestions or techniques for new blog owners please share. I know this is off topic nevertheless I just needed to ask. Kudos!

10 Tutorials of Generating WP Badges And Buttons said during June 20th, 2013 at 8:22 pm

[...] Shine Button or icon [...]

devin said during June 29th, 2013 at 4:20 am

this way to hard and the dierections arent that good you should do a better job if your going to try to teach someone

kate hill bags said during July 2nd, 2013 at 9:40 am

Appreciating the time and energy you put into your website and
in depth information you present. It’s awesome to come across a blog every once in a while that isn’t the same out of date rehashed material.

Excellent read! I’ve bookmarked your site and I’m adding your RSS
feeds to my Google account.

45+ Free Photoshop Buttons | Designrazzi said during July 26th, 2013 at 5:07 am

[...] Perfect Shine Button or Icon – MORE / INFO [...]

22 excelentes tutoriales creando brillo con photoshop - Fanaticodesign said during August 14th, 2013 at 12:41 pm

[...] creando botones brillo photoshop [...]

winbluegod said during August 15th, 2013 at 3:47 pm

Good works! this my iTunes icon tutorial:
http://4-designer.com/2013/06/draw-an-itunes-icon-with-photoshop-original-tutorial/

30+Tutorials For Creating Buttons and Badges In Photoshop | Designurge said during August 22nd, 2013 at 9:40 pm

[...]  Perfect Shine Button or Icon  Orb Button Effect – Photoshop Part Post Tags:button makerbuttons and badges in photoshopdesign buttonsphotoshopphotoshop button tutorialsphotoshop tutorial Fahad Hameed [...]

35 Easy Photoshop Tutorials for Creating Buttons and Badges said during August 25th, 2013 at 2:41 pm

[...] Perfect Shine   [...]

Твоя кнопка said during October 20th, 2013 at 4:20 pm

[...] Ссылка на источник [...]

45+ Free Photoshop PSD Buttons | ThemeBucks said during December 8th, 2013 at 10:29 am

[...] Perfect Shine Button or Icon – MORE / INFO [...]

Clipping Path said during January 25th, 2014 at 2:10 pm

I always look forward for this type of information. Please keep sharing. Thanks

Clipping Path said during January 27th, 2014 at 3:12 pm

Thanks for sharing this great info…!!!!!

toqeer said during January 30th, 2014 at 2:45 am

this is excellent learning tutorial to create shining button, thanks for step by step instructions!

45+ Free Photoshop PSD Buttons | Tutorials WordPress - SEO - Hosting Review - Web Development said during March 31st, 2014 at 10:56 pm

[...] Perfect Shine Button or Icon – MORE / INFO [...]

Pure Logic Solutions said during April 20th, 2014 at 2:48 am

Gday, that was a beneficial post! Lots of terrific info,
I am grateful that I found it.

I am going to bookmark your web-site! :-)

45 Best Photoshop Tutorials for Creating Buttons and Badges said during May 10th, 2014 at 3:46 pm

[...] Source [...]

UI mit Hui-Faktor: 40 hochwertige Schaltflächen und PSD-Tipps für eigene Buttons - Dr. Web said during June 23rd, 2014 at 5:30 pm

[...] Perfect Shine Button or Icon [...]

40 Free or Premium, new, latest, best, top, stylish, awesome PSD and GUI buttons 2014 | Html Use said during July 3rd, 2014 at 2:19 am

[...] Perfect Shine Button or Icon [...]

22 Creative Buttons and Badges Tutorials | Tutorials said during July 15th, 2014 at 7:17 pm

[...] Perfect Shine Button or Icon [...]

46+ Buttons & Badges PSD Tutorials & Freebies - Design Bump said during September 17th, 2014 at 5:54 pm

[...] Perfect Shine Button or Icon [...]

Leave a Reply