Metal Bar

February 21st, 2013

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


Finished Result
Metal Bar - finished


  1. Open a new canvas with the size that you want the bar to be. I’m going to use 400x40px.
  2. Make a New Layer . I will name mine, metal bg.

    Metal Bar - #2

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

    Metal Bar - #3

  4. Select the Gradient tool . Make sure Linear Gradient is selected, and that the color goes from the Foreground to the Background.

    Metal Bar - #4

  5. Make a gradient on layer metal bg that goes from the bottom to top.

    Metal Bar - #5

  6. Use the Rectangle Marquee , and make a selection that goes all the way across but leaves a few pixels of room on the top and bottom.

    Metal Bar - #6

  7. Right click inside of the selection and choose Free Transform.

    Metal Bar - #7

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

    Metal Bar - #8

  9. Use the Rectangular Marquee to make a selection around the top section. Hold Shift to make another selection around the bottom section.

    Metal Bar - #9

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

    Metal Bar - #10

  11. The basic metal background is done! Let’s add some text now. I will treat mine as a navigation bar.

    Use the Text tool and type some text in white.

    Metal Bar - #11

  12. In your Layers window, click on Layer Styles and select Bevel and Emboss.

    Metal Bar - #12

  13. Set Style to Outer Bevel, Direction to Down, and Size to 2px. You can leave the rest.

    Metal Bar - #13

    It should look like this now:

    Metal Bar - #13

  14. Now to add a border that divides the navigation sections. Make a New Layer , which I will name divider.

    Metal Bar - #14

  15. Use the Pencil tool to draw a 1px white line next to a 1px black line.

    Metal Bar - #15

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

    Metal Bar - #16

  17. And that’s it! To finish it, I added more navigation sections.

    Metal Bar - finished

Leave a Reply

Your email address will not be published. Required fields are marked *