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 Rectangle Tool and create a rounded rectangle within the document. Keep the edges somewhat inside the document. For a reference, check the picture below.

Address Bar Picture 1

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.

Address Bar Picture 2

and add a gradient overlay with these settings

Address Bar Picture 3

and add this Bevel and Emboss blend

Address Bar Picture 4

4. Next click on the Custom Shape Tool Custom Tool Shape, Then on the shape menu, click on the arrow 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.

Address Bar Picture 5

Here’s what it should look like by now

Address Bar Picture 6

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

Address Bar Picture 7

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

Address Bar Picture 8

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

Address Bar Picture 9

Leave a comment