Textura y profundidad
Overlays y capas
Ponle una capa encima.
Un overlay en diseño es una capa de color, degradado o textura entre la foto y el texto. Calma la foto y corrige el contraste al instante, sin cambiar la fuente.
3 demos interactivas
Guía gratis por DM
Textura y profundidad
01
Qué es
Un overlay en diseño (en español, una capa) es un color, un degradado o una textura que pones entre la foto y el texto. El orden es siempre el mismo: la foto abajo, la capa en el medio y el texto arriba de todo.
Cuando el texto no se lee sobre una foto, la reacción típica es cambiar la fuente o ponerla más gruesa. Casi nunca es eso. El problema es el contraste, y una capa lo corrige al instante sin tocar ni la foto ni la tipografía.
La regla de oro
Texto claro, capa oscura. Texto oscuro, capa clara.
02
Pruébalo
Sube la opacidad y mira cómo cambia el contraste medido sobre la zona más clara de la foto. Apunta a 4.5:1.
03
Así no / así sí
No se lee.
Texto blanco sobre la arena y el cielo claros. Por muy linda que sea la foto, el mensaje desaparece.
Se lee.
Misma foto y misma fuente, con un degradado oscuro solo donde va el texto. La parte de arriba de la foto sigue intacta.
04
Tres capas, siempre en este orden
Foto abajo, capa en el medio, texto arriba. La capa es la única que tocas.
05
4 tipos de capa
Sólida: negro al 40–60% sobre toda la foto. La más fácil.
Degradado: de 0 a 70–80%, solo donde va el texto. La foto respira.
Desenfoque: 10–20 px de blur más un poco de oscuro. Quita el detalle que compite con el texto.
Color + textura: tu color de marca al 70–90% con grano encima. Contraste y estilo a la vez. Empieza por la más suave y sube hasta que el texto se lea fácil.
06
Cómo aplicarlo hoy
1
Mira dónde va el texto
Pon la capa solo en esa zona. El resto de la foto queda intacto.
2
Empieza en 40%
Sube la opacidad poco a poco. Para justo cuando el texto se lea sin esfuerzo.
3
Usa un color con intención
Un negro de tu marca o tu color principal se ve mejor que un gris plano.
4
Mide el contraste
Sobre la zona más clara de la foto, apunta a 4.5:1 para texto normal. Si ahí se lee, se lee en todas.
07
Antes de publicar
- ¿Se lee sobre la parte más clara de la foto?
- ¿La capa está solo donde hace falta?
- ¿La foto se sigue entendiendo?
- ¿Lo arreglaste sin cambiar la fuente?
COMENTA
“CAPA”
y te envío
la guía
por DM
La guía de overlays y capas en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Qué es un overlay en diseño gráfico?
Es una capa semitransparente (un color, un degradado o una textura) que va entre una imagen y el texto. Sirve para bajar el ruido de la foto y darle contraste al texto.
¿Qué opacidad debe tener un overlay negro sobre una foto?
Un buen punto de partida es entre 40 y 60% para una capa sólida, o un degradado de 0 a 70–80% solo donde va el texto. Sube hasta que el texto llegue a 4.5:1 sobre la zona más clara.
¿Cómo hacer que el texto se lea sobre una imagen?
Pon una capa oscura bajo el texto claro (o clara bajo el texto oscuro), ubica el texto en la zona más tranquila de la foto y revisa el contraste sobre la parte más clara.
Sigue aprendiendo
