Letterpress and Letter Bulge Effect using Photoshop and CSS

Graphic design is an ever-growing industry. With the trends toward more modern and sophisticated design, letterpress and letter bulge effects are popular. Designing the effects in Photoshop is simple, but transforming them into code used to be impossible. Now it’s possible to transfer the effect from Photoshop to CSS nearly effortlessly, streamlining the design process. This tutorial will show you how to create letterpress and letter bulge effects in Photoshop and transfer them to a CSS file.

 

The first step is to create the design in Photoshop. Start a new file:

 

Now, fill the entire background area with the color #3c3c3c. This is to highlight the text while we apply the effects.

 

Now pick up the Typing tool and write some thing (eg: psd-tutorial).  Make sure that the font color is #7b7b7b. This will give a nice look to the text while we apply the effects.

Right-click the text layer (psd-tutorial) in the Layer Panel and select Blending Options. We are giving the magical touch to the text in this window.

Tick the Inner Shadow and set the attributes to the following values:

Opacity: 80%

Angle: 120

Distance: 2

Choke: 0

Size: and press OK.

Now you can see the amazing text-press effects for your text just like the following image. 🙂 Isn’t it amazing ?

Now we’ll move on to the text bulge effect. For that, again select the type tool and make another text:

Here I just typed ‘complete psd tutorials’. Make sure that the font color is again #7b7b7b.

Now again, go to the newly created text layer in the layer panel and right click, choose Blending Options.

This time, tick the Drop Shadow effect instead of Inner Shadow and set the values:

Opacity: 83%

Angle: 120

distance: 1

Spread: 0

Size: 3

Make sure that the color selected is black. Now press OK.

Here we go. That’s all about the Text bulge effect. How is this going? Interesting right?

Okay, now we are moving on to the second part, that is coding of these letters. I’m using Adobe Dreamweaver for that.

First, create a new HTML page:

 

You will get a page like this. Here, we are doing the html codes for the page. Save this file as index.html

 

 

Now  put the following codes in between <body> and </body>

<link href=”style.css” rel=”stylesheet” type=”text/css” />
<h1>PSD-Tutorial</h1>
<h2>Complete Psd Tutorials</h2>

Next, we will have to create the CSS file for the same. So Take a new CSS page.

You will get a page like this. You can write the code after the default texts.

Just copy and paste this code in to the file.

body {
background: #b1b1b1 url(bg.png);
}

h1 {
font-size:80px;
text-align: center;
font-family:Rockwell;
color: #7b7b7b;
text-shadow: 0px 2px 1px #bbbaba;
}

h2 {
font: 60px Rockwell;
text-align: center;
color: #7b7b7b;
text-shadow: 0px 2px 5px #000000;

}

If you don’t have the Rockwell font in your list, try to add the font to the font-family. You can simply click the Edit font list and add the new font to the list.

Just select the rockwell font from the available fonts category and click the insert button pointed by the arrow in the image.

That’s all with the CSS styling.  Save the file as style.css in the same folder where you saved the index.html. The main code behind the effect is the text-shadow attribute.

So here is the final screenshot of what you get when you double click the index.html

I hope you enjoyed the tutorial. Please feel free to ask any questions in the comment area, and I will answer them as best I can. 🙂

Leave a Comment