White Stroke Buttons/Bars/Navigation

In this tutorial I'm going to teach you how to create some beautiful bars and buttons for all your web designs. This style is common around the web right now.


Bars:
Step 1:
Open up a fresh document, any size will work, but I've chosen 600x300px so it fits on this screen good. Fill the background a light grey. I used the color #e5e5e5.


Step 2:
Create a new layer and set your foreground color to #3e3e3e. Now grab the rounded rectangle tool with a radius of 5px. Make a rounded rectangle the width you want your bar and about 100px in height. The height doesn't have to be exact, we will be trimming it.


Step 3:
Grab the marque tool and make a box around most of the rectangle (leave arround 60px out on the top). Press delete.


Step 4:
Now lets apply stroke and gradient overlay to our bar. Open up blending options and use the following settings.




Step 5:
Alright, now that we have out base set up, let's add the stroke to make this thing shine. Create a new layer and zoom in so you can see individual pixels. Now grab a pencil tool with a 1px white pencil. Now you're going to draw a one pixel like across the top (1 pixel down) and round the corners by one. Take a look at the picture, you'll know what I mean.



Step 6:
Set the layer mode of the white stroke to overlay and lower the opacity as needed.


Step 7 (Optional):
We now have the basic bar complete. At this point you can add things to make it look a little bit different. Drop shadow with pattern overlays tend to work great! Here's a few variations:

Drop Shadow:


Pattern Overlays:





You can also change the colors. Pretty much any color will look good. I'll use a different color for buttons.

Navigations Bar:
Ok so if you wanted to turn this into a navigation bar all you need to do is add some 2px dividers and some text.

Step 1:
Create a new layer, zoom in and draw up a divider thing like I did:


Step 2:
Set the layer mode to overlay and lower the opacity to around 15%.


Step 3:
Decide how many navigation links you will have, and divide the bar into that many sections. Mine's pretty short so I'll only have a few.


Step 4:
Add some text.


Creating Buttons:
To create buttons you'll be using the same technique except you'll leave the bottom corners rounded as well. Here's how they will look.


Well that's it! The PSD is available to download below Here's how my final image looks like: