Cómo hacer un GIF de pictograma en movimiento con AnimeEffects, explicado con capturas

How to Make a Moving Pictogram GIF in AnimeEffects, Explained with Screenshots

Written by

in

Este artículo recorre cómo partir un pictograma en piezas con PowerPoint, poner huesos en AnimeEffects y exportar un GIF. El ejemplo es una figura azul que saluda con el brazo izquierdo. Sirve igual para un icono de sitio que deba destacar, o para un movimiento más fácil de mostrar en un bucle corto que de explicar con palabras o grabar en vídeo. (Las etiquetas de las figuras están en inglés.)

Las capturas son de AnimeEffects y Microsoft PowerPoint®. Las marcas están en la nota del final. Las imágenes son de la sesión original. En una versión más nueva los menús pueden llamarse distinto.

Pictograma acabado saludando, según el brazo izquierdo que va y vuelve. Muestra un bucle con huesos doblados exportado a GIF. La figura repite una pose de brazo alzado y otra con el brazo a un lado.
El bucle final. El brazo izquierdo saluda y el GIF se repite

Qué cubre esta página

Ir aIdea
DibujoParte left-arm, torso, legs y background en PNG
InstalarDescomprime el zip oficial. Los zip actuales incluyen FFmpeg
ProyectoEmpieza por left-arm y añade el resto en Resource Window
ColocarMove, rotate, scale hasta una figura; luego la pose inicial
HuesosClic en hombro, codo, muñeca; influence; doblar
SaludoPoses a 0 s y 1 s; copia el inicio a 2 s. Max frames 120
GIFExport As → GIF Animation. Activa Optimize palette
Si fallaUn zip de FFmpeg.org en tools junto al exe

Parte el dibujo en PNG

No empieces con un dibujo aplastado en una sola capa. Corta en las articulaciones que deban doblarse. Este ejemplo usa cuatro piezas: ① brazo izquierdo, ② torso, ③ piernas, ④ fondo. El fondo es un cuadrado blanco sin borde.

Estas imágenes se dibujaron en PowerPoint. Cualquier programa de pintura vale si ya lo usas.

Piezas del pictograma, mostradas como brazo izquierdo, piernas, torso y fondo. Explica partir en las articulaciones que deben doblarse. La cuadrícula es un brazo en diagonal, un par de piernas, un torso con cabeza y un cuadrado blanco.
Dibuja left-arm, legs, torso y background por separado

Guarda cada pieza como PNG. En PowerPoint, clic derecho en la selección y Save as Picture.

⚠️ Error común

Torso y piernas son varias formas. Si guardas una sola, te queda solo la cabeza o una pierna. Como en el GIF de abajo, selecciona el grupo primero y luego Save as Picture. El GIF sigue mostrando el menú japonés de PowerPoint.

Guardar formas agrupadas de PowerPoint como PNG, según un marco y luego Save as Picture. Explica que un torso de varias formas hay que seleccionarlo junto. El GIF sigue el torso azul enmarcado y guardado.
Si hay varias formas, selecciónalas juntas y luego Save as Picture
Los cuatro PNG guardados, según los nombres en inglés junto a cada pieza. Explica qué archivos entran en AnimeEffects. Los paneles son background.png, legs.png, left-arm.png y torso.png.
left-arm.png, torso.png, legs.png, background.png

Los nombres coinciden con las figuras que siguen: left-arm.png, torso.png, legs.png, background.png. Algunas capturas originales aún muestran los nombres japoneses bajo las etiquetas.

Instalar AnimeEffects

AnimeEffects pone huesos en imágenes 2D y las mueve. El zip oficial de Windows no instala: lo descomprimes y ejecutas AnimeEffects.exe. También hay zip para Mac y Linux. Estas capturas son de Windows.

Descárgalo en GitHub Releases. La guía está en Downloads.

Exportar GIF o vídeo necesita FFmpeg. El zip oficial actual ya lo incluye, así que puedes seguir. Si la exportación funciona, no hace falta otra descarga. Si falla, usa los pasos del final y coloca un build del sitio de FFmpeg.

Ir a la instalación de FFmpeg

Abre un proyecto y añade las piezas

Arranca AnimeEffects.exe. Al principio el lienzo está vacío.

AnimeEffects justo al abrir, según un lienzo vacío y los paneles. Muestra la ventana antes de crear un proyecto. El centro está oscuro y la línea de tiempo y el muelle del proyecto están vacíos.
Justo al abrir. El lienzo sigue vacío

En File, elige New Project. Pon el recurso inicial en el left-arm.png que acabas de guardar. Marca Specify canvas size y deja ancho y alto en 1024.

