La versión corta
- Una historia animada de Instagram es un vídeo de 1080×1920, normalmente un bucle corto, que se usa en lugar de una historia estática.
- Las historias animadas más legibles mantienen el fondo moviéndose despacio y hacen entrar las palabras una vez, para después dejarlas quietas.
- El primer segundo es el que más importa, así que el titular debe estar del todo en pantalla más o menos un segundo después de que se abra la historia.
- Sube las historias animadas como vídeo MP4 a 1080×1920 y no como GIF, para que los degradados sigan siendo suaves.
- Mantén el texto y los logotipos fuera de la parte superior e inferior del encuadre, donde Instagram dibuja su propia interfaz.
En esta página
Una historia animada de Instagram funciona cuando una sola cosa se mueve con un propósito y todo lo demás sigue siendo legible. En la práctica, eso significa un fondo que se desliza despacio, un titular que entra una vez con una animación corta y luego se queda quieto, y nada importante en la parte superior o inferior del encuadre de 1080×1920. Expórtala en MP4, no en GIF, y asegúrate de que el primer fotograma ya se lea como un diseño terminado, porque algunas personas solo verán ese fotograma.
Qué debe moverse en una historia animada
Una historia se ve un instante, con el brazo extendido y a menudo sin sonido. El movimiento atrae la mirada, así que cada cosa que se mueve compite con tus palabras. Las historias que retienen la atención eligen una sola capa en movimiento, la mantienen tranquila y dejan que el texto haga su trabajo. Las historias recargadas parecen enérgicas en el editor y agotadoras en el móvil.
Cansa verla
- Cada línea de texto se anima de una forma distinta
- Las palabras siguen moviéndose después de entrar
- Un fondo rápido y de alto contraste detrás de un texto pequeño
- Stickers, GIF y efectos apilados en un mismo encuadre
- El titular aparece a los tres segundos
Retiene la atención
- Un solo estilo de animación de texto para toda la historia
- Las palabras entran y después se quedan totalmente quietas
- Un fondo lento con una zona tranquila detrás de las palabras
- Un solo elemento en movimiento, elegido a propósito
- El titular se puede leer en un segundo
El mismo principio recorre todo buen trabajo de motion, de los logotipos a las webs. Si quieres la teoría que hay detrás, principios de motion design trata el ritmo, las curvas de aceleración y la jerarquía con más profundidad.
Cuatro animaciones de texto que funcionan en historias
La animación de texto es el movimiento más útil en una historia, porque le dice a la mirada por dónde empezar. Que sea breve. Una entrada que dura más de medio segundo aproximadamente empieza a sentirse como una espera, y la gente pasa de largo las esperas.
Úsala para
Úsala para
Úsala para
Qué hace
Úsala para
Escalona las líneas y no las palabras: primero el titular, la línea de apoyo un instante después y la invitación al enlace al final. Ese orden coincide con cómo lee la gente, y hace que la historia tenga sentido aunque alguien se vaya a mitad. Para más patrones, incluida la tipografía cinética, consulta ideas de animación de texto.
Primero sube el titular y después el detalle. Ambos están en la franja central, lejos de la interfaz.
Una cuenta atrás que entra con un pop una sola vez. El fondo sigue moviéndose, así que la historia sigue viva mientras las palabras se quedan quietas.
El ritmo de una historia animada de Instagram
Una historia estática se queda en pantalla unos cinco segundos antes de que Instagram pase a la siguiente. Una historia en vídeo dura lo que dure el clip, pero la atención se concentra al principio: si el primer segundo está vacío, el resto casi nunca se ve. Planifica la línea de tiempo hacia atrás a partir de eso.
- 1
De 0 a 1 segundo: el titular
El fondo ya se mueve en el primer fotograma. El titular termina su entrada al acabar el primer segundo.
- 2
De 1 a 2 segundos: el apoyo
Llega la segunda línea o el producto. Usa la misma animación que el titular, con un movimiento algo menor.
- 3
De 2 a 3 segundos: la acción
Aparece la invitación al enlace, la fecha o el código. Es la línea sobre la que la gente actúa, así que necesita tiempo para leerse.
- 4
El resto: mantener
No entra nada nuevo. El fondo sigue deslizándose para que la historia se repita sin un reinicio visible.
Entre seis y diez segundos es una duración cómoda para una historia diseñada con un mensaje corto. Los clips más largos encajan con alguien hablando o con una demostración, no con un titular. Si la historia va a repetirse en bucle, el fondo debe terminar donde empezó, algo que se explica paso a paso en vídeo en bucle perfecto.
Tamaño, zonas seguras y ajustes de exportación
Una historia animada usa el mismo encuadre que una estática: 1080×1920 píxeles, 9:16. La interfaz de Instagram se superpone arriba y abajo, así que mantén las palabras y los logotipos en la franja central. Una regla de trabajo habitual es dejar sin texto unos 250 píxeles arriba y abajo. El desglose completo está en tamaño de las historias de Instagram.
Historia y Reel 9:16
1080 × 1920
Publicación del feed 4:5
1080 × 1350
Cuadrado 1:1
1080 × 1080
Por qué
Por qué
Recomendación
Por qué
Por qué
Por qué
El GIF es el único formato que conviene evitar aquí. Su límite de 256 colores convierte los degradados suaves en franjas, y para Instagram una historia en movimiento es un vídeo, así que dale un vídeo. La comparación está en GIF frente a MP4.
Historias animadas que no se parecen a las de todos
La mayoría de las plantillas de historias animadas usan el mismo puñado de fondos en movimiento, así que un feed lleno de ellas se vuelve borroso. El fondo es donde se puede reconocer tu marca antes de que nadie lea una palabra. Un campo de color en movimiento que te pertenece hace más de lo que hará nunca un bucle de stock.
En Gradiently, una historia empieza sobre un Mark: un fondo vivo de degradado y material que se mueve por sí solo y es único. Añade tu titular, elige ascenso, pop, barrido o máquina de escribir, y el Mark mantiene su zona más tranquila detrás de las palabras mientras la tinta automática elige texto claro u oscuro línea a línea. Después, el mismo diseño puede adaptarse a una publicación del feed o a un fondo para Reels sin rehacerlo. La exportación de vídeo forma parte de Pro y guarda MP4 cuando tu navegador lo permite.
Un Mark lento detrás de una sola línea quieta. El fondo se mueve; las palabras, nunca.
Preguntas frecuentes
¿Cómo hago una historia animada de Instagram?
Diseña un encuadre de 1080×1920 con un fondo en movimiento y una sola animación de texto, mantén las palabras en la franja central, expórtalo en MP4 y súbelo como historia. La mayoría de las herramientas de diseño con exportación de vídeo pueden hacerlo.
¿En qué formato debe estar una historia animada de Instagram?
MP4 a 1080×1920 píxeles. Evita el GIF: su límite de 256 colores hace que los degradados muestren bandas, y de todos modos Instagram trata una historia en movimiento como vídeo.
¿Cuánto debe durar una historia animada de Instagram?
Para una historia diseñada con un mensaje corto, entre seis y diez segundos es cómodo. Pon el titular en pantalla en el primer segundo, porque la atención cae rápido después.
¿Por qué mi historia animada se ve borrosa o con bandas?
Normalmente se exportó como GIF, al tamaño equivocado o con una tasa de bits baja. Exporta en MP4 a exactamente 1080×1920 para que Instagram no tenga nada que reescalar.
¿El texto debe moverse todo el tiempo?
No. Deja que las palabras entren una vez y después se queden quietas. El texto en movimiento cuesta más de leer, y un fondo que se mueve despacio ya mantiene viva la historia.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil