nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
onda concentrica
___________________
prima parte
___________________
 

 

Riflessione sull'acqua.
Quarta riflessione.

Rifletti e rifletti capita di azzeccarne una.
Nel mettere mano all'animazione del testo ONDASUONDA ho dovuto anche utilizzare l'animazione di una riflessione di NewYork sul mare, e non è che mi avesse molto convinto. E mentre pensavo di rifarla m'è venuto in mente che qualcosa di analogo avevo già fatto altrove.
Che non è che io stia sempre a spazzolarmi il sito. Ci vado giusto quando devo inserire qualcosa.
A farla corta è meglio se ci vai con gli stivali, che altrimenti ti bagni le scarpe, mi sa ... ... mi sono perso, mi sa. Daccapo.
A farla corta scopro che c'era un buon esempio di animazione della riflessione sull'acqua, proprio nella guida successiva (Riflesso).

L'ho usata per l'ultima parte di ONDASUONDA, ma mentre c'ero ho pensato di rifare anche l'animazione del sasso che cade nell'acqua.
E mi sono costruito uno strumento ad hoc, una bella mappa di spostamento.

Per non far troppi salti in giro riscrivo qui quasi tutto quel che occorre per animare un riflesso con l'onda che si muove in verticale ed un altro con l'onda disturbata dai cerchi concentrici generati da un sasso che cade nello stagno.


 
Mappa di spostamento verticale.
Riassunto delle puntate precedenti.
 
1
   

Il come costruirla è spiegato nella guida Riflesso, dal punto 3 in poi.
Sono 13 PSD, che ho chiamato Pattern-01, 02 ... 13, costituiti da una serie di linee degradanti verso il basso, di differente spessore le quali, viste una dopo l'altra in animazione danno vita ad un effetto ipnotico come quello che si può vedere qui sotto.

Photoshop
   

I 13 PSD sono scaricabili sia sulle guide cui faccio riferimento che utilizzandoil bottoncino dorato che porta alla pagina dei files da scaricare:
Pattern.zip.

Il filtro
Distorsione > muovi utilizza le zone nere
(in questo caso le linee) le quali si occupano di "muovere" la parte di immagine sottostante trascinandola nella direzione indicata dai valori scala orizzontale e scala verticale utilizzati come parametri di applicazione del filtro.
2
   

Il come utilizzarla sull'immagine scelta per la riflessione è spiegato nella guida ONDASUONDA, ai punti 16 - 17 - 18 - 19.

Qui c'è il risultato dell'applicazione del filtro Distorsione > muovi con i valori di:
scala orizzontale 2
scala verticale 4
sull'immagine di New York che potete scaricare cliccando in alto a sinistra (o in basso a destra) sul bottoncino dorato di questa pagina, o su altra immagine a vostro piacimento.

Per aumentare l'intensità del movimento conviene agire più sul valore della verticale che su quello orizzontale.
Ma basta provare per poi scegliere quanto far ondeggiare il mare.

Comunque, salvarsi il PSD dopo l'animazione, che non guasta mai.

 
   

 
   
   

Mappa di spostamento circolare.

 
3
   

Costruisco i PSD per la mappa di spostamento circolare.
Ed usiamo un attimo per una spiegazione di partenza.
Ho l'intenzione di costruire 13 PSD da utilizzare, successivamente, come mappa di spostamento per una animazione dell'effetto di un sasso che cade in uno stagno.
Scelgo di fare 13 PSD in quanto l'animazione della riflessione dell'onda è costituita da 13 elementi, ed in questo modo potrò sovrapporre i due effetti per ottenerne uno unico che ne mescoli i movimenti.

Seguendo la logica del filtro muovi, il movimento si sviluppa utilizzando l'area sottostante alle zone nere dei files costituenti la mappa di spostamento, trascinandole in verticale ed orizzontale secondo i parametri indicati quali valori di scala all'atto dell'applicazione del filtro.
A dirla in modo comprensibile, se traccio un profilo ovale nero e poi uso come valori di spostamento 10 pixel in orizzontale e 10 pixel in verticale, la parte dell'immagine contenuta nell'area del profilo ovale verrà spostata di quei valori.

