Yes, i know this is a cheesy title, give me a break! Anyway, in this tutorial we are going to learn and examine the different ways of adding the “gloss” effect to your graphics and logos. This effect can be done, more or less, to just about anything. For our examples, we are going to use web buttons. We are going to try to cover a few ways you can do this effect so you can be the judge on the best (or quickest) way to do this depending on your needs and application.

Part 1: The “Easy” way

This technique is pretty straight forward and will give us a sort-of convincing “glossy” look to our buttons. Lets begin by opening up photoshop. Create a new image, any size you’d like… i tend to give myself a lot of room to work with then end up cropping my final outcome at the end. Then…

• Click the “Rounded Rectangle” icon (or press the “U” key)
• Create a rectangle about the size of the button you want (i used 223 x 63)
• Highlight the button/shape by Ctrl + Clicking the layer
• Right click the layer and go to “Blending Options” (or: Layer > Layer Style > Blending options)
• Select “Gradient Overlay”

And inside the gradient overlay options, click on the gradient to create a gradient similar to the one shown below (click here to learn how to make a gradient):

Then use these options on the gradient overlay:

Ok, now you should have something like this:

For the lazy ones, you add some text or a little shape and be done with it… but wouldn’t you want to make it look good??? Well then…

Part 2: A little more convincing…

Now with what we have from above, we are going to edit and add a little to make this look a little better. Do this by going back to the gradient overlay options (layer > layer style > gradient overlay) with the buttons layer highlighted (ctrl + click the layer). We are going to change the gradient to a more conventional pattern (very easy!) by clicking back on the gradient in the ‘gradient overlay’ options menu (just like before) and we are going to spread out “stops” on opposite ends like so…

Now we should have a button like this: To add gloss, we are going to create a new empty layer (Ctrl + Shift + N or Later > New > Layer) and name it something like “Gloss” and make sure it is above the button layer.Now on the “gloss” layer, use your selection tool (M) to select somewhere in the middle of the button like so (note: I’m not exactly in the middle):
Now with your Paint Bucket tool (G), fill it with white (#FFFFFF). After that, decrees the layers opacity to about 15 – 19% and you should have something like this:
Looks a bit better then the last one right? Well it also adds more flexibility for color. Try other gradients over your button layer to see my point. Switching colors takes no time.Does that outcome satisfy your hunger for gloss? We could end it there and be happy with it… right? Screw that, lets make it even better

Part 3: Now thats what I’m talking about…

Ok, we’ve done it a couple different ways and it looks alright, but we really want this to look “glossy” not just duo-toned… i mean people can’t be fooled that easy. Well for this last step we don’t have to do much… it’s really easy.

• CTRL + Right Click your “Gloss Layer.”
• With it selected, hit your “Delete” key to remove the white
• Select your Gradient tool

Now… Double click on the gradient on the upper left side of your program:

Now select the gradient labeled “Foreground to Transparent.” It should be the second gradient if your using photoshops default gradients… if its not there you can load or reset your gradients to the default (save your others in their own set just incase)… this is done by clicking the little arrow on the top right of the gradient window (next to the OK button). It should look like this: Now highlight it and click ok. Now make sure your forecolor is white (D then X). And with that layer selected (should be covering the top half of the button) you are going to click and drag with your gradient tool from the top of the selection to the bottom (which should be the middle of button).Don’t see much of a change do you? Well thats because you’re supposed to change the Gloss layer’s opacity level back to 100%… Looks better now huh? To get rid of the gradient parts surrounding your button you can either just crop it… or hold down CTRL and click the gloss layer… it should, more or less, select the overflowing top gradient… then delete that part and you should have something like this: I think that looks like a glossy button huh?Now that you have mastered the art of the gloss… you can spruce up your button (or whatever you used during this tutorial). For the button, Add some text and an icon… try adding a stroke to it (Blending Options -> Stroke). Try different shapes, like un-rounded. I like to cut out a bit of the button on the left to look like this: Now add some different gradients to the button layer and change it up a bit…. this is just the basic tutorial and you could add even more if you fool around with it. Also, If you round the button a little more, remember you can also create a rounded like shine for the gloss by using the circle selection tool.