Your guide to letterpress for web design
You’ve probably seen around on websites, the de-embossed or letterpress effect on headline text, headers, logos and buttons. It is getting to be a popular look and a standard element on 2.0 websites these days.
In this article we are going to look at some traditional uses of letterpress in print design, some examples in web design, as well as how to make a letterpress effect for yourself with some tutorials.
Traditonal uses
The letterpress effect that has been popular in web design originally comes from traditional printing processes where the letters are press onto paper, leaving an indent. There isn’t always an indent, as shown in the first couple examples, but depending on the paper and the amount of weight pressed upon the paper there can be. The indent left on the paper is what is being mimicked in web design currently. First let’s look at some examples of traditional letterpress prints.
Type Rules
By kvanhornspan
P6040119
By slowprintspan
Oscar2
By Starshaped Press
Letterpress Skull
By letterpressdelicacies
sara Montour (front)
By paperedtogether letterpressspan
Lola letterpress wedding invitations
By bella figura letterpress
Web Uses
Next we are going to show you some examples of how designers have taken that traditional printing technique and mimicked it with some simple techniques and applied it to web design. Letterpress text can give text or basic images in your website a little more subtle, interesting look, letting them stand out over the rest of the text. We’ll look at the entire websites as well as a full sized version of the letterpress effect to see how the effect works in the overall design, as well seeing the details.
seanhalpin.net
veerle.duoh.com
ambleapp.com
2010.dconstruct.org/
clientr.com/welcome
getjoypad.com
fixoutlook.org
shorthandmobile.com
3diddi.com
cloudania.com
twitterdesigns.biz
paperfoldmedia.com
roxmedia.nl
timowentink.nl
deskography.org
webjunkiexl.de
mojo-themes.com
arandown.com
apple.com
ywamozarks.org
smartupz.com
spoon5.com
jelleversele.be
confessapp.com
dragoninteractive.com
Tutorials
Now that we’ve seen the origin of the letterpress as well as some examples in the web, we are going to look at a couple of tutorials where you can create the same effect using Photoshop, as well as CSS/HTML.
Create a Grungy, Translucent Web Portfolio Design
In this tutorial you will create a web design layout using letterpress for the navigation as well as the headers
Letterpress emboss text effect Photoshop tutorial
Here is a video tutorial, based on the letterpress effect used in the Photoshop CS4 branding.
Create a Letterpress Effect with CSS Text-Shadow
This tutorial will show you how to create a letterpress look using HTML and CSS.
Be creative and design these blank calendar templates from PsPrint.com!
You might also like these articles...
Only comments in English will be approved!
8 Comments
">
it’s helpful and useful post. this post having good images with content.. thanks for sharing this post..
WOW, very nice collection here. Letterpress has always been one of my favorite type styles. Love that ampleapp.com site.
BTW just followed you on twitter :)
I commonly half be taught the articles but such applicable posts encourage me to tryout king sized thanks to.
Unquestionably believe that which you stated. Your favorite justification seemed to be on the internet the simplest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they plainly do not know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people could take a signal. Will probably be back to get more. Thanks
Hi there, You have done an excellent job. I will definitely digg it and personally suggest to my friends. I’m confident they’ll be benefited from this site.
Thanks for sharing this. It’s so fortunate to read your blog, filled with knowledgable message.I think we both can do nonetheless better within the future. it’s an incredible honour in the event you visit our website and provides some helpful suggestions.many thanks to the one who wrote this publish,this was very informative for me.please continue this superior work.
Hi Newport Travel you certainly have plenty to offer. Did you know that you can login to the Travel Agent end of RoomsHere.com where you can see product that has been tagged as “commissionable”?
I’ll immediately grab your rss as I can’t find your e-mail subscription link or newsletter service. Do you’ve any? Kindly let me know so that I could subscribe. Thanks.