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

final Photoshop: How to Create Colourful Navigation Bar

Open the document

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

navigation 01 Photoshop: How to Create Colourful Navigation Bar

Create rectangle

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

navigation 02 Photoshop: How to Create Colourful Navigation Bar

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.

navigation 03 Photoshop: How to Create Colourful Navigation Bar

navigation 04 Photoshop: How to Create Colourful Navigation Bar

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.

navigation 06 Photoshop: How to Create Colourful Navigation Bar

Creating guides

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

navigation 07 Photoshop: How to Create Colourful Navigation Bar

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.

navigation 08 Photoshop: How to Create Colourful Navigation Bar

navigation 09 Photoshop: How to Create Colourful Navigation Bar

navigation 10 Photoshop: How to Create Colourful Navigation Bar

navigation 11 Photoshop: How to Create Colourful Navigation Bar

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.

navigation 12 Photoshop: How to Create Colourful Navigation Bar

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.

navigation 13 Photoshop: How to Create Colourful Navigation Bar

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

Final Ouput

final Photoshop: How to Create Colourful Navigation Bar

Subscribe To Our Newsletter For More Offer !

You have Successfully Subscribed ! Thank you. Any suggestion how we can improve the blog ?

Pin It on Pinterest