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

  • by Ruby Simpson

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

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

    EFECTO DE RELIEVE EN CSS3

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

    Scroll to top