nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
Mal d'Africa
___________________
prima parte
___________________
 
giraffa
   

Mal d'Africa - La giraffa.

La cosa ha inizio dalla sigla RAI dei mondiali di calcio 2010.
Mi ha affascinato.
Non ho la più pallida idea di come l'abbiano realizzata (forse con After Effect) e mi sono detto che mi sarebbe piaciuto provarci.
Non a rifarla pedestremente, a farne una versione senza il mappamondo sul cielo, senza il Sud Africa a terra, senza le lucine ed i cambi di colore, insomma, una roba più semplice.


Poi c'era il problema di dove mettere la guida.
Alla fine ho deciso per "quelle bestiali", trattandosi di una giraffa.

Fatto bene?

 
1
   

La giraffa.

Non mi dilungo troppo su come ho fatto a disegnare la silhouette della giraffa.

Ho cercato sul ueb un video con una giraffa in movimento, il più dettagliato e con un buon contrasto.
L'ho prelevato dai file temporanei di internet.
Se non vi riesce guardatevi questa guida che da qualche dritta
per come fare (scaricare filmati dalla rete).

L'ho convertito in wmv.
L'ho letto con Adobe Premiere e l'ho salvato come gif animato.
L'ho letto con Imageready.
Ho limitato i fotogrammi ad un passo della giraffa.
Mi basta un passo in quanto con la silhouette non si nota il cambio di gambe, quelle del lato sinistro e quelle del lato destro sono uguali, mancando il disegno del mantello.

Ho cancellato tutti i livelli in eccesso ed ed ho salvato il PSD con i fotogrammi-livelli scelti.

Partiamo quindi da Photoshop

Mi sono letto il PSD (io l'ho chiamato giraffa, pensa te).


Ho selezionato il primo livello (fotogramma) e sopra ho creato un nuovo livello.


Ho iniziato a ripassare il contorno di testa e collo.
Ho usato il lazo poligonale, definendo una sfumatura di 1 pixel (che mi sa che ho fatto una boiata, ma ormai).
Ho riempito di nero l'area così delimitata.

Photoshop
 
   

giraffa-collo
   
2
    Ho creato un set.
Ho trasferito il livello col collo e la testa della giraffa nel set.


Sempre nel set ho creato un nuovo livello.



Sempre utilizzando come traccia il primo fotogramma ho tracciato il profilo del corpo della giraffa e l'ho riempito di nero.
   
   

giraffa-collo
   
3
   
Sempre stando nel set ho creato un nuovo livello.



Ho tracciato il profilo della coda della giraffa e l'ho riempito di nero.
   
   

giraffa-collo
   
4
   


Sempre nel set (ma è il caso di dirlo?) ho creato un nuovo livello per ogni zampa della giraffa.


Ho tracciato il profilo delle zampe e l'ho riempito di nero.
Ve le mostro tutte insieme, tanto s'è capito, no?

   
   

giraffa-collo
   
5
    Perchè tanti livelli? Beh, se siamo fortunati, con poche modifiche (rotazioni per lo più) riusciamo ad usare i profili senza ridisegnarli del tutto.

Ho duplicato il set e l'ho trascinato al di sopra del secondo fotogramma.
Come ho già detto, ho controllato la corrispondenza fra i profili e la nuova posizione della giraffa. Con piccoli ritocchi ho ottenuto la seconda silhouette della giraffa, sempre mantenendo separate le varie parti del corpo. Qui vi mostro le due silhouette: delle due quella col solo bordo rosso corrisponde al primo fotogramma.
In fondo con piccole rotazioni delle zampe e della coda e con una lieve correzione sul collo della giraffa me la sono cavata in pochi minuti.
Sempre meglio che ripassare tutto.
   
   

giraffa-collo
   
6
   

E così per tutti i restanti fotogrammi. Io sono arrivato a 20 silhouette per chiudere un passo della giraffa.
Ho salvato il PSD.

Non fate quello che scrivo ora, va solo letto, il da farsi è indicato al punto 7.

Poi, set per set, ho collegato ed unito fra di loro tutti gli elementi del corpo della giraffa. Ogni livello risultante l'ho rinominato con numeri progressivi, da 1 a 20.

Ho raccolto in un set tutti questi livelli, in bell'ordine, ho eliminato tutto il resto (set vuoti e fotogrammi del video di base) ed ho salvato un nuovo PSD con l'animazione della giraffa.

Sono passato su ImageReady, tanto per vedere: ho visualizzato per ogni fotogramma un livello della silhouette, nell'ordine, ottenendo quello che si vede in alto.

Naturalmente ci sono delle imperfezioni, ingigantite dalla lentezza insopprimibile del gif. Molte spariranno nell'animazione finale. Quelle che restano, peggio per loro.

Qui vi mostro la giraffa in versione flash, a 24 fotogrammi per secondo:

   
   

   
7
    Tutto il giro di unire i livelli, rinumerarli et similia è evitabile, se il prodotto finale non è un GIF ma un filmato flash.

Quindi, prima di perdere tempo, meglio fare così:

si rendono visibili i livelli di un set alla volta, senza vedere altro, quindi col fondo trasparente.
Si usa l'opzione: salva per web, selezionando il file di output come PNG 24 trasparente.
Il vantaggio dell'opzione "salva per web" è che salva solo quello che si vede in quell'istante.

Ho salvato le immagini della giraffa chiamandole
g01, g02, g03, ... g20.

I 20 fotogrammi (PNG) della giraffa sono zippati e scaricabili, col bottoncino dorato in alto e/o in basso a destra.

Prossimo colpo passiamo ai fondini, alle quinte, ed altro ancora.

   
   

   

la guida prosegue

 
altre guide SwishMax
 


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