Animaciones con Inteligencia Artificial para tu web

Una web interactiva, dinámica y con animaciones es cada vez más relevante. Pero ¿cómo podemos crear animaciones? ¿Qué herramientas se usan? ¿Cómo afectan al rendimiento?…

Sigue leyendo que vas a sorprenderte.

Paso 1: Planificación de la animación

Lo esencial en cada proyecto es organizarlo, si no, malgastarás recursos de todos los colores. Sí, sí, tiempo, dinero y paciencia…

Para eso te recomiendo que tengas claros los objetivos de tu proyecto, te preguntes a quién te quieres dirigir y a dónde quieres llevarle.

Una vez que tengas eso claro, podrás crear animaciones con IA para tu web enfocadas en tu público objetivo.

Por ejemplo, en este artículo me dirijo a personas que quieren crear animaciones para su web. Y, si no tienen ni el tiempo ni los conocimientos para hacerlo, que hagan clic en el botoncito de contacto para que adquieran ese servicio.

Entonces ¿qué animación puedo crear?

Algo que se me ha ocurrido es un hombre preocupado por su web y le pasa el trabajo a un profesional, mira el reloj y se marcha corriendo.

Te muestro el paso a paso.

Paso 2: Guión

Ahora toca escribir un guión estructurado para saber qué clips vamos a incluir. No tienes que ser un genio para esto, solo imagina qué pasos quieres que se vean.

Para el ejemplo inicial que he propuesto, voy a seguir los siguientes pasos:

  1. Personaje principal trasteando la web y sale rota, llama a un profesional. Personaje principal mira el reloj y se marcha corriendo.
  2. Profesional trabaja en la web y llama al personaje principal, este está en la playa, sonríe y levanta el pulgar en señal de que está satisfecho.
  3. Personaje principal solo en pantalla habla diciendo: “Para obtener un trabajo profesional, llama a WebHeroe”. La profesional también aparece y dice “No lo olvides”

Paso 3: Generación de imágen/es con IA

Una vez que tengo claro qué quiero hacer, hay que crear las imágenes de referencia para cada clip.

Para eso podemos usar un montón de herramientas, algunas gratuitas. Aunque es verdad que, a día de hoy, la que mejor funciona es Midjourney.

Estos son los pasos que seguiré:

  1. Creación de personajes en Midjourney
  2. Mejora y modificación de personajes en Replicate
  3. Creación de escenarios en Midjourney
  4. Mejora con una herramienta de Upscaling como Topaz
  5. Retoque con Photoshop para ajustar las imágenes iniciales

Esta es la imagen inicial del personaje principal generada con Midjourney.

Esta es la imagen de la persona profesional del diseño o desarrollo web.

En Replicate, hay muchas herramientas que mejoran y nos permiten mejorar y generar imágenes del mismo personaje en diferentes posiciones, estas son las imágenes que me han gustado después de varios intentos.

Cuando he seleccionado las imágenes que más me gustan de los personajes, es momento de crear las imágenes de referencia para crear los clips de video. Y para eso qué mejor aplicación que Photoshop, con su herramienta relleno generativo podremos jugar y rellenar las partes faltantes así como modificar posibles errores en las imágenes iniciales.

Esta es por ejemplo la imagen de inicio generada con photoshop y luego hecho un upscaling (aumento de tamaño).

Nada mal ¿eh?

Paso 4: Herramientas disponibles para crear una animación

Si escribimos en cualquier buscador “herramienta de video con inteligencia artificial” tendremos listados interminables.

Es verdad que encontraremos muchas plataformas que ofrecen servicios gratuitos. Pero, lamento decirte que tendrás que generar muchos clips hasta dar con el que encaje. Es por eso que aún no existe una herramienta gratuita que realmente permita generar el suficiente contenido como para crear un proyecto de forma ágil.

En WebHeroe contamos con acceso a un gran número de herramientas profesionales, pero para este proyecto nos hemos decidido por el uso de Kling.

También tenemos acceso a otras herramientas que nos permiten un mayor control sobre los clips, pero el consumo de recursos es mucho mayor, por no hablar de la potencia requerida en los ordenadores de trabajo.

Así que como este proyecto es algo sencillito, con Kling será más que suficiente.

La única desventaja del uso de este tipo de plataformas online, es que al no tener un control absoluto, tienes que ser flexible en cuanto al esquema que tienes en mente.

Paso 5: Montaje del clip

Una vez que tenemos todos los clips descargados toca ponerse manos a la obra y usar un programa de edición que nos permita unirlos.

Yo suelo usar Premiere Pro, pero puedes usar cualquier otro.

Habrá muchas ocasiones en las que tengas que cambiar un clip. Pero si el guión lo has creado de forma correcta y organizada no tendrás problema.

Paso 6: Efectos sonoros, música y video upscaling

A mi me gusta hacer el upscaling de video antes de montar el video, sobre todo porque si encontramos algún error cuando estamos analizando que se ha hecho correctamente el upscaling, podremos solucionarlo sin haber trabajado el audio aún, lo que nos aohrrará trabajo.

Para rematar y darle vida al proyecto, no hay nada mejor que unos buenos efectos sonoros y algo de música de fondo.

Hay plataformas de Inteligencia Artificial como Suno que permiten generar efectos sonoros y música con capacidad de usarlo en proyectos comerciales.

Cuando tengamos todo, usaremos de nuevo el programa de edición de video para colocar el audio en los lugares correspondientes.

Y oye, esto es todo, espero te haya gustado la guía. Échale un ojo al proyecto de ejemplo que he realizado para este artículo.

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com