nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
fumettando
___________________
 

 

Tecniche di animazione:
accentuazione dell'effetto (iperbole)

Che è come dire: l'importante è esagerare.

La differenza fra un'animazione "realistica" ed una d'effetto è immediatamente percettibile, ma diventa complicato definire i contorni degli interventi che si possono attuare per manipolare
la realtà ai fini di un'immediata e più efficace comprensione e coinvolgimento emotivo dello spettatore. In genere si tende a trasferire una qualsivoglia situazione o ai confini della buffonata
o ai limiti del dramma, purchè tutto sia credibilmente "esagerato".
Lo dovevo scrivere, dai. Volevo parlare semplicemente dell'iperbole, dell'esagerazione, di quella roba che di un'animazione freddina fa un'animazione simpatica.

Qualcuno, non mi ricordo chi, sosteneva che un'immagine vale più di mille parole (specialmente se chi ci ascolta è sordo), quindi passo ad esemplificare.

Prendiamo un oggetto a caso: una pallina. (Allibiti, neh? Eh, la fantasia non ha limiti).
Poi prendiamo uno scenario a caso. Ne ho scelto uno che trovate nel settore agè (la decima immagine).



 
     
Tutorial on line
         
      Testi          
1
   

Questo esempio rappresenta il caso dell'animazione verosimile (che tende a rappresentare il vero, la realtà).
La pallina ha un suo bel movimento, sale più lenta, scende più veloce, addirittura rallenta in alto verso la fine del rimbalzo.
Insomma, una roba che rende l'idea.
Vediamola.

Photoshop
   


 
2
   

Ora faccio un passo avanti. Bisogna osare (ed esagerare) un pochetto, no?
Visto che la pallina è ok, se immagino di accentuare qualcosa la prima cosa che mi viene in mente è di far sentire in qualche modo che quando la pallina cade dà un bello SBANG! sulla strada.
Laggiù è troppo distante per vedere che la pallina si schiaccia. Non resta che muovere la scena.

Riparto daccapo e spiego perchè.

In grafica mai ingrandire (se proprio non si riesce, pazienza) sempre ridurre. Il formato, intendo. Se ingrandiamo (e sto parlando di immagini non vettoriali) di sicuro in definizione qualcosa si perde.

Nel mio caso non perdo granchè, ma, visto che posso farlo, faccio in questo modo.

Il fondale di partenza è di 510x342 px. Creo un nuovo file con le stesse dimensioni.
Poi lo riduco, mantenendo le proporzioni a 490 (diventa 490x329).
Quindi copio l'immagine dal file di partenza e la incollo sul nuovo file.
Cosi' il livello dell'immagine eccede il formato, quindi la potro' ridurre senza perdere definizione.

Per ridurla ho due possibilità: o duplico il livello e lo riduco ad occhio, oppure (più sicuro) riduco
il file di partenza a 490x329, quindi copio di nuovo l'immagine e la incollo sul nuovo file.

Ho così due fondali, uno più grande ed uno più piccolo. Il più grande sarà presente in tutta l'animazione, il più piccolo solo al momento del contatto della pallina con la strada.
Poi ci ripenso: meglio fare una terza copia, di grandezza intermedia fra le due, così posso anche dargli l'effetto materasso (o molla) al fondale, no?

Diamo un nome ai fondali: Quello grande fondogrande, quello piccolo fondopiccolo.

Duplico fondogrande e lo riduco al 95% circa, che sia più piccolo di fondogrande e più grande di fondopiccolo.
Questo lo chiamo fondomedio

Rifaccio l'animazione ed ottengo questa roba qui:

 
   


 
   

Spiego l'uso dei fondali:
quando la pallina tocca terra si vede fondopiccolo. La pallina non ha l'ombra.

Nel frame successivo la pallina ha l'ombra (come si fosse leggermente sollevata dalla strada) e si vede fondomedio.
Questo scambio di fondali dà l'impressione che la pallina riceva una spinta verso l'alto, no?

Nel frame successivo la pallina si alza e si vede fondogrande.
Poi serve il rinculo e lo faccio nel frame successivo: si rivede fondomedio.
Infine, nei successivi frames, si vede solo fondogrande.

Forse non è chiaro il rinculo. La pallina tocca terra, il materasso si abbassa. Il materasso si rialza, dà la spinta alla pallina, che sale. Il materasso si riabbassa (vuoi per l'elasticità, vuoi per il contraccolpo nell'alzare la pallina), ma meno della prima volta (fondomedio). Quindi si rimette in posizione normale. Fine del rinculo.

 
3
    Diciamo che è meglio della prima versione, no? Più d'effetto.
Ma visto che ci sono perchè non esagerare?
Questo fondale lo facciamo di gomma. E questa volta, prima di spiegare come, vi mostro quello che succede:
 
   


 
4
   

Ed ora vediamo come.
Ho pensato di utilizzare il filtro distorsione, effetto sfera, per dare un effetto gommoso ai palazzi, come se si ripiegassero leggermente verso la strada.
Quindi per prima cosa ho isolato la strada (isolato non nel senso di caseggiato, neh?).
Col lazo poligonale ho selezionato (su fondopiccolo) il profilo delle strade, in questo modo (la selezione è la parte scura):

 
   


 
5
 

Quindi ho copiato ed incollato la selezione ed ho chiamato il livello: strada
(quando si copia e si incolla, Photoshop genera automaticamente un nuovo livello).

Ho selezionato la trasparenza di livello di strada, ho invertito la selezione (quindi ho in selezione tutto il resto, al di fuori di strada) ed ho copiato (da
fondopiccolo) tutto il resto.
Ho chiamato questo livello: palazzi.
Ho duplicato il livello palazzi chiamandolo palazzi 2.

 
   


 
6
 

Ho sistemato il livello strada al di sopra dei due livelli palazzi.

Ora faccio l'effetto gomma.

Seleziono palazzi e gli applico filtro > distorsione > effetto sfera, dandogli un -15%.
Seleziono palazzi 2 e gli applico filtro > distorsione > effetto sfera, dandogli un -25%.

 
   


 
7
   

Poi ho animato il tutto. La pallina ha sempre lo stesso movimento.
Il livello strada è visibile nei primi 2 frame.

Nel primo frame (pallina a terra senza ombra) si vede palazzi 2 su fondopiccolo e strada
Nel secondo (pallina a terra con ombra) si vede palazzi su fondopiccolo e strada.
Nel terzo (pallina che sale), si vede fondogrande.
Nel quarto frame (pallina che continua a salire) si vede fondopiccolo.
Nel quinto frame (pallina che continua a salire) si vede fondomedio.
Dal sesto in poi si vede fondogrande.

ImageReady
   


 
8
   

Oh, dimenticavo la pallina.
Beh, come farla lo sapete e se no guardate la guida "Sfera"
Lo schema delle palline è questo qui:

 
 



 
 

Ce ne sono 14.
Partendo dalla più grande le riduzioni successive, applicate sempre all'ultima, sono queste:
La seconda è ridotta del 97%.
La successiva è ridotta del 97%
L'altra ancora del 97%.
Tutte le altre hanno una riduzione dell'80%.
Le ultime tre hanno anche l'ombra (un cerchio leggermente sfocato con opacità 40% - 50% - 80% man mano che si allontanano.

 
 

 

Mi pare di aver detto tutto.
Avrò mica esagerato?


 

fine della guida

 
 


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