Design & UX - - By Jennifer Farley

Create Inset-Style Type In Photoshop

The inset or letterpress look has been popular on the web for a while now. The logo on the Postbox site is just one example of the use of this style on the web. The effect is really easy to create and a handy one to have in your design toolbox.

Postbox

 

The inset can look stylish, but moderation is the key. The point of this tutorial is not just to show you how to do this particular effect, but also as a starting point to creating and saving your own styles. So here’s how to create the inset or letterpress effect in Photoshop.

1. Create a new Photoshop document, 300 x 150 pixels, with a background color of blue-green #669999.

image

2. Using the Type tool (T), add some text to your document. I’m going to use a serif-font to give it a more of an old-style look, but this works with almost any type of font. The Postbox site uses a sans-serif font. The font here is Times New Roman, bold, size 115pt.

image 

3. Now we’ll add the effects to make it look like the type has been pressed into paper (or the screen).

Make sure the type layer is selected, and then click on the layer styles button at the bottom of the layers palette. From the drop-down menu, choose Inner Shadow.
Set distance to 1 px, Size to 4px. You can leave the shadow color as black if you want, or for a slightly more subtle effect choose a dark green. I set the shadow color here to #002727. This effect works well with many blending modes, including Normal, but I liked how it looked when set to Linear Light. Finally set the Opacity to about 50%. Don’t click OK yet.

image

4. To finish off this simple effect, we’ll add a thin blue-green stroke around the type. The stroke color should be slightly lighter than the background color.

Still inside the Layer Style dialog box, click on the word Stroke on the left hand side. Set the size to 1 pixel, Opacity of 60% and Color set to #66cccc.

image

Your type should now look something like this.

image

And that’s all there is to it. You can vary the apparent depth of the inset by changing the Size in the Inner Shadow options.

Now before you click OK on the Layer Style dialog box, you can save this style and reuse again whenever you want. To save the style for future use.  Click the New Style button. Give your style a name and check the Include Layer Effects and Include Layer Blending Options boxes and click OK.

image

Your style is now saved. Now you can click OK on the Layer Style dialog box. When you want to use it again, just open the Styles palette by choosing Window > Styles and you’ll see your style in the palette. Click on it to apply it to the currently selected layer.

Sponsors