E per capire ancora meglio come lavorerà il filtro, così come abbiamo visto per la mappa verticale, mettiamo in fila, uno dopo l'altro, i 13 PSD della mappa di spostamento circolare che fra un po' andremo a costruire, in modo tale da vedere in anticipo (preveggenza?) quel che dovremmo ottenere.

Cioè una roba come quella qui sotto.
Fissatela con calma e non troppo a lungo che potreste addormentarvi ...

 
   

 
4
   

Per coerenza con la mappa precedente, apro Photoshop e definisco un file nuovo di dimensione 580x360 pixel, fondo bianco.


traccio un ovale molto grande, tale da uscire dallo schermo, come nella figura:

 
   

 
5
   


Creo un set di livelli che chiamo Set-01.


All'interno del set creo un nuovo livello, che chiamo 01.
Riempio la selezione di nero:

 
   

Sono partito da un ovale grande per poter ridurre poi le dimensioni senza perdere troppo in definizione.
Se avessi fatto il contrario, partendo dal piccolo per arrivare al grande, avrei ottenuto risultati meno definiti.
6
   

Centro il livello sul fondo in questo modo:


Lo collego allo Sfondo.

Seleziono lo Sfondo.
Menù > Livelli > Allinea collegati > Centri orizzontali.
Menù > Livelli > Allinea collegati > Centri verticali.


Scollego il livello dallo Sfondo.

 
   

Aumento delle
dimensioni.
nel Set-01

02 - 102%
03 - 104%
04 - 106%
05 - 108%
06 - 110%
07 - 112%
08 - 114%
09 - 116%
10 - 118%
7
   


Creo un nuovo Set di livelli che chiamo Set-02.


Duplico il livello 01 del Set-01, lo rinomino 13 e lo trascino nel Set-02.
Riduco, sempre utilizzando numeri e catenella, al 98% le dimensioni del livello 13.

Qui sotto si vedono il livello 01 nel Set01 (grigio chiaro, esterno) ed il livello 13 nel Set-02 (grigio più scuro, interno).

 
   

 
8
   

Duplico il livello 13 per 12 volte, rinominando i nuovi livelli da 01 a 12.

Seleziono un livello alla volta, a partire dal livello 12, e ne riduco le dimensioni secondo la tabellina a destra dell'immagine sottostante
Menù > Modifica > Trasformazione libera (oppure CTRL + T).

Utilizzo sempre i numeri e l'icona della catena nella zona menù in alto sullo schermo per avere ingrandimenti esatti, stesse proporzioni e senza spostare i livelli dalla posizione centrale.
Qui sotto c'è il risultato, dove il grigio chiaro è l'ovale di partenza (livello 13), mentre
il grigio scuro è l'ovale più piccolo (livello 01)

 
   

Riduzione delle
dimensioni
nel Set-02

12 - 98%
11 - 96%
10 - 94%
09 - 92%
08 - 90%
07 - 88%
06 - 86%
05 - 84%
04 - 82%
03 - 80%
02 - 78%
01 - 76%
9
   


Creo un set di livelli che chiamo Set-03.


Duplico il livello 01 del Set-02, lo rinomino 13 e lo trascino nel Set-03.
Riduco, sempre utilizzando numeri e catenella, al 98% le dimensioni del livello 13.


Duplico il livello 13 per 12 volte, rinominando i nuovi livelli da 01 a 12.

Seleziono un livello alla volta, a partire dal livello 12, e ne riduco le dimensioni secondo la tabellina a destra dell'immagine sottostante
Menù > Modifica > Trasformazione libera (oppure CTRL + T).

Utilizzo sempre i numeri e l'icona della catena nella zona menù in alto sullo schermo per avere ingrandimenti esatti, stesse proporzioni e senza spostare i livelli dalla posizione centrale.
Qui sotto c'è il risultato, dove il grigio chiaro è l'ovale di partenza (livello 13), mentre
il grigio scuro è l'ovale più piccolo (livello 01)

 
   

Riduzione delle
dimensioni
nel Set-03

