Mapas de degradado: recolorea cualquier cosa en segundos

Un mapa de degradado recolorea una imagen sustituyendo cada uno de sus tonos por un color de un degradado. Primero se lee la imagen solo como brillo, del negro al blanco, y después cada brillo se cambia por el color que ocupa el mismo punto del degradado: el extremo izquierdo pinta las sombras y el derecho, las luces. Las formas, la luz y el detalle de la imagen quedan exactamente igual. Solo cambian los colores, y los eliges todos tú.

Cómo funciona un mapa de degradado

Piensa en el degradado como en una tabla de consulta. Un píxel con un 0 % de brillo toma el color del extremo izquierdo; uno con un 50 % de brillo toma el color del centro; uno con un 100 % toma el del extremo derecho. Como la consulta depende solo del brillo, dos colores originales muy distintos con el mismo brillo, como un jersey rojo y un seto verde, acaban del mismo color. Eso es lo que hace tan buenos a los mapas de degradado para unificar imágenes.

Rampas de mapa de degradado que funcionan

La regla más importante: la rampa debe aclararse de forma constante de izquierda a derecha. Así lo oscuro sigue oscuro y lo claro sigue claro, y la imagen conserva su sensación de profundidad. Por el camino puedes cambiar de tono cuanto quieras. Los estilos fotográficos clásicos, como el sepia y la cianotipia, son simplemente rampas así.

Romper a propósito la regla de la luminosidad da un aspecto solarizado y psicodélico, que puede ser divertido para carteles. Para todo lo que deba seguir pareciendo una foto, mantén la rampa constante. Si un tono medio se vuelve gris, la solución es la misma que en cualquier degradado: mira los degradados turbios.

Para qué usar los mapas de degradado

• Series de fotos coherentes: las fotos de archivo, las del móvil y las imágenes antiguas salen todas en una sola paleta; mira la coherencia de marca
• Texturas de marca: convierte cualquier textura en escala de grises, como nubes, hormigón, tela o ruido, en un fondo con los colores de tu marca; mira la textura de fondo
• Ilustraciones e iconos: recolorea un conjunto entero de una vez mapeando sus grises
• Etalonaje: pon una capa de mapa de degradado en Luz suave o Color con poca opacidad para un aspecto de película sutil sobre los colores originales
• Datos y ciencia: los mapas de calor y las imágenes en falso color son mapas de degradado de mediciones
• Duotono y tritono: dos o tres paradas para tratamientos de cartel contundentes; mira el efecto duotono

Cómo aplicar un mapa de degradado en un editor de imágenes

1. 1

   Añade un ajuste de mapa de degradado

   Photoshop, Affinity Photo y GIMP tienen uno. Usa una capa de ajuste siempre que puedas, para que el original quede intacto.

2. 2

   Fija primero los extremos

   Pon una versión casi negra de tu color de marca más oscuro a la izquierda y un tinte pálido a la derecha. Comprueba que la imagen sigue leyéndose.

3. 3

   Añade paradas de tono medio

   Coloca tu color de marca principal hacia el 50 % y ajusta su posición hasta que la piel, los cielos o los objetos clave se vean bien.

4. 4

   Mézclalo de vuelta si hace falta

   Para etalonar en vez de recolorear del todo, cambia el modo de fusión de la capa a Luz suave o Color y baja la opacidad.

5. 5

   Guarda la rampa

   Guarda el degradado como preajuste y úsalo en todas las imágenes de la serie, para que combinen.

Un mapa de degradado en CSS

Los navegadores pueden aplicar un mapa de degradado con un filtro SVG. feColorMatrix pasa la imagen a escala de grises y feComponentTransfer la mapea con una tabla de valores para cada canal. Cada lista de abajo es la rampa Violeta de marca: los valores de rojo, verde y azul de los cinco colores de parada divididos entre 255, en posiciones equidistantes.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="brand-violet-map" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0      0      0      1 0"/>
    <feComponentTransfer>
      <!-- #120b1f  #3b1d6e  #7c3aed  #f0abfc  #fdf4ff -->
      <feFuncR type="table" tableValues="0.071 0.231 0.486 0.941 0.992"/>
      <feFuncG type="table" tableValues="0.043 0.114 0.227 0.671 0.957"/>
      <feFuncB type="table" tableValues="0.122 0.431 0.929 0.988 1"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="texture.jpg" alt="" style="filter: url(#brand-violet-map)">

Los mapas de degradado son la forma de pasar de cualquier imagen a una paleta que es tuya. Si prefieres partir de la imagen, Igualar una imagen encuentra su paleta y los Marks más cercanos. En Gradiently también puedes teñir cualquier foto en el Studio con los colores del Mark que estés usando, en monocromo, en duotono o como un lavado más suave, que es un mapa de degradado hecho por ti.