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

Smooth Navigation


1. Open up a 600x150 white document and create a new layer.

2. Select the "Rectangular Marquee Tool" and make a selection and once your rectangle is complete, go to Select -> Modify -> Smooth for *10* Pixels - Now your selection should look like this.

Click to enlarge
Click to enlarge

3. Fill the selection with the color WHITE and right click on the layer and go to Blending Options and use these settings

image 2

image 3

image 4

image 5

4. Now you have something like this

Click to enlarge
Click to enlarge

Move the rectangular button around to a place where you feel it looks the best.

Click to enlarge
Click to enlarge

Now duplicate the layer a couple of times to make a navigation bar like mine.

Click to enlarge
Click to enlarge

5. Now create a new layer and select the "Rectangular Marquee Tool" again and make a selection like this - Select -> Modify -> Smooth for *10* pixels

Click to enlarge
Click to enlarge

Color it any color you want ( I chose #002AFF ) and move it into one of the buttons and don't forget to RE-SIZE it so it fits on to your button. Once you have the rectangle in place, use the same blending options you used before to make the buttons. I lowered the opacity by 20% to give it a more lighter effect.

6. Now duplicate the layers and add them all on the buttons like below.

Click to enlarge
Click to enlarge

7. Now you can adjust the sizes, colors and opacity and maybe some text and you're done :]

I changed the smoothing pixels around, changed some opacity in the dark shadowing option and made another picture from this tutorial.

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


Author's URL: Admin
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

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

Captcha