Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Futuristic Navigation

Futuristic Navigation


Create a new document 800x230 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 I'll 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.

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

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

image 3

image 4

image 5

image 6

image 7

You should end up with this.

Click to enlarge
Click to enlarge

Now dudplicate your main shape then drag the duplicated layer under your original layer, rename layer to "shape" 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.

image 9

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.

Click to enlarge
Click to enlarge

Create a new layer in between 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)

Click to enlarge
Click to enlarge

Now add this layer style to your blue neon layer.

image 12

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

Click to enlarge
Click to enlarge

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.

Click to enlarge
Click to enlarge

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

image 15

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

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

Add these layer styles to your orb.

image 18

image 19

image 20

image 21

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

Click to enlarge
Click to enlarge

Repeat the steps listed above to create more buttons.

Click to enlarge
Click to enlarge

Now add your button text and logo's

Click to enlarge
Click to enlarge

With a bit more inspiration you could even animate the glow

Futuristic Navigation Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Futuristic Navigation"

Only registered users can write comment

No comments yet...