Metallic Interface Corners

Web Design | September 3rd, 2008

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.

Be Sociable, Share!

12 Comments to “Metallic Interface Corners”

  • Marc | September 6th, 2008 at 3:40 am

    Absolutely brilliant!

  • dexo | September 6th, 2008 at 5:41 am

    very nice, good job :)

  • [Ray] | September 6th, 2008 at 1:46 pm

    Totally perfect! Thanks, l’ll learn this soon.

  • Pastaman | September 7th, 2008 at 5:24 am

    Rad tut. I’m off and making techy corners like a pro. It’s sooooo simple with a complex look, I love it.

  • jay | September 7th, 2008 at 9:49 pm

    w0w.. its cool dude.. im exited in corner package

  • RICHARD WHITE | September 8th, 2008 at 11:53 am

    Very useful for headers and frames in desktop publishing too. Thanks.

  • Mikey | September 28th, 2008 at 8:55 am

    Awesome stuff, is the pack up for download yet? or any idea of when it will be?

  • Yoni | September 29th, 2008 at 2:21 am

    I will post it up for download tomorrow!

  • Tadd | December 29th, 2008 at 1:30 pm

    Very nice! I’ve seen a few other similar tutorials – but none as good as this. Kudos!

  • Daemon King | July 6th, 2009 at 2:41 pm

    Thanks a lot. I’m a new designer that is just getting my career started in my mid-30’s. It’s thanks to guys like you that I have learned so much on such a small budget because I wouldn’t be able to afford to go to school for this.

  • Clifford | July 14th, 2012 at 4:50 am

    This is a wonderful tutorial. I had been looking for how to do this for a long time now. God Bless You!

  • ululf01 | February 19th, 2013 at 1:18 am

    Great tutorial, the texture really spice up the design.

Leave a Reply