12 - 98%
11 - 96%
10 - 94%
09 - 92%
08 - 90%
07 - 88%
06 - 86%
05 - 84%
04 - 82%
03 - 80%
02 - 78%
01 - 76%
10
   
Creo un set di livelli che chiamo Set-04.


Duplico il livello 01 del Set-03, lo rinomino 13 e lo trascino nel Set-04.
Riduco, sempre utilizzando numeri e catenella, al 98% le dimensioni del livello 13.


Duplico il livello 13 per 12 volte, rinominando i nuovi livelli da 01 a 12.

Seleziono un livello alla volta, a partire dal livello 12, e ne riduco le dimensioni secondo la tabellina a destra dell'immagine sottostante
Menù > Modifica > Trasformazione libera (oppure CTRL + T).

Utilizzo sempre i numeri e l'icona della catena nella zona menù in alto sullo schermo per avere ingrandimenti esatti, stesse proporzioni e senza spostare i livelli dalla posizione centrale.
Qui sotto c'è il risultato, dove il grigio chiaro è l'ovale di partenza (livello 13), mentre
il grigio scuro è l'ovale più piccolo (livello 01)

   

Riduzione delle
dimensioni
nel Set-04

12 - 98%
11 - 96%
10 - 94%
09 - 92%
08 - 90%
07 - 88%
06 - 86%
05 - 84%
04 - 82%
03 - 80%
02 - 78%
01 - 76%
11
   
Creo un set di livelli che chiamo Set-05.


Duplico il livello 01 del Set-04, lo rinomino 13 e lo trascino nel Set-05.
Riduco, sempre utilizzando numeri e catenella, al 97% le dimensioni del livello 13.


Duplico il livello 13 per 12 volte, rinominando i nuovi livelli da 01 a 12.

Seleziono un livello alla volta, a partire dal livello 12, e ne riduco le dimensioni secondo la tabellina a destra dell'immagine sottostante
Menù > Modifica > Trasformazione libera (oppure CTRL + T).

Qui sotto c'è il risultato, dove il grigio chiaro è l'ovale di partenza (livello 13), mentre
il grigio scuro è l'ovale più piccolo (livello 01)
 
   


Riduzione delle
dimensioni.
nel Set-05

12 - 97%
11 - 94%
10 - 91%
09 - 88%
08 - 85%
07 - 82%
06 - 79%
05 - 76%
04 - 73%
03 - 70%
02 - 67%
01 - 64%
12
   
Creo un set di livelli che chiamo Set-06.


Duplico il livello 01 del Set-04, lo rinomino 13 e lo trascino nel Set-06.
Riduco, sempre utilizzando numeri e catenella, al 97% le dimensioni del livello 13.


Duplico il livello 13 per 12 volte, rinominando i nuovi livelli da 01 a 12.

Seleziono un livello alla volta, a partire dal livello 12, e ne riduco le dimensioni secondo la tabellina a destra dell'immagine sottostante
Menù > Modifica > Trasformazione libera (oppure CTRL + T).

Qui sotto c'è il risultato, dove il grigio chiaro è l'ovale di partenza (livello 13), mentre
il grigio scuro è l'ovale più piccolo (livello 01)
 
   


Riduzione delle
dimensioni.
nel Set-06

12 - 97%
11 - 94%
10 - 91%
09 - 88%
08 - 85%
07 - 82%
06 - 79%
05 - 76%
04 - 73%
03 - 70%
02 - 67%
01 - 64%

13
   


Creo un set di livelli che chiamo Set-07.


Duplico il livello 01 del Set-05, lo rinomino 13 e lo trascino nel Set-06.
Riduco, sempre utilizzando numeri e catenella, al 95% le dimensioni del livello 13.


Duplico il livello 13 per 12 volte, rinominando i nuovi livelli da 01 a 12.

Seleziono un livello alla volta, a partire dal livello 12, e ne riduco le dimensioni secondo la tabellina a destra dell'immagine sottostante
Menù > Modifica > Trasformazione libera (oppure CTRL + T).

