Ir al contenido
Tiempo limitadoStarter ahora cuesta 9 US$ al mes en lugar de 20 US$.Ver planes
charmotion
Empieza ahora

Cómo convertir un logo plano 2D en una animación de logo 3D

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Cómo convertir un logo plano 2D en una animación de logo 3D, con personajes de demo de Charmotion

Para hacer una animación de logo 3D a partir de un logo 2D, importa el SVG del logo en Blender como curvas, extrúyelo y bisélalo, dale un material de metal o vidrio, ilumínalo, anima un movimiento de cámara corto y renderiza una secuencia de imágenes. Codifica un MP4 para redes sociales y un WebM o MOV con fondo transparente para editores y sitios web.

Puntos clave

  • El importador SVG de Blender solo lee la geometría de los trazados; los rellenos, trazos, degradados y textos se ignoran, así que convierte los trazos y el texto en contornos antes de exportar.
  • Curve Extrude le da profundidad al logo y Bevel redondea sus bordes para que capten la luz.
  • El Principled BSDF cubre metal (Metallic 1), vidrio (Transmission con IOR 1.5) y plástico lacado (Coat).
  • Renderiza primero una secuencia PNG con Film transparente, y luego codifica a partir de ella MP4, WebM VP9 y otros formatos.
  • Un video renderizado se ve mejor pero no puede reaccionar; usa three.js en tiempo real cuando el logo deba seguir al puntero.

¿Ya tienes un personaje o logo? Mira ejemplos en pantallas reales de apps: pantallas de splash, onboarding, carga y estado vacío, con la animación que se reproduce en cada una.

¿Una animación de logo 3D debe ser video renderizado o 3D en tiempo real?

Decide esto primero, porque cambia todo lo que viene después del modelo.

Video renderizado (Blender)3D en tiempo real (three.js)
EstilosLuz con path tracing, refracción, sombras suaves, profundidad de campoBuenos materiales PBR; el vidrio y la refracción son más difíciles
InteracciónNinguna: se reproduce igual cada vezSigue al puntero, reacciona al scroll
Dónde funcionaRedes sociales, anuncios, intros de video, presentaciones, cualquier página webPáginas web con WebGL
ArchivoMP4, WebM o MOVUn modelo .glb más código

Blender incluye dos motores. Cycles es "el path tracer de Blender basado en la física para renders de producción." EEVEE es "el motor de render en tiempo real de Blender, centrado en la velocidad y la interactividad"; su documentación dice que "no es un path tracer" y que "Cycles siempre dará renders físicamente más precisos." Para un clip corto de logo, EEVEE renderiza lo bastante rápido como para iterar, y Cycles vale la pena para el vidrio.

El mismo modelo sirve para ambos: renderiza una intro cinematográfica y exporta la malla como GLB para un logo 3D interactivo en tu sitio web.

¿Cómo preparas un logo plano para 3D?

Necesitas un archivo vectorial limpio. El importador de Blender es estricto: "Actualmente el importador solo admite la geometría de trazados SVG. Otras características de SVG como degradados, rellenos, trazos, objetos de texto, imágenes y filtros se ignoran durante la importación."

  • Convierte el texto en contornos. En Figma, la opción de exportación SVG Outline text significa que "Figma convierte cualquier capa de texto en glifos." Otras herramientas tienen un comando equivalente de "crear contornos".
  • Convierte los trazos en contornos. Una línea dibujada como trazo no tiene área. Conviértela en una forma rellena, o desaparecerá o quedará como una línea finísima en Blender.
  • Mantén las partes separadas. Si el símbolo y el logotipo deben moverse por separado, mantenlos como trazados separados y ponles nombre.
  • Quita lo que no va a sobrevivir. Los degradados, las sombras y los brillos vuelven como materiales y luces en 3D, no desde el SVG.

¿Solo tienes un PNG? Primero conviértelo en trazados vectoriales y compara las curvas con el original con mucho zoom. Un render 3D amplifica cada imperfección de un contorno.

¿Cómo extruyes y biselas un logo en Blender?

  1. Importa: File, Import, SVG as Curves. El manual señala que las curvas se "crean en el plano XY y se escalan según las unidades del documento SVG," así que cuenta con tener que agrandar el logo y rotarlo para que mire a la cámara.
  2. Extruye: en el panel Geometry de la curva, sube Extrude para darle grosor a la forma plana.
  3. Bisela: en el mismo panel, el Depth de un bisel Round define "el tamaño de la sección transversal" y Resolution "controla el número de vértices de la sección transversal," así que los valores más altos dan bordes más suaves.
  4. O bisela como malla: convierte la curva en malla y agrega un modificador Bevel. Con su Limit Method en Angle, bisela "solo los bordes afilados de un objeto sin afectar sus superficies suaves." Segments define cuántos loops de aristas forman el borde redondeado.

