There are a few ways of doing this, but this way is by far my favourite because it’s so easy to modify the effect later on if needed.

First, a short history lesson.

To make you a bit more savvy on the subject, let me fill you in on the origins of the letterpress effect. You most likely own a book, container, or even business card that you’re able to rub your fingers along and feel the letters raised in or out. You guessed it, that’s the letterpress effect. Origins go back to as far as 750AD and has almost been used exclusively in physical printing until around a decade ago. Graphic and web designers then adopted it as part of their design toolkit. Current design trends were beginning to age, so designers needed something to spice up their work.

If you’re interested in seeing some examples of letterpress in web design, take a look at Line25’s fantastic gallery article.

Alright, let’s do it!

Pop open Photoshop and proceed to create a new canvas. In this tutorial, I’ll be using a canvas with the size of 400x400 and background colour of #555555. After doing that, go ahead and type your text out and make it’s colour #999999. You can replicate this if you’d like, it shouldn’t really matter but this colour and size should yeild the best results.

Alright, now let’s actually get into doing the effect. In this method, we can be pretty non-destructible by only using layer styles. You’ll see what I mean in a minute.

Select your text layer in the layers panel. Now, head over to the bottom of the layers panel and choose Layer Styles → Drop Shadow. Now, make sure to replicate the options in the next image below. I’ll explain what these do in a moment.

Replicated everything yet? Good. Now let me explain a few things. The first thing you should have done is set the blend mode to normal. This ensures that the drop shadow will stand out. Next up is the colour change — make sure it’s #333333. It’s dark enough to stand out against the background without being too disruptive. You should have set the opacity to 100%, which will ensure that the drop shadow is nice and crisp. Next is important, make sure you set the shadow angle to 90°. Last part is easy, just make sure the both distance of the shadow and the size of it is 1px. You can change these later if you want to change the look of the letterpress, but we’ll keep it like this for a more classic letterpress look.

Alright, now we’ll be doing doing the second part of the effect — the inner shadow. Since you already have the effect panel open, just go over to the list of effects on the left and select Inner Shadow.

You’ll immediately see the inner shadow applied, but we’ll change that in a moment. Just take a look at the image below and copy the settings.

Alright, a lot of familiar stuff here. You really just need to duplicate the settings that you used on the drop shadow, but with one major difference. Make sure to set the inner shadow colour to #cfcfcf. This is lighter than the colour we set the text to (#cccccc), and adds a bit of polish.

And that, my friends, is the letterpress effect in Photoshop. I prefer this method because it’s really easy to change the colours of the shadows and text, and believe me, that happens a lot! In this example, the text is pressed outward, but if you were to reverse the colours of the shadow and tweak the text colour as well, you could easily achieve an inset letterpress. I’ll leave it to you to experiment with that, though.

If you want to get fancy, you can also add some gradients and such. I won’t go into the details of doing this, but the above image is an example of what a little bit of creative tweaking can do.

So, in closing, let me outline a few things that you need to remember when doing the effect with this technique:

• There are always two shadows.
• If you want an inset, the inner shadow is should be a colour darker than the background, the drop shadow should have a lighter colour than the background, and the text colour should be the same as the background.
• If you want an outset, the inner shadow is should be a colour lighter than the background, the drop shadow should have a darker colour than the background, and the text colour needs to be a colour that is light, but not as light as the inner shadow.

Click for the Video

Click for Full Size Image (1200x1000)

I would be lying if I said this wasn’t Twitter inspired. I initially started with an ugly black colour palette in mind but quickly swapped that for a clean, white and blue scheme. From there, I immediately thought of clouds — that’s where cloud-no9’s brushes came in handy. Admittedly, the placement of everything isn’t very original, but that’s alright.

I probably won’t end up converting the psd to xhtml, but if someone wants to, or just wants the psd, leave a comment and I’ll send it to you.

Hopefully, if I do another one of these videos, the end result will be much more interesting. It should be noted that I still consider myself an ametuer at web design.

Hit the Continue Reading link to see some screenshots…

[Note: The images are large]

Please be aware that this is a very old post and is no longer very accurate. YouTube has since disabled animated .gifs and most of these programs and techniques are out of date. This is being left up because it may serve as useful to some. Enjoy.

Hey, if you have any questions, you should probably ask them here. There’s a better chance that they’ll be read and answered. Same thing with comments. There is no written tutorial. However, there is a video walkthrough after the break.

The Tutorial

Necessary Programs

• Photoshop CS3
• Hypercam 2

I understand that there are other programs out there that do the same job. They may be easier or harder, but this is what I do.