Diálogo New Project, según el recurso inicial y el tamaño del lienzo. Muestra empezar con left-arm.png en 1024 cuadrado. Specify canvas size está marcado; ancho y alto son 1024.
Initial resource: left-arm.png. Lienzo 1024×1024

OK deja solo el brazo izquierdo en el lienzo.

El lienzo tras New Project, según que solo está el recurso inicial. Muestra que el resto de piezas aún no está cargado. Un brazo izquierdo azul en diagonal queda solo en un cuadrado de puntos.
Tras New Project. Solo el brazo izquierdo está en el lienzo

Añade el resto desde WindowResource WindowAdd Resources. Trae torso, legs y background igual.

Añadir recursos, según Window, Resource Window y Add Resources. Muestra cómo entran al proyecto los PNG que faltan. Resource Window está seleccionado y Add Resources está abierto.
Window → Resource Window → Add Resources
Resource Window antes y después, según cómo crece la lista de archivos. Muestra añadir torso, legs y background tras left-arm. A la izquierda hay un archivo; a la derecha hay cuatro nombres.
Tras left-arm.png, añade torso.png, legs.png y background.png
El lienzo justo tras añadir piezas, según el solape y la lista de destinos. Muestra que aún no hay posición ni escala. La figura azul está en un marco blanco; la lista incluye topnode.
Las piezas siguen apiladas. Luego las alineas

Coloca las piezas y pon la pose inicial

En el Toolbox de arriba a la izquierda, elige Move, rotate, scale. Cambia de pieza en el Target Dock de abajo a la izquierda y arma una persona en el lienzo. Ajusta también los tamaños.

Colocar las piezas, según Move, rotate, scale y el Target Dock. Muestra cambiar de fila para mover cada parte. La herramienta de mover está recuadrada; left-arm y topnode están subrayados.
Elige Move, rotate, scale y una fila del Target Dock
Montar la figura, según mover y escalar en el lienzo. Muestra igualar posición y tamaño antes de la pose inicial. La persona azul pasa de piezas apiladas a una figura de pie.
Mueve y escala las piezas hasta una figura de pie
💡 Tip

Las filas que no son left-arm pueden seguir llamándose topnode. Seleccionar la fila basta para este método.

Cuando la figura esté de pie, usa la misma herramienta para la pose inicial — el arranque del saludo. Deja la línea de tiempo en 0 s.

La pose inicial, según la línea de tiempo a 0 s. Muestra la primera clave del saludo. Un brazo está junto a la cabeza; el otro baja abierto; hay un recuadro de selección.
Pose inicial a 0 s. El brazo que empieza el saludo

Pon huesos en el brazo izquierdo y dóblalo

En el GIF del inicio, el brazo izquierdo se dobla por el codo. El PNG no se desliza rígido. Un hueso tira de los píxeles.

Activa left-arm en el Target Dock y elige Build bones en el Toolbox. Con Add bones debajo, haz clic en hombro, codo y muñeca sobre el dibujo.

Herramientas de hueso, según seleccionar left-arm y luego Build bones y Add bones. Muestra dónde empieza el rig del brazo. Select, Build bones y Add bones están recuadrados en rojo.
Select left-arm, luego Build bones → Add bones
Colocar huesos, según clics en hombro, codo y muñeca. Muestra el orden de las articulaciones en un PNG. El GIF sigue esos tres clics en el brazo izquierdo azul.
Clic en hombro, codo y muñeca

Los clics solos no deciden qué píxeles siguen. Usa Adjust influence (a la derecha de Add bones) y ensancha la zona desde la cadena. Si es demasiado ancha, el torso se dobla con el brazo. Déjala en los píxeles del brazo.

Influencia del hueso, según ampliar la zona alrededor de la cadena. Muestra que solo deben seguir los píxeles del brazo. El GIF ensancha la influencia sobre el brazo izquierdo.
Amplía la influencia para que solo los píxeles del brazo sigan el hueso

Cuando la zona esté lista, elige Pose bones en el Toolbox, luego Move bone debajo, y arrastra la muñeca. El codo se pliega en un saludo cercano al GIF inicial.

Posar el brazo, según Pose bones y Move bone. Muestra doblar el codo para el saludo. El brazo azul tiene un hueso rosa, una pose fantasma y una flecha roja de movimiento.
Pose bones y luego Move bone para doblar el codo

Clava el saludo y fija la duración

Este saludo va izquierda → derecha → izquierda en la pantalla. Lleva el cabezal del Target Dock a 1.0 s y, igual que la pose inicial, estira el brazo al otro lado.