Un bisel pequeño importa más de lo que sugiere su tamaño: los bordes perfectamente afilados se renderizan como líneas duras sin brillo, y el borde redondeado es donde se lee la luz. Mantenlo sutil en letras finas para que los ojos de las letras (los huecos de letras como a, e y o) no se rellenen.

Si el logo también irá a la web como GLB, conviértelo en malla antes de exportar. El exportador glTF de Blender no conserva las curvas.

¿Cómo haces materiales de vidrio, metal o plástico para un logo?

Todo empieza con el Principled BSDF, que Blender describe como un nodo que "combina varias capas en un solo nodo fácil de usar." Cuatro inputs hacen la mayor parte del trabajo para los logos:

EstiloConfiguraciónLo que dice el manual
Metal pulidoMetallic 1, Roughness bajo, color de marca como Base ColorMetallic 1 "da un reflejo totalmente especular teñido con el color base"
Metal cepillado o satinadoMetallic 1, Roughness más altoRoughness 0 "da un reflejo perfectamente nítido, mientras que 1.0 da un reflejo difuso"
VidrioTransmission Weight 1, IOR 1.5, Roughness bajoIOR "1.5 es una buena aproximación para el vidrio"
Plástico brillante o lacaMetallic 0, color de marca, Coat activadoCoat simula "un barniz transparente, laca o pintura de auto"

Dos notas prácticas. El metal muestra su entorno más que su propio color, así que un logo metálico en una escena vacía se ve negro: dale un entorno o formas brillantes que reflejar. El vidrio necesita algo detrás o alrededor que refractar; sobre un fondo liso casi puede desaparecer. Si importa la precisión del color de marca, compara un fotograma renderizado con el valor de la marca, ya que la iluminación lo cambia.

¿Cómo deberías iluminar y mover la cámara para un reveal de logo 3D?

Ilumina para los bordes. Una luz suave grande en ángulo respecto a la cara frontal, una luz de contorno detrás para separar el logo del fondo y un entorno para los reflejos son un comienzo confiable. Luego anima bien una sola cosa en lugar de varias a la vez.

  • Movimiento de cámara: un acercamiento lento o un arco corto que termine de frente al logo. El último fotograma debe mostrar el logo de frente y legible, sostenido un momento.
  • Distancia focal: el manual explica que las distancias focales más largas dan "un FOV más pequeño (más zoom)." Un lente más largo aplana la perspectiva, lo que evita que las letras se deformen cerca del borde del encuadre.
  • Profundidad de campo: define el logo como Focus Object; un F-Stop más bajo "da un efecto de profundidad de campo fuerte." Mantén nítido el fotograma final.
  • Tiempos: el panel Frame Range define la duración, y los fotogramas divididos por la tasa de fotogramas dan los segundos. El ejemplo de Blender: "una animación de 250 fotogramas a una tasa de 30 durará 8.3 segundos." Los reveals de logo suelen ser mucho más cortos.

Un barrido de luz sobre una cara metálica es el movimiento de logo clásico porque la forma se queda quieta y solo viaja el reflejo. Para saber cuándo encaja un reveal, un sting o un loop, consulta logo reveal vs sting vs loop.

¿Qué ajustes de render de Blender importan para una animación de logo?

  • Film transparente. Film, Transparent "renderiza el fondo transparente, para componer la imagen sobre otro fondo." En Cycles, Transparent Glass también renderiza las superficies transmisivas como transparentes, "para componer el vidrio sobre otro fondo."
  • Ruido. En Cycles, un Noise Threshold activa el muestreo adaptativo, y Denoising "usa un algoritmo especializado para obtener una imagen con menos ruido sin necesitar más muestras." Revisa un fotograma fijo a tamaño completo antes de renderizar todo el clip.
  • Primero imágenes. La documentación de salida de Blender desaconseja renderizar directamente a video: si el render falla, "el archivo puede quedar imposible de reproducir y tendrás que volver a renderizar todos los fotogramas." Renderiza una secuencia PNG u OpenEXR, y luego codifica.
  • Dimensiones pares. Blender señala que "H.264 requiere que el ancho y el alto sean divisibles por 2."
  • Modo de color. Elige RGBA para la secuencia de imágenes, que "guarda los canales rojo, verde, azul y alfa." No todos los formatos de imagen lo ofrecen; PNG sí.

