Animación con Photopea 【TEXTO ANIMADO】

𝗣𝗥𝗔𝗖𝗧𝗜𝗖𝗔 𝟭𝟯 donde aprenderás a realizar la animación de olas que rellenan un texto con Photopea. Y es que la animación con Photopea es muy sencilla y te permitirá crear impresionantes animaciones!

Gracias al editor online de fotografías será muy sencillo lograr este efecto de olas animadas que muestran un texto. Podrás exportarlo como GIF animado, como WEBp animado o como vídeo MP4.

Tabla de contenidos

Tutorial "Efecto Olas" con Photopea
Ejemplos prácticos de animaciones
Tutorial "Animación de Texto con Photopea"
Descarga las prácticas del curso de Photopea

Tutorial «Efecto Olas» con Photopea

Como te explico en el vídeo tutorial más adelante, lo más importante a tener en cuenta es que cuando deseamos realizar una animación con Photopea debes nombrar el inicio de cada capa, que será un frame de la animación, con el siguiente código _a_ y la animación se irá ejecutando desde la capa más inferior hasta las de niveles superiores.

Photopea detecta todas las capas que empiezan por _a_ . La primera de estas capas se muestra en el primer fotograma (las siguientes que empiezan por _a_ estarán ocultas). La segunda capa se muestra en el segundo fotograma y así continuamente.

Retardo en la animación

Por defecto Photopea crea un retardo de 100 ms al agregar un fotograma nuevo. Por lo que en para visualizar 1 segundo de animación debemos tener 10 fotogramas.

Si deseas personalizar el retardo, simplemente debes agregar una coma y un número al final del nombre de la capa animada. Este número expresa en milisegundos el tiempo que estará visible esa capa.

Por ejemplo, si nombras la capa «_a_Forma,500«, se mostrará la capa «_a_Forma» durante medio segundo en vez de los 100 ms predeterminados.

¿Quieres aprender a editar fotos en línea desde el navegador web? Con las prácticas y tutoriales que aquí puedes consultar, gracias a Photopea, tienes un programa de edición de fotos en línea y gratuito que ofrece una gran variedad de herramientas para mejorar tus imágenes y crear vistosos efectos fotográficos….

Velocidad de la animación

Una vez que ya tenemos nuestras distintas capas, que serán los frames de nuestra animación debemos exportar la animación como GIF animado, PNG, Webp animado o MP4.

Para ello en Archivo>>Exportar como y eliges el formato del archivo que deseas exportar tu animación.

En ese momento se nos abre el cuadro de diálogo de la imagen inferior «Guardar para web» y ahí podemos ajustar la velocidad de nuestra animación.

Aquí podemos ajustar los siguientes parámetros:

Speed: La velocidad de reproducción de tu animación. Un 100% será la velocidad por defecto.
Repeat: Podemos indicar que se reproduzca en loop constantemente (valor 0). Que solo se muestre 1 vez la animación (valor 1) o que se repita el número de veces que le indiquemos.
Reverse frames: Realizará la animación comenzando desde el último frame de la animación hacia la primera. Invierte el sentido de la animación
Boomerang: Realiza la animación normal y cuando llega a la última capa o frame lo anima desde el final al principio. La animación quedaría como Inicio >> Fin >> Inicio. Sería una Animación Normal + Reverse Frames.

Puedes consultar la información sobre animación con Photopea >>aquí<<. Aunque la información de la ayuda es bastante escueta y no muestra el potencial real de animación que se puede conseguir con la aplicación.

Ejemplos prácticos de animaciones

Como te muestro en el vídeo tutorial, se pueden realizar animaciones complejas con Photopea. Puedes ver un ejemplo en la siguiente imagen como lo he modificado con el logo de Tecnoapuntes.

Puedes abrir la animación en Photopea y configurarla según tus gustos en el siguiente enlace:

https://www.photopea.com/#t7i1sajDi

Tutorial «Animación de Texto con Photopea»

En el siguiente vídeo puedes ver paso a paso cómo utilizar Photopea para realizar este sencillo y fácil efecto donde las olas de colores inundan la parabra Madrid consiguiendo una bonita animación con Photopea Online.