Metal Bar

Here a way to make a horizontal metal bar, which can be used as a title image or for navigation.

Objective

Final Result

Tutorial

  1. Open a new canvas with the size that you want the bar to be. I'm going to use 400x40.

  2. Make a New Layer New Layer. I will name mine metal bg.

  3. Select a dark gray in the Foreground and a light gray in the Background.

  4. Select the Gradient tool Gradient with these settings. The gradient should be Foreground to Background and should be a Linear Gradient.

    Now make a gradient on layer metal bg from the bottom to top.

  5. Using the Rectangle Marquee Rectangle Marquee, make a selection that goes all the way across but leaves a few pixels of room on the top and bottom. About 3px of room on both sides is good.

  6. Right click inside of the selection, and choose Free Transform (or go to Edit >> Free Transform).

  7. Right click inside of the selection again, and choose Flip Vertical. Hit Enter on your keyboard to apply the transformation.

  8. Use the Rectangle Marquee Rectangle Marquee to make a small selection at the top, about 5-6px in height. (Doesn't have to be exact!) Hold Shift to make another selection at the bottom.

  9. Go to Filter >> Blur >> Gaussian Blur. Set it to 1 or 2px.

  10. The basic metal background is done! Let's add some text now. I will treat mine as a navigation bar. Use the Text tool Text Tool to write whatever you want on it in white.

  11. In your Layers window, select Bevel and Emboss from the Layer Styles Layer Styles (or go to Layer >> Layer Styles >> Bevel and Emboss).

    Set the Style to Outer Bevel, set Direction to Down, and lower the Size to 2px or 3px. The rest should be fine.

    And this will get us this.

  12. Now let's add a slight border on it. Go to Layer Styles Layer Styles again except select Stroke (or Layer >> Layer Styles >> Stroke). Set the Size to 1px, the Opacity to 30-40%, and the Color to black.

    Now we have...

  13. I want to add a divider to go between each link. Make a New Layer New Layer, which I will name divider.

  14. Using the Pencil tool Pencil, draw a 1px white line next to a 1px black line.

  15. Set layer divider to 50% Opacity, so that the divider blends in with the bar more.

  16. You're basically done! Add as much text and dividers as needed, and then put the bar together with your layout.

back