AnimHuT
  • Articles
    • Other Topics
    • Picture Of The Day
    • Review
    • Viral Videos
  • Contest
  • Freebies
    • Brushes
    • Font
    • Icons
    • Infographics
    • Patterns
    • Photoshop PSD
    • Textures
    • VECTORS
    • Wallpaper
  • Inspiration
  • Photography
  • Themes
    • Plug-ins
    • WordPress Themes
  • Tutorial
    • After Effects
    • Codex
    • Flash
    • Illustrator
    • Photoshop
      • Text Effects
    • Quick-Tip
Home » Photoshop » Create Letterpress effect and web download button with PSD
Feb04 36
Create Letterpress effect and web download button with PSD

Create Letterpress effect and web download button with PSD

Posted by Sri Ganesh.M in Photoshop

email
print

Today’s post will be two Photoshop tutorials, the first one will be the famous letterpress effect and the second one will be web download button. I made these two tutorials in one post to give the readers a quick way to learn the two types of effects at the same time. Let’s jump in to the tutorial.
Please note :

In our blog we have a open giveaway for each month apart from special giveaway, the 2 top commentators win ad slots in our blog and each month it reset and select the winner, so participate it and anyhow it’s a do follow blog and you’ll get back links also


Tutorial #1 :Letterpress effect

Step :1
Create a document size for your need, here i created 580px width X 300px height and choose bright colour for background.
its better to create layers and do your works, which really helps in editing the each layers later.
Short cut key : Ctrl+Shift+N or click “Create a new layer “ from the layer palette.
Step:2
Select the text tool from the toolbox menu ‘ T ‘ and type DOWNLOAD – choose Bold Text, i used November text : see the output.

type text now

step-2 type the text now



Step :3 Add the layer style effect now:

Innershadow

step3- innnershadow

step3- add innnershadow

(II) Coloroverlay
step3- coloroverlay

step3- coloroverlay

and decrease the blending option to Flow to 0% to 30% and enter.
Output : the color-overlay can be changed according to your needy.
final output of letterpress effect

final output of letterpress effect

Tutorial #2 : create Web Download button

Step : 1
Create the document and choose black color as your background,

1) Create a new layer -> Ctrl+Shift+N
2) Select the rectangle marquee tool (M)
3) Fill it with your color(color doesn’t matter
)

Step:2
Add the layer style effect to the rectangle
Inner Glow :

innerglow effect

innerglow effect

gradient overlay: value #0d96db to #87dcff
Gradient overlay

add Gradient overlay

Stroke: gradient value : #068acc to #34b2f1

add the stroke value


optional : add drop-shadow effect – default value. And inner shadow value if you need, but it wont show you much difference. I didn’t use here.

step : 3
Now you can add the normal text “DOWNLOAD “ OR the previous letterpress text effect. Arrange the size of the text effect and text font. Here is the final output of this tutorial.

One Golden rule: In “Photoshop “play with the layer styles and blending option. You can create many good designs.
Hope you like this tutorial, need suggestion-anything if you don’t like it, Hit it on the comment section.


Download PSD




Best quality 70-450 dumps and JN0-522 training material to help you pass 1z0-042 exam.

0

About Sri Ganesh.M

