Letterpress Text Effect Using Photoshop and CSS

Posted by on March 13th in Tutorials.

letterpresseffect

Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. So here today we will learn how to achieve Letterpress effect with photoshop and also with Css and in the end of this tutorials we have also collected some tutorials on Letterpress around design community.

LetterPress effect Using Photoshop

So today we are going to learn how to get letterpress effect using photoshop, i know this tutorial has been posted couple of times over other blogs of design community but one of our loyal reader asked me to teach letterpress with photoshop and css so we decided to post this tutorial.

Step 1 : Open New Document

Open new document in photoshop with size 535 x 250.

letterpress photoshop

Step 2 : Background

Now unlock background layer, create new layer over background layer then select rectangular marques tool and select whole area. Now Select Paint bucket tool with foreground color #fff7f7 and then give noise of 1px to it.

letterpress photoshop

Step 3 : Layer style for Text

Now write some text on layer, Here we wrote AcrisDesign.

letterpress photoshop

Now we will add some Drop shadow and inner shadow to text. To do this double click on text layer and apply below settings.

letterpress photoshop

letterpress photoshop

Do you want to clear the EX0-110 exam successfully in the first attempt? How to achieve this? Exams King has released the most up-to-date practice questions for HP2-B54 Exams and ISEB Certifications which are useful and valuable for you to prepare the exam well.

letterpress photoshop

Final OutPut

letterpress photoshop

LetterPress Effect Using CSS

Now the same effect we can achieve using CSS text shadow property.
First of all we need to write HTML document, check this below Code.

<div id="letterpress">
<h1>AcrisDesign</h1>
</div>

Now after done with HTML we have to write some CSS to style it. To get our letterpress effect will use textshadow, textshadow css property deals with x-offset, y-offset, shadow blur and the actual colour of the shadow.
Note : Font color must be darker than background color, and shadow color must be lighter than font color.

body {
	background-image:url(../images/Untitled-1_03.gif);
	background-repeat:repeat;
}
#letterpress {
	margin-top:200px;
	text-align:center;
}
#letterpress h1 {
	font-size:60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #504f4f;
	text-shadow: 0px 2px 1px #bbbaba;
}
#letterpress h1:hover {
	color: #666;
	text-shadow: 0px 2px 1px #333;
}

640-822 training for guaranteed success! Guaranteed 640-863 practice questions with complete solution to help you pass 642-072 exam on first try.

View Demo

Some Usefull Tutorials On Letterpress

How to Create Inset Typography in Photoshop

Create a Letterpress Effect with CSS Text-Shadow

Creating Editable Letterpress Styled Text

Create a Sleek Pressed Letter Design

Grooveshark design style in Fireworks

Ps Letterpress emboss text effect

Connect faster with high speed internet from USDigitalCable.com

If anyone recommends you 640-822 exam product, 640-863 dumps, 642-072 certification material, N10-004 braindumps and 70-667 dumps, he is well wisher of you.

Vikas ghodke, 25 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

81 Comments

  1. [...] Letterpress Text Effect Using Photoshop and CSS [...]

  2. [...] is a wonderful letterpress text effect which is a must [...]

  3. Excellent and easy to follow tutorial, looking forward to text-shadow integrated into more browsers, Thanks

  4. I love the elegant look and will use the CSS solution asap.

    Have a great 2011!

  5. Very good tutorial. is perfect for my new project.
    thanks!

  6. [...] Красивый текстовый эффект с помощью фотошопа и CSS [...]

  7. [...] 10. Letterpress Text Effect Using Photoshop and CSS [...]

  8. [...] Efecto Letterpress (con ayuda de Photoshop) [...]

  9. I very thankful to find this web site on bing, just what I was searching for : D besides bookmarked .

  10. Hey, you used to write great, but the last few posts have been kinda boring¡K I miss your tremendous writings. Past few posts are just a little out of track! come on!

  11. woww.. your article is good. its helpful me.. keep posting buddy :)

  12. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  13. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  14. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  15. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  16. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  17. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  18. Great tip, simple yet very effective

  19. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  20. you could always apply the shadow and glow like this

    0 1px 0px #fff, 0 -1px 0px #000

  21. Great website=D I will require a good amout of time to examine your stuff:D

  22. [...] 13. Letterpress Text Effect Using Photoshop and CSS [...]

  23. Excellent post!
    Thank you, you have been most helpful.

  24. thanks for this post , this is very interesting.

  25. Great, I think this has been well explained and will give it a go myself..

  26. Hi i did enjoy the blog as well as topics i am looking forward to any updates thanks!

  27. [...] 2. Letterpress Text Effect Using Photoshop and CSS [...]

  28. [...] 5. Letterpress Text Effect Using Photoshop and CSS [...]

  29. thank u very much for this post

  30. Well Done ! Nice post.

  31. Hello, I have found your blog on google and read some articles. I like what you write and i have added a bookmark.
    Keep up writing and i will keep up reading.

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.