Another green web navigation tutorial from me. This one is the last from this kind, hoep you will find it useful.

(You can click on the images to view them in bigger size)

1.Start this tutorial with opening a new Photoshop document. My dimensions as you see are 800 width x 308 height but that’s not so important.

2.Take the rounded rectangle tool and set the radius to 30px. Choose a green color: 78aa12. And then draw a shape like in the image below.

3.Next open the blending options of this shape and follow the settings from next few images. Drop shadow:

4.Inner shadow:

5.Inner glow:

6.Gradient overlay. The gradient is default black to white here with lower opacity: 10%


8.Take the rounded rectangle tool again with radius of 30px and just change the color to grey c9c9c9 now. Draw a shape same or similar to the picture below.

9.Duplicate this shape 4 or more times, depending of what you want to do.

10.Take the text tool and type some texts Home About etc…

11.Next let’s make the over button. Duplicate some of this button shapes we already have and clear it’s layer style. Right click with the mouse on the layer and choose clear layer style.

12.Now click twice on this layer shape and change it’s color to green. Or if you use other color, the color should be the same as this of the center of our bar.Remember we have used some layer styles like inner shadow so choose the color from the center.

13.Take the text tool again and type the same text for this button but this time the color will be white.

14.Now make a selection of this button. Hold CTRL and Click with the mouse over the layer icon then take the rectangle marque tool and while holding ALT remove the half of this selection.

15. Fill this new selection with white color, change it’s layer style to: soft light then lower the opacity to 50%.

16 We have this nice gloss here but I want it to be more soft. So make the selection from our button again. Like described in step 14.

17. And now use a filter: Gaussian blur. I am using a radius of 6.1

18.Next take the text tool and type some texts on our bar. Link1 link2.

19.We need a logo don’t we 🙂 I have found one here:

20.Again let’s type some text below our logo. And as you see we’re ready.

This is our design and I hope you like it. Feel free to ask any questions if you have, I am always happy If I can help you.

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Tutorial: Greeny navigation for your websites, 10.0 out of 10 based on 1 rating
Graphics designer and web developer from Bulgaria. Working as a freelancer from 2 years I have big experience in graphics design. In my spare time I make tutorials in my web site for tutorials: This is one of my hobbies. I also love Photography, sports and especially martial arts and free runing.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge