Nice glossy grey navigation menu with search box for your web sites

Nice glossy grey navigation menu with search box for your web sites

(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 stle 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 :D

















Hope you like it and it has been useful for you...