Lumen de Apple Arcade: un estudio de caso de logotipo y arte promocional

En este estudio de caso de logotipo, exploramos cómo adoptar el diseño skeuomorphic y pulir imágenes 3D en Photoshop ayudó a un diseñador de Toptal a crear activos de marketing destacados para el exitoso juego Lumen de Apple Arcade.

Predrag Markovic es un diseñador gráfico con sede en Belgrado, Serbia. Ha trabajado en varias industrias, incluidas la impresión tradicional, el empaque, la comida, la televisión y más, pero la industria del juego siempre estuvo donde él quiso estar. Después de trabajar para una agencia que desarrollaba materiales promocionales para juegos Java, se unió a Mad Head Games para trabajar como diseñador de UX de juegos. En 2017, se unió a Toptal como autónomo y ahora trabaja en compromisos de Toptal a tiempo completo.

A principios de este año, se comprometió con Lykke Studios, una empresa de juegos móviles con sede en Tailandia, para diseñar activos promocionales para su nuevo juego de Apple Arcade, Lumen.

La breve

Lumen es un juego de rompecabezas en el que el jugador encuentra una caja misteriosa en un ático y tiene que manipular las luces, las lentes y los espejos que contiene para revelar la historia de la creadora de la caja, una inventora escocesa del siglo XIX llamada Olivia McLumen.

Se le pidió a Markovic que creara un logotipo, un ícono y el arte clave promocional utilizando los recursos 3D existentes del juego.

El reto

Apple normalmente trabaja en una línea de tiempo muy ajustada. Markovic tuvo solo dos semanas para entregar el logotipo del juego y la ilustración, y luego cuatro semanas para finalizar el ícono. El informe también incluía una versión de paralaje del logotipo y el ícono que podía manipularse con el puntero en Apple TV, pero Markovic nunca antes había trabajado con Parallax Previewer de Apple.

“Era un cronograma muy corto, así que sabía que significaría trabajar muchas noches y fines de semana”, dice Markovic. “Pero aparte de Parallax Previewer, ya conozco muy bien mis herramientas y, habiendo trabajado antes en la industria de los juegos, entendí el proceso de lanzamiento de un juego”.

El enfoque

El personaje principal del juego, Olivia McLumen, vivió a fines del siglo XIX y principios del XX, y para evocar esa época, la apariencia del juego se basa en la estética steampunk y art nouveau. “Nos encantó la estética artesanal de estos estilos”, dice Jakob Lykkegaard Pedersen, director de Lykke Studios. "Realmente tienen una mano de obra excelente y detallada que ya no se encuentra a menudo".

Esta estética debía reflejarse en los activos promocionales.

Como referencia, el estudio proporcionó una versión jugable del juego, así como activos 3D del juego que podrían reutilizarse para el arte promocional.

“Siempre quise diseñar algo al estilo steampunk”, dice Markovic. “Es realmente un estilo visualmente único y debido a que es tecnología de fantasía, tienes enormes posibilidades en lo que creas. Estaba emocionado de tener la oportunidad de combinar eso con el estilo art nouveau que era popular durante el tiempo en que se desarrolla el juego”.

Para empezar, Markovic reunió paneles de inspiración e imágenes de referencia para sumergirse en los estilos steampunk y art nouveau porque quería incorporar muchos de esos detalles en su trabajo.

“Aunque Lumen es un juego para dispositivos móviles, visualmente tiene un aspecto muy pulido y realista con modelos 3D detallados, texturas e iluminación dinámica”, dice Markovic. “No es un juego muy estilizado con formas planas y un diseño limpio. Los activos que creé necesitaban reflejar esa apariencia. En este caso, un enfoque de diseño skeuomorphic fue la mejor opción. Queríamos mostrar a los jugadores a través del logotipo y el icono de la aplicación cómo era realmente el juego. Y debido a que el diseño skeuomorphic no es una opción de diseño común en estos días, distinguió al juego en Apple Arcade”.

Un proceso de diseño único

“Tengo una tubería algo compleja cuando diseño en 3D”, dice Markovic. “Utilizo muchas herramientas diferentes porque me gusta sacar lo mejor de cada una para que mi producto final pueda ser realmente pulido”.

Comienza con bocetos hechos a mano para comunicar rápidamente sus ideas iniciales al cliente. Una vez que identifican las mejores opciones, elabora versiones 2D en Adobe Illustrator. Luego, para las versiones 3D, configura las escenas en 3ds Max de Autodesk y las finaliza en Corona Renderer.

Luego, como paso extra, exporta los canales alfa a Photoshop para retocar las imágenes. Si está creando una animación, usa Adobe After Effects.

“Eso me da un control total de la sombra, la iluminación y el control del color”, dice. “Realmente puedes notar la diferencia. Y para un juego sobre la luz, es aún más importante”.

