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

 

Pallina
Ovvero come far rimbalzare una pallina.

Partiamo da una cosa facile.
Graficamente è ridotta all'essenziale: una sfera. A tinte piatte.

Si tratta di farla rimbalzare come fosse una pallina di gomma.
Con qualche accorgimento, tanto per "esagerare" gli effetti di caduta e rimbalzo.
Il risultato lo si vede in fondo alla pagina.
Sempre ridotto all'essenziale.

Mi rendo conto che non è granchè un cerchio rosso su di un fondo bianco.
Ma si tratta della prima animazione.
Truccare una pallina non è poi indispensabile, c'è sempre tempo di farlo poi, vero?

Non so se prima o poi l'ho scritto in altre parti, ma l'animazione è una barba incredibile, specialmente ...
ho detto barba? Volevo dire palla, ovviamente.

Io preferisco costruire, in Photoshop, un livello per ogni posizione della pallina. L'animazione si può anche produrre direttamente su ImageReady, sia disegnando lì tutti gli oggetti necessari che spostando gli oggetti identici, utilizzando un unico livello che viene mosso a seconda della necessità dell'animazione.
Magari poi vediamo come si fa, per ora la faccio semplice.

 
 


 
1
   
I passaggi del punto 1 sono descritti nel tutorial on line
Photoshop-1.

Apro Photoshop.
Utilizzo l'immagine (quella qui sotto) come registro, la copio ed incollo su un file nuovo.
Creo un nuovo livello e traccio (strumento selezione ellittica) un cerchio (la pallina), colorandolo di rosso.
Duplico il livello (4 copie) e sposto le palline (livelli) sulle posizioni del registro (shift inserito per mantenere la posizione orizzontale).
Modifico forma e dimensioni delle palline 3, 4 e 5 (quelle in basso).
Se il risultato non mi soddisfa in quanto a definizione, ritraccio nuove palline, anche se non sto lavorando per ottenere immagini fisse.
Le eventuali sbavature non saranno percettibili.

A questo punto ho il mio psd con 7 livelli.
Il fondo (bianco) iniziale.
Il livello con il registro. (livello 1)
5 livelli (livelli 2-7) ciascuno con la sua brava pallina, in posizione
Photoshop
   
Tutorial on line
   
   
Photoshop-1
     
2
   

Set 1-GIU

Creo un Set, che chiamo 1-GIU  e trascino all'interno i 5 livelli-pallina.
Li sistemo nell'ordine di comparsa nei fotogrammi dell'animazione.
Salvo, chiudo Photoshop e passo su ImageReady
(se non voglio passarci direttamente da Photoshop)

3
   


Apro il file (l'ho chiamato pallina-01.psd ).
Sul pannello animazione clicco e tengo premuto sulla freccina in alto a sx.
Sul menu' a comparsa clicco su "Crea fotogrammi dai livelli".
Sul layout Compaiono le icone di 7 frames, uno per ogni livello contenuto nel file pallina-01.psd.
Cancello i primi due frames (quello col fondo e quello col registro).
Fatto.

Se voglio il fondo bianco, catturo tutti i 5 frames e rendo visibile il fondo cliccando sull'occhiolino
del livello "Fondo" su pallina-01.psd.
Cliccando sul triangolo in basso sul pannello animazione dovreste vedere un'animazione come
questa a sinistra.

La guida on-line è ImageReady-1

ImageReady
   
Tutorial on line
     
   
ImageReady-1
     
4
   

Riapro il file.
Ora la pallina la facciamo risalire. In 5 fotogrammi. Il registro è quello dell'immagine qui di lato. La pallina è grigia per consentire di capire dove si trova, vista la sovrapposizione parziale verso l'alto.
Se voglio fare le cose per benino mi copio il registro e lo incollo sul file di lavoro.
In ogni caso, duplico il livello di una pallina tonda (non deformata) all'interno del Set 1-GIU.

Set 2-SU

Creo un nuovo Set: 2-SU.
Trascino in quest'ultimo il livello duplicato.
Ne faccio altre 4 copie che sposto nelle posizioni di registro. Il primo livello (quello più in basso) lo deformo, aumentandolo in verticale e riducendolo in orizzontale, come nella figura).
Insisto un po' sulla posizione dei livelli all'interno dei Set. Se li mantengo nell'ordine non avrò da fare molto in animazione.
Guida on-line: Photoshop-2. Nella guida non sono stati usati i Set.

Photoshop
   
Tutorial on line
   
   
Photoshop-2
     
5
   

