nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
  
animazioni difficili
avatar
___________________
prima parte
___________________
 

 

Avatar, animazione degli esserini volanti, simili ad ombrelli o a meduse o a quei semi
o spore che ...
... ma come accidenti si chiamano?

L'idea era di rifare il verso a quelle creaturine bianche e filamentose che svolazzano in giro, luminescenti, e si posano leggere e galleggiano leggere e volteggiano leggere, fate voi.

E se vi va, rifate anche voi.

1
   

Ho deciso di usare i tracciati. Li uso pochetto, non per pigrizia, è che mi scordo che esistano. In questo caso mi sono venuti a taglio (nel senso di comodo, venire a taglio è un piemontesismo becero dei bricchi, non fateci caso) e quindi passo alla descrizione dell'opra.

File nuovo: dimensioni un 900x460, fondo nero.


Si crea un nuovo livello (si può anche fare dopo, ma poi ci si dimentica e tantovale farlo subito).

Si apre la scheda dei tracciati (in genere è presente sulla palette dei livelli, a destra)
Tasto destro del mouse: si preme sulle freccette in alto a destra della scheda tracciati per attivare il menù laterale.
Si sceglie, con il tasto di sinistra, la voce "Nuovo tracciato"
Si può assegnare un nome al tracciato sul pannello che compare immediatissimevolm ente in mezzo allo schermo e quindi si okeizza (si clicca su OK, che ormai tutti ad inventare nuovi verbi echi sono io per tirarmi indietro?)
E si passa a disegnare il tracciato ...

Photoshop
   

 
   
... si seleziona lo strumento penna.
Si disegna alla buona un ovale come quello raffigurato nell'immagine sottostante (sarebbe un braccino o filamento o tentacolo della bestiolina luminosa).

Una breve indicazione di come usare lo strumento penna è fonita in altre guide fra quelle presenti qui sul posto, ma fondamentalmente si tratta di:

mettersi col mouse sulla posizione di partenza e cliccare.
spostarsi col mouse nella posizione successiva e cliccare anche li.
rispostarsi col mouse nella posizione successiva-successiva ... Non credo sia il caso di proseguire, vero?		  
   

 
2
   

finito il disegno ci si porta con il mouse sulla scheda tracciati, si clicca con il tasto destro del mouse sull'incona del tracciato appena generata, si sceglie sul menù a comparsa la voce "Crea selezione"
Sul pannello che appare si determina lo spessore della sfumatura che avrà la selezione (ho usato 1 pixel).
Si okeizza ...

E' tutto visibile nell'immagine qui sotto:
   

3
   

Definiamo il diametro del pennello ed i valori di opacità etc.
Fate riferimento all'immagine qui sotto.
Sul colore di primo piano selezionamo il bianco.
   

4
   

Dovremmo trovarci sul nuovo livello creato all'inizio di questa storia. Nel caso verificare di esserci.

Sul pannello tracciati clicco con il tasto destro del mouse sull'icona del tracciato e scelgo la voce Traccia tracciato.