Rebel By Nature =) Founder and Editor of this blog. Share Knowledge and Inspiration through this Blog and vice versa.., This is a blog run by designers for the betterment of designers. You can Find me here : " Google plus " | Twitter | Facebook

  • http://richworks.in Richie

    Very simple and easy tutorial to achieve the letter press effect. Good for beginners.
    .-= Richie´s latest blog ..25+ beautiful examples of hand drawn elements in web design =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks RICHIE , yes it helped for my offline friends also.

  • Shurandy Thode

    I agree with Richie. Simple yet useful great article Sri. :)
    .-= Shurandy Thode´s latest blog ..Quick, fancy, dirty yet useful hover menu using jQuery hoverIntent =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks Thode i hope you both like it

  • Pingback: uberVU - social comments

  • http://slimmity.com Omar

    Great job! simple but effective :)

    • http://www.animhut.com/ Sri Ganesh.M

      thanks omar

  • http://www.technoskillonline.com sudharsan @ technoskillonline

    Nice tutor..
    thanks for sharing

    • http://www.animhut.com/ Sri Ganesh.M

      thanks sudharsan

  • http://www.millionclues.com/about Arun Basil Lal

    Download buttons look elegant, thanks for sharing the PSD, most people never do that ;)
    .-= Arun Basil Lal´s latest blog ..Bandwidth Monitoring Tool for Windows Vista and Seven =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks for you kind words, top bloggers give :) source files ;)

  • http://acrisdesign.com vikas ghodke

    Simple and nice.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks vikas

  • http://freebiespress.com Joseph

    Here have 22 different buttons with psd files i fav, sharing with guys : )
    http://button-download.com/
    .-= Joseph´s latest blog ..Free Apple iPad Icon Set =-.

    • http://www.animhut.com/ Sri Ganesh.M

      if you need to promote , submit in the user-link feed.

  • http://www.smashingtips.com Mohamed Rias | smashingtips.com

    awesome dude.. thanks for sharing :)
    .-= Mohamed Rias | smashingtips.com´s latest blog ..20+ incredible Gigapixel Photography Inspirations =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks Rias, and your giga pixel is good

  • http://tech18.com Sunil Jain

    I liked it dude :) :) , but why have you written if you don’t like it then hit the comment section ??? ;) ;)
    .-= Sunil Jain´s latest blog ..Hi everyone :) :) After long time :) :) =-.

    • http://www.animhut.com/ Sri Ganesh.M

      the commentators are the real judge and need their feedback to improve my skills, thats y !

  • http://www.bloggodown.com gautam hans

    Great tutorial. I mess a lot with photoshop, but never get it right, but thanks for giving such a good tutorial
    .-= gautam hans´s latest blog ..Do you Follow a Blog Posting Workflow? =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks hans ! love to hear this from you !

  • http://www.technicstoday.com Anish K.S

    Simple, will try this.
    .-= Anish K.S´s latest blog ..Apple iTunes 9.0.3 Released – Download/Upgrade =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks anish and welcome back

  • http://www.hellboundbloggers.com/about/ S.Pradeep Kumar

    Really simple and useful tutorial Ganesh. Thanks for sharing the PSDs. :)
    .-= S.Pradeep Kumar´s latest blog ..15+ Tips To Optimize Images For Search Engines =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks sam i hope you like it

  • http://www.iwoodpecker.com/ iWoodpecker

    Looks like this tutorial is simple and original at the same time. I’ve been using this effect for a while.. But I didn’t think, that it could be a useful tutorial..

    PS. Fantastic web design you have here. Will be back by the time you’re next post is published!
    .-= iWoodpecker´s latest blog ..Let This Girl Survive – A Lump of Ice Fell on Her Head Right From the Roof of Multi-Floored Building – on 5th February, 2010 =-.

    • http://www.animhut.com/ Sri Ganesh.M

      for pro it may be but for the beginners it sure work and mainly for tech bloggers !! and welcome to AnimHuT

  • http://www.faqpal.com Pliggs

    Fantastic tutorial, thanks for the share.
    .-= Pliggs´s latest blog ..Filmstrip Photos Graphics Tutorials =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks pliggs,

  • http://www.visualswirl.com/ Chris Thurman

    Thanks for making it simple and easy!
    .-= Chris Thurman´s latest blog ..How to Build Web Cred as a Designer =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks Chris. it really helps for my tech readers and other new designers :)

  • http://www.bestwebfreebies.info/desktop-applications.php Johnathon Picasso

    This is good because it really comes and it comes quickly.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks and happy it comes good !!

  • Kushal Chap

    Cool idea. Will definetly try this.

  • http://www.designjuices.co.uk jared thompson

    such a simple to follow tutorial, i hope to carry this out later :D

  • http://inzoneinternet.com/ Inzone Internet

    Cool tips sri, I’m just learning so I want as much tips as I can.
    .-= Inzone Internet´s latest blog ..Ask Me a SEO or Blogging Question! =-.

  • http://www.krop.com/ariarsyadi/ Ari Arsyadi

    I think both tutorials are the foundation to most high quality buttons we see on the internet. Nicely put and easy to follow. Thanks.

Our Advertisers :

Subscribe to AnimHuT (it’s Free)

Add Animhut on  Google plus animhut Free  Email Subscription for design updates animhut on twitter Animhut rss subscription for latest Updates Join our Official  Facebook Page Animhut Flickr Pool

Our Facebook Official Page
Follow @animhut

Archives

Community News

  • 24 Creative Newsletter Designs for Your Inspiration

    Here’s a collection of creative newsletter designs which should give you a ton of ideas and inspiration!

  • Beautiful Examples of Macro Photography

    Macro photography is taking close-up photographs of small object at greater than life size. This is one of my favorite…

  • 50 Beautiful Flowers Photography

    Spring is the time when beautiful flowers blossom and the perfect time to enjoy the beauty of nature. In north,…

  • 10 Websites to Download Free Fonts

    We all now how hard it is to find that perfect font for your graphic design project but whatever your…

  • Effects of User Behavioral Data & User Actions on Google

    Google is using this knowledge to prioritize the search results and to assign the PageRank to Websites. There is a…

●● We Recommended ●●



● Best Web Hosting Review
● Best Web Host Companies
● Review BlueHost
● China wholesale
● factory
● Free Website Design
● Website builder
●Mactheripper
● Coupon Codes
• Freelance Web Designer
• Direct TV Packages
● InternetPhonePackage.com
•Best WordPress Themes
•iPage Web Hosting
● Web Hosting Services
●Youtube to MP3

Search by Tags

ANIMHUT art history Articles caricature character design Contest Daily Photography Daily photos design history digital painting Flickr Freebies Funny Videos google doodles graphic design Icons illustration Illustrator InfoGraphics Inspiration Inspriation mascot Patterns Photography Photogrphy Photoshop Photoshop tutorial picture of the day Poster Project365 Quick-Tip Review roundup sriganesh stock image stress buster Texture Tutorial twitter VECTORS Videos Viral Video Wallpaper Wordpress wordpress theme

Hall of Fame :

Friends

  • AdmixWeb
  • ArtAtm
  • BloggerJet
  • CreativeOverflow
  • DesignModo
  • Designrfix
  • Desizntech
  • Graphik Design Agency
  • Logolitic
  • Orphicpixel
  • premiumpress coupon code
  • Skyje
  • Smashingshare
  • Underworldmagazines
  • Visionwidget
  • Webdesignfan
  • Webexpedition18

Pages

  • DESIGN NEWS
  • Who We are ?
    • Authors
  • | CONTACT |
  • Site Map
  • Follow us
    • Google +
    • Like AnimHuT fan page
    • @animhut (Twitter)
    • StumbleUpon Profile
    • Add me on Facebook

© 2009-2012 AnimHuT | Designed by Elegant Themes | Powered by WordPress| Sherweb