Today I will show you how to create metal interface corners to enhance your web design. You can use this effect to create cool buttons, content boxes, and pretty much anything else (I’ve used it to create sweet metallic typography!)

STEP 1: Create Shapes and fill them with Color and/or Gradients

Start off with a dark background, I used dark gray. Create a new layer and use the Marquee and Lasso tools to Design something that looks like a corner, it does not need to look exactly like the one below. If you are unsure of what to make, try creating something similar to what I made and after you feel comfortable with the tutorial process start experimenting with different variations. Use grayscale shades only.

STEP 2: Add Wires

Use the brush tool to create black wires across the shape. This step is completely optional, you might find that adding wires gives you a much better result or you might not.

STEP 3: Resize the Whole Shape

While selecting the layer of the shape you just made and go to Edit>Free Transform (ctrl+T) and resize it to about the side of the result below. Once resized, simply click Enter key to get out of Free Transform.

STEP 4: Blur and Sharpen

Go to Filter>Blur>Motion Blur and use the settings Angle: 90, Distance: 4. After that go to Filter>Sharpen>Sharpen and keep repeating the sharpen by going to Filter>Last Filter (ctrl+F). Do this until you have something that looks good to you. It took me a total of 3 sharpens to get a proper result, your shape might require more.

STEP 5: Add Drop Shadow

Make sure your shape layer is still selected and go to Layer>Layer Style>Drop Shadow and use these settings:

By now you should have something that somewhat resembles the following:

STEP 6: Enhance your Shape (OPTIONAL)

This step is not necessary but I recommend to at least try it out and see how it looks. Duplicate the layer of the interface corner, rotate it 90 degrees cw and flip horizontally. Then place it over or on the side of the corner to make it look fuller and more interesting. You might want to erase a part of the duplicated layer and only then add it to the original shape like I did here:

You can play around with adding different parts of the corner to different sections to make very cool results, or end up with many variations to make the end design more interesting.

Creating Content Boxes

Once you have created an interface corner, you can continue to make a proper content box for your website design. A good way to use small corners to produce full boxes is pixel stretching (which I will now show you how to do).

STEP 1: Select the Single Column Marquee Tool

Select the part you want to stretch. If you select a dark column of pixels then the side of the box will be dark. You can find this tool in your tool box.

STEP 2: Stretch Pixels Horizontally

Go to Edit>Free Transform (ctrl+T) and stretch that column of pixels as wide as you want.

STEP 3: Select the Single Row Marquee Tool

Notice how this time I select a lighter row of pixels instead of dark to make the box more dynamic and interesting.

STEP 4: Stretch Pixels Vertically

Go to Edit>Free Transform (ctrl+T) and stretch that row of pixels as long as you want.

STEP 5: Duplicate, Flip, and Merge

Duplicate the layer and flip it horizontally, then merge it to the previous layer, duplicate that layer and flip it vertically. Now merge the two layers. Make sure to disable the Layer Effects of the top layer before merging so the effect is not doubled. A layer with no effects would adapt the effects of the layer it is merged to.

STEP 6: Add Title Area

Just as I did before, when I enhanced the corner by adding a duplicated section to it, you can add an area for the title of the box in the same manner. Select the bottom of your box with any Lasso tool, duplicate it, then move it on top of the box. You might want to erase certain parts as I did below, I erased the wires from the corner pieces that I duplicated.

STEP 7: Add a Background

Now all you have to do is add a shape with a darker color or gradient under the box layer. Then Add your text and you are finished!

Here are some variations I got using the same original interface corner. Only this time I played around with the duplicated parts of the corner and made it a bit more advanced. The more you play around with adding duplicates of the corner, the better your results will be.

Now available: Interface Corner Pack

If you want to save yourself time but still add some sweet metallic style to your web designs, check out the metallic interface pack.