how to make glass buttons in photoshop

Discussion in 'Tutorials and Guides' started by gawjus1234, Jun 7, 2007.

Thread Status:
Not open for further replies.
  1. gawjus1234

    gawjus1234 Level III

    Joined:
    May 22, 2007
    Messages:
    518
    Likes Received:
    3
    Location:
    Las Vegas
    okay so here are some examples:
    [​IMG][​IMG][​IMG][​IMG][​IMG]
    okay. here we go.

    Open up photoshop and make a new document with these specifications.
    [​IMG]

    next hit d to set fg and bg colors to black and white and then hit x to switch them. now fill the whole image with the paint bucket. Using the circle marquee tool, hold down shift(for a perfect circle) and draw a circle that looks something like this.
    [​IMG]
    Now hit d again and fill the circle with black. Next hold Ctr+Alt+Right Arrow to nudge the circle until it looks something like this.
    [​IMG]
    Now make a new layer by going to Layer>New>Layer. I dont care what you call it but if you must call it something. call it gradient. Go back to the bg layer and us the wnd tool to select te whole black area. Go back to the gradient layer. Select the gradient tool. Go to the Gradient editor by right clicking (Ctrl+click for macs) here. [​IMG]. The bottom of the gradient bar is the colors. Double click the bottom left slider and type in 0 for R, 0 for B, and 255 for G. Click ok. Change the opacity to 100. Do the same for the bottom right slider. Now click somewhere under the gradient bar to insert a new color slider. Set the opacity to 100 and the location to 55. Double click and give it the same numbers as the other two, but don't click ok. On the left there is the big box of color. As close to the right side of the box click about half way down to get a darker shade. Now click ok. You should have something that looks like this.
    [​IMG]
    Next hold SHIFT and fill the oval with the gradient to get something like this.
    [​IMG]
    Now make a new layer by clicking Layer>New>Layer. You can call this one highlights if you would like. The oval shape should still be selected. Click Select>Modify>Contract and enter either 3 or 4 pixels. It doesn't matter wich it's just a matter of preference. Go back to the gradient editor and change the left and the right color sliders to white. Click and drag the middle color slider away from the editor to delete it. On top of the gradient bar there should be an opacity slider. Click it and change the location to 70% and the opacity to 0. You should get something like this
    [​IMG]
    Hold shift and fill the selection with this gradient. You are done. YAY!

    +reps would be greatly appreciated and you can pm if you have any questions. Go ahead and post your results if they are interesting. I used this to make my "new nf logo contest" entry. Here it is.
    [​IMG]
     
  2. Akira

    Akira Level I

    Joined:
    Jun 12, 2007
    Messages:
    69
    Likes Received:
    0
    Good guide, I like the example at the bottom, I'm going to make one myself now, thank you very much.
     
  3. ceneret0023

    ceneret0023 Level III

    Joined:
    Jun 10, 2007
    Messages:
    663
    Likes Received:
    15
    Location:
    under a rock
    wow good guide but where do you get photoshop?
     
  4. the_skip

    the_skip Level IV

    Joined:
    Dec 25, 2006
    Messages:
    2,354
    Likes Received:
    1
    Location:
    Indiana
    you can get a trial version off adobe's website
     
  5. gawjus1234

    gawjus1234 Level III

    Joined:
    May 22, 2007
    Messages:
    518
    Likes Received:
    3
    Location:
    Las Vegas
    or you can use a p2p (file sharing) program and get a ed version. i used Ares and got a ed full version.

    was the guide easy to follow. o ya when you finish. the buttons look better if you shrink them a little bit. and feel free to post your examples.
     
  6. p4nd3m0n1um

    p4nd3m0n1um Level III

    Joined:
    May 19, 2007
    Messages:
    379
    Likes Received:
    0
    Nice guide. This could be useful to me.
     
  7. palepink

    palepink Level IV

    Joined:
    May 8, 2007
    Messages:
    883
    Likes Received:
    1
    Location:
    Bangkok, Thailand
    I know another method of making glass buttons which look slightly different from this one. I will make a tutorial this evening when I get home :D
     
  8. gawjus1234

    gawjus1234 Level III

    Joined:
    May 22, 2007
    Messages:
    518
    Likes Received:
    3
    Location:
    Las Vegas
    well good luck on the guide. and this is avery usefull technique. it is also very versitile. you can apply the same principle to anthing and get a nice clean looking result. thats the kind of graphics i am into. clean proffesional looking.
     
  9. sebzanga

    sebzanga Level III

    Joined:
    May 27, 2007
    Messages:
    625
    Likes Received:
    3
    Very good... But i dont do buttons :D
     
  10. gawjus1234

    gawjus1234 Level III

    Joined:
    May 22, 2007
    Messages:
    518
    Likes Received:
    3
    Location:
    Las Vegas
    hehe. i use these for other stuff besides buttons. it is just the principle of applying the gradient and then the highlights that makes stuff look nice.
     
  11. Jessikuh

    Jessikuh Level I

    Joined:
    Jun 10, 2007
    Messages:
    54
    Likes Received:
    0
    Shiny! ^^
    Very nice job, I'll have to try it sometime.
     
Thread Status:
Not open for further replies.