Subscribe Via RSS

3927 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Futuristic Navigation

January 19th, 2008 in Photoshop Tutorials by Richard Carpenter

Futuristic Navigation

1 Star2 Stars3 Stars4 Stars5 Stars11 Votes, Rating: 4.73
Loading ... Loading ...

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

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

17 Responses to “Futuristic Navigation”

  1. Helpfull hand says:

    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. Helpfull hand says:

    This is what i found:

    Normal
    Opacity 100%
    Colors: bcc4c9 to FFFFFF
    Reverse checked
    Radial
    Align with layer checked
    Angle: 90 degrees
    Scale: 100%

    And my result (Image if working):

    Or the link (Copy it):
    http://www.imgdumper.nl/uploads/47936025d81d1/Result.png

  3. ADMIN says:

    oppps sorry my bad

    i no i used a radial gradient, with the same colors as the main shape

  4. silver says:

    When you say add a small highlight using the marquee tool, how do you do that?

    Great tut btw

  5. ADMIN says:

    just basically a white rectangle over a specific object, then add a layer mask to blend it in

  6. Photoshop Tutorials says:

    Wow such an awesome tutorial, you can’t find much high quality tutorials online.

  7. TuanAnh says:

    Really awesome !!! Thank for your tuts.

  8. Vanqy says:

    Nice work!I have been transshipped it to my forum and translated it into Chinese!Thanks!

  9. Photoshop Tutorial Directory says:

    The animated glow looks really cool. And it could be better if the buttons had that kind of animation when hover. Nice tut :)

  10. Raul says:

    wow! that was cool

  12. Ovais says:

    nice one once again thanks for shring…thanks..

  13. SaungHnget says:

    Very nice.Thanks a million

  14. D3SCORAZONADOR says:

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

  15. NItin says:

    Very Nice!. Thanks.

  16. Rambo says:

    grandiosa ciona de santo y flera con indito ssersenho. ponideis a rabulo y nemil mafado con ionin cosontos!

Leave a Reply