Anaglifi 3D: realizzazione di un sito web con immagini stereoscopiche utilizzando Illustrator e Photoshop

Come arricchire l’esperienza utente con effetti e anaglifi 3D per una visione stereoscopica.

Dopo aver illustrato nel post di qualche settimana fa (Come creare anaglifi per immagini 3D), la tecnica per singole immagini stereoscopiche o stereogrammi, ritorniamo sull’argomento per occuparci di una sua applicazione, che potrebbe cambiare il volto del world wide web, così come lo abbiamo conosciuto fino ad ora: la creazione di un intero sito web (o meglio di una sua versione 3D) per arricchire l’esperienza dell’utente e realizzare un sito web di anaglifi, unico nel suo genere.

1. Crea una nuova tavola di Illustrator (CTRL/CMD + N) e imposta le dimensioni a 960px di larghezza e 700 px di altezza. Potrebbe tornare utile anche visualizzare una griglia con un passo di 30px e una suddivisione di 3 (Preferenze > Griglia e Guide) e fissare l’allineamento del disegno alla griglia.
2. Disegna una forma rettangolare grande quanto la tavola con un riempimento bianco.
   Lo strumento che permette di ottenere sinuosi, ma soprattutto immediati, effetti 3D é lo strumento TRAMA di Illustrator: selezionate lo strumento dalla barra di sinistra e applicate le linee di trama sui bordi del rettangolo, fino a ottenere una struttura simile a quella rappresentata nella prima figura.
3. Prima di applicare i colori, come descritto nel passo successivo, assicurati di avere un set di almeno 5 o 6 colori con una buona combinazione cromatica. Se non avete la teoria e la ruota dei colori nel sangue, non preoccupatevi: il pannello Guida colore vi può assistere nella scelta dopo aver individuato il primo colore del set. Nell’esempio é stata utilizzata la combinazione Complementari di Sinistra. Dopo aver individuato il gruppo di colori, salvatelo come Nuovo Gruppo nel pannello Campioni.
4. Ad ogni punto, creato dalla sovrapposizione di linee nella trama, può essere attribuito un colore diverso: il colore attribuito si espanderà a 360 gradi, sfumando nei confronti dell’area del colore dei punti adiacenti e opposti. Questa caratteristica dello strumento Trama consente di creare particolari effetti di profondità applicando lo stesso colore su tutti i punti di un’unica direttrice (nel nostro esempio selezionando i punti delle linee interne ai tracciati che separano le 8 aree del layout) oppure opposti tra loro (nel nostro esempio selezionando gli angoli opposti dei tracciati esterni che separano le aree del layout).
   Per una descrizione più generale dello strumento trama si consiglia di seguire questo link.
5. La nuova trama adesso é pronta per essere esportata in formato .jpg (File > Salva per Web e Dispositivi) e aperta con il programma Photoshop. La tecnica che utilizzeremo é identica a quella presentata nel post precedente, con un’unica variante: per far emergere la linea verticale, come il dorso più alto della nostra interfaccia, consigliamo di spostare il livello contenente l’immagine di sinistra (CTRL/CMD + T), di 8-10px verso sinistra, ruotare lo stesso livello di pochi gradi in senso anti-orario e allineare i due livelli sul primo incrocio in basso tra la linea verticale e la prima linea orrizzontale.
6. Applica le regolazioni di Miscelatore Canale, come illustrate nel nostro post e unisci i livelli ottenuti in un Unico livello.
   A questo punto puoi incominciare ad arricchire la base dell’interfaccia con nuove immagini, ripetendo per alcune i passaggi per la creazione dell’anaglifo (nel nostro esempio, abbiamo utilizzato l’immagine stilizzata di una lampadina e della sua gabbia 3D) e sovrapponendo a queste immagini piane (es. il tuo logo).

Per approfondire e conoscere tutti gli aspetti del web design scopri tutti i dettagli dei nostri corsi.