Smooth Navigation
Smooth navigation to use for business/corporate designs. Learn how to create this navigation from scratch.

author:
  Ryan
title:
  Smooth Navigation
date:
  Mon 13 June 2005
category:
  Web Layout and Design
credits:
 


New document

Make a new document. I used 400x100.



Marque Tool selection

Start out with creating a New Layer and selecting the Rectangular Marque Tool. Make a selection like below:





Fill color

Fill it in with any color:





Blending Options

Right click the layer and select Blending Options. Click on Gradient Overlay and add these settings:





Make Rectangle shape

Now make another New Layer. Make a very thin Rectangle shape under the gradient layer you just made.



I missed a few screenshots, but you notice the green layer I made there. Make something like that using the Rectangular Marque Tool and filling it in with the Paint Bucket Tool.



Add Line and Merge

Make another New Layer and this time select the Line Tool and make sure the Line Width is 1px. Make a verticle line like I did in the above and below pictures:



Now you got your line layer you want to duplicate each line layer a few times and then move them around:




You can now Merge these 4 layers together, so click Layer 3 copy 3 and press CNTRL+E untill all Layer 3's are one.





Add Feather

We now want the Lines to fade out so it gives it a better smoother feel. Select the Rectangular Marque Tool and set the Feather to 20:



Make a selection like:



*NOTE (YOU MUST HAVE ALL LAYER 3 layers merged inorder for this to fade all the lines!
Press Delete a couple times. You now have faded the lines and smoothened them.



Verticle grey lines

Now make another New Layer. We are still using the Line Tool. You now want to make a White Line on the left and right of each of the verticle grey lines. For example:




I Merged these 2 layers together aswell. This saved me time because I didnt have to deal with 8 layers, instead I delt with 4 layers.



Verticle grey lines

After duplicating the White Line layers you now want to place them over all the grey lines:



As you see above I fixed the gradient I had. All I did was use the Rectangular Marque Tool and deleted a bit of the layer:



Cool eh!



Extra editions

Extra editions:
1) I decided to move the lines into the green horizontal rectangle.



All I did was merge all the line Layers. Then I went to Edit>Free Transform.
2) Ofcourse text:



I used AuX DotBitC font.

I hope you enjoyed the tutorial!



For questions and help regarding this tutorial,
please post a message at the forums.
Want your link here?