Efecto de bajo relieve y relieve para texto en Photoshop y CSS3

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

Comenzaremos creando un lienzo de 800 pixeles de ancho y 800 pixeles de altura con el fondo de color transparente.
En la primera capa crearemos un rectángulo con la tecla “U”. En este caso lo llené de color gris, en porcentaje alto. En el menú “Filtro” añadiremos ruido (noise) al 1%.

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).

¿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.

Efecto de relieve en CSS3

Podemos emular lo realizado en Photoshop en nuestro sitio web empleando los siguientes valores.

Modificado por última vez el día 02 de diciembre de 2012 a las 11:05
  • Habia visto una tecnica con CSS bien larga y el efecto queda un poco mejor.
    Pero tu lo simplicaste al TOPE , Esta genial .

    Gracias por el aporte xD

  • Nunca lo habia usado. Pero si andaba en busca de como lograr el efecto de relieve hundido y me di cuenta que es bastante simple.

    Gracias por tu tutorial, siga asi…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>