GUI - Selección de personaje

Pantalla de selección de personajes: Los Gnomos del mar

Este es un proyecto en grupo en el que teníamos que crear una pantalla de selección de personajes, diseñando los personajes como los props de estos y finalmente realizar una animación, seleccionando un personaje.

Los participantes en este proyecto son:

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

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

José García: https://www.therookies.co/u/jmena

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

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

Mindmap General - Definir temática y estilo

Lo primero que realizamos fue hacer un Brainstorming sobre las ideas que podíamos hacer para el proyecto, con esto creamos nuestro Mindmap general.

La temática seleccionada fue la de Gnomos piratas, a partir de esto, creamos cada uno de nosotros un moodboard individual sobre los posibles estilos que podían quedar bien en nuestra propuesta.

En mi caso seleccione varias imágenes con estilo mas sencillos de dibujar, como son el estilo cartoon, un estilo mas PixelArt y el estilo Chibi.

Con los Moodboards de cada uno de los participantes del grupo, realizamos una votación con criterios de que estilo nos adaptaba mejor para el proyecto, y el estilo ganador fue el estilo Cal-Arts

Prototipos de personajes

Con el estilo definido, nos pusimos cada uno a realizar distintas formas simples con las que empezar a trabajar sobre nuestro personajes.

Con las formas simples como base, cada uno individualmente creamos nuestro Mindmaps, sobre nuestros personajes, el mío:

A continuación del Minmap individual, creamos individualmente las siluetas de nuestros personajes, para empezar a ver formas y comparar tamaños.

Mis siluetas:

Lineup general - Siluetas

Cuando cada uno de nosotros tubo sus siluetas claras, seleccionamos las que mas nos gustaban y creamos un Lineup para ver si nuestro personajes encajaban con tamaños y formas, con los del resto de compañeros.

Creación del personaje

Luego empezamos a crear individualmente nuestros personaje, en mi caso el gnomo mas pequeño cree un moodboard para tener referencias a la hora de hacer los primero bocetos.

Con el moodboard como referencia cree mis 3 Thumbnails del personaje para ver varias opciones de proporciones y elegir el que mas me gustaba y se adaptara al proyecto.

Después de un feedback al grupo sobre cual era el que mas se adaptaba, elegí el de arriba a la derecha y le añadí unos cuantos detalles, para dejar lo que seria el personaje final.

Color

Con todos los diseño de nuestro personaje final, nos reunimos y decidimos la paleta que usaríamos para nuestro personaje, los colores están escogidos de los colores mas representativos del estilo Cal-arts.

Pruebas de color

Después de tener la paleta definida, cada uno individualmente hicimos varias pruebas de color sobre nuestros personajes, de forma individual.

Finalmente elegí cual de los tres me gustaba mas y le añadí un poco de iluminación para presentar mi diseño de personaje a mis compañeros.

Adaptación de estilo

Con todos los diseño de cada participante, teníamos que seleccionar el que mas nos gustaba y se adaptaba a nuestro proyecto, para que este realizara un video explicativo, sobre el proceso de trabajo de este, el diseño elegido fue el de Guillermo y realizo el siguiente video explicativo.

Con el video como referencia, cada uno de nosotros teníamos que adaptarnos a su estilo e instrucciones en el video y volver a crear nuestro personaje. Además crear un par de props para nuestro personaje.

Mi adaptación al estilo de Guillermo:

Lineup estilo adaptado

Con todos los personajes adaptado al estilo nuevo, creamos un lineup final para representar nuestro personajes.

GUI - Selección de personajes

Ahora tocaba crear nuestra interfaz de selección de personajes y después animarla.

Para ello, yo empecé creándome un template sobre como distribuir los elementos en pantalla, mi idea fue dibujar una taberna pirata en Adobe Photoshop, pues la temática es de Gnomos piratas.

Con la distribución de elementos seleccionada, me puse a buscar referencias de los distintos elementos, par ayudarme con los colores y formas simples.

Después dibuje los elementos de forma individual, con todos los elementos dibujados, añadí  detalles y color a la imagen intentando mantener lo máximo la paleta inicial de nuestro proyecto, añadí iluminación y sombras para tener un mejor acabado y este es el resultado.

Animación

Con la interfaz dibujada y todos los elementos añadidos en el Photoshop, ahora tocaba realizar la animación de selección de personajes.

Realice una lista con ideas sobre los distintos efectos que podía hace sobre mi "Taberna".

Añadí el archivo a el After Effects, primero realice pruebas para ver que cosas podía o no realizar según lo que tenia apuntado.

Luego fui animando poco a poco cada elemento y creando los efectos que quería, también añadí una canción a la interfaz, esta se saco de Adobe Stock.

Animación Final

Cuando termine la animación la exporte con el Adobe Media Encoder y la subí a una plataforma, y este es el resultado final: