Her

Home Photoshop Tutorials Web Layout Design Stunning Smooth Navigation

Design Stunning Smooth Navigation

Author: Ryan Trafford Author's URL: www.thedesignworld.com More by this author

1) Make a new document. I used 400x100.

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

3) Fill it in with any color:

image 1

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

image 2

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

image 3

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.

6) 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:

image 3

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

image 5 image 6

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.

image 7

7) 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:

image 8

Make a selection like:

image 9

*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.

7) 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:

image 10

image 11

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.

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

image 12

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:

image 13

Cool eh!

Extra editions:

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

image 14

All I did was merge all the line Layers. Then I went to Edit>Free Transform.

2) Ofcourse text:

Smooth Navigation

I used AuX DotBitC font.

I hope you enjoyed the tutorial!