Photoshop: How to Create Colourful Navigation Bar


In this tutorial we are going to see how to create a differently shaped, colorful yet minimal looking navigation bar. Navigation bars are very important in web designing and once they are made good looking then clients and visitors to the website are impressed because mostly they appear on the top of the website and immediately catches the attraction of the end user.

Final Ouput

Open the document

Step 1: Open a new document of width 800 px and height 200 px and resolution 72 ppi

Create rectangle

Step 2: Now create a rectangle of size 780 px width and 200 px height.

Wrapping of rectangle

Step 3: Now press Ctrl+T to activate transformation mode. Right click and select warp. Now goto custom warp and select bulge option in it and change the bulge value to 10.

Positioning the wrapped rectangle

Step 4: Now move your wrapped rectangle up to a position such that its lower end is at 75 px from top.

Creating guides

Step 5: Now drag 7 guides each at an interval of 130 px from the start of the wrapped rectangle.

Segmenting of wrapped rectangle

Step 6: Now hold Ctrl and click inside the thumbnail of the wrapped rectangle layer in the layers palette to make the selection of the wrapped rectangle. Now choose marquee tool and select intersection and select the area between the first two guides. Right click inside the selected are now with the marquee tool still selected and choose layer via cut from the popup menu. Now the selected area alone separates to a new layer.

Segmenting and distribution of wrapped rectangle

Step 7: Now repeat step 6 but the selection you make must be now between 2nd and 3rd, 3rd and 4th, 4th and 5th, 5th and 6th and 6th and 7th.

Applying Gradients

Step 8: Now apply different Gradient Overlays to each and every layer and create a colorful navigation bar, and type each and every menu item name on each and every segment.

And now your colorful navigation bar is done and this how is the final output.

Final Ouput

Design Contributor and Author by 

Founder and Editor of this blog. For Daily Design and Photography Inspiration for Creative Fellow Humans. Giveaway Hunters [We Hosted 100+ Giveaway]
Join with design rebel. Estd: 2009

    Find more about me on:
  • googleplus

18 Comments

  1. Nice tutorial! Good for colorful websites. :)
    .-= Suraj´s latest blog ..Cheap ways for creating website and finding freelancers =-.

  2. very easy simple n colourful navigation bar. good work

  3. Thank you Sunil. Will surely post more tutorials.

  4. Thank you Suraj. You can improvise the final output with more better color combinations

  5. Thank you Nikola. These kinds of unusual navigation bars make clients excited. That’s why i do them.

  6. Thank you Karthik. I will post more stuffs like this in future.

  7. Thank you Adone. Thanks for the appreciation. I will surely post more tuts like this in future.

  8. Thank you Madalin. I am really very happy to get such comments from a big blog like yours which is really great and noticeable one in the design blog community. Once again thanks for the comments.

  9. Thank you Gagan,
    Thanks for the comments i will post more tutorials like this in future.

  10. god this is driving me insane. On step 6 the layer via cut is not selectable. Please help, what am I doing wrong? Was really looking forward to implementing this technique.

  11. These are the scenarios that may be occuring,
    1. You might have selected the wrong layer i.e the empty layer.

    2. Your layer might be locked.
    3. You might have not selected any area
    4. make sure that the marquee tool is still selected.

    If any of these does’nt work please comment here again about the problem i ll rectify it.

  12. Hi blogteater, lots of comments from you today. Thanks for all of them.

  13. This is very useful It can be used in many types of sites. Thanks for the tutorial.

Trackbacks/Pingbacks

  1. Tweets that mention Photoshop: How to Create Colourful Navigation Bar » Step, Segmenting, Open, Right, Final, Ouput » AnimHuT -- Topsy.com - [...] This post was mentioned on Twitter by Sri Ganesh.m, Sri Ganesh.m, Lynn Jacobs, sunil jain, AnimhutFeed and others. AnimhutFeed …
  2. 25 Creative Menus And Navigation Tutorials of Photoshop - [...] Colourful Navigation Bar [...]
Please Share: