Adobe Photoshop CS3 10 Ways to Make a Glossy Button Tutorial
Tutorial Written by: Jay Han (www.jay-han.com)
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)
If you are looking for how you can possibly learn more about Adobe Photoshop or any other Adobe product there are some really good tutorial software programs that teach very well. Most of them provide video tutorials that take you step by step through every feature and process within each product in detail. The possibility of getting lost or losing focus is minimal because you are in control of the rate of speed that you learn. I personally recommend Total Training because of its great information and detail. They are also a partner of Adobe. Digital Media Studios also has a very good series of products that may be a better solution for some individuals. Remember that with time you can unlock the Adobe Guru in you!
Total Training provides customers with a Video Training Series that is promoted by a Partnership with Adobe Systems (Worldwide). You can't go wrong with the incredible series of DVD software that this company provides. Total Training provides a one of a kind offer to let you try all of their online products for 2 days with a special guest pass. You will be on your way to being an Adobe expert in no time!
Marrut Software Training Tutorials
Marrutt Software Training Tutorials provides you with a cheaper alternative to Total Training package. They use VTC software training CDs, which are used by Adobe Systems (Europe) Ltd, Ford Motor Co Ltd, Ministry of Defence and nearly all the universities and colleges in the UK. Marrutt also provides free software demos of all products online. You can view the first 3 chapters of each product within the demo. You will be able to see the quality of the product before you purchase it. An example of an online free demo can be found here Marrut Adobe Photshop CS3 Online Demos.
If you would like something that is a bit more contemporary, why not settle down and read a good book. This Adobe Photoshop CS3 is written by the Adobe Creative Team. It provides great information for learning the ins and outs of the program. If you have the mindset to read attentively, I personally recommend this book.
These products have a different approach to teaching people from beginners to professionals how they can learn Adobe Photoshop or improve on their techniques. From Video instruction, Adobe Flash illustration, to your plain text-based document, the choice is up to you how you want to learn. Remember to return for updated articles and tips on the forum from myself and visitors. Stay Smart and Keep Learning!
