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.
Hi sagar 🙂 🙂
Thanks for the tutorial 🙂 😀
.-= Sunil Jain´s latest blog ..HTML5 : What? Why? How? and When? =-.
Thank you Sunil. Will surely post more tutorials.
Nice tutorial! Good for colorful websites. 🙂
.-= Suraj´s latest blog ..Cheap ways for creating website and finding freelancers =-.
Thank you Suraj. You can improvise the final output with more better color combinations
unusual navigation 🙂 but it’s nice outcome
.-= Nikola Lazarevic´s latest blog ..Free June Wallpaper Calendar for Download =-.
Thank you Nikola. These kinds of unusual navigation bars make clients excited. That’s why i do them.
very easy simple n colourful navigation bar. good work
Thank you Karthik. I will post more stuffs like this in future.
Great tutorial…Thanks!
.-= Madalin´s latest blog ..20 Free Font Websites Everyone Should Visit =-.
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.
Very good tut:) Thanks Animhut!
.-= adone´s latest blog ..SleeveFace i jesteś bożyszczem =-.
Thank you Adone. Thanks for the appreciation. I will surely post more tuts like this in future.
Inspirational design. I’ll put in my design series too !!
.-= Gagan´s latest blog ..Get New Visitors To Your Blog By Article Exchange : Blog Traffic Series Part 19 =-.
Thank you Gagan,
Thanks for the comments i will post more tutorials like this in future.
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.
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.
Hi blogteater, lots of comments from you today. Thanks for all of them.
This is very useful It can be used in many types of sites. Thanks for the tutorial.