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

 

Bandiere al vento
Prima parte

In fondo (senza riferimento all'Inpho(ndo)) una bandiera che garrisce (si, si diceva garrire) al vento è sempre un bell'effetto. Effetto bandiera, si potrebbe chiamarlo.
Tempo fa mi è toccato fare animazioni di bandiere 3D, e per lo più veniva fuori
(= ottenevo) una bandiera che sembrava un telo di gomma.

Recentemente facendo un giro di ricognizione sul ueb ho visto un bellissimo esempio di bandiera, ma statico, naturalmente. E m'è tornato l'ùzzolo di provare ad animarla. Funziona bene solo con alcune bandiere però; col tipo "Italia", nel senso di soli rettangoli, dà qualche problemino; ma per una cosa rapida, si fa per dire, lo strumento di cui stiamo per vedere l'azione direi che è accettabile. Sempre se uno non vuole intervenire manualmente per correggere eventuali sbavature.
Quello che mi secca è che se non la smetto di andare sul ueb, mi toccherà citare un po' tutti, solo per il fatto che l'ho visto lì. Magari mi cito da solo, ecco.

Fine della messa prima, che non è la Messa delle 6 di mattina, ma è la premessa.

Si va?

Un consiglio: dato che ho scritto qui passo passo i tentativi per arrivare alla bandiera,
meglio prima dare uno sguardo alle animazioni presenti in questa pagina e nella successiva, così evitate di fare del lavoro che non vi servirà, come ho già fatto io.

 
1
 
Aggiornamento

il link non funziona più.
O ha rimosso la pagina o
ha rimosso il sito,
Lo lascio comunque,
si sa mai che lo rimetta
in rete.

Preparazione del file per il filtro muovi

Tutta la faccenda si basa sul filtro Distorsione > Muovi.

E su un'immagine che ora vi descrivo.
Si tratta di recuperare un'immagine di un tessuto spiegazzato, ondulato, in tinta unita, sapete, quei bei drappeggi che si vedono sui dipinti e sulle statue, che se ve li fanno fare a scuola ci si muore.
Se non lo trovate potete anche impazzire un po' e disegnarlo in bianco e nero, matita morbida o carboncino, poi lo acquisite con lo scanner, oppure andate alla pagina successiva a questa e lì c'è il modo di farne uno come piace a voi.

Io ho succhiato quello dell'esempio che ho trovato sul ueb e ve lo sforno qui sotto pari pari. Vi sforno anche il link, che il tessuto è proprio bello:

http://www.pisconti.it/site/2009/06/08/photoshop-bandiera-in-3d/

L'ho ridotto in bianco e nero (toni di grigio) per fare prima.
Photoshop
  
   

   
2
    Ora vi spiego il meccanismo.
Il vento fa ondeggiare la bandiera dando l'idea dell'onda (sto parlando di un vento non di un tornado) come se il tessuto scorresse a partire dall'asta e viceversa, quando il vento cambia direzione. Dovremmo imitare quel movimento. La base che stiamo utilizzando non può scorrere, verrebbe a mancare il tessuto, si vedrebbe la trasparenza, in quando è troppo corta in orizzontale. Se ipotizziamo un movimento completo del tessuto, lo dovremmo raddoppiare.

Questa immagine è di 350 x 233 pixel (in origine è di 512 x 339, l'ho ridotta per farcela stare qui).

Duplico il livello (sarebbe il fondo).
Poi allargo il quadro, raddoppiandolo in orizzontale, portandolo a 700 (700 x 233).

Se non avessi duplicato prima il livello (il fondo col tessuto, per intenderci) avrei ottenuto il risultato di un fondo col tessuto in centro ed un colore (qui bianco poichè avevo quello come indicazione di background), che avrei dovuto poi cancellare per renderlo trasparente (il bianco). Duplicando il livello, quest'ultimo sarà trasparente nella parte di immagine che si è aggiunta aumentando il quadro.		    
   

   
3
    Duplico il livello. Uno lo sposto a sinistra, l'altro a destra in questo modo (ho reso semitrasparente il livello di destra)

E sono anche fortunello, poichè il tessuto si raccorda alla grande (vedi bordino rosso)		    
   

   
4
    Unisco e collego i due livelli e li rinomino 01.
Creo un Set di livelli e porto nel Set il livello 01.

E vediamo la prova in animazione.
Per farlo creo un livello, seleziono un rettangolo che corrisponda al rettangolo che è occupato dalla bandiera di sinistra e lo riempio di nero. Così ho nascosto metà schermo, la metà che poi butteremo via.

In ImageReady duplico il primo fotogramma, sposto il livello 01 a destra, in modo che il suo bordo sinistro coincida
col bordo destro del rettangolo nero, così posso controllare che effettivamente il tessuto percorra tutta la metà schermo di destra, senza "sganci" nel loop.
Seleziono i due fotogrammi ed imposto un tweening di 9 fotogrammi.
Cancello l'ultimo (il motivo è sempre il solito, l'ultimo è un doppione del primo) e controllo col preview:		    
   

   
5
    Direi che scorrere scorre.

Ora comincia la solita noia.
Il vento scuote la bandiera, muovendo le onde, ma ne cambia anche la forma.
Dobbiamo fare altrettanto, e, dovendo fare delle onde, direi che il filtro giusto sarebbe quello onda, no?

Sono operazioni ripetitive, che lavorano ciascuna sulla precedente, quindi, in sequenza:

1. Duplico il livello 01 (lo rinomino 02)

2. Applico il filtro Distorsione > Effetto onda con questi parametri (si può anche modificarli, va a gusti, ma dato che lavoreranno in progressione, meglio partire bassi)		    
   

   
6
    Duplico l'ultimo livello ed applico il filtro.
L'effetto si dilata, essendo applicato su un'immagine già "ondeggiante".

Arrivo al livello 20.
E ricomincio dal primo con un nuovo filtro: Sfocatura. Sfoco pochissimo: 2%. E li sfoco allo stesso modo tutti e 20.		    
   

   
7
    Ora si tratta salvarci i pattern per la deformazione delle bandiere.
Solo che bisogna far scorrere i livelli da sinistra a destra fino ad arrivare a fine (quasi) corsa, in pratica imitando quello che il tweening di ImageReady aveva fatto automaticamente.

Io essendo uno che va sull'estermporaneo, e non sapendone molto di mate, anzichè usare i righelli ho fatto in modo proprio terra terra.
Ho selezionato un livello ed ho contato quanti colpi di freccina+SHIFT ci volevano per arrivare a filo rettangolo nero (cioè a metà schermo)

Ne ho contati 35.

Ora io ho 20 livelli, che però diventano 18, poichè l'ultimo non deve coincidere col primo ma restare indietro di un passo, sempre per il loop. Ed il primo non conta, parte da dov'è, quindi : 20 - 2 = 18.
35/18 fa quasi 2.

E per non saper ne leggere nè scrivere, io ne faccio due ciascuno, meno uno che sarà più lento.		    
   

   
8
    Ho ridimensionato il quadro (non l'immagine) riportandola alla lunghezza iniziale (350), tenendo fisso il bordo destro:    
   

   
9
    Per tener ferma la bandiera dalla parte dell'asta:

Ho tracciato un rettangolo a sinistra del primo livello, ho reato un nuovo livello e l'ho riempito di nero		    
   

   
10
    L'ho sfocato di un 25%. Ne ho fatte 20 copie, sistemandole ciascuna al di sopra di ogni livello.
Poi ho collegato ogni livello col rettangolo sfocato, ho selezionato il livello e li ho uniti (così i nomi restano quelli). 		   
   

   
11
 

Ho salvato il tutto, chiamandolo: Base-bandiere.PSD.

Poi mi sono salvato i pattern: ci sono due sistemi.

Il primo:
Seleziono un livello alla volta, copio, creo un nuovo file, incollo.
Salvo il nuovo file con un nome progressivo: Ban_01, 02, 03 .... 20.PSD.

Il secondo:
Rendo visibile un livello alla volta e salvo con nome: Ban_01, 02, 03 .... 20.PSD.

Il primo genera PSD meno costosi, in termini di occupazione su disco. Il secondo è più veloca da fare.
Fate voi. Basta che ci siano tutti e 20.
 
   

   
12
   

Inserimento della bandiera sul file base

(Per fare altre bandiere si parte da questo punto)

Ora la bandiera, vera e propria. Ne scelgo una a caso:
(Se vi servono bandiere ne trovate un sacco sul ueb.
Io ne ho messe alcune come CGM

    
   

   
13
    Rileggo Base-bandiere.PSD
Leggo la bandiera. La riduco alle dimensioni del file Base-bandiere.PSD,
seleziono il livello (o tutto) e lo incollo SOTTO al Set dei tessuti ondulati. Rinomino la bandiera: bandiera.

Anche qui un po' di operazioni ripetitive, ma sono le uniche che faremo, cambiando bandiera.
Prima un'avvertenza: Se contate di usare tutti i livelli dei pattern (tessuti) farete lo stesso numero di copie della bandiera. Se contate di usarne meno (io vi mostro poi più sotto un esempio con 10) basterà fare quel numero di copie.

Dunque, le operazioni in sequenza. Altra avvertenza, prima di "lavorare" la bandiera, DUPLICATE il livello, ve ne serve sempre uno "pulito".

Duplico il livello bandiera e lo rinomino: B01
Sul livello B01 applico il filtro: Distorsione > Muovi
Applicando il pattern Ban_01.PSD
Qui ho usato i valori 10 - 10.
Modificandoli otterrete piccole differenze che magari vi andranno più a genio. Questione di provare.		    
   


   
14
    Duplico il livello bandiera e lo rinomino: B02
Sul livello B02 applico il filtro: Distorsione > Muovi
Applicando il patter Ban_02.PSD

E così via
B03 > Ban_03.PSD
B04 > Ban_04.PSD
....
B20 > Ban_20.PSD

Naturalmente il livello bandiera non mi servirà più, alla fine. Ma tanto pesa poco.

Ora la cosa fondamentale, per poter utilizzare i livelli Ban_ impilati nel Set:
seleziono il Set e lo definisco: luce intensa
(la finestrella in alto sul pannello livelli, a sinistra dell'opacità. Cliccando sul rettangolino si apre il menù a comparsa sul quale scegliere)		    
   

   
15
    In ImageReady sarà sufficiente rendere visibili, frame by frame, 1 livello Bxx ed 1 livello Ban_xx (stesso numero per i due livelli)

Qui c'è una prova con 10 livelli, uno ogni due (1-3-7-....19):
ImageReady
  
   

   
16
    C'è il problema dei bordi che non svolazzano, sono dritti peggio di un fuso.
Per ovviare si può ricorre ad un veletto:
Ho creato un nuovo livello, sopra a tutti gli altri, ho tracciato un ovale, ho invertito la selezione e l'ho riempito di nero.
Per ottenere la leggera sfocatura ho tarato lo strumento di selezione con 2 pixel di sfumatura.
Il risultato è questo qui:
Photoshop
  
   

   
17
    Come far svolazzare anche i bordi della bandiera

Tuttavia c'è anche il modo di farla che svolazza tutta, la bandiera.
Un pochino più lunghetto, ma del tutto simile al precedente.
Si può utilizzare tutto quello fatto fin qui, con una sola variante in fase di montaggio della bandiera sul file Base-bandiere.PSD

Trascino la bandiera, ma la riduco di un 80%, come nella figura qui sotto.		    
   

   
18
    La sistemo sotto al primo livello dei tessuti.
Ne faccio tante copie quanti fotogrammi vorrò utilizzare in animazione, che rinomino
B01 - B02 - ...
Ciascuna copia la sistemo al di sotto del livello relativo dei tessuti.
In pratica avrò una sequenza, dal basso in alto:
bandiera 1 B01
livello 1 Ban_01
bandiera 2 B02
livello 2 Ban_02
e cosi' via.

Poi le operazioni ripetitive sui livelli e sulle bandiere

Seleziono il livello 1 (Ban_01) e lo raggruppo sotto (= B01) utilizzando: CTRL+G

E succede che il "tessuto" - livello 1 (Ban_01) - viene ritagliato dalla forma della bandiera (B01):
   
   

   
19
    Tolgo opacità al "tessuto" - livello 1 (Ban_01) portandola al 50% e lo definisco come: luce intensa:    
   

   
20
    Col filtro Distorsione muovi deformo la bandiera (B01) come fatto in precedenza.
Livello 1 - pattern Ban_01.PSD		    
   

   
21
 

Ripeto le operazioni per tutti i livelli/bandiere, utilizzando il pattern relativo al numero di livello.

In ImageReady si tratterà rendere visibili per il
fotogramma 1 le coppie B01, Ban_01
fotogramma 2 le coppie B02, Ban_02
e così fino alla fine dei livelli disponibili.

 
   

   
22
   

Tuttavia nei 5 fotogrammi dell'animazione qui sopra c'è il problema dell'asta.
Il veletto nero sfocato andava bene se la bandiera era a tutto schermo, ora che l'abbiamo ridotta lo dovremmo ingrandire, per tener fermo il tessuto vicino all'asta.

Per fortuna che mi sono salvato il file Base_bandiere.PSD anche prima di unire i livelli con il nero sfocato.

Riprendo il file, collego fra di loro tutti i rettangoli sfocati, li ingrandisco in orizzontale fino a coprire parte della bandiera sulla sinistra, lo risalvo, poi unisco
i livelli e salvo i pattern nuovi.
E rifaccio tutto d'accapo (dal punto 12) sostituendo i pattern, ovviamente.

    
   

   
   
   

Un po' meglio, ma non il massimo. Tra l'altro qui ho dato meno opacità al tessuto, tanto per vedere la differenza.

Dovrei aumentare il velo sfocato nero, cosa che proprio mi sono stufato di fare.
Oppure farmi io un tessuto che non "balli" sulla sinistra.

E, visto che ci sono, tanto vale che lo si faccia, così, se non trovate
un'immagine utile sul ueb, la potete realizzare come vi piace.

E come farlo lo vediamo nella seconda parte.

Mi stavo dimenticando: c'è il file Base-bandiere.PSD da scaricare.

Il file contiene 20 + 20 livelli (20 sono quelli del rettangolo nero sfumato)
Per produrre i pattern dovrete collegarli ed unirli.
Mica posso fare tutto io :)

 

   

fine prima parte

 
 


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/