Parallasse 3D da una fotografia

Mi è stato chiesto un parere su uno spot in cui alcune vecchie fotografie venivano animate con un elegante effetto 3D e mi sono reso conto che quel risultato può essere ottenuto facilmente in tre passaggi con l’uso di un solo software: Photoshop CS5 Extended.

L’effetto è quello che potete vedere nel video qui sotto:

httpv://www.youtube.com/watch?v=R034XJMe56U

Ho deciso di condividere con voi il procedimento per realizzare questo effetto, nella speranza che questo articolo possa essere di aiuto a qualcuno dei miei lettori.

La prima cosa da fare è procurarsi una fotografia che si adatti al nostro scopo, se non avete a portata di mano una vostra vecchia foto potete sempre scaricarne una da una banca immagini online. L’immagine che utilizzerò per questo tutorial proviene dal sito MorgueFile ed è gratuita per qualsiasi utilizzo, eccola in versione ridotta:

Bimbo che fa una linguaccia

…non si fanno le linguacce!

Per realizzare l’effetto di Parallasse utilizzeremo alcune delle magie che Photoshop è in grado di compiere nella versione CS5, già da subito ci rendiamo conto che ci servono due versioni dell’immagine, una con il solo sfondo, l’altra con il solo soggetto in primo piano.

Entrambe queste immagini possono essere ricavate dall’originale in pochi secondi.

Primo passaggio: ottenere due immagini distinte per lo sfondo e per il Soggetto in primo piano

Per prima cosa duplichiamo il Livello Sfondo e gli assegniamo un nuovo nome, per riconoscerlo più avanti. Togliamo la visibilità a questo nuovo Livello perché per il momento lavoreremo sul Livello Sfondo.

Dalla versione CS5 di Photoshop è possibile ricalcolare automaticamente parti dell’immagine per rimuovere un particolare che non ci serve. In italiano questa feature si chiama Riempimento in base al Contenuto, per utilizzarla basta tracciare una Selezione approssimativa attorno al soggetto e successivamente impartire il comando.

Una Selezione non precisa

Una Selezione non precisa è sufficiente a fare la magia.

Una volta tracciata la Selezione intorno al Soggetto possiamo accedere alla finestra di riempimento in base al contenuto in tre modi:

  1. Se ci troviamo sul Livello Sfondo basta premere il tasto Canc sulla Tastiera.
  2. Se vogliamo utilizzare il Mouse possiamo accedere al Menu Modifica > Riempi.
  3. Se preferiamo una scorciatoia da Tastiera possiamo premere Shift + F5.

Qualunque sia il metodo adottato, comparirà una finestra di Dialogo in cui possiamo scegliere il tipo di riempimento in base al Contenuto e confermare.

Riempimento in base al Contenuto

Finestra di Dialogo Riempimento in base al Contenuto

Dopo qualche istante (il tempo necessario dipende dalla velocità del vostro computer) Photoshop realizzerà automagicamente l’immagine che useremo come sfondo, eccola qua:

Sfondo senza il Soggetto in Primo Piano

Sfondo senza il Soggetto in Primo Piano

Questa magia è stata introdotta nella versione CS5 di Photoshop, prima per ottenere lo stesso risultato si impiegava molto più tempo.

Lo Sfondo è pronto, passiamo adesso al Livello superiore, che io ho rinominato bambino, e procediamo…

Il Livello superiore dovrà contenere il Soggetto in primo piano, ben scontornato. Uno degli Strumenti più utili per scontornare un’immagine si chiama Selezione Rapida (W) ed è un vicino parente della Bacchetta Magica (W). Per utilizzarlo è sufficiente selezionare questo Strumento e poi fare click e trascinare il Mouse all’interno dell’area desiderata, il risultato che si ottiene non è male:

Selezione con Strumento Selezione Diretta

Selezione con Strumento Selezione Diretta

Anche se questo Strumento ci permette di ottenere una selezione abbastanza soddisfacente in meno di tre secondi, possiamo migliorare ulteriormente la Selezione accedendo al Menu Selezione > Migliora Bordo o premendo [CTRL o Command] + Alt + R: comparirà una finestra che ci permette di raffinare la Selezione:

Finestra di Dialogo "Migliora Bordo" per Selezione

Finestra di Dialogo “Migliora Bordo” per Selezione

Possiamo utilizzare questa Finestra per migliorare la precisione della nostra Selezione e generare automagicamente una Maschera di Livello.

Una volta premuto OK dovremmo avere i due livelli che ci servono, non ci rimane che passare al 3D.

Secondo passaggio: creare la Scena 3D e posizionare i due elementi

Per fare in modo che i due Livelli si ritrovino sovrapposti in un’unica Scena tridimensionale si procede in questo modo:

  1. Selezionare uno dei due Livelli ed accedere al Menu 3D > Nuova cartolina 3D da Livello.
  2. Selezionare il secondo Livello e convertirlo allo stesso modo dal Menu 3D > Nuova cartolina 3D da Livello. Ci ritroveremo con due Livelli distinti in due Scene 3D distinte.
  3. Selezionare il Livello superiore e unirlo a quello inferiore con il Comando [CTRL o Command] + E. Le due Scene si uniranno e avremo un’unico Livello 3D con due Elementi.

A questo punto possiamo utilizzare la Palette 3D per selezionare singolarmente i due elementi all’interno della Scena, spostarli, ridimensionarli, eccetera. Lascio a voi lettori il piacere di esplorare tutte le Funzioni presenti in questa Palette, visto che per completare il nostro lavoro ne utilizzaremo solo una piccolissima parte.

Palette 3D di Photoshop CS5 Extended

