Cómo añadir gráficos en movimiento a un vídeo
Cómo añadir gráficos en movimiento a un vídeo para que explique más: 8 gráficos que se ganan su lugar, reglas de tiempo, una lista de planos de 60 segundos y 3 formas de crearlos.
Roozbeh Firoozmand13 min de lectura
La mayoría de los vídeos de producto no necesitan más movimiento. Necesitan que la mirada del espectador esté en el lugar correcto en el segundo preciso. Cuando añades gráficos en movimiento a un vídeo, cada uno debe cumplir 1 de 2 funciones: mostrar dónde mirar o decir qué significa algo. Cualquier otra cosa es decoración, y en una grabación de pantalla la decoración compite con la interfaz que estás enseñando.
A continuación: los 8 gráficos que cumplen su función, las reglas de tiempo para cada uno, una lista de planos de antes/después para un tutorial de 60 segundos y 3 formas de crearlos.
La prueba que todo gráfico debe superar
Reproduce el clip con el gráfico y sin él. ¿El espectador encuentra el botón o número correcto más rápido con él? Si la respuesta honesta es "se ve mejor", elimínalo. 2 comprobaciones más detectan la mayor parte del desorden:
- Un solo gráfico animado a la vez. Escalona las entradas al menos medio segundo, o el espectador no leerá ninguna.
- El gráfico llega con la narración. Si la voz en off dice "haz clic en Exportar" y el resaltado aparece 2 segundos después, el espectador ya está buscando. Haz que aparezca con la palabra, o unos fotogramas antes.
8 gráficos que se ganan su lugar en una grabación de pantalla
| Gráfico | Función | Regla general |
|---|---|---|
| Etiqueta (texto) | Nombra el elemento en pantalla | De 2 a 6 palabras, en pantalla al menos 2 veces el tiempo de lectura |
| Zoom + resaltado | Muestra dónde está la acción | Zoom antes del clic, mantener 1 a 2 segundos después de que ocurra |
| Contador de pasos | Indica a los espectadores dónde están | Misma esquina, mismo estilo, en cada paso |
| Tercio inferior | Nombra a una persona o sección | Tercio inferior, sin tapar la interfaz que demuestras |
| Tarjeta de título | Separa capítulos | 2 a 3 segundos, 1 línea de texto |
| Flecha animada | Señala algo que un zoom no puede aislar | Dibujar y luego mantener quieta |
| Contador de datos | Hace que un número destaque | Contar en aproximadamente 1 segundo, luego mantener el valor final |
| Transición | Marca un cambio de escena o tema | 1 estilo por vídeo, menos de medio segundo |
Etiquetas
Una etiqueta debe nombrar el control o indicar el resultado: "Ajustes de facturación" o "Factura enviada". Mantenla en 6 palabras. Las directrices de subtítulos de la BBC recomiendan un mínimo de unos 0,3 segundos por palabra para los subtítulos. En una grabación de pantalla, tu espectador también está escaneando la interfaz, así que duplica eso: una etiqueta de 4 palabras necesita unos 2,5 segundos, no 1,2.
Zoom + resaltado
El gráfico en movimiento más útil en una grabación de pantalla, y el más sobreutilizado. Haz zoom 0,5 segundos antes del clic, mantén mientras aparece el resultado y luego aleja el zoom para que el espectador vea dónde está. Un resaltado (un cuadro suave o atenuar el entorno) hace el mismo trabajo sin mover el encuadre, lo cual es adecuado para paneles densos donde el zoom oculta el contexto. Usa uno u otro por acción.
Contadores de pasos
"Paso 3 de 5" en una esquina fija indica al espectador cuánto falta. Mantén la posición y el estilo fijos y cambia solo el número. Con menos de 3 pasos, omítelo.
Tercios inferiores
En los vídeos de producto, los tercios inferiores nombran al presentador en una burbuja de cámara o etiquetan una sección ("Vista de administrador"). Vigila la ubicación: la parte inferior de la mayoría de las aplicaciones web contiene barras de guardado y widgets de chat.
Tarjetas de título
Úsalas entre capítulos, no en cada paso. Un vídeo de 60 segundos necesita 1, al principio. Una tarjeta de título que requiere tiempo de lectura es un párrafo fingiendo ser un gráfico.
Flechas animadas
Una flecha es mejor que un zoom cuando 2 elementos en pantalla se relacionan, como "este interruptor cambia esa vista previa". Deja que se dibuje en unos 0,3 segundos y luego detente. Una flecha que rebota atrae la atención mientras rebote.
Contadores de datos
Contar hasta "1.240 tickets" da peso a una estadística en una demo o clip de lanzamiento. Rara vez pertenece a un tutorial. Anima rápido y mantén el número final, o el movimiento será lo único que el espectador recuerde.
Transiciones
Usa 1 estilo por vídeo, solo cuando cambie la escena o el tema. Entre 2 pasos en la misma pantalla, un corte suele ser lo mejor. Evita los efectos de destello: el criterio de éxito de las WCAG sobre 3 destellos o menos existe porque el contenido parpadeante puede provocar convulsiones y migrañas.
Reglas que mantienen la coherencia de las superposiciones animadas
Las superposiciones animadas parecen profesionales cuando parecen un sistema:
1. Un estilo de movimiento. Misma aceleración, misma dirección de entrada, misma duración para cada etiqueta. Si las etiquetas se deslizan desde la izquierda en el paso 1, se deslizan desde la izquierda en el paso 5. 2. Plantillas de marca, hechas una vez. Fuentes, colores, revelación del logotipo y diseño de la tarjeta de título pertenecen a una plantilla guardada, no reconstruida por vídeo. Todas las herramientas a continuación admiten esto de alguna forma. 3. Un área segura. Mantén el texto alejado de los bordes del marco y de los controles de la interfaz que estás mostrando. Marca el área segura en tu plantilla. 4. Los gráficos siguen el guion. Escribe la narración primero, luego marca la palabra en la que se apoya cada gráfico. Sin palabra, no hay gráfico.
Antes y después: lista de planos para un tutorial de 60 segundos
Un tutorial de 60 segundos sobre "envía tu primera factura" en una aplicación de facturación SaaS típica. "Antes" es la grabación en bruto con voz en off.
| Tiempo | Antes (grabación en bruto) | Después (con gráficos en movimiento) |
|---|---|---|
| 0:00–0:03 | Panel de control, cursor a la deriva | Tarjeta de título: "Envía tu primera factura" con revelación de logo, 3 segundos |
| 0:03–0:10 | El narrador explica el objetivo sobre el panel | Aparece el contador de pasos ("Paso 1 de 4"); resaltado en la pestaña Facturas mientras el narrador la nombra |
| 0:10–0:18 | Clic en Facturas, carga la página | Zoom en el botón Nueva factura 0,5 segundos antes del clic; etiqueta "Nueva factura" |
| 0:18–0:32 | Escribiendo cliente, partidas, importe | Paso 2 de 4; zoom hacia fuera para mostrar el formulario completo; desenfoque en el correo real del cliente |
| 0:32–0:40 | Desplazamiento a la fecha de vencimiento | Paso 3 de 4; flecha desde el campo de fecha de vencimiento a la vista previa de términos de pago |
| 0:40–0:50 | Clic en Enviar, notificación de confirmación | Paso 4 de 4; zoom en la notificación; etiqueta "Factura enviada", mantenida 2,5 segundos |
| 0:50–0:57 | El narrador menciona recordatorios | Transición de deslizamiento a la pantalla de Recordatorios; resaltado en el interruptor |
| 0:57–1:00 | El vídeo termina en el panel | Tarjeta final con el título del siguiente vídeo, misma plantilla que la apertura |
Son 16 eventos gráficos en 60 segundos. Funciona porque las entradas están escalonadas y cada una se apoya en una palabra del guion. El desenfoque es por privacidad, y es el único gráfico que nunca debes omitir en datos reales de clientes.
3 formas de añadir gráficos en movimiento a un vídeo
1. Un editor tradicional: Premiere, After Effects o DaVinci Resolve
Adobe Premiere con After Effects. Las plantillas de gráficos en movimiento (archivos .mogrt) se crean en After Effects y se reutilizan en Premiere. Según la página de ayuda de Adobe, arrastras una plantilla desde el panel de Plantillas de gráficos esenciales a una pista de vídeo y luego la cambias en la pestaña Editar del panel de Propiedades. Las plantillas basadas en datos rellenan gráficos de barras y líneas a partir de datos de hojas de cálculo, que es la ruta más limpia para obtener contadores de datos y gráficos precisos.
DaVinci Resolve. La página Fusion es un compositor basado en nodos dentro de Resolve, con más de 200 herramientas. Puedes crear tercios inferiores, fondos animados y transiciones en Fusion, guardarlos como macros y exponer solo los controles que un editor debería tocar. Luego aparecen en la biblioteca de efectos de la página Edición para cualquier proyecto. Resolve es una descarga gratuita; Resolve Studio tiene un precio de $295.
Ideal para: equipos con un diseñador de movimiento que crea plantillas una vez y editores que las reutilizan. Contras: los zooms y llamadas en una grabación de pantalla se ajustan manualmente con fotogramas clave, cada vez.
2. Un editor basado en plantillas: Canva o CapCut
Canva te permite animar páginas, elementos y texto desde el botón Animar, con preajustes Lento, Medio o Rápido o duraciones exactas de entrada y salida. "Mostrar tiempo del elemento" te permite configurar cuándo aparece cada elemento, y "Crear una animación" te permite arrastrar un elemento a lo largo de una ruta de movimiento. Los Kits de marca almacenan logotipos, colores y fuentes para que las plantillas mantengan la identidad de marca.
CapCut tiene una biblioteca de plantillas de texto y animaciones de texto, y en la versión de escritorio puedes usar fotogramas clave para posición, escala, rotación y opacidad. Así es como crearías un zoom manual o una llamada deslizante.
Ideal para: especialistas en marketing que ya usan estas herramientas y necesitan texto animado sobre clips cortos. Contras: ninguna está diseñada para grabaciones de pantalla, por lo que los zooms que siguen clics, la limpieza del cursor y los desenfoques de privacidad son trabajo manual.
3. Clevera: superposiciones en una línea de tiempo, o un resumen en palabras sencillas
Clevera comienza desde la grabación. Para vídeos instructivos narrados por IA y demostraciones de productos, suaviza el cursor, resalta las interacciones clave y aplica un zoom inteligente mientras escribe y sincroniza la voz en off. La mayor parte del trabajo de zoom y resaltado en la lista de tomas anterior se realiza antes de abrir el editor.
En el editor de línea de tiempo, luego añades o ajustas el resto: superposiciones de texto, imagen, desenfoque y resaltador, tarjetas de título, tarjetas de introducción, revelaciones de logotipo, zooms y transiciones como zoom cruzado, escalera, persianas, disolvencia, barrido suave y deslizamiento. Las tarjetas de título, las revelaciones de logotipo y el estilo de vídeo se guardan como plantillas predefinidas o personalizadas, para que el segundo vídeo se vea como el primero. Si solo quieres que tu propia grabación tenga estilo con zooms, superposiciones y tarjetas de título, la opción con estilo (lista para compartir) no utiliza créditos de IA, por lo que es ilimitada en todos los planes, incluido el Gratuito (en el plan Gratuito compartes mediante enlace o incrustación; las descargas MP4 vienen con Starter y Pro).
Para gráficos fuera de esa lista, usa Describe lo que quieres en el generador de gráficos en movimiento por IA. Escribes un resumen de forma libre, como "añadir un contador animado de 0 a 1.240 en 0:45 y una flecha desde el campo de fecha de vencimiento hasta la vista previa de términos", y Clevera crea gráficos animados sobre el vídeo existente. La lista de superposiciones del editor no incluye una flecha o contador dedicado, así que esta es la ruta para ellos.
Las ediciones de texto, resaltados y desenfoques en un vídeo de Clevera publicado actualizan cada enlace alojado e incrustación, por lo que una etiqueta de botón renombrada se corrige una sola vez. La nueva interfaz de usuario aún necesita nuevas imágenes.
Ideal para: equipos de producto, soporte y marketing que crean tutoriales cada semana sin necesidad de un editor. Compromiso: el grabador de IA solo captura sitios web públicos y aplicaciones web, por lo que el material de software de escritorio y de intranet debe provenir de la aplicación de escritorio o de una carga. Consulta la siguiente sección para conocer las tareas que no debería realizar.
Qué añadió Clevera por su cuenta y qué no
En octubre de 2026, hicimos que el grabador de IA de Clevera capturara una tarea corta en una aplicación de demostración de tareas, 0:58 de metraje sin editar, y lo convertimos en un vídeo instructivo. Unos 50 segundos y 9 créditos después, la línea de tiempo ya contenía una tarjeta de introducción, una revelación de logotipo y zooms automáticos a 1.5x y 1.8x, recortados a 0:40. Eso es la tarjeta de título y las filas de zoom de la lista de tomas terminadas. Las llamadas, un contador de pasos y las flechas no estaban allí; esas te toca añadirlas a ti.
Luego ejecutamos "Con estilo para compartir" en la misma grabación con nuestra plantilla de equipo en lugar de la predeterminada integrada. Tomó unos 25 segundos y 0 créditos. El resultado duró 1:07, más largo que la fuente debido a la tarjeta de introducción, con 2 zooms automáticos a 1.8x y el editor abierto en el panel de Estilo para fondo, relleno, esquinas y cursor. La página grabada en sí se veía descolorida y con poco contraste; el panel de Estilo enmarca el metraje, no lo arregla.
La versión de 1:07 con estilo para compartir de la misma grabación, sin editar, 0 créditos.
Para la ruta del resumen, un resumen personalizado creó una infografía animada de 1:00 con una barra de llenado en unos 7 a 8 minutos por 86 créditos. Los números eran correctos, pero ignoró los 15 segundos escritos en el resumen (la duración se establece en el menú Formato) y la línea de origen salió demasiado pequeña para un teléfono. Ese clip se construyó desde cero. Todavía no hemos probado gráficos superpuestos en una grabación existente.
La infografía animada de 1:00 que devolvió Clevera a partir del resumen, sin editar.
Cuándo vale la pena pagar por un diseñador de movimiento
Los editores de IA y las plantillas cubren los gráficos de esta guía. No reemplazan a un diseñador de movimiento para:
- Un vídeo de lanzamiento o película de marca donde cada fotograma está dirigido artísticamente y el movimiento en sí es el mensaje.
- Gráficos rastreados en metraje en movimiento, como una etiqueta que sigue a un teléfono en una toma manual.
- 3D, animación de personajes o ilustración personalizada en movimiento.
- Tu sistema de plantillas. Una semana del tiempo de un diseñador creando tus tercios inferiores, tarjetas de título y revelación de logotipo en After Effects o Fusion vale la pena en cada vídeo que tu equipo haga después, en cualquier herramienta que acepte plantillas.
La división habitual: un diseñador para el sistema y el lanzamiento insignia, una herramienta de IA o editor de plantillas para los recorridos semanales.
Empieza con el zoom
Si añades una cosa a tu próxima grabación de pantalla, que sea un zoom que aterrice medio segundo antes del clic. Soluciona la queja más común sobre los vídeos de productos, "No pude ver en qué hiciste clic", y cualquier otro gráfico en esta guía se basa en ese hábito de poner el ojo del espectador donde apunta la narración.
