Hi-Tech Navigation Menu

This time out I am going to show you how to make a custom hi-tech navigation bar. This is a cool idea for scifi fansites or tech blogs.

First open a new document at 800×100 with a transparent back ground. Next fill the back ground with #535252. Make a new layer and call it “Base”.

With the “Base” Layer selected grab your pen tool and make an outline like below and fill the area with white #FFFFFF.

Next open the “Base” Layer blending options. We now need to add an Inner Shadow, Outer Glow, and a Gradient Overlay. Select the Inner Shadow Tab in the Blending Options Window and Set the Blend
Mode to Normal
, Opacity
to 100%
, and make the Distance 0 leave all the other options to default.

Next select the Outer Glow tab, again change the Blend Mode to Normal, and change the color to Black #000000

Then Select your Gradient Overlay tab leave all the default settings and change the color of the gradient to the below settings.

Your base image should now look like this:

Make a new Layer and call it “Inner”. Grab your pen tool and make an outline like below and fill the area with black #000000.

Use the same blending options as you did with the base layer only this time we are going to add a bevel and change the Gradient Color. Now Select the Bevel and Emboss tab change the style to Outer Bevel, set the direction to down and the size to 3. Leave all the other options as default. Next select your Gradient Overlay tab and change the color to like below

Your image should now look like this:

Now that we have the main navigation area it’s time to make it really look Hi-Tech. Make a new layer and name it “LED”. Next Grab you Rounded Rectangle Tool and set the radius to 12px. Now Draw a selection in the middle of the first tab and fill it with black like the image below.

With the “LED” layer selected we are going to add some Blending options. This time we are going to add a Drop Shadow, Inner Shadow, Inner Glow, and a Gradient Overlay. First select The Drop Shadow tab change the distance to 2, deselect the Use Global Lighting, and change the angle to 90 leave everything else to default. Then go to the Inner Shadow and change the distance to 0 and leave everything else as default. Now go to the Inner Glow tab and set the Blend mode to Normal at 100% opacity, change the color to black #000000, and change the size to 4. Finally select the Gradient Overlay and use the colors as below

Your image should now look like this:

Make a new layer and name it “LED Glow”. With the new layer selected CTRL+Click the “LED” to make a selection and fill it with black #000000. Set the fill to 0%, then add a gradient overlay of transparent to white and set the Blend mode to Color
Dodge
and the opacity to 60%. This is what the nagigation should look like now

Duplicate the LED and LED Glow layers on the other tabs. If you want you can desaturate the new layers so they do not look highlighted. Like So:

Now that we have the top LEDs we need to add a glass bar to the bottom. Create a new layer and name it “Glass”. Follow the same steps as you did on the “LED” layer only use the Inner Shadow and Gradient Overlay from those steps. Add an Outer Glow with #000000 as the color, Blending Mode to Normal, and a size of 2

Your image should now look like this:

Now we are going to add a LED Ray that can be used as a roll-over image. Make a new Layer and call it “LED Ray”. Now make a selection like below:

Now that you have the selection fill it with black and set the opacity to 0%. Next go to Filter > Blur > Gausian Blur and set the blur to 2.0. Then add an Outer Glow set the Blend mode to Vivd Light, opacity to 75%, with #81DCFF as the color. Finally add a Gradiant Overlay going from Transparent to #81DCFF and set the blending mode to Vivid Light.

Your image should now look like this:

Finally add some text. I decided to use “Futura Bk BT” but the font is completely up to personal taste. Make the font color #46CEFF. Now add an Outer Glow with a Normal Blending mode, Black as the color, and a size of 4. And you are done. I added a reflective glow of the font and added the rest of the text so you can see the final look.

I hope you enjoyed this little tutorial

Leave a comment