Futuristic Navigation

Create a new document 800×230 pixels with any color background i find a light colored background works best. Now theres 2 ways you can rough out the main shape, one is using a rectangle and using the warp tool and the other is the pen tool, for this tutorial il use the pen tool due to the fact that not all versions of photoshop have the warp tool. So using the pen tool create this shape.

Now duplicate this layer, flip it and place it the other side, this way both sides are the same. (merge both layers when done).

Now add these layer styles to your main shape, also label your layer “main shape”.

You should end up with this.

Now dudplicate your main shape then drag the duplicated layer under your original layer, rename layer to “shape2” remove all layer styles apart from the gradient overlay and the drop shadow, leave the drop shadow settings as they are but change the gradient overlay to the settings below.

Now select the move tool and using the keyboard arrow keys press down arrow 17 – 20 times, now press ctrl + T and move the sides only inwards reducing the length, you should end up with this.

Create a new layer inbetween your shape layer and shape 2 layer, name this layer “blue neon” with the pen tool or polygon lasso tool create this shape, (please note some of my layers are hidden to show you the shape)

Now add this layer style to your blue neon layer.

You should end up with this. (no hidden layers)

Now duplicate your main shape layer (keep on top of other layers), delete all layer styles and make sure it is the color white, set layer opacity to 50% and blending mode to soft light, press ctrl + T to transform the shape, just reduce the size and move up to create a highlight.

Now using two 1 pixel lines and the colors shown below create a divider.

Add a outglow using the default settings, you should end up with this.

Now create a new layer and create a black circle like the image below.

Add these layer styles to your orb.

Now add a small highlight using the elliptical marquee tool. You should have something like this.

Repeat the steps listed above to create more buttons.

Now add your button text and logo’s

With abit more inspiration you could even animate the glow

15 thoughts on “Futuristic Navigation”

  1. Nice result, but, when you show the layer styles of the buttons, you forgot the gradient overlay, so the button will remain black.
    And i can’t get the colors from the PSD file.
    So would you plz post the gradient overlay settings?

  2. Verdaderamente que la herramienta seleccion es una de las mejores. ahora si que voy a realizar mi pagina

Leave a Reply

Your email address will not be published. Required fields are marked *