Design Professional Glossy Buttons

Advertisement

With this nice & easy Photoshop tutorial you can learn how to design some glossy, professional-style buttons. Professionals that make website templates for a living can use this sort of effect efficiently and make plenty of money!

result image

1. Preparing the Canvas/Background

First of all create a new document of any size, or open up a website template document you might have laying around. I used small document size of around 400 x 340 because I’m not going to be making a complete template. I also added a light grey gradient into the background.

gradient background

2. Create the Shape

Get the Rectangular Marquee Tool rectangular marquee tool icon and make a Set-Sized Selection of 140 x 140 pixels somewhere on the canvas.

settings for rectangle

selection made

3. Filling the Shape

With the selection still active, make sure you’re on a new layer and fill it with a radial gradient, using colors of your choice.

filled with gradient

I used the colors #3e94d4 and #336fc1, a nice light/moderate blue selection. I then also applied a White (#ffffff) 1px stroke to the main layer.

stroke applied

4. Adding Highlights

Start by selecting the main layer again (hold ctrl and click the layer thumbnail).

selection

Contract your selection by about 4-5 pixels by going to Select > Modify > Contract and inputting your amount in pixels.

contracted selection

Now, find and get out the Gradient Tool, then drag a White to Transparent gradient from the top to the bottom like so:

gradient options

You should be left with a result like this:

gradient made
gradient options

Now get out the Pen Tool and make an orb-shape path like the one shown below.

curvy path

With the Pen Tool still selected, right click the path and click Make Selection, use the default options.

curvy selection

Create another new layer and again with the Gradient Tool make a White to Transparent gradient from the top to the bottom of your button, so you get something like this:

gradient

Change the layer mode for this layer to Soft Light then lower the opacity if needed, I didn’t think it needed it.

layer mode changed

5. Finishing Touches/Details

For details I started by adding a low-opacity icon in the left corner of the button. (Please note: The icons that I used in this tutorial are from either TemplateMonster, or the Web Design Library)

layer mode changed

Add in some text for your button, so that people know what the button is for. The font settings that I used were Tahoma, 11 pt, #ffffff, with this drop shadow layer style.

with text and drop shadow

I then duplicated all of the layers, moved them over so there’s about 10 pixels space between each of them then changed the gradient colors.To change the colors, simply edit the gradient for the first layer, then edit the drop shadow color for the text layer.

result image

Well, that’s just about it for this tutorial, folks! Thanks for reading & visiting PhotoshopStar, I hope you enjoyed this easy tutorial! ;)

Advertisement


  • Theis Jakobsen

    Just what i was looking for… I’m greatfull.
    Thanks ;)

  • Mantas

    pretty shiny, but could be shinyer.

  • http://yok ekrem

    Thanks mate. Nice…

  • Me

    Terrific

  • Sadaf

    Excellent :)

  • http://www.animesconnection.com edson

    Nice I’II use that… thanks litlle boy xD

  • http://www.mrabomb.com mr a-bomb

    Wow, nice and simple, I like it :)

  • http://www.pinceladasdaweb.com.br Pedro Rogério

    It’s cool!!!

  • Mr. P

    W00t. I love the mac-ish result, i used the end result as a background for a flash clock.

  • Briant

    Wow…i’ve been trying to do this for over a week/month. I can’t seem to get past the 7th step. Would be nice if you also had the tool bars/window that shows you the layers. I think that would make things….more understandible.

  • lalo

    “Change the layer mode for this layer to Soft Light and lower the opacity if needed, I didn’t need to”
    —How did you do that???????———-

  • Polish man

    It’s cool

    I have looking for it on polish, and I have couldn,t find.
    Thanks !

  • Gabriel

    These are the most clearly detailed Photoshop instructions I’ve come across so far! I’m a beginner and this was exactly what I was hoping to find. Thank you so much. Keep up the good work. P.S. If you have any instructions on how to create glassy orbs and glassy (MAC Os) style buttons, please notify me via email.

  • Mahesh

    this the thing i have been looking for… Thanx a lot

  • Disco

    another simple and good tutorial

    -thnx

  • Chanaka

    This small tutorial was very helpfull to me Thanks!

  • Muthu

    Awesome Tutorial. Its very Nice,
    Thank you http://www.photoshopstar.com

  • Ruth

    Simple and Easy to follow. Good Illustration.
    Thank you. God bless

  • Paul

    THANKYOU! I’ve been looking for a tutorial on how to achieve this effect for AGES… thankyou thankyou thankyou.

  • Joy

    This is excelent!! Just what I was looking for. Thanks alot

  • http://www.stickersexchange.com pegatinas

    Finally!!! I’ve been searching for this technique forever. Thank you!!

  • Balagi

    It’s amazing buttons

    Its very useful for me

    thanks a lot

  • http://www.crossgolf-portal.de Ackergolfer

    Nice !

  • http://www.shycon.com Denver Web Design

    Love this tutorial, quick and easy!

  • http://www.new-arts-websolutions.de Florian Jacobs – Webdesign Krefeld

    Very cool! Thanks a lot – I ll try it directly. Looks simple, so I ll get it ;)

    Flo

  • Rose

    Simple. Gave a guidance to how to create buttons.Thank You.

  • http://intelligence-networks.de Sebastian

    Cool design tutorial!

  • http://darillinger.com SoulKeeper – Clearwater Web Solutions

    It is a nice tutorial, BUT, it doesn’t work too well for smaller buttons. Someone should come up with a tutorial for smaller buttons.

  • Dave

    Are thoce icons for free ? The little ones used in the left corner I mean…

  • http://www.reichohnearbeit.com/ Tekno_boy

    I tried this with a variety of shapes – star,circle etc, works great. Thanks!
    Hopefully I can spruce up my website with this.

  • Olan

    Cool Man

    Thanx.

  • ilori temitope adebola

    i never knew the effect was this simple! thanks for the tutorial.

  • http://www.oyuncusincap.com oyun

    It looks really professional but I can’t do it same as your example :(

  • http://www.samrathacks.com Blogger Tempaltes

    Really cool article man..i definitely have to give a try…

  • http://www.ratecards.net/blog Valto

    So simple, yet very good looking and easy to do. Thanks for the step by step details.

  • http://ezenlpo.com Saibaba

    Nice Job

  • nOwsHad

    Beautiful, and Its Looks Like a 3D Image

  • http://www.imvu.com Cassandra

    thanks bunches i am 15 and got this tutorial simple pretty and easy dont for get SHINEY! i used it for my new product banner and it loooks good i used eclips tool instead of pen but still easy tutorial and turns out great

  • XZYY

    HELP! I’m stuck and require someone’s help please! I cant seem to cut out the excess/background gloss -can someone please tell me how?

    Thanks in advance….

  • http://www.i4visualmedia.co.uk Essex Website Designers

    A very good tutorial thanks alot.