nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
barca a vela
___________________
prima parte
___________________
 

 

Barca a vela, onde del mare stilizzate (linee) ed uccellini in volo, sul far di una sera a caso, magari d'estate

Ero stufo di beccare pioggia nell'ultima settimana, mi stavo sognando d'essere altrove, magari all'asciutto, magari anche in barca ma all'asciutto. Ero anche così stufo perchè non solo avevo finito di leggere tutto il leggibile e di guardare tutto il guardabile, ma mi s'era scassata la connessione internet. Una storia di un cavo che a raccontarla uno finisce col credere ai fantasmi o alla sfortunaccia più nera di furia-cavallo-del-uest.
Insomma, vaga qui, vaga là con i pensieri, mi capita di riguardare (in locale, niente internet) alcune immagini vecchio stampo, quei CGM che si trovano anche qui sul posto, e che ti vedo? una barchetta sola soletta in mezzo al mare. E senza neppure camin che fumano (*)

E mi son detto (che io mi dico spesso delle robe che poi mi scordo di essermele dette e capita che me le ridico e magari le ridico anche in giro, che uno ci fa la figura dello smemorato di Collegno anche se non è di Collegno, o se lo è magari se l'è scordato) ... mi son detto: perchè non provare a costruire un'animazioncella tutta grafica, semplice semplice?

Che mi dico spesso anche un'altra roba: inutile far cappelli lunghi un poema, che tanto non ci metti mai le parole chiave, quelle che piacciono tanto a gugol, perdi solo tempo e magari finisce che se uno cerca Collegno sul ueb finisce in questa pagina, che di Collegno proprio non ha traccia, a parte uno smemorato, che magari non è neppure di Collegno ... mi sto ripetendo, vero?
Visto che roba?

Basta, morta là. Passiamo alla guida.


(*) La in mezzo al mar ci stan camin che fumano ...
Da "come porti i capelli bella bionda", Cocky e Renato, anni 60 o giù di lì.


1
   

Fondo mare e cielo.
Qui sotto c'è l'immagine d'arrivo (e di partenza, di demarrage, come dicono i francesi, che trattandosi di mare direi ch'è il massimo della coerenza fonetica, no?). L'ho ricavata dal CGM originale che a rifarla uguale ci si mette un bel po' di tempo. Quindi o la copiate da qui sotto oppure ricorrete ad una sfumatura con Photoshop, una robetta da 2 minuti scrsi.

In ogni caso il file è di dimensioni 1280x720.
Non sto a dare indicazioni di livelli o altro. Si tratta solo di costruire i vari pezzi da trasferire, per l'animazione, su SwishMax, quindi realizzato un pezzo lo si salva e ce lo si scorda.

Salvo il fondo (File > Salva per Web) come fondo.jpg, qualità 100%

Photoshop

2
   

Onde.
Visto che han funzionato in una guida precedente ho deciso di usare nuovamente i tracciati.
Ho evitato di riscrivere tutto: dovreste andare sulla guida AVATAR, utilizzando le indicazioni fornite ai punti 1,2,3,4.

Naturalmente il disegno del tracciato va modificato come uno di quelli riprodotti nell'immagine sottostante:


3
   

In realtà dovreste farli tutti, ed anche alcuni di più, sistemandoli uno sopra l'altro, ma tutti all'interno della zona occupata dal mare e colorandoli di azzurro degradante, un pochetto più chiaro rispetto al tono di azzurro che ha il mare al di sotto di ogni tracciato.
L'alternativa a disegnarne tanti è di produrre un due o tre tracciati e realizzare le due o tre onde.
Poi, riutilizzando i tracciati, tracciare altre onde di colore diverso dalle prime e ribaltatrle in orizzontale o in verticale.
Nellimmagine qui sotto c'è un esempio del mare con un bel mucchietto di onde:


4
   

Per ottenere il movimento delle onde mi sono basato sul solito sistema di farle scorrere lungo l'asse orizzontale, simulando appunto un ondeggiamento sulla verticale, che in realtà non esiste.
E per farlo, altro solito trucco: si duplica un livello onda, lo si ribalta in orizzontale (o in verticale), lo si sposta (a sinistra o a destra, fuori schermo) per far coincidere i due lati opposti dei due livelli.
Mi direte: ma se la copia è fuori schermo come si fa a vedere se i lati coincidono? Beh, prima si sposta un pochetto dalla parte opposta l'onda originale, poi si sposta la copia, si fan coincidere le due estremità, si collegano e si rimettono a posto insieme, utilizzando il lato scoperto dell'onda originale come riferimento per farlo coincidere con il riquadro.

Se vi sembra un po' ermetico, avviate l'animazione della guida qui sotto:


5
   

In animazione si tratterà di far scorrere in orizzontale le onde, partendo da una posizione con un lato a filo schermo per arrivare con il lato opposto a filo riquadro opposto.
Tanto meglio se le onde vengono mosse intercalando un movimento verso sinistra con un movimento verso destra, che determinerà incroci di onde meno monotoni, come nell'esempio qui sotto:




6
   

Animazione delle onde con SwishMax.

Il filmato ha le dimensioni di 1280x720 (quello che quando lo caricate su iutiub viviene definito come HD).
Fondo nero.
24 ftg al secondo.

Importo fondo.jpg e lo sistemo in centro schermo



Importo le mie brave onde (salvate come png 24 trasparente) e le sistemo per benino una sull'altra e disassate in orizzontale, proprio come consigliavo al punto precedente.
Per l'animazione ho preparato una breve (e incasinata) guida che potete attivare qui sotto.
Mi sono limitato ad una sola onda, come esempio, ma basta rifare il tutto pertutte le altre, naturamnente modificando, una si ed una no, il verso dello scorrimento orizzontale.

Scordavo: il nome dell'onda è DXL6.png
Scordavo anche: al termine dell'animazione di un'onda raggruppatela (si, è da sola, ma la funzione viene eseguita anche se si raggruppa un solo elemento) come clip filmato (o sprite che dir si voglia).

SwishMax

7
   

La luna
Io l'ho copiata pari pari dal CGM originale.
E' qui sotto, su fondo nero (anzi trasparente) trattandosi di un png.

Potete copiarla e scontornarla con una tolleranza di un 10% o anche meno.

(catturate il fondo nero, invertite la selezionecopiate ed incollate: avrete un nuovo livello con la luna posata sul fondo trasparente.


Oscurate lo sfondo e salvate: File > Salva per Web come png 24 trasparente (Mioddio, mi pare di essere in cucina ad elencare gli ingredienti, le dosi, il tempo di cottura ... brrr)

Photoshop

8
   

Lo sbarluccichìo della luce lunare sulle onde del mar.

L'ho risolta alla veloce: un segmento giallino chiaro di 20 pixel di larghezza x 3 pixel d'altezza, salvato come png 24 anche non trasparente.
L'ho sistemato sullo schermo, definendo un effetto di questo tipo (figura sotto a sinistra):
ftg 1 = scompari (o rimuovi)
ftg 2 = appari
ftg 5 = scompari
ftg 8 = appari
Ne ho fatto una clip filmato.

Ho duplicato la clip e l'ho spostata sullo schermo.
Poi ne ho modificato la sequenza di appari-scompari, come negli esempi a destra sull'immagine qui sotto.
Ne ho fatto altre copie, spostandole sullo schermo e modificando qua e là i tempi di comparsa-scomparsa,
e tutto in modo abbastanza empirico, controllando man mano la progressione dell'effetto del chiaro di luna sulle onde.

Ho aggiunto qua e là delle stelline (salvate come png 24 trasparente) trattandole allo stesso modo: qui sotto c'è sia il segmento giallino che la stellina, a mo' di esempio.

SwishMax

9
   

Uccellini.
Mi servono piccoli, quindi inutile perdertempo a disegnare di fino: alla veloce faccio 5 sagome nere (quelle impilate a destra dell'immagine qui sotto) e le salvo, una ad una, come PNG 24 trasparenti chiamandole V1, V2 ... V5.png.

Importo su SwishMax e definisco lo sbatter d'ali di un uccellino, come nell'esempio qui sotto a sinistra.
Raggruppo le cinque immagini come clip filmato e sistemo lo sprite sullo schermo dove mi pare cònsono.
Poi ne traccio la traiettoria di volo, anche li tutta da inventarsi, non c'è niente di meno prevedibile che il volo di un uccellino, vero?
Naturalmente ne faccio altre copie (copia oggetto > incolla in posizione).
Posso mantenere gli effetti (che sono la traiettoria di volo) per poi modificarli da uccellino ad uccellino, oppure non conservarli e ridisegnare nuove traiettorie. E' tutto discrezionale (io ho conservato le traiettorie per poi modificarle, sono pigrissimo).

Per controllare la comparsa degli uccellini, dopo averne definito letraiettorie, basta spostare i segmenti di animazione più avanti sulla linea temporale (si catturano con lo SHIFT premuto e li si sposta tutti in una volta), come nell'esempio qui sotto.
Buona cosa è sistemare sul primo fotogramma un effetto "Remove" (scompari, elimina) e metterne un'altro dopo l'ultimo segmento di traiettoria: evita la sovrappopolazione di roba png sullo schermo ed elimina quel fastidioso apparire di rettangolini neri (l'effetto poligoni rotti) quando troppi oggetti "bucati" si sovrappongono.




10
   

Il risultato di tutto 'sto maneggio lo vedete in alto in cima alla pagina.
Una versione ingrandita (nel formato 1280x720) la potete vedere cliccando sulla lente di ingrandimento che trovate sia in alto che qui sotto a sinistra.

Credo sia tutto.
Prossima pagina, la barca a vela.

   

fine prima parte

 
altre guide
onde del mare
     
 


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