Glossy Glass Buttons
By: penguinpedia.com

You have seen them all over the web, now learn how to create your own glossy glass style for your buttons. All colors used are located in the color chart, which is at the end of the tutorial.

  1. Start by opening a new document in photoshop that is 150 x 30


  2. Next, draw the shape of the button you want. Here we will use a rounded rectangle, but virtually anything will work. Color at this point does not matter, as we will cover it up in a later step. (see color chart at bottom of page)




  3. The hard work is done! We will now use our styles pallette to do everything else. Open your styles window and head on over to inner shadow. Because I am going to make an orange button here, the colors used in this tutorial will be orange, but they can be easily changed. Set your inner shadow settings to the following:




  4. Now we need a little inner glow. The inner shadow gives us the slight gradient look we need on the button, and the inner glow will make the button look less dark. Set your inner glow settings to the following:




  5. We now have something that looks like this:

    Its not quite what we want, so lets a add an inner bevel and a color overlay. The bevel will give this button the glossy look, and the color overlay will give it the final color. The contour (found under bevel and emboss) will make the button look less bevelled and more glass like.

  6. Set your bevel and emboss settings to the following:




  7. Set your contour settings to the following:




  8. Set your color overlay settings to the following:




    Thats it! This is what your final button should look similar to:



    Below is a chart of the colors used, and some other colors that could be used.

    home | the forum | rules | links