Photoshop Tutor

Simple GunMetal Interface

By Michael in Tutorials

Today i’m going to show you a rather simple tutorial however it does give quiet a good foundation to those who are interested in starting metallic interfaces. As a small news update, i am working on a new layout for pstut and some new tutorials so stay tuned. I understand its been a rough couple of months!

………………………………………………………………………………………………………………………………….

So lets start with creating our document, i have prepped a background for you guys already if you wish to use it.

Now by grabbing your Rectangular Marquee tool, create a new layer and an outline for the frame of the interface.

Using the preferences below apply a stroke to the outline:

Great, now we have the border for our interface. So lets start adding the detail touches so we can make it look more metal-like. Using our Dodge Tool with a diameter set to 45px, start stroking the left edge of the frame as shown below. Apply the following effect over and over with different sizes along the the other edges.

Eventually, your results should come out to be looking along the lines of this:

Now that we got the feel of the metallic frame lets work on our Gun Metal background. Simple begin by taking out the Rectangular Marquee tool and creating another rectangle inside the current frame, approximately 2px-3px apart.

Follow that up with adding some noise:

Good, lets move on to our shadows. Go to your Layer - Layer Style - Inner Shadow and apply the following preferences:

For the final touch, lets add a little bit of bevel. Look below:

Okay now to fix a little bit of the lighting, we are going to duplicate the layer and clear it off all styles. (Clear Layer Styles). Following that, grab your Dodge Tool and set the diameter to approximately 125px and stroke in the direction shown below gradually decreasing.

After that set the Blending options in Layer - Layer Style to Overlay and drop the opacity to 25%. You should be looking at aproximately the same results on your screen:

You can really do a lot with this tutorial, using different shapes and methods. This is just the basic introduction, the same way you star to learn animation with the beginners step of adapting the color to change under a sequence of frames. I will try to make a more advanced to tutorial to this version that will give more insights and maybe even help some of you progress.

These icons link to social bookmarking sites where readers can share and discover new web pages.

You can leave a response, or trackback from your own site.

Blaz
Posted on May 10th, 2008

Very well written and I love the outcome! Good job =]

Karamela
Posted on May 10th, 2008

very cool. ….just what i needed. thanks

Michael
Posted on May 10th, 2008

I’m glad you guys like it! There is another tutorial being published today.

Tim Dobson
Posted on May 11th, 2008

Another fantastic tutorial i must say Michael. Loving these “Metal Type” tutorials and “Glass Box” type tutorials.

Michael
Posted on May 11th, 2008

Thank you Tim! I’m working on a few new releases as we speak.

Stewart
Posted on May 13th, 2008

Nice stuff indeed and extremely well explained. I’ll be using a couple of your techniques on our site in the near future I think… We’ll reference you of course Thanks!

Mega
Posted on May 17th, 2008

Gunmetal interface?!,
I hardly know her!

ZaFaR
Posted on May 29th, 2008

very nice, good tutorial.

Best of the Web - May - PSDTUTS
Posted on June 1st, 2008

[...] Visit Tutorial [...]

Photoshop Tutorials and Links | Best of the Web - May
Posted on June 1st, 2008

Marcus
Posted on June 2nd, 2008

Nice tutorial. Thanx! Could you provide a tutorial on creating that nice background that you made…in the near future.

Thankx!!!

Ruben
Posted on June 2nd, 2008

VERY nice and moreover, useful! Thanks!

Tutorial | Simple GunMetal Interface « Flash Enabled Blog
Posted on June 2nd, 2008

[...] Read Tutorial No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]

Help Developer - CSS, Dreamweaver, Gimp, HTML, JavaScript, PHP, VB.NET, Visual Studio, Wordpress Tutorials » Blog Archive » Top 10 Photoshop Tutorials of May
Posted on June 3rd, 2008

[...] Gun Metal Effect | Click here to view [...]

Justin
Posted on June 3rd, 2008

I’m really interested in how that background was made too. Most of my efforts to replicate have been way off, and the file you posted is definitely way too small to make into an interface for me.

Feeling generous?

A-not-HER T.o.M
Posted on June 5th, 2008

another great M.i.c.h.a.e.l

B.R.A.V.O.!.!.!.!

afqeivr jaxbpzqf
Posted on June 18th, 2008

xbifuz lycju dsuk vtbqpzxr ctpunrkw hypeznf uota

Fenrus
Posted on July 3rd, 2008

What made this style really work was the creative use of the fonts against this button. I would have liked to see more in the tutorial showing how simple changes in the style of the lettering works against this background.

Good stuff, all in all. Thanks for the tips.