Feb 4, 2010

Posted by Sri Ganesh.M in Photoshop | 35 comments

Create Letterpress effect and web download button with PSD

Create Letterpress effect and web download button with PSD

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

Related posts:

  1. Tutorial:Create a stone textured text effect in photoshop
  2. Quick Tip: How to create a different style 3D text in Photoshop
  3. Create animated ad banner in photoshop
  4. Photoshop Tutorial: How to create a planet from scratch
  5. QUICK TIP: CREATE HIGHLIGHT FOR YOUR BUTTONS/NAVIGATION BAR


Author :Sri Ganesh.M

Design Student.self-thought Photographer and Learning new Techniques Daily.I Do Graphic Design & illustrations. Active on social networking. and love to make friends, so add me !! on Twitter

468 ad
  1. 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 My ComLuv Profile

  2. 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 My ComLuv Profile

  3. Great job! simple but effective :)

  4. Nice tutor..
    thanks for sharing

  5. 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 My ComLuv Profile

  6. Simple and nice.

  7. 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 My ComLuv Profile

  8. awesome dude.. thanks for sharing :)
    Mohamed Rias | smashingtips.com´s latest blog ..20+ incredible Gigapixel Photography Inspirations My ComLuv Profile

  9. 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 :) :) My ComLuv Profile

  10. 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? My ComLuv Profile

  11. Simple, will try this.
    Anish K.S´s latest blog ..Apple iTunes 9.0.3 Released – Download/Upgrade My ComLuv Profile

  12. 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 My ComLuv Profile

  13. 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 My ComLuv Profile

  14. Pliggs
    Twitter ID:
    says:

    Fantastic tutorial, thanks for the share.
    Pliggs´s latest blog ..Filmstrip Photos Graphics Tutorials My ComLuv Profile

  15. Thanks for making it simple and easy!
    Chris Thurman´s latest blog ..How to Build Web Cred as a Designer My ComLuv Profile

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

  17. Cool idea. Will definetly try this.

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

  19. 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! My ComLuv Profile

Trackbacks/Pingbacks

  1. uberVU - social comments - Social comments and analytics for this post... This post was mentioned on Twitter by animhut: RT @animhut Create Letterpress effect and ...

Leave a Reply

Twitter ID
(ID only. No links or "@" symbols and one time only)