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.
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.
Step 3 : Layer style for Text
Now write some text on layer, Here we wrote AcrisDesign.
Now we will add some Drop shadow and inner shadow to text. To do this double click on text layer and apply below settings.
Final OutPut
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Css Letterpress and Drop Shadow</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="letterpress"> <h1>AcrisDesign</h1> </div> </body> </html>
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
44 Responses to “Letterpress Text Effect Using Photoshop and CSS”
Leave a Reply
-
HTML5 Website Layout Tutorials and Inspiration
67 Comments
-
Create Portfolio Website With CSS/jQuery
47 Comments
-
65 Well Designed Ecommerce website for Design Inspiration
46 Comments
-
40 Free Black Wordpress Themes
46 Comments
-
15 Ways to Improve Freelance Creativity
44 Comments
-
Letterpress Text Effect Using Photoshop and CSS
44 Comments
-
Animated Landscape Using CSS and jQuery
43 Comments
-
117 Social Network Icon Set To Spice Your Web
41 Comments
-
70 Dazzling Light Effect Photoshop Tutorials
40 Comments
-
25 Flash Website Galleries for Inspiration
38 Comments
Simple and useful tutorial
nice and easy.
thanks for the tut
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…
thanks for the tuts, the css, is new to me
I found this post while surfing the net music. Thanks for sharing will be sure to follow this blog regularly.
THanks Fandy, Nikola and Sri for your comments.
Nice and useful work
thanks
This is very useful tutorial for a beginner in CSS like me. Clearly written and easy to follow. Thanks Vikas
[...] Read more here: Letterpress Text Effect Using Photoshop and CSS | DesignBump [...]
Nice tut Vikas ill look out for more , always need to polish the little code I know : 0
[...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign … [...]
Great blog design and awesome posts. Keep up the good work!
[...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign … [...]
[...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign [...]
Great tutorial!
Very useful, thanks.
I would also like to know how to do this with Illustrator CS4.
[...] Letterpress Text Effect Using Photoshop аחԁ CSS | AcrisDesign [...]
[...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign [...]
nice tuts dude
its very easy to learn and its effective
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.
Yeah, practice is the most important part
[...] Letterpress Text Effect Using Photoshop and CSS [...]
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.
Letterpress Text Effect Using Photoshop and CSS…
So here today we will learn how to achieve Letterpress effect with photoshop and also with Css…
I love this effect and been looking for this for some time. Thanks!
[...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign (tags: css) [...]
[...] Letterpress Text Effect Using Photoshop and CSS | AcrisDesign (tags: photoshop) [...]
[...] 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: [...]
[...] 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/ [...]
Nice ONE Thanks
[...] 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/ [...]
[...] 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 [...]
[...] Letterpress Text Effect Using Photoshop and 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/ [...]
this is great ive bookmarked this one hehe
AHA! That’s how its done! Finally I now know the secret of CSS3 letterpress
Thanks!
[...] http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/ [...]
Please, can you PM me and tell me few more thinks about this, I am really fan of your 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/ [...]
Thank you for this.
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
http://cl.ly/rrE
I think your first color is off…you say to use fff7f7 however the final result looks more like e4e4e4
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.
Hi, I’m beginning to learn css program. Write your thank you letter will help me a lot of work.