New to Typophile? Accounts are free, and easy to set up.
How to create embossed effect...
Posted by Wesley.Bancroft in
24 Feb 2010 — 4:10pm
24 Feb 2010 — 4:10pm
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.
User login
Support our Sponsors
24 Feb 2010 — 4:28pm
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.
Voilla!
24 Feb 2010 — 5:49pm
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%
26 Feb 2010 — 3:05pm
That is great. I did not expect such a comprehensive response. Thanks so much.
27 Feb 2010 — 1:59pm
You're welcome.
28 Feb 2010 — 6:31pm
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.
h1{
font-size:3em;
color:#111;
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.