La pose intermedia, según 1,0 s con el brazo al otro lado. Muestra el extremo del saludo. La figura se inclina con el brazo izquierdo fuera y huesos rosa en ese brazo.
1.0 s. El brazo estirado al otro lado

La pose final coincide con la inicial, así que se copia. En los puntos de tiempo y pose del Target Dock, salta el rombo de arriba, selecciona el resto, copia y pega bajo 2.0 s. Si cae desplazado, vuelve a seleccionar el bloque y muévelo.

Copiar claves, según qué marcas de la línea de tiempo tomar. Muestra saltar el rombo de arriba y seleccionar el resto para pegar a 2,0 s. Skip this one y Range-select these están marcados.
Salta el rombo de arriba, selecciona el resto y pega a 2.0 s

Justo después de pegar, el brazo puede seguir estirado. Compáralo con la pose inicial y vuelve a doblar los huesos.

La duración del clip es ProjectMax frames. Este ejemplo usa 120. En la línea de tiempo el saludo es 0 s, 1 s y 2 s.

Número máximo de fotogramas, según Project y luego Max frames. Muestra dejar el clip en 120 fotogramas. Una flecha roja va del menú a un diálogo con Max frame count 120.
Project → Max frames… a 120

Activa Loop abajo a la derecha y luego Play. Si se ve mal, corrige las claves o el pliegue del hueso.

Controles de reproducción, según Play y Loop. Muestra activar el bucle antes de juzgar el movimiento. Play y Loop están en rojo junto a los botones de la barra de transporte.
Activa Loop y luego Play
La vista previa en bucle, según el mismo movimiento que el GIF del inicio. Muestra comprobar el saludo cuando ya están las claves. La figura azul saluda en bucle en el lienzo.
Reproducción en bucle. El mismo movimiento que el GIF del inicio

Exportar un GIF

File → Export AsGIF Animation y elige dónde guardar. Luego se abre el diálogo de exportación. Ahí pon Optimize palette en On.

Exportación a GIF, según File, Export As y GIF Animation. Muestra activar Optimize palette. Ancho y alto son 512; los fotogramas van de 0 a 120; Optimize palette está marcado.
File → Export As → GIF Animation. Activa Optimize palette

Este ejemplo usa ancho y alto 512, fotograma inicial 0 y final 120.

⚠️ Error común

Marca Optimize palette. Sin eso, el borde azul–blanco puede hacer ruido. Los rellenos planos con borde duro lo notan más.

OK empieza la codificación. Si el GIF coincide con el movimiento del inicio, has terminado. Si solo falla la exportación, la sección siguiente es para eso.

Si falla la exportación a GIF

Si el FFmpeg incluido no puede escribir el archivo, toma un binario del sitio oficial y ponlo junto a AnimeEffects.exe. La página sigue teniendo esta forma.

Abre FFmpeg – Download y sigue las capturas.

Página de descarga de FFmpeg, según los enlaces al ejecutable de Windows. Muestra tomar un zip precompilado, no el código fuente. Windows está recuadrado, luego Windows builds by BtbN, con notas Hover y Click.
ffmpeg.org. Hover en Windows y Click en Windows builds by BtbN

Haz Hover en Windows y luego Click en Windows builds by BtbN. Elige un zip que coincida con tu PC. En este ejemplo es la fila con línea roja (el zip sin shared). El nombre y la fecha son de ese build; no hace falta el mismo.

Zips de Windows de BtbN, según qué fila de Assets elegir. Muestra tomar un zip gpl sin shared en el nombre. Una línea roja marca win64-gpl.zip; la fecha es de ese build.
El win64-gpl.zip sin “shared” (la línea roja)

Descomprime el archivo cuyo nombre empieza por ffmpeg. Dentro hay una carpeta bin. Copia su contenido a una carpeta tools junto a AnimeEffects.exe. Créala si no existe.

Dónde poner FFmpeg, según la carpeta tools junto a AnimeEffects.exe. Muestra la copia de respaldo si falla el FFmpeg incluido. tools tiene ffmpeg.exe, ffplay.exe y ffprobe.exe, marcados Added.
Copia bin a tools, junto a AnimeEffects.exe

Con ffmpeg.exe basta. Copiar también ffplay.exe y ffprobe.exe está bien.

AnimeEffects es software publicado por AnimeEffectsDevs. Microsoft PowerPoint® es una marca de Microsoft Corporation. FFmpeg es un nombre del proyecto FFmpeg. Las capturas sirven para explicar el uso de los productos. Este sitio no está afiliado ni respaldado por esos titulares.

Comments

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *