Website Metal Bar

Author	Tom de Bruijn
Date	Aug 24th, 2007
Status	Done [?]

Learn how to make your own website bar with a metalic touch.

Hi and welcome to my first tutorial. In this tutorial I will teach you how to make a bar for your website.
I thought of this one while making the previous layout of this website.

Final Result at the end of this tutorial will be: Click Here

1. Now let's begin with making a new PSD file (Ctrl+N) and make it with a width of 900pixels and height of 20pixels . Of course you may change the sizes to fit your specifications.


2. Call layer one: "Bar Main " and fill it with black. So we can put Blending Options on it.
3. Right click on "Bar Main " in the layers and go to "Blending Options ".
4. Enter the following settings:
Bevel and Emboss , this will make it more 3D:


Gradient Overlay , this will add a nice overflow from color to color:


For the left side of the Gradient I used #000000 and for the right side #0084cf . Of course you may change the colors to whatever you like your bar to be.

Now we have a (blue to black) bar, but now we are going to add the "Metal" overlay to it.
5. Make a new layer and call it: "Metal ". In that layer we will make the metal bar that goes on top of the blue (or whatever color you choose) bar.
6. Selected the tool "Polygonal Lasso " in the toolbar:

and make a shape like this, of course another shape is also possible it is just what you like:


7. Fill it with "White ". So we can add some Blending Options to it.
8. Now select the Layer "Bar Main " and press delete, this will give more depth to the layers in the end.
9. Now "Deselect " (Ctrl + D). We don't want to work only in the selected part
10. Now go to "Blending Options " and apply these settings:
Bevel and Embross, this will add more 3D:


Gradient Overlay, nice overflow from color to color:


For the left side of the Gradient I used #000000 and for the right side #cfcfcf . Of course you may change the colors to whatever you like your bar to be.

Stroke, adds a line around the layer:


Now you have a (blue to black) bar with a (silver to black) overlay. Now we are going to add some texture to the "Metal".
11. Download this pattern: "Metal Overlay". This will make the illusion of some rough metal.
12. Now "Ctrl + Mouse left click " on the layer icon of the "Metal " Layer, the outside of the "Metal " Layer will be selected now.
13. Make a new Layer and call it "Metal Overlay " and fill it with "Metal Overlay" pattern you just downloaded: Look here
14. Deselect (Ctrl + D )

Now we have one side of the Bar done but we also want it on the other side of the bar. To make it symetrical.
15. Copy Layers "Metal " and "Metal Overlay " and put them on the other side of the bar. Select the outside of the "Metal " Layer again, select the layer "Bar Main " and press "Deselect ". Now you should have something like this: Look here.

Now we have 2 piecs on the bar, but now we are going to add a center piece to it, so you can add your text on it.
16. Make a new Layer and call it "Metal Center " and use "Polygonal Lasso " to make a shape like this: Look here.
17. Select the layer "Bar Main " and press delete, this will add more 3D to the bar.
18. Now return to the layer "Metal Center "
and fill the selection with black.
19. Now right click on the layer "Metal " and press "Copy Layer Style ". You will copy one layer's setting.
20. Now right click on the layer "Metal Center " and press "Paste Layer Style ". You will paste the other layer's settings.
21. Make a New layer and call it "Metal Center Overlay ".
22. Now "Ctrl + Mouse left click " on the layer icon of the "Metal Center " Layer, the outside of the "Metal Center " Layer will be selected now.
23. Fill the Layer "Metal Center Overlay " with the "Metal Overlay " pattern. Now you will have something like this: Look here. Ta-da!, you now have a nice website bar!

Optional: Now we will put text on the bar. You may also make your own Text Style.
24. Select the "Horizontal Type Tool " and select the center of the bar.

25. Now pick a nice font, I used this one: Aerial, and make it size 12 or 10.
26.
Now type in your text and press the Ok Icon.
27. Now right click on the text layer and go to "Blending Options " and add these settings:
Bevel and Emboss:


Gradient Overlay:

Left I used #00aeff and right I used #aaaaaa.

Stroke:


Now you will have something like this: Final Result
I hope you had fun using my tutorial, I sure had, got any comments?

Downloads:

• Full PSD file of the bar
• The font I used for my text
• The Pattern

No comments placed yet, be the first!