This tutorial will teach you how to create a stylish address bar. These are most commonly use on anything from proxy websites to nice, web 2.0 styled websites. So lets Begin!

1.Start by creating a new document. Mine will be 600px by 100px but you can make your document as large or as small as you need it to be; then create a new layer. When done, select the ROunded Rectangle tool and draw out a box that’s around the ideal size of your intended adress box or form.

2.You should know have a path set out, now fill it with a darker color of your choice. As you can see, we chose a darker-light-blue to fill ours with since we intend on the bar being light blue. You can fill your path by going to the paths tab, and clicking on the filled in icon on the bottom of your panel. When done with this, make your path into a selection; click the dotted circle on the footer of the panel.

3.Now we will apply some basic styles to our box to give it texture. On the layer you created when you first began, double-click it. This will bring you to the Layer Style panel. Here are the settings we used:

4.At this point, depending upon your color combination, you should have something like this:

5.Now, create two layers and then select Gradient tool. Also, go back to the paths panel, and create a selection again. Now on one layer, draw a black gradient from the bottom to the top. On the other layer, draw a white gradient from the left-top to the right bottom.Lighten the layers, and set the opacity to your choosing. It may depend depending upon the color. You should have something like this:

6.Without the selection delected, create another layer and using Stroke (Edit>Stroke), draw a 1px white layer on the inside of the selection.

7.To add the finishing touch, you can add an arrow to the end like I have done in this extra example. But other than that, you’re done! Hope you learned something :]