Por qué tu degradado tiene rayas y cómo corregir las bandas

Las bandas en un degradado aparecen cuando un degradado suave muestra rayas o escalones visibles en lugar de una mezcla continua. Ocurre porque las imágenes digitales solo pueden guardar un número limitado de tonos por color, normalmente 256 por canal, y cuando un degradado cambia despacio a lo largo de una zona ancha, cada tono tiene que cubrir una banda de píxeles. Tu ojo es muy bueno detectando bordes, así que distingue esas bandas. La solución suele ser añadir un grano fino, exportar con menos compresión o dar a la mezcla más color con el que trabajar.

Qué causa las bandas en los degradados

La mayoría de las imágenes usan 8 bits por canal: 256 valores posibles para cada uno de rojo, verde y azul. Suena a mucho, y para un degradado marcado lo es. El problema empieza cuando los colores de cada extremo están cerca.

Toma un degradado gris de #202020 a #303030 a lo ancho de una pantalla de 1920 píxeles. Cada canal solo pasa de 32 a 48, que son 16 escalones. Así que el degradado contiene 16 tonos distintos, cada uno de unos 120 píxeles de ancho. Ningún programa puede hacerlo más suave, porque no hay tonos intermedios que usar.

Dónde se ven más las bandas

Por eso los fondos de degradado oscuro y los degradados de aurora necesitan el mayor cuidado. Su belleza depende de rampas largas y suaves por tonos oscuros, que es justo la receta de las bandas.

Cómo corregir las bandas en un degradado

1. 1

   Añade grano o tramado

   Una capa fina de ruido aleatorio reparte los píxeles entre tonos vecinos, de modo que el ojo ya no encuentra los bordes. Es la solución más fiable, y además hace que la superficie se vea más rica. Mira degradados con grano.

2. 2

   Da a la mezcla más rango

   Mayores diferencias de luminosidad o de tono entre los colores de los extremos significan más escalones disponibles y bandas más estrechas. Un degradado que además cambia un poco de tono usa más combinaciones de rojo, verde y azul que una rampa pura de luminosidad.

3. 3

   Trabaja en 16 bits cuando puedas

   Los editores de imagen que admiten 16 bits por canal conservan muchos más niveles mientras trabajas. Convierte a 8 bits solo al exportar, con el tramado activado.

4. 4

   Exporta con alta calidad

   Usa PNG para gráficos lisos, o JPEG con un ajuste de calidad alto para imágenes fotográficas. Evita el GIF y el PNG-8, que conservan solo 256 colores en total.

5. 5

   Exporta al tamaño final

   Ampliar una imagen de degradado pequeña estira sus bandas. Renderiza o exporta al tamaño exacto, o mayor, en lugar de ampliar.

Corregir las bandas en degradados CSS

Los navegadores renderizan los degradados CSS en directo, así que no hay ningún ajuste de exportación que cambiar. Ayudan dos cosas. Primero, ensancha la rampa o añade un cambio de tono. Segundo, coloca una capa sutil de ruido sobre el degradado, que funciona exactamente como el grano de una imagen. Textura de ruido en CSS muestra formas ligeras de hacer esa capa sin archivos de imagen grandes.

Corregir las bandas en vídeo y en subidas a redes sociales

Las plataformas sociales vuelven a comprimir lo que subes, y los códecs de vídeo están diseñados para descartar justo el tipo de detalle sutil que mantiene suaves los degradados. El grano ayuda dos veces aquí: oculta los escalones y da al codificador detalle real que conservar. Sube al tamaño recomendado por la plataforma para que no se vuelva a redimensionar, y exporta el vídeo con un ajuste de calidad generoso. Si codificas con ffmpeg, x264 tiene un ajuste pensado para preservar el grano.

# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4

Los fondos de vídeo en bucle son especialmente propensos a esto, porque suelen ser oscuros y lentos. Vídeos en bucle sin costuras cubre el resto de la exportación.

Prevenir las bandas desde el principio

• Elige degradados con suficiente cambio de luminosidad o de tono para su tamaño
• Prevé el grano desde el principio en lugar de añadirlo como rescate
• Mantén un poco levantados los degradados oscuros en lugar de deslizarlos hasta el negro puro
• Comprueba en un móvil después de subir, no solo en tu monitor de diseño

Cada Mark de Gradiently se renderiza en directo al tamaño en el que diseñas, con su grano como parte de la receta, y los diseños hechos con un Mark reservado se exportan como PNG o JPEG hasta tres veces el tamaño del diseño, así que un degradado nunca tiene que estirarse desde una imagen pequeña.