XP Style Navigation

XP Style Navigation


1. Open a new file (CTRL + N). File > New. (Size doesnt really matter, just follow my example)

2. Make a new layer (Layer > New > Layer) and make sure its selected. Select the upper portion of the document (on the new layer).



3. Now set the gradients to the following colors:
- Lighter color: #DDF1F8
- Darker color: #BFD2D0



4. Now select the gradient tool (G). And push the mouse button at the top of your selection and pull it down (keep mouse button pushed in), at the bottom of your selection release the button.

You should now have something like this:



5. Add a new layer and select it. Change your "primairy" color to : #046BAE. Now draw a 3 pixel (height) line across your screen on the new layer. Make it so that it's at the bottom of the gradient bar (from steps 2, 3 and 4).



6. Add another new layer and select it. In this new layer select the elliptical marquee tool. With this tool hold down shift and make a perfect circle (like in the image below).



7. Change your primairy color to: #DDF1F8 again. Now press ALT + BACKSPACE to fill the selection with this color. Press CTRL + D to deselect.



8. Now go to blending options (right click on layer and then select blending options) and add a drop shadow with the following values:



9. Also add a bevel by applying the following values:



10. You should now have something that looks like the image below.



11. Make a duplicate copy of the layer bby pressing Ctl + J or Layer > New > Layer Via Copy.



12. You can now put some icons on top of the buttons if you want to. I used webdings. And voila, you're done.

Good Luck