Utilizzo sempre i numeri e l'icona della catena nella zona menù in alto sullo schermo per avere ingrandimenti esatti, stesse proporzioni e senza spostare i livelli dalla posizione centrale.
Qui sotto c'è il risultato, dove il grigio chiaro è l'ovale di partenza (livello 13), mentre
il grigio scuro è l'ovale più piccolo (livello 01)

   

Riduzione delle
dimensioni
nel Set-07

12 - 95%
11 - 90%
10 - 85%
09 - 80%
08 - 75%
07 - 70%
06 - 65%
05 - 60%
04 - 55%
03 - 50%
02 - 45%
01 - 40%
14
   


Creo un set di livelli che chiamo Set-08.


Duplico il livello 01 del Set-07, lo rinomino 13 e lo trascino nel Set-08.
Riduco, sempre utilizzando numeri e catenella, al 90% le dimensioni del livello 10.


Duplico il livello 10 per 9 volte, rinominando i nuovi livelli da 04 a 12.

Seleziono un livello alla volta, a partire dal livello 12, e ne riduco le dimensioni secondo la tabellina a destra dell'immagine sottostante
Menù > Modifica > Trasformazione libera (oppure CTRL + T).

Utilizzo sempre i numeri e l'icona della catena nella zona menù in alto sullo schermo per avere ingrandimenti esatti, stesse proporzioni e senza spostare i livelli dalla posizione centrale.
Qui sotto c'è il risultato, dove il grigio chiaro è l'ovale di partenza (livello 13), mentre
il grigio scuro è l'ovale più piccolo, quasi invisibile (livello 04).

 
   

Riduzione delle
dimensioni
nel Set-08

12 - 90%
11 - 80%
10 - 70%
09 - 60%
08 - 50%
07 - 40%
06 - 30%
05 - 20%
04 - 10%
15
   

In pratica mi sono creato una serie di ovali degradanti da pieno schermo alla quasi invisibilità.
Ora li uso per generare i 13 files che fungeranno da mappa di spostamento.
Con questa logica: userò lo stesso livello presente nei vari set per costruire gli ovali degradanti che abbiamo visto funzionare al punto 3.

Per non annoiare ne vedremo solo un paio e le due eccezioni in testa ed in coda, quelle nelle quali i Set sono priivi di tutti i 13 livelli (Set-01 e Set-08)


Creo un set di livelli che chiamo Mappe.


Nel Set Mappe creo un nuovo livello, che chiamo Mappa-1.

Vado nel Set-01
seleziono la trasparenza di livello del livello 01

Torno nel Set Mappe, sul livello Mappa-1
Traccio il profilo della selezione, che ho mantenuto, colorandolo di nero, con un
valore di 8 pixel.


Vado nel Set-02
seleziono la trasparenza di livello del livello 01

Torno nel Set Mappe, sul livello Mappa-1
Traccio il profilo della selezione, che ho mantenuto, colorandolo di nero, con un
valore di 7 pixel.


Vado nel Set-03
seleziono la trasparenza di livello del livello 01

Torno nel Set Mappe, sul livello Mappa-1
Traccio il profilo della selezione, che ho mantenuto, colorandolo di nero, con un
valore di 6 pixel.


Set dopo Set, alla fine arrivo nel Set-07
seleziono la trasparenza di livello del livello 01

Torno nel Set Mappe, sul livello Mappa-1
Traccio il profilo della selezione, che ho mantenuto, colorandolo di nero, con un
valore di 2 pixel.

Ed ottengo questo risultato:

 
   

Mappa-1

Spessore del
profilo nero
secondo il Set
di partenza

Set-01 - 8px
Set-02 - 7px
Set-03 - 6px
Set-04 - 5px
Set-05 - 4px
Set-06 - 3px
Set-07 - 2px
16
   


Nel Set Mappe creo un nuovo livello che chiamo Mappa-2.

Ripeto il procedimento descritto al punto precedente, ma stavolta seleziono la trasparenza di livello del livello 02, per tutti i Set, dal Set-02 al Set-08.
I valori di spessore in pixel sono sempre gli stessi indicati in precedenza.

 
   

Mappa-2

