Cómo animar un logo a partir de un PNG o una imagen hecha con IA
Por el equipo de Charmotion · Actualizado el
Para animar un logo a partir de un PNG, vectorízalo y anima sus partes, o conserva los píxeles originales y defórmalos con una malla y huesos. Vectorizar funciona para logos planos; conservar los píxeles, para logos 3D, con degradados o generados con IA. Primero quita el fondo y luego exporta en Rive, video con fondo transparente y MP4.
Puntos clave
- Los logos planos se pueden vectorizar y animar parte por parte; los logos detallados o generados con IA se ven mejor si conservas sus píxeles y los deformas.
- Quita el fondo con limpieza antes de animar, o los bordes se notarán sobre cualquier fondo donde lo coloques.
- Mantén corto el movimiento del logo, termina en la pose de reposo original y nunca uses destellos.
- Usa Rive o video con fondo transparente para la web, HEVC con canal alfa para Safari y MP4 para redes sociales y edición de video.
¿Ya tienes un personaje o logo? Mira tu personaje en pantallas reales de una app: pantallas de splash, onboarding, carga y estado vacío. Es gratis, funciona en tu navegador y no sube nada.
¿Se puede animar un logo plano en PNG o JPG?
Sí. Un PNG o JPG son solo píxeles, pero hay dos formas confiables de darle vida.
1. Reconstrúyelo en vector. Vectoriza el logo en formas con un editor vectorial (o usa una herramienta de vectorización automática y limpia el resultado), y luego sepáralo en partes: el símbolo, cada letra y cualquier tilde o signo. Así cada parte puede moverse por separado: las letras pueden caer una por una y un símbolo puede girar o dibujarse solo. Es la ruta clásica del motion design y funciona mejor cuando el logo ya es plano y de colores sólidos.
2. Conserva los píxeles y defórmalos. Recorta el logo de su fondo, coloca una malla encima y vincúlala a unos pocos huesos. Al mover los huesos, el arte original se comprime, se estira, se inclina y se dobla. No se redibuja nada, así que el logo se ve exactamente igual que el archivo con el que empezaste.
Una forma rápida de decidir:
- Colores sólidos, bordes limpios, el logo existe en SVG en algún lugar: vector.
- Degradados, brillos, texturas, sombreado 3D o una imagen generada con IA: conserva los píxeles.
- El logo es principalmente texto: vector, para que las letras se mantengan nítidas y puedan animarse por separado.
Antes de elegir cualquiera de las dos rutas, busca la versión más grande del archivo que tengas. La animación deja en evidencia el desenfoque y los artefactos de compresión que en una imagen fija pasan desapercibidos.
¿Conviene vectorizar el logo o conservar los píxeles?
Cada enfoque tiene sus ventajas. Esta tabla resume las diferencias:
| Vectorizar | Conservar los píxeles (deformación de malla) | |
|---|---|---|
| Fidelidad al original | Puede alejarse del original; los degradados y el sombreado son difíciles de recrear | Exacta, porque se usan los píxeles originales |
| Tipos de movimiento | Cualquiera: las partes pueden moverse, transformarse o dibujarse en pantalla | Aplastar, estirar, doblar, inclinar, saltar, parpadear |
| Escalado | Nítido en cualquier tamaño | Limitada por la resolución de origen |
| Peso del archivo | Muy ligero en diseños planos | Incluye la imagen, así que pesa más |
| Ideal para | Marcas planas, logos tipográficos, íconos | Logos 3D, con degradados, pintados y generados con IA |
Vectorizar un logo detallado es donde fallan la mayoría de los proyectos. El calco automático convierte un degradado suave en decenas de franjas de color, y redibujar a mano un render 3D casi nunca coincide con el original. Si el equipo de marca ya aprobó una imagen concreta, conservar sus píxeles evita tener que reabrir esa aprobación.
La deformación de malla tiene su propio límite: solo puede mover lo que está visible. No puede girar un logo para mostrar su parte trasera ni revelar un lado oculto. El movimiento se queda en el plano de la imagen: flexiones, rebotes, inclinaciones y aplastamientos.
¿Cómo animar un logo 3D o generado con IA?
Los logos generados con IA suelen ser imágenes rasterizadas con la iluminación, los degradados y las sombras suaves integrados. No vienen en capas, y el "texto" muchas veces son píxeles pintados en lugar de letras reales. Por eso, conservar los píxeles es la opción más natural.
- Quita el fondo. La mayoría de las imágenes de IA están sobre un fondo de color o con textura. Recorta el logo con un canal alfa limpio, sin halo del fondo anterior en los bordes.
- Identifica las partes móviles. Si el logo tiene cara u ojos, ubícalos para que puedan parpadear. Si tiene una parte superior y una base claras, eso define dónde se aplasta y se estira.
- Riggea con pocos huesos. Una columna de dos a cuatro huesos basta para saltos, inclinaciones y flexiones. Más huesos dan un control más fino, pero hacen más difícil que el movimiento se vea elegante.
- Protege el texto. Deja las letras en una zona rígida de la malla para que se muevan como un bloque en lugar de deformarse y volverse ilegibles.
- Conserva el sombreado. Como los píxeles se mueven en lugar de redibujarse, los brillos y las sombras acompañan a la forma.
Así funciona el modo Motion de Charmotion. A los logos con 3D, degradados, texto o ilustraciones JPG generadas con IA se les elimina el fondo, se les detectan los ojos para los parpadeos y los propios píxeles de la ilustración se deforman con un rig de huesos. No se redibuja ni se cambia el estilo de nada. Los sets, con Rive, WebM/MOV transparente, MP4, GIF y un video de inicio 9:16, requieren un plan de pago. Si necesitas un logo que se transforme, gire en 3D o se dibuje letra por letra, un motion designer que trabaje con archivos vectoriales es la mejor opción.
¿Qué hace que una animación de logo sea buena?
Una animación de logo debe dejar la marca más clara que antes, no solo más recargada. Lista de verificación:
- Empieza y termina en el logo real. La pose de reposo debe ser el arte aprobado, sin cambios, para que un fotograma en pausa o el último fotograma siempre se vean bien.
- Se mantiene legible. Si el nombre se vuelve ilegible a mitad del movimiento durante más de un instante, la animación está jugando en contra del logo.
- Tiene una sola idea. Un salto, un rebote, un trazado, un parpadeo. Combinar cinco efectos se percibe como ruido.
- Va con el tono de la marca. Un banco puede asentir; un estudio de videojuegos puede rebotar.
- No destella. WCAG 2.3.1 limita cualquier elemento a tres destellos en cualquier período de un segundo (W3C). Evita brillos estroboscópicos y cambios de color rápidos.
- Tiene una alternativa estática. Cuando quien mira prefiere movimiento reducido, muestra el logo estático (MDN).
Planifica una pequeña familia de movimientos en lugar de uno solo. Una aparición para las intros, un loop en reposo (idle) suave para la sección hero, un rebote de éxito para las confirmaciones y un estado de reposo tranquilo cubren la mayoría de los lugares donde aparece un logo.
¿Cuánto debe durar una animación de logo?
Depende de dónde se reproduzca el logo. La regla es la misma en todas partes: cuanto menos espera provoque, mejor.
| Contexto | Duración recomendada |
|---|---|
| Ícono de splash en Android 12+ | Google recomienda no más de 1000 ms en teléfonos (Android Developers) |
| Intro de inicio dentro de la app | Alrededor de un segundo para la parte que retrasa la interacción; deja que el resto se reproduzca sobre una pantalla ya activa |
| Loop en la sección hero de un sitio web | Un loop sin cortes; que quede en una imagen fija después de unos ciclos |
| Intro u outro de video | Unos segundos, al ritmo de la edición y de cualquier efecto de sonido |
| Reacciones (éxito, error) | Lo bastante corta para terminar antes de que el usuario lea el resultado |
Los loops en una página web requieren un cuidado especial. Según WCAG 2.2 SC 2.2.2, el movimiento que empieza automáticamente, dura más de cinco segundos y aparece junto a otro contenido necesita una forma de pausarlo, detenerlo u ocultarlo. Un logo en la sección hero que se repite unas pocas veces y luego se queda en reposo evita el problema y mantiene la atención en tu titular.
Para el inicio de apps en particular, consulta la guía de animaciones para pantalla de inicio y splash screen.
¿Qué formatos necesitas para web, apps y video?
Ningún archivo cubre todos los canales. Un kit completo de animación de logo suele incluir:
| Dónde | Formato | Finalidad |
|---|---|---|
| Sitio web o app web, interactivo | Rive (.riv) | Un solo archivo ligero, varios estados, reacciona al código |
| Sitio web, loop con fondo transparente | WebM (VP9 con alfa) + MOV (HEVC con alfa) | Chrome, Edge y Firefox reproducen alfa VP9; Safari necesita alfa HEVC |
| Splash de app (Android) | AnimatedVectorDrawable | El formato de ícono animado de la API SplashScreen |
| Ediciones de video, intros, outros | MOV con canal alfa | Se coloca sobre el metraje en un editor |
| Redes sociales, vistas previas de tiendas, presentaciones | MP4 | Se reproduce en todas partes |
| Email, documentos, chat | GIF | Solo vista previa |
Safari reproduce WebM pero descarta el canal alfa VP9, así que un WebM con fondo transparente se ve con fondo opaco ahí (Can I use). Por eso necesitas ambos archivos transparentes; consulta la guía de logo animado con fondo transparente.
GIF es un mal formato final para logos: admite como máximo 256 colores y solo transparencia total o nula, así que los degradados se ven en franjas y los bordes, dentados (MDN). El video además pesa mucho menos; en el ejemplo de web.dev, un GIF de 3.7 MB se redujo a un MP4 de 551 KB (web.dev). Más información en GIF vs WebM vs MP4 vs Rive.
¿Cómo agrego un logo animado a la sección hero de mi sitio web?
Para un loop de logo con fondo transparente, usa un video silenciado e inline con dos fuentes. HEVC debe ir primero, porque Safari puede reproducir VP9 pero no su canal alfa (Jake Archibald):
<video autoplay muted loop playsinline
poster="/img/logo-still.png" width="480" height="480">
<source src="/img/logo.mov"
type='video/quicktime; codecs="hvc1.1.6.H120.b0"'>
<source src="/img/logo.webm"
type='video/webm; codecs="vp09.00.41.08"'>
</video>Notas sobre ese código:
mutedyplaysinlineson los que permiten la reproducción automática, también en iPhone. Siplay()se rechaza, el póster sigue visible (MDN).- El póster debe ser la pose de reposo del logo, para que la sección hero se vea terminada antes de que cargue el video.
- Define
widthyheightpara evitar el layout shift (salto de diseño). - Con
prefers-reduced-motion: reduce, reemplaza el video por la imagen fija.
Si el logo debe reaccionar, por ejemplo rebotar al hacer hover o celebrar después de un registro, usa un archivo de Rive y cambia de estado desde el código. Consulta video con fondo transparente en un sitio web y Rive en React y Next.js.
Cómo animar un logo a partir de un PNG
- Consigue el mejor archivo de origen. Busca el PNG o JPG más grande del logo, o el SVG original si existe.
- Elige vector o píxeles. Vectoriza los logos planos y divídelos en partes; conserva los píxeles originales en logos 3D, con degradados o generados con IA.
- Elimina el fondo. Recorta el logo con un canal alfa limpio, sin halo del fondo anterior.
- Riggea y anima. Anima directamente las partes vectoriales, o vincula una malla a unos pocos huesos para aplastar, inclinar y hacer rebotar un arte rasterizado. Mantén el texto en una zona rígida.
- Termina en la pose de reposo. Haz que cada animación empiece y termine en el logo aprobado, y agrega una alternativa estática para movimiento reducido.
- Exporta para cada canal. Exporta Rive para uso interactivo en la web, HEVC MOV y VP9 WebM con canal alfa para loops con fondo transparente, y MP4 para redes sociales y video.
Preguntas frecuentes
¿Puedo animar un logo sin el archivo vectorial original?
Sí. Puedes vectorizar el PNG, o conservar los píxeles y deformarlos con una malla y huesos. Conservar los píxeles suele ser mejor para logos detallados, porque al vectorizar se pierden los degradados y el sombreado. Usa el archivo de mayor resolución que tengas.
¿Cómo animo un logo generado con IA?
Elimina el fondo y luego anima los píxeles originales con un rig de malla y huesos en lugar de redibujar el logo. Así conservas la iluminación y el sombreado que generó la IA. Mantén cualquier texto en una parte rígida de la malla para que siga siendo legible mientras el resto se dobla.
¿Cuál es el mejor formato para un logo animado en un sitio web?
Para un loop con fondo transparente, usa video con dos fuentes: HEVC MOV con canal alfa para Safari y luego VP9 WebM con canal alfa para los demás navegadores. Para un logo que reaccione al hover o a los clics, usa un archivo de Rive. Evita el GIF, que genera bandas en los degradados y bordes dentados.
¿Por qué mi logo en WebM con fondo transparente muestra un fondo negro en Safari?
Safari reproduce WebM pero descarta el canal alfa de VP9, así que se pierde la transparencia. Agrega un MOV en HEVC con canal alfa como primera fuente en tu elemento de video; Safari lo elegirá, y Chrome, Edge y Firefox usarán el WebM como alternativa.
Respuestas rápidas de esta guía
Fuentes
- Video with alpha transparency on the web, Jake Archibald
- WebM video format, Can I use
- Image file type and format guide, MDN Web Docs
- Replace animated GIFs with video for faster page loads, web.dev
- Splash screens, Android Developers
- Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
- prefers-reduced-motion, MDN Web Docs
- Autoplay guide for media and Web Audio APIs, MDN Web Docs