Pantalla de inicio animada. Proyecto en grupo

Pantalla de inicio animada

Este proyecto consiste en la creación de una pantalla animada de selección de personaje utilizando para ello los personajes diseñados por cada uno de los miembros del grupo.

En los siguientes enlaces se puede seguir el proceso de diseño llevado a cabo por mis compañeros.

Carlos Fernando Izquierdo: https://www.therookies.co/u/Stamp

Sergi García: https://www.therookies.co/u/sergiphoto

Guillermo Jesuardo: https://www.therookies.co/u/Retroinu

Darío Francés: https://www.therookies.co/u/DarioFrances

Fase de diseño de personajes

Lo primero que hicimos en el proceso de creación de la pantalla animada fue una lluvia de ideas que dio lugar a un mindmap general donde apuntamos todas las ideas que nos parecían interesantes para utilizarlas como temática principal.

Tras deliberar entre todos los miembros del grupo decidimos que haríamos una tripulación de gnomos piratas.

Por otro lado también realizamos una serie de propuestas para definir el estilo de nuestro diseño. Cada uno genero un mindmap con distintas imágenes para determinar cual nos gustaba mas entre todos y definir el estilo común.

En mi caso me decante por algunas imágenes con estilos realistas tirando hacia la caricatura o algo mucho mas sencillo con gnomos muy iconizados.

Finalmente seleccionamos CAL-ARTS como fuente de nuestro estilo sabiendo que es un concepto muy amplio por lo que determinamos una serie de características básicas:

-Grosor de línea: Grosor exterior negro, más grueso que el interior

-Formas básicas: Se trabajan formas circulares. La forma de la cabeza y la sonrisa se encuentran muy estilizadas.

-Como es la anatomía del estilo: personajes proporcionados con cabezas grandes.

-Tipo de sombreado e iluminación: No existe, o solo se suele utilizar para dar volumen.

Ideas generales personajes y paleta de color

El siguiente paso fue definir las formas generales de cada uno de nuestros personajes para que empezáramos a trabajar de forma individual en el diseño de los mismos.

Por otro lado seleccionamos una paleta de color inspirada en los personajes principales de la escuela cal-arts.

Fase de diseño de personajes

Mindmap.

A partir de este punto iniciamos cada uno el proceso de diseño de nuestros personajes.

En primer lugar creamos un mindmap personal para determinar los rasgos y características principales de nuestro personaje.

Siluetas

En este punto del proceso de diseño sabia mas o menos lo que quería de mi personaje pero no sabia como encajarlo en una silueta que me resultara atractiva así que probé varias formas e incluso alguna silueta en los colores de la paleta buscando exactamente como determinar los rasgos que quería potenciar de mi personaje: Un cocinero con un gran chuchillo cruel y arisco.

Finalmente determine que debía ser un tipo gordo y fuerte. Grande y que diera miedo al verlo.

Lineup de personajes

Con la silueta final de todos los personajes decidida pudimos ver el lineup final de todos ellos juntos

Una vez ya teníamos la silueta creada lo siguiente fue la creación de un moodboard  que me ayudara a inspirarme para la creación de los thumbnails y que además luego utilizaría como referencia para los detalles.

Antes de empezar a trabajar los thumbnails realice los props de los elementos que llevaría mi pirata, un gorro, un cuchillo y una botella de salsa.

Finalmente realice los thumbnails con ligeras variaciones sobre la idea general del personaje, mas bien me sirvieron para acabar de perfilar los detalles que aun no tenia en la cabeza como retirarle el delantal, la expresión que tendria o incluso la posición de la botella en la mano.

Boceto con pruebas de color

En esta fase del proyecto tenia un personaje prácticamente terminado y tenia que determinar como pintarlo. Realice varias pruebas con la paleta original y algunas otras pruebas de color variando dicha paleta, buscando un diseño de colores que marcara la personalidad de mi personaje.

Diseño final

