Categories

Partners
  • Website Templates

  • Design Feeds

  • Adobe Photoshop Tutorials

  • Website Templates, WordPress Themes

  • Website Templates

  • Flash Web Sites

  • Photoshop Templates

  • Photo Contests

  • Photo Tips
  • Search


    Advanced Search


    Partner Links
  • Adobe Photoshop Tutorials

  • Free Stock Photos and Images



  • Website Templates

    Stylish web navigation template
    Published  05/20/2008 | Web Layout
       
    Stylish web navigation template - part 2


    Gradient’s parameters:

    Create Stylish web navigation template in Photoshop CS3 

    Create Stylish web navigation template in Photoshop CS3

    Make again three copies, but this time of the highlight’s layer and select after that the Free Transform option to place the copies the same way indicated next picture:

    Create Stylish web navigation template in Photoshop CS3

    Using the Line Tool (U), try to divide the menu’s buttons by creating three vertical lines, colored with #414142

    Create Stylish web navigation template in Photoshop CS3 

    Create Stylish web navigation template in Photoshop CS3

    Insert the titles for the menu’s buttons, keeping the demands shown below:

    Create Stylish web navigation template in Photoshop CS3

    About us

    Create Stylish web navigation template in Photoshop CS3

    the titles for the rest of the buttons:

    Create Stylish web navigation template in Photoshop CS3

    Getting a better result is possible if combine in a group all the layers composing the panel with the menu’s buttons (press Ctrl button to mark out the corresponding layers and then hold on the left mouse’s button to take down the marked layers on Create a new group selection). Make a copy of the recently made group and put it together in a single layer (press CTRL+E). The copy may be turned over, applying the Free Transform solution. Place the copy as it is demonstrated next picture:

    Create Stylish web navigation template in Photoshop CS3

    Make a mouse click on the same layer on the bottom part of the layers’ panel on Add a Mask option. Select then the Gradient Tool (G) to represent a half-transparent reflection the way it is shown below:

    Create Stylish web navigation template in Photoshop CS3

    Finished!

    View full size here.

    Create Stylish web navigation template in Photoshop CS3 Stylish web navigation template
    This tutorial will teach you how to create a beautiful dark menu that actually looks different from the usual normal web 2.0 styles displayed across the web while keeping a minimalistic, clean feel.