The glossy look has been extremely popularized by the so-called Web 2.0 trend, that almost all buttons you see on the internet these days have a similar look. This tutorial will show you how to easy recreate this look in PhotoShop. We will create a button with a shine to it.
Download the .PSD here
We start with a blank canvas and then make a rectangle selection where our button will be. Then goto Select > Modify > Smooth, and choose something around 5px. Then we create a new layer and right-click the selection, or goto Edit > Fill. Choose the color you want and fill the rectangle with it:
Rename this layer bg, and keeping the same selection, create a new layer and choose Edit > Stroke. Choose around 2px and a different color. Rename this layer border. You can also add a gradient to this layer if you so wish:
Next thing to do is create our gloss. Add a new layer between the two we already have (bg and border; border should be on top), then using the Pen tool, draw a shape like this:
Now if we goto the Paths Panel (Window > Paths), right-click the path we just created and choose Make Selection, no Feather. We should now press and hold Ctrl+Shift+Alt and click the bg layer to intersect with it, and we should be left with the following:
We can take the paintbrush tool and paint in the selection with a lighter color, then reduce the opacity of this new layer to around 40-60%. An optional extra at this point is to add the same gradient overlays to both this layer and the bg layer, but reverse one of them, like so:
This gives a more subtle gloss, and a bit of depth to the button. But if you want to remain with solid colors, it's entirely up to you:
Now we can add text to the button. Add a text layer underneath the border layer. Add a Drop Shadow to it, to give it some depth.
As with all things PhotoShop, we can experiment and come up with our own decisions on what looks good or what fits our needs, so play around and see what you come up with.
discuss this topic to forum