Diseño de logo

Markovic desarrolló inicialmente un logotipo usando una tipografía que se apoyaba en gran medida en elementos mecánicos, como remaches y bisagras, para resaltar las influencias steampunk en el juego. También fue relativamente rápido de producir, lo cual fue importante ya que el tiempo era corto.

Pero el estudio también quería que el logotipo proyectara los elementos más artísticos y creativos de la apariencia del juego, por lo que Markovic comenzó de nuevo, creando un tipo de letra que hiciera eco de los detalles art nouveau que decoran la caja del rompecabezas y otras características del juego.

Luego agregó elementos del juego, incluidas las luces y los espejos que los jugadores deben manipular para resolver los acertijos, y los animó con Adobe After Effects. El logotipo, que parece acero mate, se encuentra sobre un fondo de madera rodeado por un borde decorativo de latón con engranajes funcionales en las esquinas.

El resultado fue un logotipo que no solo parecía auténtico para la era en la que se desarrolla el juego, sino que también les dio a los espectadores un vistazo al funcionamiento del juego en sí.

El diseño del icono de Apple Arcade

El icono suele ser la primera introducción de un jugador potencial a un juego. Es lo que verá el jugador cuando se desplace por la tienda Apple Arcade. El ícono de Lumen necesitaba evocar la esencia del juego y sobresalir para atraer a los jugadores a hacer clic en él.

Las pautas de íconos de Apple recomiendan no usar texto, por lo que la imagen debe ser tan distintiva como el nombre del juego. Markovic esbozó varias opciones: una imagen de Olivia McLumen y varias vistas de la caja del rompecabezas, incluida una en la que la caja estaba abierta para mostrar los elementos del juego.

La imagen de Olivia y las opciones de caja abierta resultaron ser demasiado complejas para funcionar bien en el tamaño pequeño que debe tener un ícono. Las imágenes tenían que ser más simples pero conservar el estilo realista del juego y los otros activos promocionales.

Markovic terminó con dos finalistas: una imagen de toda la caja en perspectiva y vista desde arriba, y un primer plano de fotograma completo de la decoración frontal, con la tapa ligeramente abierta y la luz brillando desde adentro.

La segunda opción finalmente hizo el corte.

El diseño del icono de paralaje de Apple TV

Los jugadores también pueden comprar juegos en Apple TV. Allí, pueden manipular los íconos del juego usando la función de puntero en el control remoto del dispositivo.

Para habilitar esa funcionalidad, los diseñadores deben crear imágenes en capas que constan de dos a cinco capas que se unen para crear una sola imagen interactiva.

Para asegurarse de que su diseño funcionara en la plataforma, Markovic necesitaba usar la herramienta Parallax Previewer de Apple, que era nueva para él, pero no dudó. “Me gusta experimentar con nuevas herramientas”, dice.

“Quedamos especialmente impresionados con los íconos de iOS, tvOS y macOS que Predrag diseñó para nosotros”, dice Lykkegaard Pedersen. “Fueron construidos en 3D para hacer que un ícono plano parezca que sale de su dispositivo. Se ve muy exclusivo en la tienda de aplicaciones y se adapta muy bien al juego”.

El arte clave

El juego se desarrolla en un ático polvoriento lleno de luz que entra por las ventanas. Markovic necesitaba reutilizar el arte existente para que pudiera usarse en materiales de marketing. Se le proporcionó una serie de activos 3D del juego, incluida la caja del rompecabezas, por supuesto; un gramófono; un reloj; y una toma interior del ático.

Pero debido a que el arte del juego estaba optimizado para dispositivos móviles, Markovic tuvo que agregar más detalles a las imágenes para que fueran más fáciles de comercializar. Esto significó que tuvo que agregar más polígonos y mallas y, en algunos casos, tuvo que rediseñarlos desde cero. Representó todo en 4K en Corona Renderer para lograr una apariencia de alta definición y luego usó Photoshop para retocar las imágenes.

“La comunicación entre el cliente y yo fue crucial para que esto funcionara”, dice. “Afortunadamente, tenían un artista 3D experimentado que preparó los activos 3D para que yo los usara. Después de eso, configuré una escena en 3ds Max y trabajamos juntos para establecer el estado de ánimo adecuado para el arte de presentación. Y los líderes del estudio fueron muy receptivos y trabajaron en estrecha colaboración conmigo para impulsar la dirección de arte que reflejaba el juego”.

El éxito

Lumen ha sido un juego de éxito, con una valoración de 4,7 sobre 5 en la tienda Apple Arcade. El equipo del estudio quedó tan impresionado con el trabajo de Markovic que lo contrataron nuevamente para otro juego.