El uso de filtros y capas de transparencia en el diseño de sitios web

Parece que con una tendencia en el diseño de sitios web, los diseñadores casi tienen otra tendencia sobre ellos. Este es el caso de las imágenes de fondo grandes: usar una presentación de diapositivas con una variedad de fotografías diferentes significa que cualquier color de texto que elija se verá mejor en unas que en otras, por lo que la solución ha sido colocar una filtro o capa transparente entre la imagen y el texto, lo que significa que el texto se mostrará con la misma claridad en cualquier imagen.

Esta tendencia de diseño no solo se aplica a las imágenes de fondo fotográficas, algunos sitios usan medios tonos o transparencias en fondos de colores sólidos, y la adición de una sombra paralela muy pequeña hace que el texto blanco se vea extremadamente nítido y nítido. Aquí mostramos una selección de sitios web que utilizan este método para mantener el texto fácil de leer sin comprometer la calidad de las imágenes.

Cómo trabajan ellos

Me imagino que casi todos los diseñadores saben cómo funcionan los filtros y la transparencia cuando se colocan entre una imagen y el texto, pero para mostrar la increíble diferencia que puede hacer una capa de este tipo, ¡he producido algunas imágenes para probarlo!

Imágenes con texto blanco

Capa transparente negra al 25 % de opacidad añadida

Pequeña sombra paralela negra en el texto

Capa de medios tonos al 40 % de opacidad

Cómo crear un patrón de medios tonos con Photoshop

Este método funcionará para cualquier versión de Photoshop y es la simplicidad misma. La imagen de abajo tiene un fondo relleno de degradado con la capa de trama de semitonos encima.

Transparencia y filtros en acción

Delegados del CICR en acción

Este sitio utiliza una capa transparente negra entre la presentación de diapositivas a pantalla completa y el texto del título en blanco. Como puede ver en la captura de pantalla a continuación, el texto se destaca incluso contra la camisa blanca del hombre.

Luz y sombras

Este sitio utiliza una transparencia muy oscura que se aclara ligeramente al pasar el mouse por encima. También aparece un toque de color al pasar el mouse, diferentes colores para cada panel.

petr novikov

Este sitio usa una transparencia ligera sobre un video de fondo, nuevamente usando un texto de título blanco.

Ndoto

Este sitio tiene una presentación de diapositivas a pantalla completa con 3 imágenes, cada una de las cuales tiene una transparencia de color diferente. La siguiente captura de pantalla muestra parte de cada imagen.

MVMT

Con un diseño de estilo de cuadrícula, esta página de inicio utiliza una transparencia muy oscura que se elimina por completo al pasar el mouse por encima, revelando la fotografía a todo color debajo.

Nubes

Aquí hay un efecto único y rebuscado en la página de inicio. La imagen de fondo está animada, muestra al tipo escribiendo en su teclado, y el texto del título se presenta en forma de cinta de teletipo para que podamos imaginar que está escribiendo la oración, eliminando, escribiendo… etc. La transparencia sepia ayuda al texto delgado en negro. para destacar.

Luisa Bradley

Este sitio web utiliza un bloque de transparencia sobre la presentación de diapositivas de fondo de pantalla completa: un enfoque un tanto diferente y creativo.

borrador

Este sitio utiliza una variedad de estilos de capas para ayudar a que el texto del título en blanco se destaque. La siguiente captura de pantalla muestra 4 de sus páginas usando diferentes capas: transparencia negra, textura de gota de agua, textura bokeh y textura de hielo.

Memorias Mundiales

Este sitio dedicado al Torneo de la Copa del Mundo de Brasil 2014 utiliza un patrón de medios tonos cuadrados proporcionalmente grande sobre la imagen de pantalla completa.

Toca en

Otro sitio que es una guía de los partidos del Torneo de la Copa del Mundo de Brasil 2014. Este sitio utiliza una capa transparente sepia sobre la imagen de pantalla completa ligeramente animada.

Yunik

Esta página de inicio tiene una transparencia con un tinte azulado en su presentación de diapositivas de fondo de pantalla completa que solo consta de 2 imágenes. A medida que se desplaza hacia abajo en la página, hay más variedades de transparencia, incluidos el negro, el azul y una imagen que usa una capa de medios tonos.

Códigos inteligentes

Este sitio utiliza una capa con rayas de medios tonos para resaltar el texto. La siguiente captura de pantalla muestra una parte del texto a tamaño completo, ya que la reducción de tamaño ha afectado un poco el efecto.

diminutoestudio

Aquí el diseñador (Pablo Domínguez) ha utilizado una transparencia de color rojo muy vivo sobre una imagen de pantalla completa de sí mismo en el trabajo. Un elemento amarillo en forma de lágrima también contiene una imagen en miniatura de él mismo.

La Ferme de Biarritz

Aunque el diseño de este sitio no es necesariamente de alta moda en este momento, la transparencia negra para el área de contenido hace que el texto blanco sea legible contra el fondo arenoso.

Diseño fresco

Este sitio utiliza una capa transparente negra con la opacidad perfecta para que el texto blanco se destaque en todas sus imágenes de presentación de diapositivas. El texto también tiene una pequeña sombra paralela negra para una mayor claridad.

Dra. Laffourcade

Para los diseñadores de este sitio, el negro es el nuevo negro y han utilizado una capa transparente blanca para enfatizar el texto del título en negro.

Creer en

Este sitio utiliza una capa de medios tonos con la opacidad ideal para mantener el texto del título blanco nítido y claro, pero sin distorsionar las imágenes de fondo animadas.

Adveris

Este diseño no tiene una imagen de fondo de pantalla completa, tiene un fondo azul sólido con un patrón de estilo bokeh. La capa de estilo de malla entre el fondo y los elementos de la página le da un borde muy definido y nítido a todo. El texto blanco se realza con una pequeña sombra paralela.

Yin + Joven

Esta es la página Acerca de del sitio Yin + Young. Usando un estilo tipográfico muy antiguo, la calle antigua que forma la imagen de fondo de esta página tiene un filtro similar al de Instagram para proyectar una luz brillante y permitir que el texto negro se destaque. Este sitio utiliza bastantes efectos de transparencia y estilo de filtro y, curiosamente, si hace clic en el botón Inicio, ¡se encontrará en una de las dos pantallas de inicio diferentes!

Conclusión

El efecto en cadena de una tendencia que crea otra parece estar ocurriendo con más frecuencia con la llegada del diseño plano. Muestra claramente cómo se inician las tendencias al encontrar soluciones a los problemas creados por otras tendencias: el diseño plano en sí se inició por necesidad, para resolver el problema de la claridad y la facilidad de uso del tamaño de pantalla pequeña.

¿Ha encontrado algún otro método para hacer que el texto se destaque en imágenes de diferentes colores y contrastes? Comparta sus opiniones y enlaces con nosotros en la sección de comentarios a continuación.

0 Shares:
Te Recomendamos