nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
riflesso sull'acqua
___________________
seconda parte
___________________
 

 

Riflessioni ... sull'acqua
Seconda parte

Se avete fatto la prima parte avrete notato che la baia di Hudson, per essere mare, sembra uno stagno. Non si muove granchè quel mare lì. Qui cerco di rimediare. La cosa la potevo anche fare subito, ma diventava molto complicato, in animazione, gestire tutti i livelli necessari secondo uno schema di ti-vedo non-ti-vedo decisamente destinato ad ingenerare confusione, per me che lo scrivo, per voi che magari lo leggete, ma soprattutto per chiunque lo volesse mettere in pratica.

Dunque il succo è questo: suddividere le animazioni complicate.
Nella prima ho mosso le onde in un certo modo. Se rileggo il GIF in ImageReady e lo salvo come PSD, ottengo un file con tanti livelli quanti sono i fotogrammi del GIF.
Su quei livelli posso aggiungere un'altra animazione, più facile da seguire in ImageReady, senza dare di testa.

E questa cosa la posso fare più e più volte, nel senso di leggere e riscrivere più volte, con una sola accortezza: mettere almeno un frame (che poi magari non uso) sul quale ci siano tutti i colori che avrò nell'animazione finale (= tutti gli oggetti presenti, anche non in posizione corretta) in modo tale che il programma possa calcolare l'ottimizzazione.

Qui il problema non si pone in quanto quello che vediamo è sempre e solo il riflesso che si muove, quindi niente colori non calcolati.

Il problema della gestione successiva di tutti quei livelli poi lo vediamo per benino una volta che abbiamo fatto i cerchi.

 
13
   

Io ho fatto così: ho letto NEWYORK-prima-parte.PSD, ho oscurato tutti i livelli tranne il primo, quello più in basso.
(ImageReady scarica il psd chiamando i livelli: livello 1, 2, 3 ...)

Poi seleziono il Livello 1.
Con lo strumento di selezione circolare traccio un ovale in mezzo al mare.
Copio (CTRL+C) ed incollo (CTRL+V).

Il nuovo livello lo chiamo semplicemente 1
Creo un Set di livelli che chiamo Cerchi-1 e lo porto in cima, al di sopra del Livello 16.
Ci porto dentro 1.

Seleziono la trasparenza di livello di 1, poi riduco la selezione
(Selezione > Modifica > contrai) di 3 pixel.

Sposto la selezione leggermente in basso (io uso le freccine, un paio di colpi), quindi cancello la parte selezionata (tasto CANC).
Ottengo una bella corona circolare, come qui sotto

La distorco di un 30%:
Filtro > Distorsione > Effetto increspatura.

Photoshop
   

 
14
    Seleziono il Livello 1.
Con lo strumento di selezione circolare traccio un ovale un po' più grande del primo.
Copio (CTRL+C) ed incollo (CTRL+V).
Il nuovo livello lo chiamo 2 e lo trascino nel set Cerchi-1

Seleziono la trasparenza di livello di 2, poi riduco la selezione
(Selezione > Modifica > contrai) di 3 pixel.

Sposto la selezione leggermente in basso, come ho fatto prima, quindi cancello la parte selezionata (tasto CANC).
Qui sotto si vede il risultato. Ho lasciato anche il primo ovale per vedere le rispettive grandezze.

La distorco di un 30%:
Filtro > Distorsione > Effetto increspatura.
 
   

 
15
    Ripeto tutto con un nuovo ovale più grande.
Attenzione, la copia si deve fare avendo in selezione il livello Livello 1 (il primo in basso)

Il nuovo livello lo chiamo 3.
 
   

 
16
    Altro ovale, altro livello.
Questo lo chiamo 4 (incredibile, ho una fantasia da sballo).
 
   

 
17
    Ultimo ovale, ultimo livello: 5.

Ora collego fra di loro tutti i livelli del set Cerchi-1, set compreso.
Duplico il set (Cerchi-2)
Seleziono un livello a caso e lo sposto (gli altri mi seguono essendo collegati) di un pixel verso il basso (Potrei fare la stessa cosa senza collegare i livleli e selezionare il Set prima di muovere).

