Come creare un'illustrazione con effetto parallasse

Aggiungi profondità e dinamismo ad un'illustrazione con questa tecnica

Potresti già avere familiarità con questo effetto o averlo visto su un sito web: quando entri in una pagina e scorri verso il basso, lo sfondo sembra muoversi da solo, creando profondità. Questo si chiama parallasse o parallax, una tendenza iniziata nel web design e che ora si è estesa all'illustrazione ed alla realtà aumentata.

Questo effetto aggiunge movimento a qualsiasi lavoro realizzato in 2D, simulando lo spostamento degli elementi di sfondo ed immergendo lo spettatore in un'esperienza più profonda ed attraente.

Abbiamo parlato con l'illustratore Jarom Vogel, un precursore nell'uso di questa risorsa per il disegno, per conoscere questo effetto più nel dettaglio.

Jarom Vogel ha lavorato come designer e sviluppatore web ed è diventato un illustratore freelance un paio di anni fa. L'estetica di Vogel, sviluppata durante la scuola d'arte, è caratterizzata dallo stile in due dimensioni, colorato e strutturato, un gusto per la pittura acrilica e contorni e forme marcate.

Ogni sua opera trasmette un senso di natura e di avventura, di temi infantili, che Vogel ha voluto valorizzare con nuovi elementi. Questa ricerca lo ha portato all'effetto parallax, e gli ha permesso di collaborare con marchi come Apple, Disney, Procreate e Adobe.

Di seguito Jarom Vogel condivide in prima persona il processo creativo che lo ha portato a creare una delle sue ultime opere che conteneva l’effetto parallasse.

Come si crea un'illustrazione con effetto parallax?

1. Lo schizzo

Inizio sempre da uno schizzo. Per questo pezzo ne ho fatto uno piccolo e animato, ma di solito uso solo una matita. Volevo che sembrasse un cerchio di luce in una foresta, con l'oscurità intorno.

2. L'importanza dei dettagli

Ho passato molto tempo a correggere il disegno: non ero contento dei colori dell'originale, così l'ho rifatto. Ho corretto le ombre, ho aggiunto più luce e texture ed ho usato toni più freddi. Ho anche ingrandito leggermente la tela, da un quadrato di 512px a uno di 2048px.

3. Migliorare l'animazione

Una volta soddisfatto dell'aspetto dell'immagine, ho migliorato l'animazione. Ho fatto questo passaggio in Procreate. Sono abbastanza lento, quindi lavoro su cinque livelli diversi, ma solo tre fotogrammi in movimento. Molto semplice.

4. Renderlo interattivo

Una volta che l'animazione è completa, decido come raggruppare i livelli per renderli interattivi. Esporto tutti i livelli e li nomino, in modo che abbiano senso per la codifica (tutti i cerchi blu sono le ombre, li ho esportati in una modalità di fusione nell’opera finito).

5. Il codice

Carico tutti i file in una specifica cartella sul mio sito web e li traduco poi in HTML. Per questa illustrazione, ho deciso di usare trasformazioni 3D in CSS. In altri progetti, ho usato un effetto parallax più semplice, dove ogni strato si bilancia indipendentemente quando si muove, dando un senso di profondità di base.

A questo punto, scelgo se integrare la realtà aumentata. Dato che questo non funziona così bene dal web, ho bisogno di cambiarlo in Xcode.
In ogni caso, la configurazione da questo step in poi è la stessa: bisogna solo decidere come manipolare gli elementi. È essenziale avere una grande maschera di livello bianca sullo sfondo altrimenti tutti i bordi dei livelli sarebbero visibili e l'effetto risulterebbe rovinato.

6. L'elemento interattivo

Infine, è necessario aggiungere l'uso di un giroscopio e di un accelerometro al dispositivo. Avete bisogno di diverse prove e di un bel po' di tempo per finalizzare i numeri per assicurarvi che tutto appaia naturale.
Per riassumere: questa illustrazione è stata disegnata ed animata in Procreate con codice HTML, CSS e Javascript.