Para esta ocasión les traigo una manera sencilla de alcanzar estos dos efectos tan versátiles empleando Adobe Photoshop CS6.
Preparación del documento

Con la tecla “T” creamos un bloque de texto y escribimos el texto deseado. Utilicé la font “Carton” – diseñada por Nick McCosker – en tamaño 85pt, coloreada con #FF0C5C
.
Efecto de bajo relieve o hundido
Para realizar el efecto hundido hacemos doble click sobre nuestra capa de texto fuera del nombre de capa y allí seleccionaremos dos efectos: sombra interior y sombra paralela.
SOMBRA INTERIOR
Configuramos entonces la sombra interior como se muestra en la imagen. En este caso estamos buscando recrear el efecto “letterpress”, que se aprecia en el diseño impreso de tarjetas.
AGREGANDO LA LUZ CON LA SOMBRA PARALELA
Aplicamos la sombra paralela a modo de luz, ya que podemos limitarla a un sector del texto mediante el uso de ángulos, a diferencia del resplandor que ilumina todo el contorno por igual.
Aquó podemos ver como luce nuestro texto con un degradado sutil y un tono de fondo azulado.
Efecto de relieve
El efecto de relieve es sencillo de alcanzar cuando invertimos los colores del efecto hundido que realizamos previamente.
SOMBRA INTERIOR A MODO DE ILUMINACIÓN
Utilizaremos una sombra interior en color blanco, en modo de fusión normal con opacidad de 40%. La distancia y el tamaño los marcamos en 1.
SOMBRA PARA EL TEXTO
Damos profundidad al texto con una sombra paralela de color negro en opacidad 100%, distancia 1 y tamaño cero.
Text-shadow para trasladar efectos de Photoshop a una página web
Con la propiedad de CSS3 text-shadow es posible agregar estilos al texto similares a los empleados en Adobe Photoshop. Las siguientes capturas de pantalla muestran aplicación de sombras utilizando text-shadow para generar efecto de relieve y de hundido (embossing).
Tumblr — Página de error 404
Tinder — Read, Discover, Subscribe & Share
El efecto text-shadow luce fantástico cuando está bien implementado, la única desventaja es que los usuarios que utilicen Internet Explorer 9.0 o anterior no podrán apreciarlo (si los usuarios de IE 10).
- Lista completa de compatibilidad para text-shadow
¿CÓMO UTILIZAR TEXT-SHADOW?
Con text-shadow podemos definir varias sombras, colocando una coma luego del color y escribiendo nuevamente los parámetros.
El offset, señalado en color verde, indicará la posición de la sombra. El primer valor de offset es el horizontal, si es negativo la sombra se mueve hacia la izquierda y si es positivo se proyecta hacia la derecha. El offset en el eje vertical es marcado por el segundo valor, si es negativo la sombra se proyecta hacia arriba y si es positivo hacia abajo.
El difuminado indica qué tanto blur tendrá la sombra, es un parámetro opcional. Si no está especificado tendremos una sombra nítida.
El color y la opacidad pueden ser controlados empleando valores de color RGBa (red, green, blue, alpha). Si la opacidad de la sombra será de 100% podemos emplear colores hexadecimales como lo hacemos normalmente.
EFECTO DE BAJO RELIEVE CON CSS3
Esta sería una manera de trasladar desde Photoshop a una página web el efecto de hundido en el texto.
1
2
3
4
|
h1 {
text–shadow: 1px 1px rgba(255, 255, 255, 0.3),
–1px –1px #000;
}
|
EFECTO DE RELIEVE EN CSS3
Podemos emular lo realizado en Photoshop en nuestro sitio web empleando los siguientes valores.
1
2
3
4
|
h1 {
text–shadow: –1px –1px rgba(255, 255, 255, 0.3)
1px 1px 2px rgba(25, 25, 25, 0.8);
}
|