Now: Tutorial for Web and Software Design > Photoshop > Web Layout > Photoshop Content
> Navbar [Bookmark it]
Navbar

Introduction

In this tutorial, I will introduce you to navigation bars, and how to create them in Photoshop.

Preparation

Things needed- Photoshop

A desire to learn this sh*t

Step 1

Open a new document that is 500x500,RGB, and on a white background. Create a new layer and drag out the rectangular marque, to the size you want your navigation bar. Fill it with 5E5E5E

image 1

Step 2

Go to layer effects, and set the following settings.

Inner Shadow

image 2

Gradiant Overlay

image 3

And a 1pixel, black stroke.

Step 3

Grab your text tool, and make 1 layer, for each button ei. Home=1 text layer, etc.

Make all your links and add any effects that you want to the text.

image 5

Now, we will do the last step and add some inset lines.

Step 4

Zoom in, grab the line tool, and pull out a line 1px in width to the same or close to the same height as the nav bar.

image 6

And then add this effect

Outer Glow

image 7

Then zoom out, duplicate the lines, and add them inbetween the text, and your result should look like this:

image 8

After some tweaking and adding things, i came up with this:

Navbar Tutorial: Final Result

Thanks for following my tutorial. Good Luck!


[Bookmark][Print] [Close][To Top]
  • Prev Article-Photoshop:

  • Next Article-Photoshop:
  • Related Materias
    Navigation Bar
    Professional Web Host Layo
    Turning A Sliced Image Int
    Camo Signature
    Professional Banner
    Eliminate Noise with the C
    Photo Enhancement and Corr
    What is NAPP and How do I 
    Color Management
    Photoshop 7 Natural Brushe
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial