Web Design Blog | Resources for Web designers and Graphic Designers

Navigation in web design is one of the most important usability element. Today I will show you how to create a modern grunge navigation design in photoshop.

In this tutorial you will learn how to use gradients, textures and layer styles. The result looks modern and can be used as a web design element. Hope you will learn something new and share your opinion in comments.

Final Result

Click on picture below to see the final result in full size.

Step 1: Create new document

For the beginning create new document. Click File -> New… and set width to 920, height to 170 pixels.

Step 2: Navigation bar

Create new layer Layer -> New -> Layer… and name it “Navigation bar“. Set foreground color to #1E1E1E and pick Rounded Rectangle Tool, then set radius to 6 px and draw your navigation bar. Example shown on the picture below.

Step 3: Navigation bar layer style

To customize navigation bar click Layer -> Layer Style -> Blending Options…and click on Outer Glow then apply following settings.

Then select Gradient Overlay and apply following settings. Note: Blend Mode  is Soft Light.

Step 4: Navigation text

For the navigation links (in Photoshop just text) set foreground color to #FFFFFF (white). After that pick Horizontal Type Tool, choose Myriad Pro Regular (or Arial) font 14 pt size and write some navigational words like “Home, About, Blog, Contact”. Then go to Layer -> Layer Style -> Blending Options… and apply following settings.

Your navigation after previous actions should look like something on the picture below.

Step 5: Adding the texture

It’s time to create a grunge look. Download 22 Free High Resolution Textures from Media Militia.

Select Media_Militia_BTOB_005 texture and resize it (CTRL+T) to 25% on width and height, then set rotation to 90 degrees. Then move texture above the navigation bar. After that hold CTRL button and click on “Navigation bar” layer to make a selection.

When you have selected navigation bar click on texture layer and copy selection (CTRL+C) then hide texture layer and paste texture selection (CTRL+V).

After that choose Layer -> Layer Styles -> Blending Options… and apply settings shown on the picture below.

Step 6: Active button

Create new layer Layer -> New -> Layer… and name it Button. Set foreground color to #95009E hold CTRL button and click on “Navigation bar” layer to make a selection. After that pick Rectangle Tool, choose “Button” layer and draw button. Note: “Button” layer must be under the text and “Navigation texture” layers.

Then go to Layer -> Layer Style -> Blending Options… and apply following settings.

Add texture to your background and you’ve done!

Final Result

Click on picture below to see the final result in full size.

Download Modern Grunge Navigation Design PSD (2,5 MB)

Stay tuned for future freebies and useful design stuff. You can follow WebDesignFan on Twitter and subscribe to the RSS feed here.