# Textura de grano: cómo añadir grano de película a un diseño
[Canonical HTML page](https://gradiently.design/es/guide/textured-background)
Un poco de grano es la forma más rápida de que un diseño digital parezca un objeto hecho. Demasiado, y parece una pantalla rota. Así se calcula la cantidad, el tamaño y el color.
## The short version
- La textura de grano es un moteado fino y aleatorio sobre un diseño para que el color digital plano parezca película, papel o impresión.
- El grano ayuda de tres maneras: oculta el banding en los degradados suaves, une fotos y gráficos planos y da una superficie física a las formas limpias.
- En la mayoría de diseños para pantalla, el grano debería verse justo a tamaño completo y no verse a un brazo de distancia; si es lo primero que nota la gente, hay demasiado.
- El grano monocromo es la opción segura; el grano en color se parece más a la película real, pero puede desplazar una paleta.
- Una compresión JPEG fuerte borra el grano, así que exporta las imágenes con grano en PNG o JPEG de alta calidad y da al vídeo con grano una tasa de bits generosa.
La **textura de grano** es una capa fina de ruido aleatorio sobre un diseño para que el color digital perfectamente plano parezca impreso, fotografiado en película o prensado en papel. Es sutil por diseño: en su justa medida nadie lo nombra, solo sienten que la imagen tiene superficie. Acertar se reduce a cuatro ajustes: cantidad, tamaño, color y fusión.
## Por qué el grano mejora los diseños digitales
Las pantallas muestran colores que ningún material físico puede dar: perfectamente uniformes, perfectamente limpios. Esa limpieza es lo que hace que muchos diseños digitales parezcan baratos o inacabados. El grano devuelve un poco de la irregularidad que tiene toda superficie real. Además cumple tres funciones prácticas.
- **Oculta el banding.** Los degradados suaves se rompen en franjas visibles en pantallas de 8 bits. El ruido aleatorio rompe esos bordes y el ojo lee un fundido continuo. [El banding en degradados](https://gradiently.design/es/guide/gradient-banding) explica la causa.
- **Unifica elementos mezclados.** Una foto tiene grano natural y una forma plana no. Una capa de grano sobre ambas hace que parezcan parte de la misma imagen.
- **Añade superficie.** El color plano se lee como pantalla; el color con grano se lee como material. Por eso el grano está en el centro de casi todas las decisiones de [textura de fondo](https://gradiently.design/es/guide/background-texture).
Una publicación de una tostadora de café con un fondo cálido con textura y un titular corto
Un fondo cálido y con textura suave parece un objeto artesanal, algo que encaja con un producto hecho a mano.
Una publicación con un número grande sobre un fondo de color con grano suave
La misma sensación sostiene un dato simple. El grano evita que un número grande parezca una hoja de cálculo.
## Cuánto grano añadir
La prueba honesta es la distancia. Mira el diseño al 100 por ciento: el grano debe verse justo. Luego míralo en el móvil a un brazo de distancia: no debe verse. Si el grano es lo primero que alguien nota, redúcelo a la mitad. Cada trabajo admite una cantidad distinta.
| Uso | Cantidad | Tamaño del grano | Por qué |
| --- | --- | --- | --- |
| Fondo de sitio web | Muy ligero, 3 a 6 % de opacidad | Fino | En zonas grandes y con mucho tiempo de lectura el grano se nota |
| Publicación social | Ligero, 6 a 12 % | Fino a medio | Resiste la recompresión y las pantallas de móvil |
| Cartel o folleto | Medio, 10 a 18 % | Medio | Visto de lejos, el grano se lee como impresión |
| Aspecto retro o de película | Fuerte, 18 a 30 % | Medio a grueso | El grano es parte del estilo |
| Bucle de vídeo | Ligero, animado | Fino | El grano estático sobre vídeo en movimiento parece suciedad en la lente |
Puntos de partida, como opacidad de una capa de ruido en Superponer o Luz suave. Ajusta a ojo; las pantallas y los colores varían.
> **Los diseños oscuros necesitan menos** El grano se ve más sobre tonos oscuros y medios que sobre casi blanco. Sobre un fondo oscuro, empieza con la mitad de la cantidad que usarías en uno claro.
## Grano monocromo o en color
El grano de película real es en color: diminutas motas de rojo, verde y azul que varían de un fotograma a otro. El grano digital monocromo es solo claro y oscuro. Los dos tienen su lugar.
### Grano monocromo
- Mantiene tu paleta exactamente como la elegiste
- Se lee como impresión, papel o risografía
- Seguro para colores de marca y logotipos
- El valor por defecto adecuado para la mayoría de trabajos
### Grano en color
- Parece película analógica
- Da vida a fotos y tonos de piel
- Puede desplazar un poco un color de marca plano
- Ideal para estilos fotográficos y nostálgicos
El tamaño del grano importa tanto como el color. El grano fino se siente caro y moderno. El grano grueso se siente artesanal, áspero y ruidoso. Ajusta el grano a la salida: una publicación de 1080×1350 necesita un grano más fino que un cartel A3 de 3508×4961, porque el cartel se ve desde más lejos.
## Cómo añadir textura de grano en cualquier herramienta de diseño
1. **Crea una capa de ruido** Rellena una capa nueva con gris medio (`#808080`) y añade ruido. En la mayoría de editores es un filtro llamado Añadir ruido, Ruido o Grano. Elige gaussiano y monocromático para empezar limpio.
2. **Define el modo de fusión** Cambia la capa a **Superponer** o **Luz suave**. El gris desaparece y solo queda el moteado, que aclara y oscurece los colores de debajo.
3. **Baja la opacidad** Redúcela a la cantidad de la tabla anterior. Comprueba al 100 por ciento de zoom y otra vez en el móvil.
4. **Déjala encima** El grano va sobre el fondo y las fotos. Deja el texto pequeño y los logotipos sobre el grano si los quieres nítidos, o debajo para un aire impreso.
5. **Exporta con cuidado** Exporta en PNG o JPEG de alta calidad. Una compresión fuerte emborrona el grano en manchas, y queda peor que no tener grano.
Si añades grano a un degradado de color en concreto, [los degradados con grano](https://gradiently.design/es/guide/grainy-gradients) dan los ajustes y [los degradados con ruido](https://gradiently.design/es/guide/noise-background) traen recetas listas.
## Textura de grano en la web
En un sitio web no necesitas un archivo de imagen para el grano. Un SVG en línea con el filtro `feTurbulence` dibuja ruido en el navegador a cualquier tamaño, así que se ve nítido en toda pantalla y casi no pesa.
```html
```
Una capa de grano fija sobre toda la página. Sube `baseFrequency` para un grano más fino, bájala para uno más grueso. Quita la matriz de color para obtener ruido en color.
Mantén la opacidad baja: una página entera de grano es una zona enorme, y un 6 por ciento suele bastar. La [referencia de MDN sobre feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) enumera todos los ajustes.
## Grano en vídeo y animación
En imágenes en movimiento, el grano también debe moverse. Una sola capa de grano fija sobre vídeo parece una lente sucia. Usa grano animado que cambie en cada fotograma, mantenlo fino y exporta con una tasa de bits generosa, porque la compresión de vídeo trata el grano como detalle que descartar. Para bucles, lee [el vídeo en bucle perfecto](https://gradiently.design/es/guide/seamless-loop-video) antes de añadir textura.
Gradiently integra grano en cada Mark como parte de su receta, junto con color, material, luz y movimiento, así que la textura se renderiza de nuevo en cada tamaño en que diseñes, en lugar de estirarse desde una sola imagen. Si quieres un fondo que ya tenga su superficie, explora el Mercado y diseña con cualquier Mark sin reservar.
## FAQ
### ¿Qué es la textura de grano en diseño?
Un moteado fino y aleatorio de claros y oscuros sobre un diseño para que el color digital plano parezca película, papel o impresión.
### ¿Cuánto grano debo añadir a una imagen?
El suficiente para verse al 100 por ciento de zoom y no a un brazo de distancia. Para publicaciones sociales, una capa de ruido con un 6 a 12 por ciento de opacidad en Superponer es un buen comienzo.
### ¿Arregla el grano el banding de los degradados?
Normalmente sí. El ruido aleatorio rompe los bordes duros entre bandas y el ojo lee un fundido suave.
### ¿Por qué desaparece mi grano al subir la imagen?
Las plataformas recomprimen las imágenes y tratan el grano fino como detalle que descartar. Usa algo más de grano, exporta en PNG o JPEG de alta calidad y sube al tamaño exacto de la plataforma.
### ¿Debe el grano de película ser en color o en blanco y negro?
El grano monocromo mantiene exactos los colores de marca y sirve para la mayoría de trabajos. El grano en color se parece más a la película analógica y encaja en estilos fotográficos.