Create A Custom http:// Bar

1. Create a new file, and give it the dimensions 350×35. You can use a white background, or a transparent one. It all depends on how you’re using the address bar. I’m going to use white so it’s easier for you to see what I’m doing.

2. Select the Rounded Rectangle Tool and create a rounded rectangle within the document. Keep the edges somewhat inside the document. For a reference, check the picture below.

3. Next, fill the rounded rectangle with any color, for this tutorial I’ll be using #0000FF. Then once that’s filled, add an inner glow with the settings below.

and add a gradient overlay with these settings

and add this Bevel and Emboss blend

4. Next click on the Custom Shape Tool , Then on the shape menu, click on the arrow . Stretch the arrow on the left hand side of the bar. Right click the arrow and fill it in with white. Then you’ll want to add yet another bevel and emboss blend option.

Here’s what it should look like by now

5. Then right beside the arrow, add the text, “http://”, and add this outer glow blending option.

6. Next we’re going to add the actual bar into the image. Select the rounded rectangle tool again . Expand it from the http:// close to the right edge. Fill it with white. Then add the blending option below.

Voila, you now have a custom made http:// address bar.

Topics: Design, Photoshop, Web Design