Creación de composiciones audiovisuales para web: el proyecto becicleta.com

Asignatura: Trabajo de fin de grado (TFG): Narrativas visuales, 2D y 3D

Titulación: Grado Multimedia

Nombre de la estudiante: Rosa Suñé Barniol

Profesor colaborador y profesor: Aniol Marín Atarés y Antonio Marín Ametller

Introducción

Como cofundadora de bicicleta.studio (1) me encontraba en la fase inicial del proyecto profesional y, al mismo tiempo, tenía que demostrar todo lo que había aprendido como estudiante del grado de Multimedia. Decidí aunar esfuerzos y dedicar el proyecto del TFG a crear una serie de composiciones audiovisuales para promocionar y explicar el método de trabajo del Estudio Online de Diseño y Desarrollo WordPress becicleta.com (2).

Estas composiciones están elaboradas con elementos creados exclusivamente en 2D y 3D siguiendo la imagen visual corporativa del estudio: filosofía, colores, tipografías, modo de trabajar, etc.

El proyecto es el resultado de potenciar una plataforma web con el uso del diseño gráfico animado corporativo inserido dentro del sitio usando la tecnología del momento. Se ha potenciado el incipiente uso del vídeo como fondo en la web para diferenciar becicleta.com (2) de la competencia y explicar sus valores.

Etapas y retos

El proyecto del TFG se ha dividido en cuatro etapas: preproducción, producción, posproducción y distribución.

En la fase de preproducción se llevó a cabo la fase de documentación del diseño y estilo de becicleta.com (2),, se redactó un informe creativo. De una tormenta de ideas surgió el concepto: «Start of something new». Toda esta información me permitió crear un muro de inspiración (moodboard) en el que desarrollar el estilo visual de las composiciones audiovisuales. Partiendo de ella, asimismo, elaboré los guiones gráficos de cada composición; estos, de modelo americano, eran muy gráficos y con poca información, pero suficientes para mis objetivos. En esta fase también preparé los primeros animáticos (animatics), añadiendo el factor tiempo a cada plano para obtener el primer esbozo animado del proyecto.

En la fase de producción diseñé los elementos 2D de las composiciones a partir de dibujos hechos a mano y digitalizándolos con Adobe Illustrator CC 2018. Siguiendo un proceso similar, modelé los entornos gráficos 3D con 3ds Max 2018. Todos los escenarios y elementos se han creado para el proyecto desde cero. Se han usado, por otra parte, fotografías de elementos reales como referencia.

En los casos de geometría compleja, el dibujo vectorial y el modelado se ha realizado con Autocad 2018 y se ha importado a 3ds max para aplicar los materiales e iluminación. Escogí este software por mis conocimientos previos del mismo, ya que lo he usado durante años como arquitecta. Son anteriores al grado, pero igualmente útiles y aplicables en este proyecto.

La versión 2018 de 3ds max (3) incorpora el motor de render Arnold (4), una biblioteca de representación multiplataforma avanzada desarrollada por Solid Angle, usada por muchas organizaciones dedicadas al cine, televisión y animación. Era un motor de render nuevo para mí, aprendí a usarlo y configurarlo mientras avanzaba con el proyecto.

Las dimensiones y configuración de los valores de los parámetros de render son específicos para el proyecto para obtener un tiempo renderizado menor al minuto por fotograma. Este era el más óptimo para mi equipo y el tiempo del que disponía para hacer el TFG.

En la fase de posproducción se importaron los elementos 2D y 3D diseñados al programa Adobe After Effects 2018 (5). Se creó una nueva composición para cada elemento importado para gestionarlo ordenadamente.

Desde After Effects se creó un ajuste de exportación configurando los parámetros de salida para obtener un vídeo .mp4 codificado en .h264 y un flujo de bits (bitrate) muy bajo para obtener un archivo muy ligero apto para subir a la web. De esta forma, no se incrementa el peso del sitio y no penaliza la velocidad de carga de la web.

Finalmente, en la fase de distribución se insertaron las diferentes composiciones en las secciones correspondientes dentro de cada página web del sitio, desarrollado con WordPress y el framework Genesis, usando la etiqueta <video> del lenguaje web html5. En este enlace (6) puede verse el resultado final.

Composició Audiovisual 1 from rosasunba on Vimeo.

Conclusiones

En general, estoy satisfecha con el resultado final del proyecto y su distribución en el sitio web. Si volviera a hacerlo de nuevo, estudiaría mejor las dimensiones y calidad mínimas para el uso de composiciones audiovisuales en la web. De esta forma, podría ajustar aún más la calidad y dimensiones de los fotogramas y obtener un tiempo de render más corto. Destinaría el tiempo ganado para incrementar la calidad de imagen de las composiciones. También habría trabajado mejor los fondos de algunas de las composiciones, intentando hacerlos transparentes, para que estuvieran totalmente mimetizadas dentro de la web.

Por otro lado, ha quedado sin resolver el uso de una banda sonora para las composiciones. Se ha descartado por calendario y porque es un elemento que puede penalizar la usabilidad web sin añadir valor. Igualmente, la distribución web para móviles se ha dejado para un futuro y, en contraposición, se ha trabajado a fondo la versión para ordenador. Finalmente, me gustaría añadir interactividad a las composiciones: activar al mover verticalmente el dedo por la pantalla con un toque rápido para avanzar en un documento o columna (scroll), que aparezca un botón, play/stop banda sonora, etc.

Me gustaría seguir creando nuevas composiciones audiovisuales para usar en la web, a partir de los objetos y escenarios 3D creados para el proyecto, para seguir explicando cómo trabaja becicleta.com (2).

Enlaces relacionados:

Bicicleta.studio (1)  → https://bicicleta.studio

Becicleta.com (2)  → https://becicleta.com

Autodesk 3ds max 2018 (3) → https://www.autodesk.es/products/3ds-max/overview

Motor de render Arnold (4) → https://www.solidangle.com/

Adobe After Effects (5) → https://www.adobe.com/es/products/aftereffects.html

Enlace distribución TFG (6) → https://rosasunba.com/tfg

Documentación:

Mockups de https://graphicburger.com

Cita recomendada: SUÑÉ BARNIOL, Rosa. Creación de composiciones audiovisuales para web: el proyecto becicleta.com. Mosaic [en línea], octubre 2018, no. 164. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n164.1839.