Duplico il set Cerchi-2 (Cerchi-3) e sposto di un altro pixel in basso.

Duplico il set Cerchi-3 (Cerchi-4) e sposto ancora di un pixel in basso.
 
   

 
18
    Salvo il file come NEWYORK-seconda-parte.PSD

Se riesco aggiungo una terza parte e magari facciamo arrivare una pallina?
 
   

 
19
    Bene.
Apro in ImageReady il file
NEWYORK-seconda-parte.PSD.

E vedo che ImageReady ha generato automaticamente i 16 fotogrammi di partenza.

Li cancello tutti (a parte il primo) sul quale dovrei aver visibile il
Livello 1 (il fondo) e tutti e 4 i set Cerchi.

Il primo lavoro è quello di animare solo i cerchi, lasciando per ultimi i fotogrammi
(Livelli 1 - 16) della prima animazione.

I fotogrammi dal 2° al 5° sono i nuovi, inseriti dopo aver cancellato i 16 presenti.

ImageReady
 
Frame
livelli e livelli nei Set visibili
Livello 1
Cerchi-1 livello 1
Cerchi-2 livello 2
Cerchi-3 livello 3
Cerchi-4 livello 4
Livello 1
Cerchi-1 livello 2
Cerchi-2 livello 3
Cerchi-3 livello 4
Cerchi-4 livello 5
Livello 1
Cerchi-1 livello 3
Cerchi-2 livello 4
Cerchi-3 livello 5
Cerchi-4 livello 1
Livello 1
Cerchi-1 livello 4
Cerchi-2 livello 5
Cerchi-3 livello 1
Cerchi-4 livello 2
Livello 1
Cerchi-1 livello 5
Cerchi-2 livello 1
Cerchi-3 livello 2
Cerchi-4 livello 3
   
Ho 5 frames con il maremosso. Che generano un bel loop:

 
   

 
20
    Rinomino il livello Acqua in 25.
Seleziono la trasparenza di livello di un livello a caso in Acqua - 3 riseleziono 25 e cancello (CANC).
Seleziono la parte in basso la parte residua e cancello (CANC)

Creo un Set, lo chiamo Acqua - 4. Ci porto il livello 25. Ne faccio 7 copie che chiamo rispettivamente:
50 - 75 - 90 - meno 25 - meno 50 - meno 75 - meno 90.
 
   

new york
 
21
    Fatti due conti, ora devo sistemare i 16 fotogrammi della prima animazione, distribuendoci sopra i 5 fotogrammi di quella attuale. Se faccio due conti vedo che con gli attuali fotogrammi arrivo a 15 oppure a 20.
E con 15 me ne manca uno. Poco male, poi provvediamo.

Seleziono tutti i fotogrammi e li duplico 2 volte, arrivando a 15 fotogrammi.

Seleziono il secondo frame e rendo visibile Livello 2
(il penultimo).

Seleziono il terzo frame e rendo visibile Livello 3 ...
E così via fino al 15° frame.

Qui o mi fermo o aggiungo un fotogramma.

Se l'aggiungo, rendo visibile Livello 16 e oscuro il Set Cerchi-4
Sul Set Cerchi-3 rendo visibile 3.

Non mi chiedete il perchè dell'ultima scelta. Ci ho provato ed ho visto che così il loop era ancora buono:
 
   

 
22
   

Per l'ottimizzazione:
Ho scelto Adattata, diffusione, 256 colori, dithering 100%.
Il GIF lo salvo ottimizzato come: NEWYORK-seconda-parte.gif


Volendo un mare più movimentato basta
o saltare alcuni fotogrammi dei Livelli (con 5 fotogrammi, usando Livello 1-4-8-12-16) o, sempre saltando i fotogrammi dei Livelli, togliere di mezzo 2 livelli Cerchi (io ho tolto Cerchi-2 e Cerchi-3) e scalare solo gli altri due.

Il risultato lo vedete in cima alla pagina.


fine della guida

 
altre guide
riflessione
     
 


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