Logo animado con fondo transparente: formatos, editores, presentaciones y OBS
Por el equipo de Charmotion · Actualizado el
Un logo animado solo conserva la transparencia en un formato con canal alfa: MOV con HEVC alpha o ProRes 4444 para editores y apps de Apple, WebM con VP9 alpha para Chrome, Firefox y OBS, o GIF con transparencia de 1 bit y bordes duros. MP4 no tiene canal alfa, así que el fondo siempre sale sólido, normalmente negro.
Puntos clave
- MP4 (H.264) no admite transparencia. Usa MOV (HEVC alpha o ProRes 4444), WebM (VP9 alpha) o, en casos sencillos, GIF.
- Un fondo negro suele significar que el archivo no tiene canal alfa o que la app lo ignora.
- ProRes 4444 es el formato transparente más aceptado en los editores; HEVC alpha pesa menos y es nativo en las apps de Apple.
- La descarga con fondo transparente de Canva abarca PNG, SVG y GIF, no MP4, y requiere un plan de pago.
- OBS reproduce WebM con fondo transparente en una Fuente multimedia (Media Source).
¿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.
¿Qué formatos de video conservan el fondo transparente de un logo?
Solo los formatos que guardan un canal alfa: un cuarto valor por píxel que indica cuán transparente es. Un MP4 normal no lo tiene, así que un logo "transparente" exportado a MP4 siempre acaba sobre un color sólido.
| Formato | Transparencia | Funciona bien en | Ten en cuenta |
|---|---|---|---|
| MOV, HEVC con canal alfa | Alfa suave (8 bits) | Safari, iPhone y iPad, Keynote, Final Cut Pro, apps de macOS | Es sobre todo un formato de Apple; no es transparente en Firefox |
| MOV, ProRes 4444 | Alfa suave | La mayoría de los editores profesionales | Archivos muy pesados |
| WebM, VP9 con alfa | Alfa suave (8 bits) | Chrome, Edge, Firefox, OBS | Safari lo reproduce pero descarta el canal alfa |
| GIF | Transparente u opaco por píxel | Casi todo | Bordes dentados, halos, 256 colores como máximo |
| MP4 (H.264) | Ninguno | Todo | Siempre opaco |
La sesión de Apple sobre HEVC con canal alfa de la WWDC19 indica que la reproducción "es compatible con iOS 13, tvOS 13 y macOS Catalina". MDN señala que, en el caso de VP9, "Safari no admite transparencia alfa en este formato". Sobre GIF, MDN explica que los píxeles son opacos salvo que su color sea el marcado como transparente, en cuyo caso son "totalmente transparentes". No hay término medio, y por eso los bordes suaves se ven toscos.
Para poner un logo con fondo transparente en una página web, consulta video con fondo transparente en un sitio web.
¿Por qué mi logo transparente muestra un fondo negro?
Casi siempre por uno de estos cuatro motivos:
- El archivo no tiene canal alfa. La guía de Keynote de Apple lo dice sin rodeos: "H.264 no admite canales alfa, por lo que la transparencia se convierte en un fondo negro". Cualquier exportación a MP4 de un diseño transparente hace esto.
- La app ignora el canal alfa. Apple indica que "un reproductor HEVC que no entiende el canal alfa mostrará solo la capa de video base", es decir, el logo sobre negro. Safari hace lo mismo con VP9 alpha en WebM.
- Un ajuste lo elimina. El cuadro de diálogo Interpret Footage de Premiere Pro tiene una opción "Ignore Alpha Channel" que, según Adobe, "mostrará píxeles negros en lugar del video de fondo".
- Un sistema antiguo. La guía de Keynote de Apple señala que las versiones de macOS anteriores a la 10.15 no admiten transparencia en películas HEVC y ProRes.
Para ver si el archivo en sí es transparente, arrástralo al verificador de video con fondo transparente gratis, que lo reproduce sobre un fondo de cuadros en tu navegador. Si el archivo está bien, el problema es la app, y cambiar a ProRes 4444 suele solucionarlo.
¿Canva puede exportar un logo animado con fondo transparente?
Solo como GIF. El centro de ayuda de Canva incluye descargas transparentes en PNG, SVG y GIF, y dice que descargar con fondo transparente "solo está disponible en los planes Canva Pro, Canva Teams, Canva Business, Canva Education y Canva for Nonprofits". Sus opciones de descarga de video son MP4 y GIF, y MP4 no es transparente.
| Herramienta | Exportación animada con fondo transparente | Plan |
|---|---|---|
| Canva | Solo GIF (bordes de 1 bit) | Pro, Teams y otros planes de pago |
| Adobe Express | No en GIF ("el fondo transparente no es compatible con las exportaciones GIF"); no hay una página oficial sobre exportación de video transparente | No aplica |
| Jitter | WebM, MOV (ProRes 4444) o GIF | Planes Max y Ultra |
| MorphLogo | MOV (ProRes 4444), creado mediante chroma key de pantalla verde | Planes de pago |
| After Effects | ProRes 4444 con canal alfa, entre otros | Suscripción a Creative Cloud |
Adobe Express puede importar un video transparente en ProRes 4444, así que puedes llevar un logo transparente a un proyecto de Express aunque no puedas exportarlo desde ahí. Fuentes: Canva, Adobe Express, Jitter, MorphLogo.
¿Cómo usar un logo transparente en Final Cut Pro, Premiere Pro o DaVinci Resolve?
Colócalo en una pista encima de tu metraje. El editor lo compone usando su canal alfa. Esto es lo que documenta cada app:
| Editor | Qué dice la documentación | Archivo más seguro |
|---|---|---|
| Final Cut Pro | Importa "Apple ProRes (todas las versiones)" y HEVC. Un clip conectado "se compone sobre el clip de video de la línea argumental principal, y el canal alfa controla la opacidad de su clip". | MOV con HEVC alpha o ProRes 4444 |
| Premiere Pro | Importa HEVC y respeta el canal alfa, salvo que esté activada la opción "Ignore Alpha Channel". WebM no figura en la lista de formatos de importación de Adobe, y expertos de la comunidad de Adobe indican que Premiere no lee el canal alfa de WebM. | ProRes 4444 |
| DaVinci Resolve | La lista de códecs de Resolve 21 incluye ProRes 4444 con canal alfa y solo menciona la decodificación de VP9 en MOV y MP4, no en WebM. | ProRes 4444 |
Apple documenta la reproducción y la codificación de HEVC con canal alfa en sus propias apps (Compressor 4.4.5 "admite la reproducción de HEVC con canal alfa"), pero ninguna de las guías de estos tres editores afirma de forma explícita que un archivo HEVC con alfa importado conserve su transparencia. Si un logo aparece sobre fondo negro en tu editor, conviértelo a ProRes 4444: pesa más, pero todos los editores profesionales lo leen.
Los pasos para colocar, ajustar el tamaño y aplicar un fundido a un logo en una esquina están en cómo agregar un logo animado a un video.
¿Cómo agregar un logo animado con fondo transparente en OBS?
Usa una Media Source (fuente multimedia) con un WebM transparente. OBS agregó "compatibilidad para decodificar archivos webm con alfa en la fuente multimedia" en la versión 17.0.1, y su base de conocimiento incluye .webm, .mov, .mp4 y .gif entre los formatos de Media Source.
- En el panel Sources, agrega una Media Source y elige tu archivo WebM.
- Activa Loop para un loop en reposo (idle), o déjalo desactivado para una intro que se reproduce una sola vez.
- Ajusta el tamaño y la posición de la fuente en la vista previa, normalmente en una esquina que tu overlay deje libre.
- Si el logo debe reaccionar a eventos, la alternativa es una Browser Source: OBS define por defecto el fondo de la página como transparente, así que una página web con un archivo de Rive o un video funciona como overlay.
Si el WebM muestra un recuadro negro, verifica que se haya codificado con canal alfa (VP9 con el formato de píxel yuva420p) y que no se haya aplanado durante la exportación.
¿iMovie y CapCut admiten logos con fondo transparente?
Ninguno de los dos lo documenta, así que no cuentes con ello.
- iMovie para Mac tiene efectos de imagen en imagen y de corte con un control deslizante de opacidad, y iMovie para iPhone ofrece tipos de superposición, entre ellos imagen en imagen. Las guías de iMovie de Apple no dicen nada sobre video con canal alfa.
- CapCut: no encontramos ninguna página oficial de CapCut que indique que conserva el canal alfa de un video.
Haz una prueba con un clip corto antes de armar una edición en torno a él. Si se pierde la transparencia, las alternativas fiables son un logo sobre un fondo sólido que combine con tu video, o una versión en pantalla verde que recortes con el efecto de pantalla verde de la app.
¿Puedes usar un logo animado con fondo transparente en Keynote, PowerPoint o Google Slides?
En Keynote, sí: admite transparencia en películas HEVC y ProRes en macOS 10.15 y posteriores. Una advertencia de los foros de la comunidad de Apple: Keynote 13.2 tenía un fallo conocido por el que una película ProRes 4444 transparente mostraba un fondo blanco, así que haz pruebas después de cada actualización.
PowerPoint y Google Slides son menos predecibles. Microsoft no documenta la reproducción de video con canal alfa en PowerPoint, y Google Slides solo inserta video desde YouTube, una URL o Google Drive. En ambos, un GIF animado es la opción segura. Encontrarás los detalles de cada app en logos animados en presentaciones.
¿Qué archivos de Charmotion tienen fondo transparente?
Solo los archivos de video de los planes de pago (desde $20/mes): WebM VP9 con alfa para Chrome, Firefox y OBS, y MOV HEVC con alfa para Final Cut Pro, Keynote, Safari e iOS. Para editores que necesitan ProRes 4444, convierte el MOV o el WebM tú mismo. El archivo de Rive también es transparente.
Los archivos MP4 y GIF de cada set vienen con fondo sólido. Charmotion no entrega un GIF transparente. Si necesitas uno, conviértelo a partir del WebM transparente y espera bordes de 1 bit y cierto riesgo de halo; para apps de chat y la web, WebM o APNG mantienen los bordes más suaves.
Preguntas frecuentes
¿Un logo en GIF puede tener fondo transparente?
Sí, pero cada píxel es totalmente transparente o totalmente opaco, así que los bordes suaves se ven dentados o conservan un halo del color sobre el que se aplanaron. Funciona para logos planos y sencillos sobre un color de fondo conocido; para cualquier cosa con sombras o degradados, usa video con canal alfa.
¿Por qué mi MOV transparente se ve bien en mi Mac pero sale negro en mi editor?
El reproductor de tu Mac entiende el alfa HEVC, pero es posible que el editor solo lea la capa de video base, que es lo que, según Apple, muestran los reproductores que no entienden el canal alfa. Convierte el archivo a ProRes 4444, que los editores profesionales leen con transparencia.
¿Qué es mejor para un logo: ProRes 4444 o HEVC con alfa?
HEVC con alfa pesa mucho menos y se reproduce de forma nativa en Safari, iOS, Keynote y Final Cut Pro. ProRes 4444 pesa mucho más, pero es el formato transparente más aceptado en editores como Premiere Pro y DaVinci Resolve. Si tu logo va a varios equipos, conserva ambos.
Respuestas rápidas de esta guía
Fuentes
- HEVC Video with Alpha (WWDC19 session 506), Apple Developer
- Using HEVC video with alpha, Apple Developer
- Web video codec guide, MDN Web Docs
- Image file type and format guide, MDN Web Docs
- Movie formats and transparency in Keynote on Mac, Keynote User Guide
- Add video and audio in Keynote on Mac (13.1), Keynote User Guide
- Keynote transparent video shows a white background, Apple Support Community
- Supported file formats in Premiere, Adobe Premiere Help
- Interpret footage in Premiere Pro, Adobe Premiere Help
- Import formats supported in Final Cut Pro, Final Cut Pro User Guide
- Use alpha channels in Final Cut Pro, Final Cut Pro User Guide
- Compressor 4.4.5 release notes, Apple Support
- DaVinci Resolve 21 supported codec list, Blackmagic Design
- OBS Studio 17.0.1 release notes, OBS Project on GitHub
- Media Source, OBS Studio Knowledge Base
- Browser Source, OBS Studio Knowledge Base
- Download designs with a transparent background, Canva Help Center
- Downloading designs as video or GIF, Canva Help Center
- Export as GIF, Adobe Express Help
- Supported formats for transparent videos, Adobe Express Help
- Export with a transparent background, Jitter Help Center
- MorphLogo, MorphLogo
- Picture-in-picture effects in iMovie on Mac, iMovie User Guide
- Add video overlay effects in iMovie on iPhone, iMovie User Guide
- Insert or delete images and videos in Google Slides, Google Docs Editors Help