Inicie la animación editando la precomposición del mapa para crear la animación del cierre. Para ello abro y cierro los dos objetos que representan los dos rollos y los sincronizo con dos máscaras que ocultan el fondo del mapa.

Diseño final adaptado al estilo

Finalmente seleccionamos un estilo distinto al mío y adapte mi dibujo al estilo final seleccionado.

En la siguiente imagen podemos observar el lineup final de los personajes con la iluminación y el estilo adaptado de todos.

Fase de diseño de escenario

Inicie la fase de diseño del escenario creando el fondo para la animación. Tenia en mente hacer una playa desde el principio y luego se me ocurrió completarla con el barco a la espera de que alguno de los piratas coja el bote para subir a el.

Como la luz de los personajes viene de la parte izquierda de la imagen realice un degradado en el cielo del amarillo de atardecer hacia la oscuridad de la noche que entra por la parte derecha de la imagen. Por otro lado para reforzar esta idea también cree el degradado en el agua del mar.

Detrás del barco se pueden observar dos líneas de montañas en distintos tonos de verde para simular la profundidad de las que se encuentran mas atrás.

Como siempre para dar un mayor realismo a la imagen se han añadido texturas a los distintos elementos que lo requieren como son la arena, el agua y las montañas.

También se pueden observar tanto la sombra del bote en la arena como partes del barco que no estan iluminadas por la luz del atardecer.

Otro elemento importante en mi animación es el mapa.

Al cual a parte del diseño era importante darle textura para que pareciera antiguo.

También utilice este elemento para remarcar la personalidad de los personajes, dándole un sentido a los elementos que acompañan a cada uno y una breve historia que nos introduce a su personalidad.

Finalmente solo faltaba colocar los distintos personajes en sus posiciones así como crear las sombras en la playa con una inclinación apropiada.

Fase de animación

Inicie la animación editando la precomposición del mapa para crear la animación del cierre. Para ello abro y cierro los dos objetos que representan los dos rollos y los sincronizo con dos máscaras que ocultan el fondo del mapa.

Inicie la animación editando la precomposición del mapa para crear la animación del cierre. Para ello abro y cierro los dos objetos que representan los dos rollos y los sincronizo con dos máscaras que ocultan el fondo del mapa.

Una vez animado el mapa el siguiente paso ha sido sincronizar el cierre del mapa con el contenido que estaba en otra precomposición ya que debe cambiar cada vez que el mapa se abre.

Este proceso va precedido de la animación de la opacidad del objeto de selección que he elegido, un aura dorada detrás de los personajes.

Una vez tenía el proceso para seleccionar y mostrar un personaje en el mapa únicamente he tenido que elegir el momento para realizar las siguientes sincronizaciones y copiar y pegar los puntos que tenía creados para esta primera animación.

Una vez tenía completamente terminado el cuerpo de la animación empecé a animar otros elementos del mapa, el vaivén del barco, las nubes, el rótulo inicial y la animación final de selección de personaje.

El barco se anima con una rotación ligera de 2 grados cada 5 segundos, volviendo a 0 en los siguientes 5 y repitiendo el movimiento en sentido contrario.

Las nubes cambian de posición durante toda la escena y encadenan el principio de una con el final de otra para que no se vea el final de las mismas.

El texto inicial es una simple animación de cambio de posición.

Al final del video después de realizar la selección se utiliza una capa que cambia la opacidad y oculta todo el fondo y el resto de personajes a la vez que se realiza un escalado del personaje seleccionado y el rótulo con mi nombre.

Una vez tenía la animación completada decidí añadirle una música de fondo y se me ocurrió añadir efectos de sonido para reforzar tanto las acciones que se van realizando así como dar voz para que los personajes tuvieran más carácter. Finalmente este punto lo he reforzado mucho ya que me he dado cuenta que el efecto final es muy bueno. Como repositorio para la música he utilizado adobe stock y freesound.org como repositorios para los archivos de audio.

A continuación podemos observar el resultado final.