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.