Glossy Navigation Buttons
This tutorial with guide you through how to make a these glossy navigation buttons, which can be used throughout your site. Your result should be similar to this:
![]()
![]()
![]()
![]()
| 1. |
Create a new document any size you want your button to be. I am using 80x20 |
| 2. |
Fill the background with #333333 |
| 3. |
Press Ctrl + A to select the whole canvas then go to Select » Modify » Border and set to 1px then press OK |
| 4. |
Then go to Select » Inverse |
| 5. |
Create a new layer and fill this with whatever colour you want. I am using #006699 |
| 6. |
Using the rectantagular marquee tool draw a rectangle taking up 1/2 the height of the canvas like this:
|
| 7. |
Create a new layer and fill it with White (#FFFFFF) |
| 8. |
Set the opacity of the layer down to 50%. |
| 9. |
Add some text and you are finished:
|

