How to create embossed effect...

Wesley.Bancroft's picture

Hey, I have been trying to figure out how to create this embossed/punched out effect (below) and I can't seem to find any useful tutorials. Is there anything out there that you guys could point me to?

Or could you give me a quick run-down? Thanks.

Northbay's picture

Here's a simple way:

1. Make the background black
2. Create new layer and add the blue color and add bevel&emboss/contour to it.
3. Write the text (a new layer is automatically created)
4. Rasterize this layer
5. Use the wand, mark the type and select the blue layer..
6. ..and hit delete.


An Accident's picture

If you're using Photoshop, there is an even easier way and it leaves the text editable.

To mimic this example:
1. Make the background blue
2. Add your text in dark gray (as Northbay previously stated, this automatically creates a new layer)
3. Add a layer style to the text layer – Outer Bevel, direction down
4. There is no stage four

This is not necessarily the best way, but it's quick.

The general rule of thumb is to add a softened drop-shadow of the text in a lighter colour to mimic a highlight. You can even get an approximation of this effect in CSS (see here) and throughout the iPhone UI, for example.

My quick example here is:
—Style: Outer Bevel
—Technique: Smooth
—Depth: 1%
—Direction: Down
—Size: 3 px (this is only a small test image, a higher-res image will be different)
—Soften: 5 px (same)
—Angle: 90º
—Highlight Opacity: 65%
—Shadow Opacity: 50%

Wesley.Bancroft's picture

That is great. I did not expect such a comprehensive response. Thanks so much.

An Accident's picture

You're welcome.

xo's picture

Here's a quick example if you ever want to do it with css:

html{background:#888} //This is just to bring the embossing out.
text-shadow:0 0.04em 0.05em rgba(255,255,255,0.6),0 0 0.04em rgba(0,0,0,0.8);

It's all in the shadows.

Syndicate content Syndicate content