Create glossy/glassy buttons for your designs.

We all know those great looking glassy buttons and widgets that we see on websites – especially made popular by apple.com and apple software – and in software and used icons. Ever wonder how they create them? Well, here’s a short tutorial on how to create a little more eye candy on your websites by adding these. I did these in photoshop (because it rocks) but the techniques can be applied to most any design software that allows layers or overlaying of objects and alpha transparencies. This tutorial assumes a basic knowledge of photoshop/your design software.

Photoshop level: Intermediate, Advanced.

1. Draw a box with curved edges. If you make it a vector object, then you can re-size it later as you wish without losing the quality of your image.

buttontutorial1

2. Draw a second white box in a layer above. This will becone the reflection at the top. (tip: experiment with different colors…colored reflections can add another dimension to graphic.

button002.jpg

3. (Using the control button in photoshop) modify the white object to more of a trapezoidal shape. This help to add a 3-dimensional look to the buttons.

button003.jpg

4. Using the gradient tool, mask the white layer as shown below. (tip: Experiment with different layer blending modes – screen, overlay, hard light etc. – you might be pleasantly surprised with some of the results)

buttontutorial1

button0051.jpg

5. Add a basic black/white gradient to the original red object. Set the opacity at around 24%. You can also experiment with blend modes here as well. (Using your blend modes effectively is essential to good photoshopping)

button006.jpg

6. For further dimensionality, add an inner shadow (blend mode:multiply) and a dark inner glow (blend mode:multiply)

button007.jpg

button008.jpg

7. To finish things off… add a drop-shadow and your text and viola! :) I added a slight shadow to my text…it only adds to the finished look of the overall graphic.

button009.jpg

button010.jpg

So those are the basics of doing glassy reflective buttons. Remember, like all light effects in photoshop, subtlety and balance are key ideas….now take these concepts and get creative!!

getcreative.jpg

If this post was useful to you or if it needs improvement, please let me know- leave a comment…your input is very valuable to me. — theforrester

Advertisements

4 Comments

  1. I love it! thanks i can never get it right>

  2. XRumer is the perfect program for advertisement!
    It’s have CAPTCHA recognizer, email verificator, and a lot of other functions…

    But. I forgot link to it :(

    Can you give me link to the XRumer description? screenshots, etc.

    Thank you

  3. Hey please tell me about the mirror effect you generated in the final button “Click Me :)”
    BTW thanx for the stuff

  4. phen375

    Create glossy/glassy buttons for your designs. | Life & Times


Comments RSS TrackBack Identifier URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s