Wooden Navigation - PhotoShop Tutorial

Discussion in 'Skinning, Design and Graphics' started by Brandon, Jun 16, 2010.

  1. Brandon

    Brandon Regular Member

    Joined:
    Jun 1, 2009
    Messages:
    6,602
    Likes Received:
    1,706
    Location:
    Topeka, Kansas
    First Name:
    Brandon
    This is the first in a series of high quality photoshop tutorials.
    Most of our tutorials will be web related because that's what I'm interested in. :giggle:

    I'm open for request, although I won't promise anything.

    Preview:

    Stylish Wooden Navigation Interface Design.
    . 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.
    .
    Step 2:

    Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Pattern Overlay blending options to the long brown rectangle layer.
    .
    .
    .
    Result:
    .
    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.
    .
    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.
    .
    .
    Result:
    .
    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.
    .
    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.
    .
    .
    .
    .
    Result:
    .
    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.
    .
    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.
    .
    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.
    .
    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.
    .
    Results:

    Stylish Wooden Navigation Interface Design.
    .
     
    Last edited by a moderator: Jan 7, 2014
  2. Guest

    Guest Guest

    you should post a demo.
     
  3. Brandon

    Brandon Regular Member

    Joined:
    Jun 1, 2009
    Messages:
    6,602
    Likes Received:
    1,706
    Location:
    Topeka, Kansas
    First Name:
    Brandon
    a demo for what?
    it's a photoshop tutorial, there are pics ;)
     
  4. Guest

    Guest Guest

    I know.. but you should code it, and let us all see :P

    (i shouldn't miss class, it makes me have dumb-moments)
     
  5. Brandon

    Brandon Regular Member

    Joined:
    Jun 1, 2009
    Messages:
    6,602
    Likes Received:
    1,706
    Location:
    Topeka, Kansas
    First Name:
    Brandon
    uh, I may but not any time soon :go-away:
     
  6. DaUnknownAdm!n

    DaUnknownAdm!n Regular Member

    Joined:
    Mar 5, 2010
    Messages:
    254
    Likes Received:
    97
    Location:
    Brooklyn, New York
    Nice tutorial. Thanks for sharing.
     

Share This Page