Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Navigation Box

Navigation Box


  • Use the Rounded Retangle Tool to create a box of your liking anywhere;
  • Also try to use the Radius seen in the toolbar. I always use 20 px, 10 px or 5 px;

    Navigation Box

  • Once you've filled it with a random color it's time to get the Retangle-Tool and select a small piece of the top;
  • Press CTRL+C and CTRL+V to paste it onto a new layer and press CTRL+I;
  • After that, position it onto the box;

    Navigation Box

  • Then Give the box and the header the desired color by pressing CTRL+U;

    Navigation Box

  • Add these layer-styles to the white area;

    Navigation Box

    Navigation Box

  • Add these layer-styles to the header;;

    Navigation Box

    Navigation Box

  • And then you're done and you can add some text!

    Navigation Box Tutorial: Final Result

  • Author's URL: MickM.com
    Thank you for voting.
    Rate this Materials:
    Bad 
    1 2 3 4 5 Excellent
    print this page subscribe to newsletter subscribe to rss

    Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

    Add comments to "Navigation Box"

    Only registered users can write comment

    Reader's comments
    comments jamiebby July 01, 2008 says:
    Navigation Box
    Hey. I was wondering if you knew how to make a link following it when you press "link #." I know it sounds confusing but you can comment my page if you have questions about my question.