• 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 January 16, 2009 - by Khaled

Easily achieve the trendy LetterPress effect with Photoshop

2.Web Design 3.Photoshop

photoshop_tut_splash_lp

In late 2008 and early 2009 LetterPress effect is becoming increasingly popular and used in many web sites. So here 2 quick examples on how you can create a realistic letterpress effect with Adobe Photoshop (Version 7 or newer). This will take you just a couple of minutes and you can achieve it even if you are a beginner.

Example 1:

Open Photoshop, create a new document (600 x 400 for instance). I started with a white background and typed the word Letterpress (Font: Century Gothic, 60pt, All caps and set the color for instance to: #00bae8).

photoshop_tut_splash_letterpress2Now we are going to add layer effects (double click the text layer) and simply check the inner Shadow box and set it to these values (shadow color: black #000000):

layer_style

You will obtain this kind of effect:

photoshop_tut_splash2

As you see we’re almost there! You can customize a bit more with overlaying a gradient overlay or you can rasterize the type layer and work on it with burn/dodge tool. You can check out this tutorial to see how to use Dodge/Burn tools. You should be able to end up with a final aspect that looks like this:

photoshop_tut_splash3

I just applied a gradient overlay effect and some burning at the base of the letters.

Example 2:

Ok, let’s see another variation that might work better if you are after a metallic Letterpress effect. Create a new document, fill in the background with a light grey color (#d0d0d0 for instance). Type in LETTERPRESS (Font: Century Gothic, 60pt, All caps, Set tracking to 50 and set the color for instance to: #919191). Now we’re going to add an inner glow effect this time. Set the Inner glow values as following (color: #000000):

layer_style2

The noise percentage can be tweaked and set to what is best for your purpose!

photoshop_tut_splash4

Now apply an outer glow with these settings:

layer_style3

You should obtain something like this:

photoshop_tut_splash5

All you need now is to play with your background to make it look like brushed metal using noise filters and motion blur along with dodge/burn tools. May  be also add a gradient overlay to the text layer and you will have something that looks like this:
photoshop_tut_splash6
If you think I should put more details about the creation of this metallic background or on the last steps of this tutorials let me know!

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 Friday, January 16th, 2009 at 8:40 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 Create “Obama style” graphics with Photoshop
  • Photoshop Wrap background Tutorial
  • Photoshop Metal Interface Tutorial
  • 46 Essential FireFox Extensions Every Web Designer Should Have

      • 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!]