¿Qué formatos de salida necesitas, incluido el video con fondo transparente?

Conserva la secuencia PNG transparente como master y crea cada archivo de entrega a partir de ella.

ArchivoTransparenteÚsala para
MP4 (H.264)NoRedes sociales, anuncios, cualquier cosa sobre un fondo sólido
WebM (VP9)YesSitios web en Chrome, Edge y Firefox, OBS
MOV (HEVC con alfa)YesSafari, iPhone y iPad, apps de Apple
MOV (ProRes 4444)Sí, cuando se codifica con alfaEditores de video
Secuencia PNGYesArchivo master, composición

La propia tabla de formatos de Blender marca alfa para WebM VP9, PNG y QuickTime Animation, y no para H.264 ni H.265/HEVC. Así que un MOV HEVC con alfa para Safari tiene que codificarse desde la secuencia de imágenes en otra herramienta. Los ajustes de salida de Blender describen el perfil ProRes 4444 como compatible con "canales RGB y alfa a resolución completa," aunque la tabla de formatos no marca alfa para ProRes, así que prueba un clip corto en tu editor antes de renderizar todo.

En la web, MDN señala que "Safari no admite transparencia alfa" en VP9, por eso los sitios sirven WebM y HEVC. Hay más detalles en MP4 transparente y HEVC con alfa y logos animados transparentes.

¿Puedes tener una animación de logo 3D cinematográfica sin aprender Blender?

Puedes contratar a un motion designer (consulta cómo animar un logo, comparado) o usar un servicio. Motion Studio de Charmotion crea un video 3D cinematográfico a partir de tu propio archivo de logo en el plan Todo en uno ($100/mes a noviembre de 2026): un reveal de logo 3D renderizado para lanzamientos, anuncios e intros de video, entregado como MP4, WebM con fondo transparente y MOV HEVC con alfa. Las formas del logo vienen de tu archivo y no se redibujan.

Starter ($9/mes) cubre animaciones de logo con Rive y three.js interactivo, pero no video 3D renderizado. Los conceptos son gratis en todos los planes, así que puedes ver la idea antes de generarla.

Cómo hacer una animación de logo 3D a partir de un logo plano en Blender

  1. Limpia el vector. Convierte el texto y los trazos en contornos, mantén las partes como trazados separados con nombre y exporta un SVG.
  2. Impórtalo como curvas. Usa File, Import, SVG as Curves, y luego escala y rota el logo para que mire a la cámara.
  3. Extruye y bisela. Define Extrude para el grosor y un Depth de bisel Round para bordes redondeados, o conviértelo en malla y agrega un modificador Bevel.
  4. Asigna materiales. Usa el Principled BSDF: Metallic para metal, Transmission con IOR 1.5 para vidrio, Coat para laca.
  5. Ilumina y anima. Agrega un entorno y una luz de contorno, y luego anima un movimiento de cámara corto o un barrido de luz que termine de frente.
  6. Renderiza imágenes. Activa Film Transparent, configura la salida PNG RGBA y renderiza el rango de fotogramas como secuencia de imágenes.
  7. Codifica las entregas. Crea un MP4 para redes sociales, un WebM VP9 con alfa para la web y un MOV HEVC con alfa o ProRes 4444 para apps de Apple y editores.

Preguntas frecuentes

¿Puedo hacer una animación de logo 3D a partir de un logo PNG?

No directamente en Blender, cuyo importador SVG necesita trazados vectoriales. Primero convierte el PNG en formas vectoriales, revisa los contornos con mucho zoom y luego importa el SVG. Un render 3D amplifica las pequeñas imperfecciones de un contorno trazado, así que vale la pena dedicar tiempo a tener curvas limpias.

¿Debo usar Cycles o EEVEE para una animación de logo?

Usa EEVEE para definir rápido la iluminación y los tiempos, y Cycles para el render final si el logo es de vidrio o depende de reflejos precisos. La documentación de Blender describe EEVEE como un rasterizador que no es un path tracer y dice que Cycles da renders físicamente más precisos.

¿Por qué mi render de logo 3D transparente muestra un fondo negro?

O Film Transparent estaba desactivado, o los fotogramas se codificaron con un códec sin alfa. La tabla de formatos de Blender no muestra alfa para H.264 ni HEVC, así que un MP4 siempre tiene fondo sólido. Renderiza una secuencia PNG RGBA y codifica a partir de ella un WebM VP9 o un MOV con alfa.

Fuentes

Guías relacionadas