Overview of the Tutorial
Pressed lettering is showing up more and more these days in web design. Like any other trend, you have to be careful not to over use it. Already you can recognize those people that are doing it well and those that are not. Recently, I read a post at Smashing Magazine that highlighted pressed lettering as one of the Web Design Trends for 2009.
All this got me to thinking about how to create such an effect. Turns out, it is rather simple. This tutorial will layout the steps to design pressed lettering so you can use this effect on your next project. So here we go!
A Quick Preview
I’m not a big fan of having to scroll to the bottom of a post to find a final result of a tutorial, so we’ll start with this quick preview.
Step 1
Bring up a new document in Photoshop at a size of your choice. Fill the background layer with black. To do so, change the foreground color to black and hit ‘alt + backspace’ alternatively you could set the background color to black and hit ‘cmd + backspace’.
Step 2
We need to create a background of interest for our pressed letters to be punched out of. I decided it would look rather sleek if we used an abstract space background. So we’ll spend the next few steps creating this. Start by making a new layer above the background layer and call it ‘Stars’. To create a new layer click the shortcut icon in the layers palette or click Layer->New->Layer. Again fill this layer with black. Next, click Filter->Noise->Add Noise and drag the slider all the way to the max of 400%. Make sure uniform and monochromatic are checked, then click ok.
Step 3
Now blur the stars layer. Click Filter->Blur->Gaussian Blur and change the radius to 0.6px.
Step 4
In this step we’ll adjust the levels to bring the stars into focus. Press ‘cmd + l’ on the keyboard and drag the black slider to the right, close to the white one, like what is referenced below. Play around with this until you have an amount of stars you are happy with.
Step 5
The reason we started with a black background and then the stars layer on top was so that we could keep things flexible. Now if the stars you made are a little too bright for your liking, just drop the opacity on the stars layer a touch. I dropped mine to 70%.
Step 6
Add a new layer and call this one ‘Clouds’. Of course naming your layers is optional, but it helps keep things organized, and provides an easy way for me to reference back to them. Set your foreground color to black and your background color to white. Then click Filter->Render->Clouds.
Step 7
Grab the smudge tool, which is tucked away under the blur tool by default (shortcut ‘r’ on the keyboard). Change your brush size to something around 1/4 of the size of your canvas and change the strength to about 75%. Then click and drag upwards a few times over to smudge the clouds until you have something that resembles the image below.
Step 8
Next up, we are going to use a couple of gradient layers to add some interesting colors to our space background. Make a new layer at the top of the layers palette and call this one ‘Gradient 1′. Choose the gradient tool and make a simple purple to red to purple gradient like the one that is referenced below. Click and drag out the gradient from the top left to the lower right. Then change the blend mode of the ‘Gradient 1′ layer to Multiply.
Step 9
Add another layer and call this one ‘Gradient 2′. This time make an even more colorful gradient. I used the one that is referenced below that goes from purple to yellow to purple to red. Any gradient similar to this will do the trick. It’s a good idea to experiment with different color and layer combinations, as well as different blend modes. Just keep in mind it’s a space scene, so bright colors tend to work best. I used soft light for my blend mode and this is what I have so far.
Step 10
Add another layer at the top and call this one ‘Lens Flare’. I know, I know, the lens flare filter is cheesy and played out, but I can’t help myself :) Plus, it’s a quick and effective technique for a simple space background. Alright enough rationalizing it. Fill that layer with black. Then click Filter->Render->Lens Flare. Make sure the type is set to 50-300mm Zoom. Set the brightness to around 95%. Then drag the Flare Center to the top left area. Click ok. Then change the blend mode of that layer to ‘Lighten’ and the opacity to around 70%. You should now have a lens flare like the one pictured below.
Step 11
In this step we are going to use a layer mask to bring more of the starry background back into play. First off, create a new layer group by clicking Layer->New->Group. Call that group ‘Space Background’. Then click and drag the ‘Clouds’, ‘Gradient 1′, Gradient 2′ and ‘Lens Flare’ layers into your newly created group. With the ‘Space Background’ group selected, add a layer mask by clicking Layer->Layer Mask->Reveal All. Then grab the gradient tool and set it to a light gray to a dark gray radial gradient. Note, the radial gradient option is the second icon from the left in the gradient styles options at the top in the gradient properties. Click and drag a gradient on the mask to reveal more of the stars around the outside of your image. Keep playing with this technique until you have a space background that works for you. Here is where I’m at so far.
Step 12
OK, now that the preliminary work on the space background is complete, we can go to work on our text portion of this tut. We’ll need a block to press the text out of. So add another new layer, this time above the ‘Space Background’ group. Call it ‘Rounded Box’. Grab the Rounded Rectangle tool (it’s nestled under the Rectangle Tool) set it’s radius to about 10px. Don’t worry about the color for now, just click and drag out a rounded rectangle and center it in your canvas.
Step 13
Double click on the ‘Rounded Box’ layer to bring up Layer Style window. Add a gradient overlay that goes from near white to a light gray similar to the settings shown below.
Step 14
Now we need some text to work with. You’re welcome to come up with a cool saying, or just follow along with what I did below. The key is to pick a thick font for the large and important text. I used two of my favorite free fonts to achieve my design. They are Delicious and Museo. I centered everything and added a couple of lines for good measure. As a tip, if you are going to rotate any text like I did with the word ‘BLOG’ use the free transform tool (‘cmd + t’) hover over a corner then hold shift as you drag to increment the angle by 15 degrees at a time. Alternatively you could change the rotation amount in the properties of the free transform tool. No matter what you come up with just keep it plain text for now and ignore the color, because we won’t need it when we press the letters. I used black just so I could see it easily.
Step 15
In order to punch out the text, you will first need to select it. Hover over the thumbnail of one of your text layers in the layers palette, then hold ‘cmd’ and click the mouse. This will select the letters in the layer that you clicked.
Step 16
Now click back on your ‘Rounded Box’ layer. Then right-click on that layer and choose ‘Rasterize Layer’ from the list of option that come up. It’s also a good idea to make a copy of the ‘Rounded Box’ layer at this point, before we add the next few destructive steps. To do so hit ‘cmd + j’ to copy the currently selected layer.
Step 17
With the top (if you made a copy in the last step) ‘Rounded Box’ layer selected press ‘cmd + x’ to cut the pixels on that layer. Then click the eye icon in the text layer to hide it. If you made a copy of the ‘Rounded Box’ layer in the previous step be sure to hide that as well.
Step 18
Repeat the last two steps on all the rest of your text layers until everything is punched out. A couple of quick notes; if you hold shift down while you ‘cmd + click’ you can select multiple layers at once. Also, if you made a small text layer like my little sentence at the bottom, it is best to not punch that part out. You should end up with something like what I have below.
Step 19
Lastly, we need to add some depth to our layers. Double click on the ‘Rounded Box’ layer to bring up the Layer Style Window then add a drop shadow to it, with similar settings to what is shown below.
The Final Result
Here is what I ended up with.
Final Thoughts
It’s really quite simple to add this sleek effect to your designs. It works great for a little extra flare on headers. Let me know what you think of this tutorial and growing trend. Drop me a comment below.
Sharing is Caring
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
MyInkBlog
Email Updates
Twitter
Facebook
Flickr
Designmoo
Digg
Stumble Upon
February 6, 2009
Great tutorial on a very cool effect. I have seen this around and think it’s very sharp looking.
Matthew´s last post was… UX Spotlight: 11 User Experience Designers You Should Follow
February 6, 2009
Very nice, I love photoshop but it hates me, I will try this though.
Thanks for the share.
Pliggs´s last post was… FREE Pligg v9.9.5 template – SocialCom
February 6, 2009
Thanks for writing such a detailed and useful tutorial on this topic — I learned a lot from this! I found you on Twitter and will be sure to revisit your site again soon!
John´s last post was… What To Do Before You Reinstall Windows
February 7, 2009
Great tutorial! And great final product, this has been very popular lately!
Thanks!
February 7, 2009
Thank you very much for this tutorial! Since I read about letterpress type being a web design trend for 2009 I’ve been wishing for a tutorial like this to come around. Great work, keep it up!
February 7, 2009
Great Tut,
I loved that interface.
John MacMenamin´s last post was… DesignStream.org Design News Launched!
February 7, 2009
Great tutorial!
AJ Troxell´s last post was… Hi-Res Photoshop Brushes “Broken Tales”
February 7, 2009
great job!
thx a lot
February 7, 2009
Really nice tutorial.
February 8, 2009
Awesome!… i gotta agree with @pliggs photoshop hates me too but you make it look soo simple!
February 9, 2009
Great tutorial, I will actually use this one day, it teaches me alot, thanks :)
Craig Farrall´s last post was… January Roundup
February 9, 2009
Great, I was thinking of doing something like this after noticing the trend on Smashing, great tut! Couldn’t have done it better myself!
February 9, 2009
Great tut, thanks for sharing this.
I’ve seen a lot of letterpress stuff recently, particularly on business cards.
Patternhead´s last post was… Free Vector and Pixel Repeat Patterns – Funky Circles Set 1
February 9, 2009
Your tutorial structure was great but the pressed letter design didn’t really start until Step 13. I’m curious as to why you chose to make your first 13 steps a space background.
In pressed letter design you are trying to simulate a sense of depth, as if the item with the text “punched out” was slightly raised. In order to achieve this sense of depth you used the drop shadow technique, which is great for this and in my opinion the best way to do it. But your background doesn’t fit the work.
For example, if you were trying to simulate pressed letter design in a business card, the illusion of the punched out effect would only work if the card was resting on some sort of table or other close-to-the-card surface. This way you could see right where the shadow stops – which is where it hits the surface itself. In this work, being in front of space, the shadow stops but it stops abruptly for no reason. Its in front of, well, outer space. Which is ultimately endless.
February 9, 2009
@Dan Thanks for the comment, all your points are valid. The short answer to your question is that I thought the effect worked well on a space background. The crux of the tutorial was to show the user how simple and effective creating a pressed letter effect in Photoshop can be. So the background is merely artists’ license as to what they prefer. I tend to think abstractly this effect can work on just about anything, but should you be going for photo-realism you should stay away from sci-fi looking space backgrounds all together :)
February 9, 2009
Just curious as to why you didn’t just apply a layer mask to the rounded box layer and use the letters as the mask…non-destructive and achieves the same effect!
February 9, 2009
@Alex Good call. I love to keep things flexible and non-destructive. That would be a good way to achieve the same thing! Thanks for the input.
February 9, 2009
I think this is a good attempt on the example in the smashing magazine post but doesn’t quite get there. Are there some steps that are missed here?
February 9, 2009
pretty easy done – I like it too, thanks! :)
Dainis Graveris´s last post was… 30 Deviant Digital Artists, Painters, Illustrators Worth To Watch
February 10, 2009
Well done. Very easy to understand.
Paris Vega´s last post was… How to beat Desktop Tower Defense
February 11, 2009
Very well written and easy to follow, thanks! I just used this process to create my Valentine’s Day card for this year.
Keep up the great work!
February 13, 2009
Wonderful tutorial. I’ve been looking for an easier way to make my own space background for ages.
Thanks!
February 13, 2009
That background is amazing! Very impressive! :)
February 14, 2009
Nice tutorial, but there is one which is not completely clear to me. At step 11 I am not able to apply the layer mask, so I can only do the effect once. Does anyboidy maybe know the reason why or do you maybe a different way of getting to the same result
February 15, 2009
@Thorndrake Were you able to make the layer group and put the layers in that folder? Did the layer mask show up? What version of Photoshop are you using?
February 16, 2009
Hello,
just a quick question. Having trouble getting the gradients that I created to get over in the layer panel?
Doesn’t seem to be saving it there?
Could someone guide me through this process? step 8,9?
thanks.
ron
February 16, 2009
@Ron I’m not sure what you mean when you say “get over in the layers panel”? Do you mean get the layer at the top of the layers? Or do you mean to place the gradient in the layer?
February 16, 2009
Sorry.
I mean the latter.
To get your gradient into that new layer.
I have no problem making the gradients but cant seem to place them in the layer.
thanks again.
ron
February 16, 2009
@Ron What happens when you click and drag on the canvas in your layer you have selected with the gradient tool selected?
February 17, 2009
Hello Andrew,
thanks again for the response and I still seem to have problems with this step? I’m trying what you reccomend but to no avail. Nothing is happening at all. I just a have a blank layer it seems in the layers box.
sorry again for this .
ron
February 17, 2009
Hey Andrew,
I was able to get a group and to get the icon of a layer mask next to the group name. Further more I am using CS4 version 11.0. The only problem is that I can’t find where I can apply this mask, normally I just right-click on the icon and then one of the options is apply.
Thanks for the help ;-)
February 18, 2009
So far great tutorial. But when I get the the point where it says to click on rounded box layer, then right click and choose “rasterize layer,” rasterize layer is grayed out. I worked through the whole tutorial twice and keep getting the same results. Any suggestions?
February 18, 2009
@Thorndrake I’m still a little confused what you are asking. Hopefully this helps: Just click on the mask thumbnail to make sure that’s highlighted, then grab the gray to white radial gradient described and draw that out on the canvas. That should mask the whole group like in the tutorial steps.
February 18, 2009
@Elizabeth you are not the only one who’s had this issue, although I can’t figure out why it’s happening. The bottom line is that step is there so you can cut away the pixels of that rounded box. So you need to not have it as a shape layer. Try to convert it to a smart object instead. There is also a chance that it is already rasterized, in which case just proceed to the next steps. Let me know if this helps.
February 21, 2009
Sweet tut dude, nice one.
liam´s last post was… How-To: Taking WordPress One Step Further
February 22, 2009
Amazing, tutorial… Now I can create Mac OS X Leopard’s default wallpaper through this tut.. =D thanks
March 2, 2009
Great tutorial – thanks! :)
March 4, 2009
Just what I needed, I’m going to use this today. Thanks
March 10, 2009
Thanks for tutorial, here’s my try http://iniwoo.net/2009/03/10/photoshop-tutorial-sleek-pressed-letter-design/
March 10, 2009
@T-Law Nice variation, thanks for sharing! And I appreciate the link up on your blog.
March 10, 2009
Nice tutorial there, but am having problems with Step 16 i have selected the text and when i right click on the Rounded Box layer the Rasterize Layer option is inactive and i tried smart objects too but no use!
Narendra.s.v´s last post was… Everex Cloudbook: Affordable option in UMPC-type subnotebooks
March 11, 2009
@Narendra.s.v Try deselecting the text, then select the rounded box layer. Then click ‘Layer->Rasterize->Layer’. Let me know if that works for you.
March 11, 2009
No it doesn’t work!
Narendra.s.v´s last post was… Everex Cloudbook: Affordable option in UMPC-type subnotebooks
March 12, 2009
@Narendra.s.v Try creating a new, blank layer below the shape, then select the shape and press ‘cmd + e’ on the keyboard to merge down. This should give you a new layer that is rasterized and that you can cut text out of. After you merge down, just go onto the next step, and let me know how that goes.
March 22, 2009
Nice tut…
@ Pliggs..
Hehe…Sometimes I think Photoshop does too, and Illustrator too!
March 29, 2009
Great tutorial thankss
April 12, 2009
Really kool and simple. Here is my try….
http://i42.tinypic.com/bfn97l.jpg
Thanks a ton for this tutorial!!
April 26, 2009
So simply, but it’s nice, I like the composition :)
Great job ;)
April 28, 2009
Thank you for all the cool hints you have available on your website, ill visiting this website cute often to keep gearing such great digital tips, keep the good work up
May 11, 2009
A great result and an easy tut to follow.
May 15, 2009
Hey, I’ve read a few of your tutorials now, and they’re really good! I love the effects I’m learning to create through them!
Please keep up the good work!
Cate x
June 5, 2009
This isn’t very clear. Not advised for folks who aren’t terribly familiar with photoshop. Did a similar effect using Pages/Keynote in a fraction of the time.
July 13, 2009
Hi, great tutorial, but i´m having trouble between step 16 and 17, I get a white text when I make both layers invisible !!
July 13, 2009
That means you are not deleting properly from the white box. Make sure you rasterize the text layer as described in Step 16.
August 20, 2009
Figured out what Elizabeth and Narendra’s problem was. I was having the same issue. After creating your text layer, write directly on the rounded box as opposed to writing inside a text box. When you take a text box, expand it and add your text it turns the Rastersize Layer off. Hope this helps.
September 2, 2009
Hi, nice tut.
I cant get the rounded box gradient overlayed. It’s not being gray on space background. the rounded box layer cant also merge up the layer group. I dont know how to solve taht prob.
Thx
September 14, 2009
Nice tuto!!! Thaknsss 4 sharing!
September 21, 2009
its amaizing tutorial i love it..
September 27, 2009
Thank you very much for this great tutorial, I was really looking for it :)
September 30, 2009
Gave the tutorial a shot. Nice tips on how to put those skills to good use. =)
October 15, 2009
Thanks. I’ve looking for pressed letter tutorial for sometime and your tutorial is really good one.
November 4, 2009
been looking for a tut like this for a while
January 15, 2010
Great tutorial, it was exactly what I was looking for, thanks.
January 16, 2010
I really appreciate you taking the time to share some of your photoshop skills. I’ve learned a lot of Photoshop’s essentials, but it’s tuts like these that really help me think outside the box when using some of Photoshop’s tools together. It is for that reason that I think your inclusion of the space background was a great call – for us newbs it allows us to come away with even more skills. Kudos my man – I hope to be able to share with others sometime soon as well.