What kind of tutorials you want to see more in this blog?

Cool Glossy Website Navigation bar

Design cool glossy website navigation bar with this tutorial... (You can click on tutorial images to view them in bigger size)

1. Open new document and the dimensions I use here are: 200 width x 400 height

2. Fill the background with Grey color: #e6e6e6 and take the Rounded Rectangle tool and set it's radius to:25px and it's color to: #0498aa
Also you should select shape layers icon! (see the arrows in the image) and draw a shape like in the image below:

3. Next thing Duplicate this shape we have made and change it's color to: white

4. Then using free transform tool (CTRL+T) hold shift and try to make the shape
like in the next image. It should be on the top of our first shape. then Lower the opacity of this shape to: 12

5.Now take the type tool with some nice font and type something and after that,
next few images are for blending options.

6. Satin:

7. Stroke:

8.So it looks nice like that and we're almost finish with our navigation bar.
we Should duplicate our 1st shape 4-5 times maybe (as much you wish) and now change the texts and reposition the new shapes... It's nice to group this first shape so you can duplicate it much easier!

9. Done! and Also I added some small extras. You can experiment with the colours and everything.

Hope you liked it :)


Manju said...

thanks for the tuto :)
i do have a question though, if you don't mind?
when you've done and created the nav bar, and hyperlinked everything, how do you add all that to the blogger css template???

Manju said...

i'd really appreciate the help ^^

ADK said...

It is hard to explain the process of adding such menu to Blogger template in just few words. I should make a completely new tutorial for adding such menu to Blogger...But I don't have time now. The menu itself is much suitable for another type of web templates...

Manju said...

thanks for the reply ^^
i kind of figured it out so it's all cool! :)

ADK said...

good then :)