Spessore del
profilo nero
secondo il Set
di partenza

Set-01 - 8px
Set-02 - 7px

Set-03 - 6px
Set-04 - 5px
Set-05 - 4px
Set-06 - 3px
Set-07 - 2px

17
   


Nel Set Mappe creo un nuovo livello che chiamo Mappa-3.

Ripeto il procedimento descritto al punto precedente, ma stavolta seleziono la trasparenza di livello del livello 03, per tutti i Set, dal Set-02 al Set-08.
I valori di spessore in pixel sono sempre gli stessi indicati in precedenza.

 
   

Mappa-3

Spessore del
profilo nero
secondo il Set
di partenza

Set-01 - 8px
Set-02 - 7px
Set-03 - 6px
Set-04 - 5px
Set-05 - 4px
Set-06 - 3px
Set-07 - 2px

18
   


Nel Set Mappe creo un nuovo livello che chiamo Mappa-4.

Ripeto il procedimento descritto al punto precedente, ma stavolta seleziono la trasparenza di livello del livello 02, per tutti i Set, dal Set-01 al Set-08.
La mancanza dei livelli 01-02-03 del Set-08 nei 3 passaggi precedenti si avvertirà come attesa del formarsi del primo ovale sull'acqua.
I valori di spessore in pixel sono sempre gli stessi indicati in precedenza.

 
   

Mappa-4

Spessore del
profilo nero
secondo il Set
di partenza

Set-01 - 8px
Set-02 - 7px
Set-03 - 6px
Set-04 - 5px
Set-05 - 4px
Set-06 - 3px
Set-07 - 2px
Set-08 - 1px
19
   

Ripeto le operazioni, passando da un livello al successivo, per nuovi livelli di Mappa.
Quando arrivo al livello Mappa-11 non dovrò più selezionare alcun livello nel Set-01 in quanto l'ovale è uscito dallo schermo; farò così:


nel Set Mappe creo un nuovo livello, Mappa-11.

Ripeto il procedimento descritto al punto precedente, ma stavolta seleziono la trasparenza di livello del livello 11, per tutti i Set, dal Set-02 al Set-08.

I valori di spessore in pixel sono sempre gli stessi indicati in precedenza.

 
   

Mappa-11

Spessore del
profilo nero
secondo il Set
di partenza

Set-02 - 7px
Set-03 - 6px
Set-04 - 5px
Set-05 - 4px
Set-06 - 3px
Set-07 - 2px
Set-08 - 1px
20
   

Bien. La parte barbosa è finita.
Creo un nuovo file che chiamo Mappe-Ovali, delle dimensioni del file sul quale ho lavorato sino ad ora: 580x360, con lo Sfondo bianco.

Trascino nel file Mappe-Ovali il Set di livelli Mappe.
Rendo visibili uno alla volta i livelli presenti nel Set Mappe, a cominciare dal livello Mappe-1.
Salvo 13 PSD, ciascuno con un livello visibile, che chiamo con il nome del livello visibile: Mappe-Ovali-01, 02 ... 13.

Sono i 13 files per il filtro Distorsione > muovi che userò nella seconda parte di questa guida.
Il fatto che ciascuno abbia i 13 livelli non è influente ai fini di Photoshop. Nell'applicare il filtro, Photoshop utilizza il livello visibile al momento del salvataggio del PSD.
Potete salvare i PSD con un solo livello alla volta, naturalmente. Ma è più lungo ed il recupero di costo, in termini di occupazione, è decisamente poco interessante.


Ora come ve lo dico?
Che tutto quel che avete fatto, sempre che l'abbiate fatto, era disponibile con un semplice clic?
Sul bottoncino dorato che vi porta alla pagina dei files da scaricare?
E lì cliccando su Mappa.zip?
Lo dico così?
Ok, detto.

 

fine prima parte

 
altre guide
riflessi
 


Non ho Copyright © poichè non so l'inglese. Il sito è fatto da nebbiaenuvole.com Tutti i diritti sono diritti, che se fossero storti ....
Marchi registrati e segni distintivi sono di proprietà dei rispettivi titolari.
 
Creative Commons License