Woot. My first tutorial! Glossy button is current in thing in web design, because it is eye-catchy, pretty and friendly. Not sure about how the trand started but I pretty sure is Apple button style! There are some ways to “glossify” a button, which I will teach you how to make below. Tutorial work file is included also. But first, let me teach you the simple steps of making a glossy button.
Step by step glossy button tutorial
First, use the Rounded Rectangular tool to make the button shape. Then, Ctrl-select the shape layer, a marquee is created.
With the marquee is still there, select Rectangular Marquee Tool, press Alt and draw a marquee selection below the button. The marquee selection now is cut into half. Create a new layer on top of the button shape layer.
Then, select Gradient Tool. Make your foreground color to white, then select the Foreground to Transparent gradient, then from the bottom of marquee selection you made just now, drag a vertical straight gradient (hold Shift for perfect vertical).
Gradient is applied. Ctrl-D to deselect. Final tweak is reduce the opacity to best blend with the button. Done!
How easy isn’t it? Below are more alternatives way of making glossy buttons.
1. Gradient from middle to top
This is the one I shown above. The method I use the most.
2. Gradient from top to bottom
This is just the reverse style of above. Just drag the gradient from top to bottom of button.
3. Using fill white color
Instead of using gradient, actually glossy effect can be achieve easily by using Paint Bucket Tool too.
4. Using Inner Shadow
Inner Shadow also can achieve glossy effect. Select Inner Shadow: layer blend = normal, color = white, angle = 90 degree, distance = to the center of button, size = 0. Then you can adjust the opacity. But this glossy effect is not very nicely achieved.
5. Using Gradient Style
This is one of my favourite method, by just using gradient style alone. The blend step of one end of gradient drag until close to another gradient end, then you can achieve the effect. To add realistic feel, create the shiny feel over the bottom of button.
6. Use black gradient instead of white
Instead of white, we can use black too, but now revert the selection from top part of button to bottom part of button. But the glossy feel a little different from white color haha.
7. Contract the marquee to give 3D feel
Similar to style 2, but now before we apply white gradient, go to Select > Modify > Contract, I use 3px. The selection now is contracted. The effect here is actually more realistic and 3D.
8, 9, 10. Different glossy shape style
Instead of the normal glossy shape above, you can use other shapes too. A more rounded one, rounded edges one or even wild style. Just play with it! You might achieve surprise result.
Download Tutorial Source: Click here (740kb)
More resources:
Bittbox – Glossy Vector Web 2.0 Logo Text in 5 Easy Steps.
DezinerFolio – Ultimate Web 2.0 Gradients – FREE Download.
Comments