Cómo realizar una ilustración con efecto Parallax

Descubre, paso a paso, cómo darle profundidad y dinamismo a una ilustración con esta técnica

Es muy probable que ya conozcas este efecto, quizá lo has visto en algún sitio web: entras a la página, haces scroll y el fondo parece moverse distinto al contenido, creando un efecto de profundidad. A ello se le conoce como Parallax, una tendencia que comenzó en el diseño web pero se ha extendido a la ilustración y realidad aumentada.

Este recurso brinda dinamismo a cualquier pieza 2D, simula el desplazamiento de los elementos de un fondo para que parezcan dar una perspectiva diferente. Un efecto visual que contrarresta lo plano para sumergir al espectador o usuario en una experiencia más profunda y llamativa.

Para conocer en detalle este efecto, conversamos con el ilustrador Jarom Vogel, uno de los primeros ilustradores que se han atrevido a aplicar este recurso en sus dibujos.

Jarom Vogel trabajó como diseñador y desarrollador web, pero decidió enfocarse a la creación y la ilustración independiente desde hace un año. Vogel encontró un estilo estético destaca por ser plano, colorido y lleno de texturas, una clara herencia del gusto por la pintura acrílica, los bordes y formas definidas que desarrolló durante sus años de escuela.

En cada pieza busca transmitir el sentido de la naturaleza y la aventura, con temáticas siempre aptas para niños, por lo que tuvo la necesidad de buscar nuevos elementos para lograr más atractivo en su obra, como el efecto Parallax. Esto lo llevó a colaborar con Apple, Disney, Procreate y Adobe.

Jarom Vogel ha querido compartir con la comunidad el proceso creativo detrás de una de sus últimas piezas incorporando Parallax.

¿Cómo realizar una ilustración con efecto parallax?

1. El boceto

Siempre empiezo con un boceto. Para esta pieza hice uno pequeño y animado, pero generalmente los hago solo a lápiz. En esta ocasión quería que esta pieza se sintiera como un círculo de luz en el bosque, con la oscuridad rodeándolo.

2. La importancia del detalle

Pasé mucho tiempo corrigiendo el dibujo; no estaba contento con los colores del original, así que empecé a hacerlo de nuevo: corregí sombras, agregué más luz, añadí texturas y utilicé tonos más fríos. También hice el lienzo un poco más grande, pasé de un cuadrado de 512px a 2048px.

3. La mejora de la animación

Una vez satisfecho con la parte estética, mejoré la animación. Este paso lo he estado haciendo en Procreate. Soy bastante lento, así que trabajo con cinco capas diferentes, pero solo tres cuadros de movimiento. Muy simple.

4. Preparando la interacción

Una vez terminada la animación, decido cómo quiero agrupar mis capas para llevarla a una versión interactiva. Exporto todas esas capas y las nombro de manera que tenga sentido para la codificación (todos esos círculos azules son las sombras; las exporté a modo de fusión de color en la pieza terminada).

5. El código

Subo todos los archivos a una carpeta especial en mi sitio web y los traslado a HTML. En esta pieza decidí usar transformaciones 3D en CSS. En otros proyectos he usado un efecto Parallax más simple, donde cada capa se compensa distinto cuando se mueve, esto da una sensación básica de profundidad.

En este punto también elijo si integro la realidad aumentada, aunque esto aún no funciona muy bien desde web, así que necesito cambiarme a Xcode. De cualquier manera, la configuración es la misma hasta este punto, solo es decidir cómo quiero manipular los elementos. Es importante tener una gran máscara blanca en la parte delantera, de lo contrario, todos los bordes de las capas se verían y arruinarían el efecto.

6. La interacción

Finalmente, hay que añadir el uso del giroscopio y acelerómetro del dispositivo. Se necesitan varias pruebas y mucho tiempo para afinar muchos números y que las cosas se sientan más naturales. Después de eso, ya está todo listo. En resumen esta pieza fue dibujada y animada en Procreate con código HTML, CSS y Javascript.

Tomar un video con una mano mientras mueves el dispositivo con la otra, es en realidad una de las partes más difíciles para mí.

Jarom Vogel.

Te puede interesar:

- Ilustración digital con Procreate, un curso de Óscar Lloréns.
- Gráficos vectoriales SVG: ilustrar y animar con código, un curso de Javier Usobiaga Ferrer.
- Técnicas avanzadas de ilustración vectorial, un curso de Rafahu.