Glossy Web 2.0 button tutorial
This tutorial will show you how to do a nice and simple "Web 2.0" button.
Remember to experiment on your own and you'll get great results.
Start off with making a new document with any size. Select the "rounded rectangle tool" (I think it's called).
You do this by clicking and holding the "rectangle tool" button (or right click on some versions of PS).
Then make a shape in a good size. We will change colors later. This should be on a seperate layer.
Now we got our basic shape. So let's fill it with a glassy looking gradient. I'll show you how to do.
First click on the "FX" symbol under the layers. The select "Blending options".
Ok, so now you should have a window open. On the left hand there is a navigation. Select the "gradient map".
Click on the gradient you see to your right to change the "gradient map". Now here comes the tricky part.
It's a little bit hard to explain exactly how you do, but I'll do my best:
You see the two arrows/spray cans? Click next to them to get more. We will need five of those for this gradient.
So now place them like on the picture below. Two of them should be on 50%, one on about 11%, then the other two
on 0% and 100%. Now give them all different shades of one color. Give the 1st one (from left) the base color. Then the 2nd one a little brighter. 3rd one the same as the base color. The 4th one lighter. Then the 5th one a little lighter than 4th one. Yea, well you'll get the idea by looking at the picture below. I will also share the PSD file to make it easier for you (look at botton).
Now we got the hard part done. These two steps are optional.
Set "inner glow" with these settings:
Then set the "border" with these settings:
Now we got our button done.
You can add some text if you want.
There are other ways to do glossy buttons, but this way is good in the long run. Because you can simply save the layer style and re-use it in the future!
Thanks for reading!
