• Home
  • About
  • Advertise
  • contact
Subscribe: Posts | Comments | E-mail
  • 1.RhapsodyAnything & Everything
  • 2.Web DesignStandards rule!
  • 3.Photoshop... Love Buzz
  • 4.The WebNews and Trends
  • 5.Web DevServer Side
  • 6.Hosting...for the web
  • 7.Science... DNA and Stuff

WebScienceMan

Posted on April 7, 2008 - by Khaled

Photoshop Metal Interface Tutorial

2.Web Design 3.Photoshop

Another old Adobe Photoshop tutorial from Kyscorp old archives. I’ll be reposting most of those. This is not a text effect tutorial but it is a simple Photoshop tutorial for beginners that will show you how to use the dodge and burn tools in Photoshop to create a metal-like interface. Quite easy to learn with good results at the end. It is an old tutorial that was created for Adobe Photoshop 7 but you can of course use Photoshop CS, CS2 or CS3. More old tutorials will be posted soon…


In this quick Adobe Photoshop tutorial I will try to show you how
to use Dodge tool (and also burn tool) to

- create new file i chose 175X150

- make a new layer

- with the rectangular marquee tool make a selection and fill it with a dark
shade of gray; I chose #333333

- grab your dodge tool and set the options as it follows: brush: 65, range:
highlights and exposure: 50%

- drag your dodge tool onthe middle of the rectangle to lighten it as if it is
exposed to light also lighten the top and

bottom sides, your shape is no longer plane

- grab your burn tool and set its options to: brush:65 range: highlights and
exposure: 50%

- drag your tool through the dark zones in order to darken them more

- with the magic wand select the white background (working on the layer that
contains your shape)

- hit ctrl + shift + alt + I to reverse selection

- go to: Select >> Modify >> Smooth… and set the sample radius as 10 px

- hit ctrl + shift + alt + I to reverse selection

- hit the delete button to clear it

- this could have been done since the beginning with the first selection but the
point here is to have the final shape

after using the dodge and burn tool to make it look more realistic, also now we
have to learn how to anti-alias the

edges of our shape.

- hit ctrl button and then click on the layer containing your shape (selection)

- go to the channels palette (Window >> Channels) and click on “save selection
as channel” on the bottom of the

channels palette

- go to Filter >> Blur >> Gaussian Blur. Set the radius to 5 pixels or so.

- hit ctrl+shift+L to apply auto levels

- use the dodge tool with the same settings and with a smaller brush (17 px for
instance) to lighten the edges and

the mid section

- now fill your background with black color


- add some more stuff to it in order to obtain what you want ;-)

- Or use as an element of a larger template or interface…


Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • MySpace
  • StumbleUpon
  • Technorati
  • TwitThis
  • Yahoo! Buzz
  • E-mail this story to a friend!
  • NewsVine
  • Design Float
  • DZone
  • Ma.gnolia
  • Ping.fm
  • Tumblr
This entry was posted on Monday, April 7th, 2008 at 8:11 pm and is filed under 2.Web Design, 3.Photoshop. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Related Posts:

  • Create a cool frog in just 3 steps with Photoshop
  • Easily achieve the trendy LetterPress effect with Photoshop
  • Photoshop Twirl Neon Text Effect
  • Adobe Photoshop Express Beta: now Online for free!
  • Easily Create “Obama style” graphics with Photoshop

      • BreedSoftware HostGator
    • Polls

      You are more interested in?

      View Results

      Loading ... Loading ...
    • What I'm Doing...

      • I am 43% addicted to Twitter http://su.pr/1b72Ly from the magical @oatmeal 3 weeks ago
      • RT @naldzgraphics: 30+ Cool Photography Logos http://bit.ly/aUkAO0 2010-08-05
      • RT @the_gman 5 Reasons You Should Avoid Template Web Designs http://dld.bz/q2m9 2010-08-05
      • More updates...
    • Featured News

      • FireFox will be bigger in 2009? by Khaled on April 2, 2009
      • Launching TwittHero by Khaled on March 2, 2009
      • TOP 10 reasons why my Web Design company grossed 5 million dollars of revenue in its first year by Khaled on February 18, 2009
      • 25 WordPress Plugins you need to have a better blog by Khaled on February 12, 2009
      • WebNotes: Annotate, Organize, Share by Khaled on February 8, 2009
    • Archives

      • April 2009
      • March 2009
      • February 2009
      • January 2009
      • December 2008
      • October 2008
      • April 2008
      • March 2008
      • September 2007
      • August 2007
      • March 2007
      • January 2007
      • December 2006
      • November 2006
      • August 2006
      • July 2006
      • June 2006
      • May 2006
      • April 2006
      • March 2006
    • Tag Cloud

      • 2.Web Design 2.Web Design 3.Photoshop Adobe Adobe Photoshop blog bookmark browser Browsers CMS color CSS DNA Facebook FireFox Genetics graphic design Graphics HTML Internet Explorer JavaScript Joomla Mozilla Opera palette Photo Manipulation Photoshop Express Photoshop tut Photoshop tutorial productivity recession recipe Safari Science Sitepoint social tutorial Twitter web web design business web designer Web Development WordPress WordPress plugins WordPress Update
    • Take a look

      • BreedSoftware
      • Kyscorp.com
      • Scriptomania
      • TunisDesign
      • TwittHero
    • Recent Comments

      • CA bikini on 25 WordPress Plugins you need to have a better blog
      • Essex Web Design on Photoshop “Reflection” tutorial
      • Essex Web Design on Create a cool frog in just 3 steps with Photoshop
      • Joint Pain Relief on Page Strength!
      • Vitamin D on How Much Is Your Blog Worth?

    Subscribe: Posts | Comments | E-mail

    Add to Technorati Favorites WebScienceMan © 2006-2009 |Powered by WordPress| KYSCORP.COM 2000-2009| Rainbow Cliff Theme.
    Optimized for FireFox 2+ | Google Chrome 1.0 + |Opera 9+ | Safari 3+ | IE7+ [Web Standards are cool!]