Ora la pallina la facciamo scendere. In 5 fotogrammi. Il registro è quello dell'immagine qui sotto (che posso copiare ed incollare sul file di lavoro)
Duplico il livello di una pallina tonda (non deformata) all'interno del Set 2-SU.


Set 3-GIU

Creo un nuovo Set: 3-GIU.
Trascino in quest'ultimo il livello duplicato.
Ne faccio altre 4 copie che sposto nelle posizioni di registro. Deformo gli ultimi due livelli (quelli più in alto nel Set) come nella figura.
Mi rendo conto che alto e basso possono confondere: Per me alto è il livello che sta sopra agli altri, sulla palette di livelli, anche se nella figura è più in basso.

6
   
Ora la pallina risale in 5 fotogrammi. Il registro è quello dell'immagine qui di lato (che posso copiare ed incollare sul file di lavoro)
Duplico il livello di una pallina tonda (non deformata) all'interno del
Set 3-GIU.

Set 4-SU

Creo un nuovo Set: 4-SU.
Trascino in quest'ultimo il livello duplicato.
Ne faccio altre 3 copie che sposto nelle posizioni di registro.
Il primo livello (quello più in basso nel Set) lo deformo come nella figura.
 
7
   
Ora la pallina risale in 4 fotogrammi. Il registro è quello dell'immagine qui di lato (che posso copiare ed incollare sul file di lavoro)
Duplico il livello di una pallina tonda (non deformata) all'interno del
Set 4-SU.


Set 5-GIU

Creo un nuovo Set: 5-GIU.
Trascino in quest'ultimo il livello duplicato.
Ne faccio altre 3 copie che sposto nelle posizioni di registro. 
Deformo gli ultimi due livelli (quelli più in alto nel Set) come nella figura.
 
8
   
La pallina risale in 3 fotogrammi. Il registro è quello dell'immagine qui di lato (serve che dica che posso copiare ed incollare sul file di lavoro?)
Duplico il livello di una pallina tonda (non deformata) all'interno del
Set 5-GIU.

Set 6-SU

Creo un nuovo Set: 6-SU.
Trascino in quest'ultimo il livello duplicato.
Ne faccio altre 2 copie che sposto nelle posizioni di registro. 
Il primo livello (quello più in basso nel Set) lo deformo come nella figura.
 
9
   
La pallina scende per l'ultima volta, in 3 fotogrammi.
Il registro è quello dell'immagine qui di lato.
Duplico il livello di una pallina tonda (non deformata) all'interno del
Set 6-SU.

Set 7-GIU

Creo un nuovo Set: 7-GIU.
Trascino in quest'ultimo il livello duplicato.
Ne faccio altre 2 copie che sposto nelle posizioni di registro.
Deformo l'ultimo livello (quelli più in alto nel Set) come nella figura.

 
10
   
Ora la pallina si ferma. Il registro, ma è pressochè inutile è quello dell'immagine qui di lato.
Duplico il livello di una pallina tonda (non deformata) all'interno del
Set 7-GIU.


Set 8-fine

Creo un nuovo Set: 8-FINE.
Trascino in quest'ultimo il livello duplicato e lo sposto nella posizioni di registro.
Naturalmente il Set è pleonastico, ma è solo per coerenza.
Potete anche non farlo.
 
11
   
Apro il file pallina-01.psd .
Sul pannello animazione clicco e tengo premuto sulla freccina in alto a sx.
Sul menu' a comparsa clicco su "Crea fotogrammi dai livelli".
Sul layout Compaiono le icone di un tot di  frames, uno per ogni livello contenuto nel file pallina-01.psd.
Scrivo un tot perchè il numero dipende anche da quanti livelli di registro vi siete caricati.
Cancello il primo fotogramma (quello col solo fondo) e tutti quelli con i registri.
Se voglio il fondo bianco, catturo tutti i frames e rendo visibile il fondo cliccando sull'occhiolino del livello "Fondo" su pallina-01.psd.
Tutti i fotogrammi hanno un tempo 0,0. L'ultimo 0,5.
Cliccando sul triangolo in basso sul pannello animazione (preview) dovreste vedere un'animazione come questa.

Sistemo l'ottimizzazione. (Le istruzioni sono presenti sui Tutorial on-line)
Sul pannello dichiaro un 8 colori (ne basterebbero 2, ma l'antialiasing ne richiede qualcuno di più). Verifico che l'output previsto sia GIF (in alto a sinistra sul pannello).
Salvo l'animazione: File > Salva ottimizzato come ...

Guida on-line: ImageReady-2.
Avvertenza: nella guida il PSD è stato ripulito dai livelli di registro prima di arrivare all'animazione.

ImageReady
   
Tutorial on line
     
   
ImageReady-2
     
           

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