Wooden Navigation Interface

Discussion in 'Skinning, Design and Graphics' started by Brandon, Oct 14, 2011.

  1. Brandon

    Brandon Regular Member

    Joined:
    Jun 1, 2009
    Messages:
    6,602
    Likes Received:
    1,706
    Location:
    Topeka, Kansas
    First Name:
    Brandon
    Preview: Photoshop Tutorial


    Stylish Wooden Navigation Interface Design.
    [​IMG]
    Step 1:

    Let’s start out by creating a new file. I used a 900×500 pixels canvas set at 72dpi, and with a black background. In a new layer draw a long brown rectangle with #6B381D color shade and 745 x 78 px dimensions.
    [​IMG]
    Step 2:

    Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Pattern Overlay blending options to the long brown rectangle layer.
    [​IMG]
    [​IMG]
    [​IMG]
    Result:
    [​IMG]
    Step 3:

    In a new layer draw a long white rectangle with 745 x 29 px dimensions. Position the white rectangle on the bottom side of the brown rectangle design as shown below.
    [​IMG]
    Step 4:

    Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to long white rectangle layer. Then set the layer's blending mode to Darken.
    [​IMG]
    [​IMG]
    Result:
    [​IMG]
    Step 5:

    In a new layer draw a small brown rounded rectangle with #CD510E color shade and 89 x 34 px dimensions. Then cut the bottom half of the rounded rectangle to form a tab.
    [​IMG]
    Step 6:

    Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay blending options to the brown tab layer.
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
    Result:
    [​IMG]
    Step 7:

    Select the Horizontal Type Tool then set the font family to Arial, Bold, 13 pt, smooth and white color shade. In a new text layer type one of your navigation links on the tab design.
    [​IMG]
    Step 8:

    Add more tab designs for the rest of your links, position them on the center so you can add the search box on the left end side of the navigation interface.
    [​IMG]
    Step 9:

    Now add a simple search box design made up of a white rectangle and a small black rectangle for the search button. Also add three small tabs above it for your twitter, rss and facebook link or whatever links you want to use.
    [​IMG]
    Step 10:

    Select the Horizontal Type Tool then set the font family to Arial, regular, 12 pt, none and #FFF000 color shade. In a new text layer type your sub navigation links next to the search box. Add a bar key with #850000 color shade for spacers.
    [​IMG]
    Results:

    Stylish Wooden Navigation Interface Design.
    [​IMG]
     
  2. Kaiser

    Kaiser Regular Member

    Joined:
    Nov 15, 2010
    Messages:
    6,744
    Likes Received:
    1,132
    Wow pretty cool. Makes it look really easy to do with the easy steps.
     
  3. Brandon

    Brandon Regular Member

    Joined:
    Jun 1, 2009
    Messages:
    6,602
    Likes Received:
    1,706
    Location:
    Topeka, Kansas
    First Name:
    Brandon
    Yup most the tutorials from this guy make it look really easy.
    I picked up 9 more last night that I'll be adding this next week. :)
     
  4. Trealix

    Trealix Gamer

    Joined:
    Nov 19, 2010
    Messages:
    1,171
    Likes Received:
    198
    Location:
    London
    Decent; I will be making a tutorial on how to make a business layout.
     
    Brandon likes this.
  5. Brandon

    Brandon Regular Member

    Joined:
    Jun 1, 2009
    Messages:
    6,602
    Likes Received:
    1,706
    Location:
    Topeka, Kansas
    First Name:
    Brandon
    bump :)

    We need more tutorials ;)
     

Share This Page