nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
a tutta birra
___________________
prima parte
___________________
 

 

A tutta birra

Giugno 2016.
A far l'animazione ci ho messo un mese, smettendo ogni tanto per sfinimento, e non ho mai fatto il conto di quante ore, effettivamente, mi sia costata tutta la roba.
A parte il costo in beveraggi (leggasi birra), con le conseguenze devastanti (ora tutto è devastante, anche le belle notizie) dell'esser sbronzo di prima mattina.
Ora non fate finta di non aver letto bene: era una BI, non una TI.
E non quella di mattina.

A far la guida credo che ci metterò altrettanto a meno di accorciare ed andare per sommi capi, o meglio per somme bolle, che a far la somma di quante bolle ci sono uno potrebbe far cambio con le pecorelle e dormirebbe placido (ed ovviamene ciuco perso).

Che mi è capitato di andare in giro sul ueb, roba che faccio quando non ho uno straccio di idea per far animazione. Maledetto quel giorno lì, che ho incrociato quel dannatissimo video, che fra l'altro volevo linkare, ma col cavolo che lo ritrovo (ci ho perso un paio d'ore in questi giorni, poi mi sono rassegnato) con le bollicine di birra che se la menavano a pieno schermo, che mi son detto: ma vuoi vedere che le rifaccio con un Photoshop 7 ed ImageReady e magari anche SwishMax, che di sicuro quelli l'han fatto con un Sw bestiale pieno di robe che noi proletari dell'animazione (leggasi io, voi siete esclusi dall'intruppamento sottosviluppato nel quale guazzo alla grande) ce lo sogniamo?

E allora dai, allora dai (come cantava il buon Gaber) mi ci sono incaponito di buzzo buono e me ne sono pentito dopo un'oretta, che stavo cercando di rifare quella stramaledetta bolla che scoppia e poi rinasce in due bolle che si raggruppano e ...

... basta, meglio passare al pratico, che tanto lo si vedrà man mano che ci si sbronza.


1
   

Poichè non ho il filmato originale dovrò spiegare il tutto sulla fiducia. E descrivere al meglio quel che dovrebbe succedere.
Dunque, immaginatevi un boccale di birra visto moooolto da vicino, diciamo così vicino da non vedere i bordi laterali del bicchiere.

Dal fondo (che non si vede, siamo troppo vicini) arrivano un tot di bollicine che si arrestano (magari spariscono) raggiunto il bordo superiore del liquido. Dove un altro tot di bollicine sta ballonzolando per conto suo.

Comincio a preparare la "bollicina tipo" da usare per tutte quelle che salgono dal fondo.
Ci sono due possibilità: o me la gioco sull'opacità della bollicina man mano che sale, oppure faccio una bollicina tipo stella cometa, con un pochetto di coda sul basso, tanto per dar l'idea della salita, del movimento, ed anche per riempire un pochetto il bicchiere che altrimenti di bolle non ne bastano un tot ma ce ne vogliono un paio di tot, un tottot.

Ma visto che sul bordo della schiuma ci sono un tot di bollicine che bollicinano, me ne serve anche un'altra, senza scia. Ergo non ci sono possibilità: le si fa tutte e due.
La prima, senza la scia, la seconda, copia della prima, con aggiunta la scia.


Nuovo file, 400 x 300.


Creo un nuovo livello (
01) e ci disegno un cerchio e lo coloro con la sfumatura dal giallo all'ocra descritta nell'immagine sottostante.

Photoshop
   

 
2
   

Cerco di darmi un tono: in realtà non mi ricordo una cippa di come ho fatto la bolla, sto tirando a ricostruirla alla meno peggio, ma essendo un elemento che passerà velocissimamente in animazione, la differenza sarà irrilevante.

Mantengo la selezione.


Creo un nuovo livello (02)
traccio una corona circolare di colore marron (ma solo per il contrasto, poi si cambia) con i valori della figura qui sotto

   

3
   

Per il livello 02 definisco un po' di opzioni di fusione (stile livello).
Plis, scorrere col mouse sui rettangolini azzurri per vederne i parametri.

 

   

 
4
   

Duplico il livello 02 (02-copia).


Creo un nuovo livello, lo collego al livello
02-copia e li unisco in un unico livello, 03: in questo modo ho "congelato" le opzioni di fusione.

Sfoco il livello
03 di un 6-7 px di raggio, come indicato qui sotto

   

5
   

Seleziono la trasparenza di livello del livello 02.


Creo un nuovo livello (04) e traccio il perimetro col solito marroncino: #712B0C

   

6
   

Sfoco il livello 04 con un valore di sfumatura di 2,8-3 pixel

   


 

7
   


Creo un nuovo livello (05)

Disegno una forma irregolare come nella figura.
Dimenticavo: prima definisco il valore di sfumatura dello strumento a 8-10 px.

Riempio la zona selezionata con il solito marroncino.

Porto l'opacità del livello
05 al 50% (nell'immagine è ancora opaco al 100%)

   


 

8
   


Creo un nuovo livello (06)

Sempre con un valore di sfumatura di circa 10 px disegno una forma irregolare come nella figura

Riempio la zona selezionata con il solito marroncino.

   


 

9
   

Sfoco il livello 06 di un bel 25%

   


 

10
   

Seleziono la trasparenza di livello del livello 01,
Espando la selezione di 7 pixel, inverto la selezione, mi porto sul livello
05 e cancello l'eccesso esterno, vado sul livello 06 e cancello anche qui.

   


11
    Con un valore di sfumatura di circa 20 px disegno alcune forme ovoidali come nella figura (tenete presente che le zone selezionate si ritraggono, quindi occorre disegnare forme un po' più grandicelle per ottenerne di simili a quelle della figura.

Vado sui livelli 01, 03, 04, 05 e 06 e cancello la parte selezionata.
   


 

 
 
E così abbiamo la prima bollicina.

Se dovessi pensare al'animazione con ImageReady, a questo punto dovrei collegare e unire i livelli
01, 03, 04, 05 e 06 in un unico livello finale. Ma visto che così non è ...

... oscuro il fondo bianco e salvo il risultato come png 24 trasparente, chiamando il file
BS.png.
Lui come al solito non risponde. Allora lo richiamo alzando il tono di voce, ma lui fa lo gnorri, allora ...
... non fateci caso, è solo un attimo di presa di incoscienza.

In realtà prima ho ritagliato l'immagine per ridurre l'ingombro in eccesso intorno al disegno, ho salvato, poi ho dato un bell'andù per riportarmi alla situazione ante ritaglio. Se vi scordate di farlo potete sempre leggervi il png e ritagliarlo e poi salvarlo, sempre come png 24 trasparente.
Che poi non ho mai capito di sia parente sto tras.
Parente vostro?
E dirlo, no?
 
   


 

12
   

Passiamo alla coda.
Sempre con il problema che non mi ricordo come l'ho fatta, ma tanto non si noterà un bel niente.

Per prima cosa salvo il PSD. Quello attivo dovrò salvarlo con altro nome se voglio mantenere una traccia del lavoro.
Butto via il livello
02, collego fra di loro i livelli rimanenti (escluso il fondo) e li unisco in un unico livello, che chiamo bolla.

Sposto il livello
bolla verso l'alto, quasi a filo dell'immagine, poi aumento il riquadro di lavoro, tenendo fissa la parte superiore, e portandolo a 500 pixel (mi serve spazio in fondo).




Creo un nuovo livello (
coda) che sistemo al di sotto del livello bolla.
Disegno un cerchio che riempio di giallo chiaro.
Poi sfoco il livello di un 28% circa.

   


 

 
13
   

Duplico il livello bolla (coda1) lo ribalto in verticale, lo sfoco di un 15-20%, lo stiro in verticale (lo allungo) e lo sposto verso il basso, sistemandolo al di sotto del livello bolla.

 
   


 

14
   

Duplico il livello coda (coda2) lo stiro in verticale (lo allungo), lo stingo in orizzontale (lo riduco) e lo sposto un poco verso l'alto, sistemandolo al di sopra del livello bolla.

   


 

 
15
    Oscuro il fondo e salvo come png 24 trasparente, chiamando il file BSC.png
   


 

 
   

 

Ora mi tocca mostrarvi i png che ho usato in realtà.
Hanno nomi diversi e formati differenti (conviene ridurli prima di utilizzarli con SwishMax allo scopo di ridurre il peso del filmato).
Anche i loro sostituti li ho poi ridotti con le stesse dimensioni per poterli sostituire agli originali per evitare che siano sottoposti a deformazioni per il cambio di formato.

Sia questi che quelli realizzati fin qui sono disponibili per lo scarico utilizzando il bottoncino dorato
presente in alto ed in basso a destra della pagina.

 
   


 

16
   

Abbiamo le bollicine. Ora facciamo un po' di fondali per la scena del birrificio.

In alto, al di sopra del bordo della schiuma, c'è il fondo bianco. Per evitare bruschi passaggi dal giallo intenso della birra al fondo ho sistemato un veletto, una quinta bianca leggermente sfumata nella parte a contatto con la birra:

Nuovo file, 1280 x 426.


Creo un nuovo livello. Traccio un profilo ondeggiante come nella figura, lo riempio di bianco e poi lo sfoco di un 15-20%
. Oscuro il fondo e salvo come png 24 trasparente con il none
velo.png.

   

 
17
   

Nuovo file, 1280 x 503.


Traccio un profilo ondeggiante come nella figura, lo riempio con la sfumatura mostrata sempre nella figura.

   

18
   

Traccio dei cerchietti (uno per livello) che coloro di marroncino.
Oscuro il fondo e salvo un primo file come png 24 trasparente:
G1.png.

Sposto e magari deformo i cerchietti e salvo un secondo file:
G2.png.

Sposto ancora, e magari deformo i cerchietti e salvo il terzo file: G2.png.

Usati a comparsa successiva daranno l'idea che altre bollicine si muovano in modo scoordinato nella birra:

 


 
   

Ora ho tutto pronto per la prima botta d'animazione: le bollicine che salgono nel bicchiere.
 
19
   

Apro SwishMax.
Definisco il filmato con la dimensione 1280 x 720, quella che piace tanto al tutubi per ottenere una visione HD.

L'immaginona ridondante qui sotto è solo per via (=per il motivo) che non avevo voglia di risistemarla (= impaginarla) solo per una volta (= per questa volta).

SwishMax
 


 

20
   

Importo (tutti insieme) i tre files del giallo movimentato (g1, g2, g3)
Li sistemo in posizione (X=640 - Y=240) e li piazzo uno sopra all'altro.

 


 

21
   

I tre fondini dovranno apparire uno dopo l'altro.
Per prima cosa inserisco un keyframe al fotogramma 1 per g1.png.
Poi, sempre al fotogramma 1, rendo invisibili gli altri due, inserendo un keyframe con valore: scompari (remove per chi ha la versione inglisc).

 


 

22
   

Inserisco altri keyframe:

Fotogramma 2: Scompare g1, appare g2, niente per g3
Fotogramma 3: niente per g1, scompare g2, appare g3.


Fine della fiera.
Poi raccatto i tre png e li raggruppo come clip filmato, così continueranno a scorrere per tutta la durata del filmato.

 


 

23
   

Importo BSC.png.
Lo sistemo in basso a sinistra, fuori schermo.

(L'elemento "giallo", uno sprite, è la clip filmato che raggruppa i tre fondini di cui sopra).

 


 

24
   

Inserisco un keyframe al fotogramma 1 di BSC.png
Non modifico la posizione, ma solo l'opacità, che porto all'80%

 


 

25
   

Poi inserisco un keyframe al fotogramma 8 (automaticamente si forma il rettangolo dal ftg 2 al ftg 8. Trascino BSC.png in alto, sotto al bordo giallo del fondino e ne modifico l'opacità al 50%.

Infine inserisco un keyframe (rimuovi) al fotogramma 9.

Questo chiude il ciclo per BSC.png.

Definisco BSC.png come clip filmato (si usa il raggruppa anche per un unico elemento: questo farà si che la linea di animazione si ripeta per omnia saecula saeculorum, come dire forever in linguaggio televisivo).

 


 

26
   

Ora facciamo un'operazione che dovremo ripetere per ogni bollicina che vorremo far salire.
Qui la mostro senza aver raggruppato BSC.png come clip filmato, ma il risultato è identico, come pure le operazioni da compiere.

Duplico e copio "in posizione" BSC.png.
Seleziono, sulla linea temporale, il keyframe lungo, quello che va dal fotogramma 2 al fotogramma 8, seleziono anche (SHIFT premuto) il fotogramma successivo, quello che fa sparire l'oggetto e li sposto di 4 fotogrammi.

Questo farà si che i due movimenti di salita avvengano in successione ed in tempi leggermente diversi: il tempo di salita è identico, ma la partenza della copia di BSC è ritardata, tipo una gara a cronometro dove ciascun ciclista parte dopo un tot di minuti.

 



27
   

Poi raggruppo ciascun BSC come clip filmato (li ho chiamati BSC1 e BSC2, tanto per distinguerli.
Sposto verso destra ed un pochetto più in alto BSC2. E già si nota una differenza fra le due situazioni, una senza sprite e l'altra con gli sprite: il movimento delle due bolle è si ripetitivo, ma è differenziato, non è simmetrico.

 



18
   

Ora, con santa pazienza, si tratta di duplicare un BSC a caso, di spostarlo, di modificare, all'interno dello sprite, la durata del percorso, tenendo presente che allungando od accorciando il keyframe lungo, quello posto in mezzo per intenderci, otterremo maggior o minor velocità e quindi delle differenza fra un percorso e l'altro.

Quindi copia, sposta, modifica, alla fine avremo ottenuto una roba come quella qui sotto, dove ci sono una trentina di bolle in attesa di salire, le stesse che si vedono in alto, in cima alla pagina e dove i nomi degli sprite sono modificati ad usum delphini (nel senso che avevo usato
su e su_sopra al posto di BSC nel rinominare gli sprite).

 

   


E con questo è tutto. Nella prossima pagina si passa a sistemare le bolle in cima.
Scordavo. Ho salvato il filmato con il nome
bolle-salita.swi

 

 

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