Tutorial: Design glossy grey navigation menu
In this tutorial I will shot you how to make a very nice looking glossy grey navigation menu for your web site.
(You can click on the images to view them in bigger size)
1.Start with a new document: 800px 150px. I’ll draw a shape with rectangle tool which I’ll use as a background. Color: 738594
2. Adding a place for the logo and description…
3.Take rounded rectangle tool with color: e3e3e3 and radius of 35px.
4.Now open the blending options of this shape and follow settings from next few images…
Drop shadow:
5. Inner glow:
6. Satin:
7.Gradient Overlay:
8.Now add some text with a nice font and lines between the buttons:
9.I’ll add 2 shapes for the roll over state!
10.Let’s continue with the search box… Draw 2 shapes like the example on the next image…
11.Copy and paste the same layer style like the navigation bar…
12. And add stroke to this layer style with color: 858585
13.Now take the Ellipse tool.
14. And draw a shape with it. This will be our GO button. Color: white.
15.Paste the same layer style like before…
16.Here we’ll change the stroke a little bit: Size:2 and Opacity: 19%
17.Add 2 texts Search and GO like in the next image…
18. Now let’s add a little bit of a glossiness… Draw a white shape over our first shape.
19.Take the rectangle tool and use subtract from shape area and cut the half of our new shape…
20.Lower the opacity: 25% and change the layer mode to Soft Light
21.You can move this new layer down… But at all we’re done 
Hope you like it and it has been useful for you…
Related Posts
No related posts found
[...] 11. Tutorial: Design glossy grey navigation menu [...]
[...] 11. Tutorial: Design glossy grey navigation menu [...]