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, 21 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

81 Comments


  1. fandy

    Simple and useful tutorial


  2. Nikola Lazarevic

    nice and easy.
    thanks for the tut :)


  3. uberVU - social comments

    Social comments and analytics for this post…

    This post was mentioned on Twitter by acrisdesign: Letterpress Text Effect Using Photoshop and CSS http://is.gd/auMzi RT PLZ…


  4. sriganesh

    thanks for the tuts, the css, is new to me :D


  5. Elli Bietsch

    I found this post while surfing the net music. Thanks for sharing will be sure to follow this blog regularly.


  6. Vikas Ghodke

    THanks Fandy, Nikola and Sri for your comments.


  7. Lakshya

    Nice and useful work
    thanks


  8. Richie

    This is very useful tutorial for a beginner in CSS like me. Clearly written and easy to follow. Thanks Vikas


  9. Letterpress Text Effect Using Photoshop and CSS | DesignBump | TextingNews.info

    [...] Read more here: Letterpress Text Effect Using Photoshop and CSS | DesignBump [...]


  10. Benjamin Rama

    Nice tut Vikas ill look out for more , always need to polish the little code I know : 0


  11. Text Processing in Python | Ebook Online Free

    [...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign … [...]


  12. Free Trials

    Great blog design and awesome posts. Keep up the good work!


  13. What can you cook with the rice cookers that have steamers? | Automatic Rice Cooker

    [...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign … [...]


  15. Mihai O.

    Great tutorial!


  16. Elena Nikolaeva

    Very useful, thanks.
    I would also like to know how to do this with Illustrator CS4.


  17. Get branded Electrical Test Tools only at P4T | Used Test Equipment

    [...] Letterpress Text Effect Using Photoshop &#1072&#1495&#1281 CSS | AcrisDesign [...]


  19. pratik

    nice tuts dude
    its very easy to learn and its effective


  20. Herminia Gubler

    I want you to know, your article goes to the core of the subject. Your lucidity leaves me wanting to know more. I will immediately grab your feed to keep up to date with your blog. Saying thanks is simply my little way of saying great job for a good resource. Let In my nicest wishes for your next publication.


  21. Umer

    Yeah, practice is the most important part


  22. 2010-03-16 유용한 링크 | We are connected

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


  23. Ted Goas

    Am I missing something?

    You have a nice, quick way of doing letterpress in Photoshop… but your CSS code is just CSS3 drop shadow that (strangely) changes color on hover. No inner shadow.


  24. CSS Brigit | Letterpress Text Effect Using Photoshop and CSS

    Letterpress Text Effect Using Photoshop and CSS…

    So here today we will learn how to achieve Letterpress effect with photoshop and also with Css…


  25. Atul

    I love this effect and been looking for this for some time. Thanks!


  26. links for 2010-03-17 « 個人的な雑記

    [...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign (tags: css) [...]


  27. links for 2010-03-20 | ニジュウリョク

    [...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign (tags: photoshop) [...]


  28. 10 examples of futuristic CSS3 techniques

    [...] learn how to create a “Letterpress” effect using CSS3 and Photoshop. Source: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/Creating a Polaroid photo viewer with CSS3 and jQuerySeems that Polaroid’s are popular again: [...]


  29. 10 examples of futuristic CSS3 techniques | Web Development News

    [...] Typography is definitely something that can either make a design great, or totally ruin it. CSS3 introduced some really interesting properties to enhance the texts and titles of your designs. In this post, you’ll learn how to create a “Letterpress” effect using CSS3 and Photoshop. Source: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/ [...]


  30. Eddie

    Nice ONE Thanks :)


  31. 10 examples of futuristic CSS3 techniques - Programming Blog

    [...] Typography is definitely something that can either make a design great, or totally ruin it. CSS3 introduced some really interesting properties to enhance the texts and titles of your designs. In this post, you’ll learn how to create a “Letterpress” effect using CSS3 and Photoshop. Source: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/ [...]


  32. Anneliese Balerio

    [...] Trackback > Letterpress Text Effect Using Photoshop and CSS | AcrisDesign – http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css – PUT YOUR HOMESHOOLED TEENS TO WORK! A homeschool mom, Debbie Maubach, has developed a wonderful 9- week Homeschool Entrepreneur course for high schoolers. The course covers many areas of interest including setting up a business plan, marketing strategies, setting prices, and much, much more! The course provides step by step instructions including worksheets and many hands-on activities. It?s a great resource to provide your budding entrepreneur with information he/she needs to launch a business while learning simple accounting, business skills, and advertising acumen. http://bit.ly/bRL6EZ [...]


  33. Letterpress Text Effect Using Photoshop and CSS | Design Newz

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


  34. Efecto de texto tipografía usando Photoshop y CSS

    [...] Efecto tipografía se ve bien en sitios web moderno, tipografía efecto puede ganar usando Photoshop y también mediante el texto-la propiedad sombra de CSS. Así que hoy vamos a aprender a alcanzar el efecto tipografía con Photoshop, y también con CSS y en el final de este tutoriales también hemos recogido algunos tutoriales sobre tipografía en torno al diseño [. . . ] URL del artículo original http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/ [...]


  35. Emma Stone

    this is great ive bookmarked this one hehe


  36. Jae Xavier

    AHA! That’s how its done! Finally I now know the secret of CSS3 letterpress :)

    Thanks!


  38. Verdell Monagan

    Please, can you PM me and tell me few more thinks about this, I am really fan of your blog.


  39. 10 examples of futuristic CSS3 techniques — The Trending Monster Info

    [...] Typography is definitely something that can either make a design great, or totally ruin it. CSS3 introduced some really interesting properties to enhance the texts and titles of your designs. In this post, you’ll learn how to create a “Letterpress” effect using CSS3 and Photoshop. Source: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/ [...]


  40. Kevin Althaus

    Thank you for this.


  41. Ubunut

    Hi just wanted to point out that you can use multiple text-shadows separated by “,”(comma)

    example: text-shadow: white 0px 0px 4px, #FF3 0px -5px 4px;

    my humble try at the inner shadow :P
    http://cl.ly/rrE


  42. WPExplorer

    I think your first color is off…you say to use fff7f7 however the final result looks more like e4e4e4


  43. Sivaranjan

    Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.


  44. rehabilitasyon

    Hi, I’m beginning to learn css program. Write your thank you letter will help me a lot of work.


  45. Some helpful Tweeters (#ff) 03/19 « FAQPAL Blog

    [...] @acrisdesignLet­ter­press Text Effect Using Pho­to­shop and CSSLet­ter­press Text Effect Using Pho­to­shop and CSS [...]


  46. 11 Killer CSS3 Text Effects to replace Photoshop

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


  47. Blog « apparentlyrich.com

    [...] I also found another very good Photoshop tutorial courtesy of Vikas Ghodke of Acris Design. [...]


  48. istanbul mutfak dolabi

    yes great tut images


  49. Julia

    Just one note – that doesn’t work for IE7,8


  50. Posicionamiento web

    also good photoshop tutorials al lynda.com but this one is very nice

Newer Comments »

Leave a Reply