Palette 3D di Photoshop CS5 Extended

L’unica modifica che ci interessa al momento è portare l’immagine del soggetto di primo piano un po’ più “avanti” rispetto allo Sfondo. Possiamo spostare il soggetto con il Mouse, grazie allo Strumento Scorrimento Trama che si trova nella Palette 3D, oppure possiamo inserire dei valori numerici all’interno della Palette Opzioni che si trova in alto.

Per modificare la posizione di una Trama 3D bisogna prima selezionarla dalla Palette 3D e poi selezionare lo Strumento Scorrimento Trama (della Famiglia degli Strumenti Modifica Trama). La Palette Opzioni in alto ci permette di inserire dei valori numerici se non vogliamo utilizzare il Mouse in questa fase, o se dobbiamo inserire dei valori precisi:

Palette Opzioni per lo Strumento Scorrimento Trama

Palette Opzioni per lo Strumento Scorrimento Trama

Per questo esperimento ho utilizzato i valori x=0 | y=0 | z=0,3 per lo Sfondo e x=0 | y=0 | z=-0,3 (negativo) per il Bambino. Sull’asse di riferimento z i valori più piccoli sono più vicini alla camera, i valori più alti sono più lontani dalla camera.

Terzo passaggio: animazione e movimento di camera

Con i due Layer in posizione possiamo passare a realizzare l’animazione vera e propria, per farlo utilizzeremo la Palette Animazione, se non è visibile potete attivarla dal Menu Finestra > Animazione.

Palette Animazione di Photoshop CS5

Palette Animazione di Photoshop CS5

La finestra Animazione si apre di Default con una Linea Temporale di 10 secondi, questo valore va bene per il nostro esperimento.

Per creare una Animazione dobbiamo inserire dei Fotogrammi Chiave all’interno della Linea Temporale, per fare questo è sufficiente posizionarci su un preciso fotogramma e fare click sull’icona a forma di orologio in corrispondenza della proprietà che intendiamo animare.

L’unica Proprietà che ci interessa è la Posizione della videocamera 3D, per questo inseriamo un Fotogramma Chiave all’inizio della Linea Temporale sulla riga denominata Posizione fotocamera 3D, dopo di che spostiamo la testina all’ultimo fotogramma e attiviamo un secondo Fotogramma Chiave cliccando sull’icona a forma di rombo che sarà comparsa alla sinistra dell’orologino..

Quando su una riga sono presenti dei Fotogrammi Chiave, questi vengono visualizzati sotto forma di piccoli rombi. Un rombo grigio indica un Fotogramma Chiave qualsiasi, un rombo giallo indica il Fotogramma Chiave attualmente attivo.

Possiamo spostarci velocemente da un Fotogramma Chave ad un altro utilizzando le freccette che compaiono accanto al’icona a forma di orologio. La freccetta a destra ci sposta al Fotogramma Chiave successivo, la freccetta sinistra ci sposta al Fotogramma Chiave precedente.

Photoshop creerà automaticamente una Interpolazione della Proprietà per cui abbiamo impostato i Fotogrammi Chiave, tutto quello che dobbiamo fare è modificare il valore di quella Proprietà per ogni Fotogramma Chiave.

Sul primo Fotogramma ho selezionato lo Strumento Ruota Fotocamera (N) e ho inserito sulla Palette Opzioni il valore 13 per la Rotazione y.

Sull’ultimo fotogramma, sempre con lo Strumento Ruota Fotocamera (N) attivo ho inserito il valore -13 (negativo) per la Rotazione y.

In questo modo la camera attiva si è spostata, permettendomi di vedere i due elementi da un’altra angolazione, però lo Sfondo non è abbastanza grande e i bordi dell’immagine sono rimasti “scoperti”:

Sfondo troppo piccolo

Sfondo troppo piccolo

Niente paura: se lo Sfondo è troppo piccolo possiamo sempre ridimensionarlo in modo che arrivi a coprire tutta l’Area che ci interessa.

Dalla Palette 3D ho selezionato lo Sfondo, usando lo Strumento Scala Trama attivo ho ingrandito l’elemento fino a che non sono stati coperti anche i bordi dell’immagine (con un valore di 1,39 sulla Palette Opzioni).

Per finire ho esportato l’animazione dal Menu File > Esporta > Rendering Video.

Il risultato finale di questo esperimento è il video che avete visto in cima all’articolo, ma se siete arrivati a leggere fin qui immagino vogliate scaricare il file PSD che ha generato quel video:

Inserisci nome e indirizzo email per iscriverti alla mia newsletter e ricevere il file immediatamente.
In breve: i dati inseriti in questo modulo saranno utilizzati per inviarti il link per scaricare il file che desideri, saranno conservati da un servizio esterno che si chiama MailChimp e in qualsiasi momento potrai cancellare la tua iscrizione al seguente link: https://danielealessandra.us7.list-manage.com/unsubscribe?u=546bebc381e525372d2120083&id=326af7d230.

Puoi leggere l'informativa completa cliccando sul link Privacy Policy che trovi dovunque su questa pagina, e comunque visitando in qualsiasi momento l'indirizzo https://www.danielealessandra.com/privacy-policy/
Ho letto e accetto l’informativa sulla privacy.

Potrebbero interessarti anche...

4 Risposte

  1. zak ha detto:

    Molto interessante, grazie! ti meriti un caffe :)

  1. 7 febbraio 2014

    […] Parallasse 3D da una fotografia – Daniele Alessandra Dot Com […]

  2. 25 marzo 2014

    […] Parallasse 3D da una fotografia – Daniele Alessandra Dot Com […]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.