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.

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

image 2
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.

image 8
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.

image 10
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)

image 11
Click to enlarge

Now add this layer style to your blue neon layer.

image 12

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

image 13
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.

image 14
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.

image 16
Click to enlarge

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

image 17
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.

image 22
Click to enlarge

Repeat the steps listed above to create more buttons.

image 23
Click to enlarge

Now add your button text and logo's

image 24
Click to enlarge

With a bit more inspiration you could even animate the glow

Futuristic Navigation
Click to enlarge


Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Futuristic Navigation"

Captcha