Home | Box Button Navbar

Box Button Navbar

For Use With Web Creation or Graphic Design

Below you will find various graphic design instructions as they relate to web design.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 500x500 width/height.
2. Create a new layer. Name it "Button".
3. Select the Rectangular Marquee tool. Create a rectangular selection as follows:



4. Select the Gradient tool.



5. Set the gradient from a dark color to a lighter color. (Hex Color: #1E1D1B - #7C7B77).



6. Using the gradient tool, drag from the bottom of the rectangular selection to the top.



7. Goto Filter > Noise > Median.
8. Click Ctrl+D to deselect.



9. Create a new layer underneath the "Button" layer. Call it "Connector".
10. Select the Rectangular Marquee tool. Create a rectangular selection as follows:



11. Select the Gradient tool.
12. Set the gradient from a black to white. (Hex Color: #000000 - #FFFFFF).



13. Using the gradient tool, drag from the bottom of the rectangular selection to the top.
14. Click Ctrl+D to deselect.



15. Select the "Button" layer so that it is active.
16. Select the Move tool.



17. Hold down the ALT key, then drag the button to the right to create a duplicate. Be sure to hold down the SHIFT key as you drag so that it remains in line with the previous button.



18. Finally, select the Type tool. Add text over your buttons and you have your Box Button Navbar.