Se lo strumento che appare sul pop-up non è il pennello, lo seleziono e scelgo anche l'opzione "Simula pressione".
Okeizzo (urca se mi piace 'sto verbo nuovo di conio).
   

5
   

Et voilà.
Tutto sto lavoro per uno sbaffo di bianco. quello che si vede qui sotto.
   

6
   


Con un valore di sfumatura di 5 pixel traccio alla buona un ovale sulla punta inferiore del disegno e riempio la zona selezionata di bianco (immagine a destra)

   

7
   


Creo un nuovo livello (lo rinomino 2)

Torno sul pannello tracciati e duplico il tracciato 1
   

8
   

Seleziono lo strumento checonsente di modificare i tracciati e sposto leggerissimamente i punti di ancoraggio (si usa il tasto il mouse con il tasto Ctrl premuto per muovere un punto senza attivare il bilanciere.
Unavolta sistemato il nuovo tracciato rifaccio, usando quest'ultimo, le operazioni viste ai punti 2 e 4 (il 3 ormai non serve, è già tutto sistemato), tracciando il nuovo sbaffo sul nuovo livello (il livello 2).
Poi provvedo, sempre sul livello 2, a disegnare il piccolo ovale sfumato.
   

9
   

E così di seguito, duplicando e modificando i tracciati, arrivo ad ottenere 11 livelli, come si vede nell'immagine qui sotto.
   

10
   

Volendo controllare quel che si ottiene in animazione basta andare su ImageReady e rendere visibile, uno alla volta, i livelli da 1 a 11 e poi a ritroso, da 10 a 2 (evitiamo i doppioni nell'andare a ritroso).

Dovreste ottenere una roba come quella qui sotto:
   

11
    Ora la parte più barbosa.
Si tratta di realizzare l'animazione di altri 4 tentacoli.
Mi limito a 4 poichè gli altri 4 o 5 li dovremmo facilmente ottenere duplicandone alcuni e modificandone la grandezza.
Ma facciamo un passo alla volta.

Per prima cosa inserisco gli 11 livelli in un set (chiamiamolo Set1)

Duplico il Set e rinomino la copia come Set2.

Rendo visibile in entrambi i set solo il livello 1, per poterci capire qualcosa.
Con il Set2 in selezione mi cimento a modificarne un pochetto la forma.

Modifica > Trasforma > Distorci.
Lo ingrandisco un poco in orizzontale (tenendo in posizione il lato destro) e lo storco leggermente in verticale.
Fate riferimento alla figura: è il secondo sbaffo a partire da destra.

Non posso proseguire con un altro set: se ingrandissi ulteriormente in orizzontale otterrei uno spessore eccessivo ed un eccesso di sfumatura, causata da quel maledetto 1% che nasce dal tracciato (cfr. punto 2).

Quindi per ottenere il terzo tentacolo mi tocca ricominciare con i tracciati.
Ma per far prima duplico comunque il Set2 e ne modifico la grandezza (nella figura è il terzo sbaffo a partire da destra) tanto per avere un riferimento per i nuovi tracciati.

Che devo ridisegnare partendo dal primo poichè è più facile modificarli partendo da una posizione corretta anzichè partire dalla posizione dei primi tracciati, ma fate a vostro modo purchè il risultato vi vada bene.

Nella seconda immagine qui sotto c'è la sistemazione degli 11 livelli del terzo tentacolo, quella ottenuta con i nuovi tracciati.
   

 
   
Nell'immagine qui sotto c'è la sistemazione degli 11 livelli del terzo tentacolo (Set3), quella ottenuta con i nuovi tracciati.		  
   


   


Il quarto tentacolo lo si ottiene duplicando il Set3 (rinominandolo Set4) e modificandone la dimensione. Comeriferimento utilizzate il quarto tentacolo dell'immagine al punto 11.

L'ultimo sforzo: si riparte da un nuovo tracciato, sempre per il motivo che modificare tutta una serie è più lungo che ridisegnarne la base e poi modificare quest'ultima.



Set5: qui sotto è quello che ho ottenuto con i nuovi tracciati:
   


   
E qui sotto tutto l'ambaradan reso in animazione con ImageReady.		  
   

 
   
Ci toccherà, come premesso, operare con SwishMax per chiudere il cerchio, ovvero sistemare tutti i tentacoli.
Qui sotto, in fila, ci sono i livelli 1 della serie sinistra dei tentacoli, con la relativa animazione.
Il che dimostra che si potevano anche reralizzare in Photoshop, ma in questo modo il costo finale dell'animazione risulta ridotto.		  
   


 
12
   

Ritocchetto alla bestiolina luminosa.
Utilizzando il pennello ho disegnato un bargiglio (che ne so se è un bargiglio, forse è un braccino). Me ne basta uno, l'altro lo otteniamo ribaltando l'immagine su SwishMax.

Poi anche il resto della bestiola, forse la capoccia.

Qui sotto c'è (ingrandito e quindi decisamente brutto) quel che ho fatto alla rapida:
   

 
13
   

Il fondo.
Che facciamo in fondo, per coerenza.
Non vi dico come ho fatto poichè non me lo ricordo.
Mi ricordo solo le dimensioni: 1280x720.

Cioè, mi ricordo di aver cercato delle immagini sul web con qualche traccia di fusti d'albero, poi ho rimescolato i colori con l'aiuto di qualche filtro. Niente di trascendentale.
Se non avete di meglio vi passo il jpg: andate sul tasto dorato che si trova in cima ed in fondo a questa pagina, vi ritrovate su una pagina con i download, scaricate
(ci trovate non solo il fondo, ma tutti gli elementi dell'animazione, compreso il psd)
e poi rientrate utilizzando le indicazioni che ci sono li, che io non me le ricordo, ma è facilissimo, se ce la faccio io figurarsi.

  
   

14
   

Quel che non ho ancora detto è che occorre salvare tutti i livelli con i tentacoli come png 24 trasparenti.

Si fa in questo modo.
Si va sul il livello.
Si seleziona tutto (Seleziona > tutto)
Si copia (CTRL+C)
Si crea un nuovo file (File > nuovo) lasciando che Photoshop determini le dimensioni, che corrispondono all'ingombro del contenuto del livello selezionato.
Si incolla (CTRL+V).
Se avete generato un file con il fondo opaco, rendete invisibile il fondo.
Si salva per il Web (File > Salva per Web) come png 24 trasparente.
Questo per tutti i livelli dei 5 set, più le due immagini di contorno, bargigli e capoccia.

Il fondo si può tranquillamente salvare come jpg.

Come detto sopra, fondo e png son tutti zippati nel file che si può scaricare.
I tentacoli sono rinominati A01-A11, B01-B11, etc. dove A rappresenta il contenuto del Set1, B quello del Set2, etc.

L'animazione la vediamo nella prossima pagina.

fine prima parte

 
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
nebbiaenuvole by www.nebbiaenuvole.com is licensed under a
Creative Commons Attribuzione-Non commerciale-Condividi allo stesso modo 2.5 Italia License
Permissions beyond the scope of this license may be available at http://creativecommons.org/about/licenses/