Create Modern Grunge Navigation Design in Photoshop

Interactive Online > Blog  > Web Design  > Create Modern Grunge Navigation Design in Photoshop

Create Modern Grunge Navigation Design in Photoshop

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.


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.

Create Modern Grunge Navigation Design in Photoshop - Final result

Step 1: Create new document

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

Create Modern Grunge Navigation Design in Photoshop - Step 1

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.

Create Modern Grunge Navigation Design in Photoshop - Step 2

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.

Create Modern Grunge Navigation Design in Photoshop - Step 3

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

Create Modern Grunge Navigation Design in Photoshop - Step 3.1

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.

Create Modern Grunge Navigation Design in Photoshop - Step 4

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

Create Modern Grunge Navigation Design in Photoshop - Result after 4 steps

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).

Create Modern Grunge Navigation Design in Photoshop - Step 5

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

Create Modern Grunge Navigation Design in Photoshop - Step 5.1

Create Modern Grunge Navigation Design in Photoshop - Step 5.2

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.

Create Modern Grunge Navigation Design in Photoshop - Step 6

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

Create Modern Grunge Navigation Design in Photoshop - Step 6.1

Add texture to your background and you’ve done!

Final Result

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

Create Modern Grunge Navigation Design in Photoshop - Final result

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.

(read full article on source site)
Free Website for Your Dental Practice
See why our dental practice websites exceed the features & value of your typcial dentist website.
  • No cookie-cutter websites
  • No duplicate content
  • Custom built with a unique look and feel
  • Unique content written by professional writers
  • Set yourself apart from other dentists
  • The key to your online success!
* we never share your e-mail with third parties.