Superposición de degradado: tiñe fotos sin ocultarlas

Una superposición de degradado es una capa de color que se desvanece a lo largo de una foto, colocada encima para teñirla, unificar una serie de imágenes o hacer legible un titular. El truco es que se desvanece: una parte de la foto se toca mucho y el resto apenas nada. Por eso una superposición de degradado parece pensada mientras que una caja negra plana al 50 por ciento parece un parche. Tú eliges dónde cae el color, qué intensidad alcanza y cómo se mezcla con la imagen de debajo.

Cuatro tipos de superposición de degradado

Casi todas las superposiciones que ves en una web, un cartel o un post son de uno de estos cuatro tipos. Saber cuál necesitas ahorra mucho tiempo peleando con los reguladores de opacidad.

El scrim: una superposición para el texto

El scrim es el caballo de batalla. Empieza totalmente transparente y se oscurece hacia el borde donde van tus palabras, normalmente abajo o a la izquierda. La foto queda intacta donde está el protagonista y el texto obtiene una base oscura y tranquila. Usa un tono oscuro de la propia foto en vez de negro puro: un marrón profundo sobre un interior cálido, un azul marino sobre un paisaje marino. El negro puro parece un borrón.

El 40 por ciento superior del scrim inferior es totalmente transparente, lo que mantiene luminosos los rostros y los productos. La oscuridad crece en la mitad inferior y alcanza su máximo justo en el borde, exactamente donde va un pie de foto. Para más formas de mantener legibles las palabras sobre imágenes, lee texto legible sobre fotos.

Lavados de color y modos de fusión

Un lavado de color es la forma en que las marcas consiguen que fotos de stock, fotos del móvil e imágenes de eventos parezcan de la misma familia. Coloca un degradado de dos colores de marca sobre la foto y cambia su modo de fusión. El modo de fusión decide cómo se mezcla el color con la imagen, y pesa más que los propios colores.

Cómo añadir una superposición de degradado a una foto

1. 1

   Decide para qué es la superposición

   Texto, ambiente o coherencia. Un scrim para el texto, un lavado para el ambiente y la coherencia. Si no sabes decir cuál, probablemente no la necesitas.

2. 2

   Toma un tono oscuro de la foto

   Elige el color más profundo que ya tenga la imagen para un scrim, o dos colores de marca para un lavado.

3. 3

   Dibuja el degradado sobre la zona que lo necesita

   Empieza transparente sobre el protagonista y crece hacia el borde con las palabras. Mantén el desvanecido largo para que no se vea ninguna línea.

4. 4

   Elige un modo de fusión

   Normal para los scrims, multiplicar para fotos claras, trama para las oscuras y color para un tinte único.

5. 5

   Baja la opacidad hasta que casi desaparezca

   Luego súbela un paso. Las mejores superposiciones solo se notan cuando las desactivas.

6. 6

   Revisa el texto a tamaño móvil

   Reduce el diseño al tamaño al que se verá y lee cada palabra. Un contraste que funciona en un monitor puede fallar en un móvil; contraste de color tiene los objetivos a los que apuntar.

Qué oscuridad debe tener una superposición de degradado

Como límite práctico, si el borde más oscuro de un scrim tiene que pasar de alrededor del 80 por ciento para que el texto se lea, la foto está demasiado recargada en ese punto. Mueve las palabras, recorta de otra forma o elige una imagen más tranquila. Un lavado sobre toda la imagen necesita mucho menos, o la foto deja de parecer una foto.

Superposiciones de degradado en una web

En la web puedes apilar la superposición y la foto en una sola declaración, lo que las mantiene juntas cuando cambia la imagen. La superposición va primero porque CSS pinta la primera capa encima. El conjunto completo de técnicas, incluidos los modos de fusión y los pseudoelementos, está en superposición de degradado en CSS.

.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

Un lavado que encaja con tu marca siempre

Las superposiciones se desvían cuando cada diseñador elige sus propios colores. En el Studio de Gradiently, las fotos pueden teñirse con los colores de tu Mark en mono, duotono o lavado, así que imágenes de fuentes distintas comparten una paleta sin igualarlas a mano. Y cuando las palabras van sobre un Mark en lugar de sobre una foto, este calma por sí solo la zona que tienen detrás, sin ninguna superposición. Lee fotos en duotono con los colores de tu Mark para ver cómo funciona el lavado.