You are on page 1of 34

Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop

http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Quick Tutorial – Creating a Letterpress and
Embossed Text Effects in Photoshop
Posted in Quick Tips, Text Effects, Tips, Tutorials, Web Design •3 years ago •Written by Daniels Mekšs •14
Comments
In the past few years the letterpress text effect has
become a huge trend in web design. It’s being used in
headers, headlines and even interfaces. The love for the
letterpress effect has been transferred from printing
machines to our computer screens. If done right letterpress can be a splendid and neat accent in your
design. Another superb, yet often underrated, text effect is embossing. You may have seen it in some
menus though. Text embossing is another effect which digital art has borrowed from traditional design.
This tutorial will guide you through creating the letterpress and embossed text effect in Photoshop. The
tutorial will be using some basic layer styles together with some more advanced techniques. If you’re a
beginner in Photoshop text effects, continue to read to find out how to achieve fantastic looking
letterpress and embossed text effects in Photoshop.
Final Image
(click on the image to view full-size version)
J oin our FREE Fastrack Webinar this Friday!
TOTAL FOLLOWERS
176,741
Start
Here
Blog About Contact FLAT 1WD.tv
Coding Freebies Inspiration
Tutorials Web Design WordPress
71 210 20
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Background
Having the perfect background when using a letterpress or embossed text effect is very important. The
right background can seriously enhance the overall look and make it more realistic. For letterpress and
embossed text we want the background to be lighter than the text itself. So lets begin.
1. Create a new document
Start by creating a new document. Dimensions I used are 700×400 with dpi set to 72 pixels/inch.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
2. Solid color
Grab the Paint Bucket Tool (G) and fill the layer with #30485a.
3. Adding texture
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Download this Black Leather Pattern and open it up in Photoshop. There’s no need to download the
original size image since we are going to define a pattern from this. I downloaded the 240×240 version.
Once you’ve opened the pattern in Photoshop, go to Edit – Define Pattern and click ok.
Head back to your document and create a new layer. Go to Edit – Fill – Pattern and choose the pattern
you just created.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Set layer’s Blending Mode to Overlay and Opacity to 55%.
Download this Subtle Grunge texture and paste it into your document. Hit Ctrl+T and adjust it so it fits
your document.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Go to Layer – New Adjustment Layer – Hue/Saturation (Ctrl+U) and drag the Saturation slider to the
very left.
Then again go to Layer – New Adjustment Layer – Curves (Ctrl+M) and drag the lower part of the curve
down a bit.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Set layer’s Blending Mode to Soft Light and Opacity to 15%.
4. Darkening Corners
Now select the Brush Tool (B) and choose a large soft brush with around 150px size and hardness set
to 0%. Hit D on your keyboard to set the foreground color to black and background color to white.
Holding Shift brush around the edges.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Now increase the brush size and brush the corners carefully to make a nice rounded frame.
Got to Filter – Blur – Gaussian Blur and set its radius to around 55 pixels depending on your document
size. If necessary adjust your layer’s Opacity. I set my to 75%.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
And you’re done with the background. To unite the layers click on the top one, hold Shift +Ctrl and click
on the bottom layer. Then click Ctrl +G to group them.
Letterpress effect
Select the Type Tool (T) and type in your text. I used a font called Myriad Pro, set to Bold, 95pt size,
Spacing -10 pt. After you’ve typed your text do a right click on the layer and click Rasterize Type.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
There are various ways to create the letterpress effect. I’m going to teach you the easiest and quickest
way, in my opinion. Do a right click on your text layer and select Blending Options. Then apply the
following Layer Styles.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
These are the Styles which worked fine for me. You may want to twiddle with the settings that so that it
looks right. Your text layer should look similar to this one.
Not looking quite like a letterpress effect, right? But we’re going to fix that. Do a Ctrl +click on your text
layer. A selection should appear.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Still with the active selection head to your Background group and find the black leather pattern layer.
Select it and hit Ctrl +J . A new layer should spring up.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Bring that layer’s opacity up to 85%. Then go to Image – Adjustments – Curves (Ctrl+M) and drag the
lower part of the curve down a bit.
With that done, your letterpress effect now should look much more realistic.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
For the final step lets add subtle lighting to our image. Grab the Gradient Tool (G), hit D and X on the
keyboard to set white as a foreground color and black as a background color. Choose Radial Gradient
and draw something like this.
Set the layer’s Blending Mode to Soft Light and Opacity to 45%. Congratulations, you’re done with the
letterpress effect. Click on the image to view the full-size version.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Embossed effect
We’re going to create the embossed text effect on the same background. So delete your letterpress text
layer and the one you substracted from black leather pattern and do a Save As. You should have a
fresh background with smooth lighting on it.
Again start by typing your text. I used the same bold Myriad Pro with 95pt size and -10 Spacing. After
you’ve typed your text rasterize the layer.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Now apply the following Layer Styles to your text layer.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Your text layer should look similar to this one.
Now just like with the letterpress effect do a Ctrl +click on your text layer, select the black leather
pattern and hit Ctrl +J . Name the new embossed2. Bring layer’s Opacity up to 100%. Go to Image –
Adjustments – Curves (Ctrl +M) and drag the lower part of the curve down.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Now apply these Layer Styles to the embossed2 layer.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Now do a Ctrl +Click on your original text layer. Then go to Select – Modify – Expand, enter 1 pixel and
click ok.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
When that’s done create a new layer and grab Paint Bucket Tool (G). Set the foreground color to black
and fill the new selection. Name the layer stroke.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Do a Ctrl +click on your original text layer to select it. Then select the stroke layer and hit delete on your
keyboard.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Select the stroke layer and hit your left arrow key once. Then set the layer’s opacity to 45%. That should
give you a neat emphasizing stroke around your text.
For the final touches select your original text layer again and do a Ctrl +click to load a selection from.
Locate your black leather pattern and click Ctrl +J . Name the layer embossed 3 and drag it above the
stroke layer.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Firstly, set the layer to Normal and lower the Opacity to 20%.
Then go to Image – Adjustments – Curves (Ctrl +M) and drag the lower part of the curve down a bit.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
After that go to Image – Adjustments – Color Balance (Ctrl +B) and in Midtones set the balance to +20
for Blue tones.
To finish up lets add a bit more lighting to our image. To do that go to Edit – Fill and choose 50% grey.
Set layer’s Blending Mode to Overlay. Then grab Burn Tool (O) with large soft brush set to Midtones
and Exposure set to around 30%. Then just brush around the center. If you’d switch layer’s Blending
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Mode to Normal you should see something like this.
Set layer back to Overlay and go to Filter – Blur – Gaussian Blur and set it’s radius to around 30 pixels.
And that’s about it with the embossed text effect. Click on the image to view a full-size version.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
I hope you enjoyed this tutorial on creating letterpress and embossed text effects in Photoshop. Of
course this is not the only way to create the effect, Photoshop is full of possibilities you just have to
experiment. You just have to imagine how would the effect look in real life and then it’s up to you how
you achieve it. Feel free to make suggestions and ask questions if something wasn’t clear to you.
Here is the PSD file for you, if you want to compare your outcome with ours!
If you enjoyed this article, get email updates
(it's free).
J oin over 81,746 Subscribers Today.
Join!
Daniels Mekšs
111 Written Articles •Twitter •Website
Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check
Enter Your email
Submit
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
20+Brilliant and
Advanced jQuery
Effects
Become Master of
Text Effects With 40
Adobe Fireworks
Tutorials
out his photography blog and follow him on twitter.
14
Comments
Best Comments First
Shikeb Ali
Sunday, June 19th, 2011 12:51
2
+3
Andrea Spikes
Monday, June 20th, 2011 22:23
8
+3
Renato Alves
Sunday, June 19th, 2011 21:16
3
+1
WOW ! the embossed text effect is mind blowing and the leather texture made it
look so real and stunning.
This tutorial makes it easy to create great embossed text effects in Photoshop.
Keep coming with great tutorials like this :)
I enjoy the tutorial. Thanks! It’s really helping me to improve my PSD skills.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Elisha
Thursday, May 3rd, 2012 22:52
14
+1
Giuseppe
Sunday, June 19th, 2011 14:55
1
0
Nanang Gunawan
Monday, June 20th, 2011 03:13
4
0
James
Monday, June 20th, 2011 10:37
6
0
Karl Lorenz
Monday, June 20th, 2011 10:51
It DEbossed people. Embossed goes up, debossed goes down.
God and useful post, thanks
nice post,, waiting for next post about Photoshop.
i like photoshop :D
Thanks…
Excellent Photoshop tutorial,
It’s always great to see how text effects can be used in Adobe Photoshop. It
looks like a design placed on leather.
Rly awesome tutorial and a n1 effect. I like it that much!!! There is another
simpler way to get these effect and also u can use it on your website text
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
7
0
Fazreen
Tuesday, June 21st, 2011 10:41
9
0
Giuseppe Lanzetta
Monday, June 27th, 2011 12:22
11
0
Raynold
Monday, June 27th, 2011 06:57
without using pictures.
It’s called text-shadow:
.shadow {
text-shadow: 1px 1px 0px #000;
/* misalignment left – misalignment top – blur – color */
}
To explane these in PS u only have to create 3 simlear text layers and a bg-
layer. One with your basic color, beneath one with a darker color. U have to
move this text-layer with your arrow-keys one left, one up. Beneath this layer u
have a third text-layer with a lighter color which u have to move one right, one
down.
Voila you got the letterpress effect.
And these would be a example for the css code for letterpress effect:
background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
Freaking awesome, both letterpress effect and embossed effect. Thanks for this
trick. Now I have another skill to be practiced.
Very nice effects! I’ve just sticked this tuts!
Great tutorial and techniques well explained!
Thanks for sharing…
Bookmarked & Featured in Tutorials of the Week!!
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Comments are closed.
10
0
Tevin H
Monday, January 16th, 2012 01:03
13
-1
Hafism
Thursday, July 21st, 2011 10:23
12
-1
Sandra
Monday, June 20th, 2011 07:47
5
-1
Want to Get More Clients? Start your FREE video course to learn just that!
J oin over 81,746 Subscribers Today.
Join Now!
This is really good. But how would you apply this to a brick wall backgrounkd?
I’m trying it now :) Thanks dude. Nice tut.
Even if those effects have been described many times in tutorials – I love the
final effect and I will try it out. Tutorial is as always very well written and easy to
follow.
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
Enter Your email Submit
Search
Quick Tutorial - Creating a Letterpress and Embossed Text Effects in Photoshop
http://www.1stwebdesigner.com/tutorials/letterpress-embosed-text-tutorial/[6/27/2014 8:54:54 AM]
1stWebDesigner Ltd. 2008 - 2014. Design by Michael Burns.
Pages
Learn About Our Extraordinary Team
Contact Us
Advertise
Quick Links
FounderTips
Freelance training
1WD Youtube
New? Start here:
How to Build a Website: New? Start Here!
0 Comments
45 Fresh and Free HTML5 And CSS3 Templates You Should See
21 Comments
A Beginner’s Guide on How to Become a Better Graphic Designer
38 Comments
Beginner’s Guide to Wireframes and Tools to Create Them
12 Comments