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


Ci mette un po', cominciate a leggere che intanto lui si carica.
 

Farfalle e spighe d'Irlanda

E' stata una delle prime animazioni che ho messo nel posto.
Ci ho pensato su per più di un anno, sapendo che fare una guida esaustiva mi avrebbe portato via un pezzo di vita.

Poi un amico di un amico mi ha detto che una sua amica aveva molto apprezzato l'animescion.
Sourtout le batterflai.
Ed allora, omaggio a chi so io (che l'avrei anche scritto, ma mi dicono che non sta bene).
E facciamoci lo sbattone du siecle (accenti a parte)

 
1
   

Cominciamo dal più complicato. Quelle che sembrano due spighe. Complicato in quanto sono alte e sottili, quindi le folate di vento dovrebbero farle scuotere di più.
Col lazo poligonare circondo le spighe come nella figura a destra.

Copio (ctrl + C) ed incollo (ctrl + V)

Ho un nuovo livello (lo chiamo spighe-base)

Poi devo tirar via le spighe dal fondo, altrimenti, quando ruoterò parecchio in qua e in là spighe-base, le si vedrebbe al di sotto.
E non ho copiato più roba ai lati in quanto andrebbe in conflitto col mare e, soprattutto, con quello scoglio sulla destra.

Lo spiegone forse non era indispensabile, ma meglio troppo che nulla, come mi diceva mio nonno quando stappava una di quelle buone (lui diceva anche meglio adesso che mai, ma questa un'altra storia).

Photoshop
   


 
   
2
    Lesson namber tiù.
Coprire le due spighe.

Sinist!
Lazo poligonale: circondo la parte alta delle spighe.

Dest!
Sposto la selezione.
Ci sono due modi: o usate le freccine della tastiera, oppure vi mettete col mouse all'INTERNO della zona selezionata, ma senza cambiare strumento, lasciate attivo il lazo.
Quindi sposto la selezione, come nella figura, copio ed incollo.
Il nuovo livello ci pensiamo poi a dargli il battesimo, ok?

 
   

 
   
3
   
Sinist!
Seleziono il livello, cambio strumento (uso la freccia nera) e lo sposto fino a coprire le spighe

N.B.: Nella figura io ho mantenuto visibile il tracciato solo per mostrare dove lo sistemo. Voi non lo vedrete, ovviamente.

Dest!
(mi pare di essere tornato a fare la naja)
Torno sul livello fondo, traccio il perimetro dei gambi, ma solo la parte che finisce sul mare

 
 

 

 
   
4
    Sposto la selezione, come nella figura di sinistra, copio ed incollo.

Seleziono il livello, cambio strumento (uso la freccia nera) e lo sposto fino a coprire i gambi. (figura a destra)

 
   
 
         
5
    Stesse operazioni per i gambi che si posano sulla radura.
Non sto a spiegarlo, fate riferimento alle immagini.

 
   
 
         
6
    Coperte le spighe. I tre livelli li collego ed unisco in un unico livello, che metto appena sopra al fondo.
Non gli dò un nome, starà sempre lì fermo, per tutta l'animazione.


 
   
 
         
7
    Ora la parte divertente. Muoviamo le spighe.
Duplico il livello spighe-base (spighe-SX-1). Lo ruoto un pochetto verso sinistra.
Per farlo bene piazzate il centro di rotazione in basso a destra (cerchio rosso) e poi agite con lo strumento in alto a sinistra.

Duplico spighe-SX-1 (spighe-SX-2) e ruoto ancora.

Ne faccio un po' di copie, sempre più ruotate.
Poi passo a ruotare verso destra.

Duplico il livello spighe-base (spighe-DX-1). Lo ruoto un pochetto verso destra.

E cosi' via, faccio anche anche qui un po' di copie.

Più copie fate, meno gradi di rotazione date ad ogni passaggio, più avrete possibilità di movimento in animazione.
 
   

 
         
8
    Io non ho usato tanti livelli per le spighe, come si evince dall'animazione qui sotto.
Ma questo è un particolare, ingrandito.
Ho pensato che in tutto quel caos di movimenti globali non si sarebbe notato molto (per "addolcire" certi passaggi ho usato il tweenig, lo si capisce guardando bene l'esempio).

Qui ci sono un bel po' di fotogrammi (48), con tutto che si muove.
Per la sola spiga io ho usato 20 fotogrammi, ripetuti (copiati)
un paio di volte. Mi serviva avere una base animata un po' ampia
per metterci poi le farfalline.
 
   

 
         
9
    A questo punto ho salvato il GIF (con le sole spighe animate, l'ho riletto e l'ho salvato come PSD.

C'est terminè, l'è finito.
Cioè no, occorre fare la stessa cosa per un mucchio di altra vegetazione, ma sempre allo stesso modo,
Magari più semplice, non occorre più coprire il fondo in quanto solo le "spighe" erano in conflitto col mare.

Per non impazzire con troppi elementi da animare, fate in questo modo:

Ottimizzate il gif al massimo (256 colori, Dithering 100%)
Salvate il Gif dell'ultima animazione (salva ottimizzato come ...) usando dei nomi progressivi
Rileggete il Gif e salvatelo come PSD, con lo stesso nome.
In questo modo l'animazione resta congelata in tanti livelli quanti sono i fotogrammi.

Su Photoshop leggete l'ultimo PSD ed aggiungete la verzura da animare, ma sopra ai livelli animati.
Io prima ho copiato, incollato e mosso (ruotato) partendo dagli elementi in secondo piano
Conviene animare un tre o quattro elementi alla volta.

Per la tecnica dell'uso dei livelli-fotogrammi in successione fate riferimento ad un paio
di guide di questo posto:
Come gestire i livelli dei fotogrammi in animazioni successive

Purtroppo l'esempio migliore non ve lo posso mostrare, è in corso una caccia al tesoro, ma se avete tempo e voglia ...
Come gestire i livelli dei fotogrammi ed impazzire a trovare le guide

Quindi ve lo dico in breve:

quando si apre su ImageReady un PSD salvato dopo un'animazione, il programma genera automaticamente tutti i fotogrammi dell'animazione precedente, utilizzando i livelli presenti al momento del salvataggio.
Sovrapporre un'animazione ad un'altra è semplice, solo un po' barboso.
Io in genere butto via tutti i fotogrammi, eccetto il primo.
Poi comincio ad animare le parti nuove, creando, di volta in volta, nuovi fotogrammi.
Ad ogni fotogramma associo (cioè rendo visibile) il livello dell'animazione precedente che ha lo stesso numero:

Fotogramma 1 - livello 1
Fotogramma 2 - livello 2
e cosi' via.

 
         
         
10
    Ora si va per farfalle.
Ne dovete cuccare un tre o quattro, sul ueb. Io le ho trovate, ma è troppo tempo e non mi ricordo dove.
Ve ne servono di 3 tipi: una vista dall'alto, la stessa vista di lato, ed ancora di fronte.
Quello che si deve ottenere è tutto nell'immagine sottostante.
 
   

 
         
11
   

La tecnica è sempre la stessa, per tutte le posizioni:
Intanto la si scontorna (usate il lazo poligonale con un minimo di sfumatura (Sfuma: 2-3 pixel)
a secondadi quant'è grande la farfalla. Più grande, più pixel.

Poi duplicate il livello.
Circondate un'ala, copiatela ed incollatela.
Duplicate quest'ultimo livello.
Stringetela un po' in orizzontale ed applicate una leggera prospettiva, aumentando la parte esterna.
Duplicate ancora il livello e ripetete la stessa roba.
Abbiamo 3 posizioni: ali aperte, ali semichiuse, ali ancora più chiuse.
Ne potete fare anche altri, ma poi vi tocca usarli in animazione.

Duplicate i 3 livelli (ali) e ribaltateli in orizzontale (modifica > trasforma > rifletti orizzontale)
Mettete a registro i livelli simili (aperta DX, aperta SX). Collegateli ed uniteli.
Fermi. Prima leggete sotto, al punto 12 --->

Così abbiamo tre farfalle in 3 posizioni di volo, si?
I tre livelli finali metteteli in un set (Farfalla-rossa)

   


 
   
12
    ----> Se non avete trovato la farfalla di lato, prima di unire le ali, fate una copia dell'immagine.
Poi fate il lavoro per la farfalla dall'alto.
Passate sulla copia e vediamo di farla di lato.

Ruotate tutti i livelli delle copie di ali, insieme (basta collegarli)
Scollegate, collegate fra di loro una serie di ali e ribaltatela in verticale.
Schiarite una serie di ali.
Scurite l'altra serie

Sistemate le ali scure dietro a quelle chiare, facendo in modo che si intravedano.
Unite a due a due le coppie di ali

Così abbiamo tre farfalle in 3 posizioni di volo laterali.
I tre livelli finali metteteli in un set (Farfalla-rossa)

Trascinate il Set nel PSD originale (quello con le farfalle dall'alto).
Poi spostate le tre farfalle da un Set, nell'altro, in modo da averne sei in un'unico set.
Vi conviene dargli un nome, alle farfalle, per riconoscerle in animazione.

 
   

Se arrivi dalla caccia alle
farfalle, magari circondato da campanule, puoi tornarci da qui
.
   
13
   

Pausa ed un paio di informazioni per l'uso.
Se in animazione prevedete di far cambiare direzione al volo della farfalla, dovete prepararlo qui.
E questo è uno dei motivi del Set di raccolta.

L'altro motivo è che in animazione converrà che tutte le varianti della farfalla siano presenti nella stessa posizione,
un frame dopo l'altro, per non doverle rincorrere sempre dall'inizio.
Il Set è comodo in quanto, selezionando lui e muovendolo, tutto il contenuto ci segue, anche se non tutti i livelli de lset sono visibili in quel fotogramma.
Poi potremo muovere il singolo elemento, se occorre, semplicemente selezionandolo.

Bene. Passiamo alla rotazione.
Duplico il set, collego (non unisco) tutti i livelli e li ruoto un poco in su.
Duplico il set originale, collego (non unisco) tutti i livelli e li ruoto un poco in giù.

Se prevedo cambi di direzione più sostanziosi, posso fare altre copie dei set e ruotarli di più.

Ed ora la cosa barbosa. In ogni Set è bene dare un nome significativo alle farfalle, perchè ora capita che ...

Sposto tutti gli elementi di tutti i Set in un unico set (magari il primo). Poi Butto i set vuoti.

Collego tutti i livelli (farfalle) del Set e li allineo orizzontalmente e verticalmente in mezzo.
In questo modo ho le farfalle pressochè nella stessa posizione, utile per l'animazione.

Per scrupolo mi salvo il PSD.
Poi leggo l'ultimo PSD che arriva dall'ultima animazione dei fiori, foglie, spighe.
Ci trascino (sopra, mi raccomando) il Set delle farfalle.
Salvo e passo su ImageReady.

L'unico problema è che occorre organizzare un loop. Cioè la farfalla deve arrivare e poi uscire. Io ho fatto così:

ho cancellato, come sempre, tutti i fotogrammi, poi ho cominciato ad animare la farfalla.
Mi sono tenuto dentro ai 48 fotogrammi, ovviamente, che solo quelli abbiamo.

il primo frame lo lasci osenza farfalla. Lo duplico e la faccio entrare, duplico e la faccio volare su un fiore,
duplico e poi sull'altro, duplico ed uno svolazzo, duplico e faccio uscire.
Ogni volta inserendo un nuovo fotogramma, senza pensare a cambiare il fondo.

A questo punto conto i frame della farfalla e, se decido di farla arrivare al fotogramma 10, mi metto sul primo fotogramma e rendo visibile il livello 1 del fondo.
Duplico (sempre senza farfalla, per ora) e mostro il livello 2 ... Quando arrivo al livello 9 mi fermo.

Seleziono (non creo) il fotogramma 10 (c'è la farfalla) e rendo visibile il livello 10.
Passo al fotogramma 11, mostro il livello 11, e cosi' via fino alla fine della farfalla.
Poi inserisco tutti i fotogrammi che occorrono per i livelli di fondo residui.

Mentre guardo il volo della farfalla, posso modificarne la posizione in base ai movimenti del fondo.
Se il fiore si muove, muovo un pochetto anche lei.

 
 

 

 
   
14
    Questo per tutte le farfalle.
Qui sotto c'è il particolare dell'animazione, diviso su due gif (era troppo lungo) di un'altra farfalla.

frame 1-209
 
 

   


frame 21-49

 
 


   

 

Praticamente ... detsollfolks
Si manca il gabbiano, ma non è stagione di caccia. Magari lo metto dopo, tanto non lo si nota.

 

fine della guida

 
altre guide
lira
         
 


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