nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
riflessione
___________________
 
    Testo animato con riflesso sull'acqua

Si tratta di ruotare le lettere sull'asse Y e creare un riflesso sull'acqua


1
   

Rotazione delle lettere.

Tutto lo spiegone (guida) è quello della guida rotazione

Per non impazzire io mi sono fermato alla prima parte (punti 1-6), con la semi-rotazione delle lettere, ma solo 4 volte.
Pero' i Set vanno riorganizzati in questo modo:

Set 1
5 livelli, uno per ogni lettera del testo. Non deformate.
Le lettere sono, ovviamente, rasterizzate.

Photoshop
   

 
2
    Ho duplicato il Set 1, rinominandolo Set 2

5 livelli, uno per ogni lettera del testo, ridotti in orizzontale ed in prospettiva.
 
   

 
3
    E cosi' via, fino all'ultimo, riducendo gradualmente ed accentuando la prospettiva:

Ho duplicato il Set 4 , rinominandolo Set 5

5 livelli, uno per ogni lettera del testo, ridotti in orizzontale ed
in prospettiva.
 
   

 
4
   

In Imageready l'animazione l'ho eseguita in modi differente per ogni lettera, ma è solo una scelta mia.
Per la sequenza la lettera indica il livello, il Set indica la rotazione.

Intanto sono partito dallo schermo nero.

Lo schema dei fotogrammi e delle lettere dei vari set è il seguente:

Image Ready
   

frame
set5
set4
set3
set2
set1
1
2
A
3
C
A
4
Q
C
A
5
U
Q
C
A
6
A
U
Q
C
A
7
A
U
Q
C
8
A
U
Q
9
A
U
10
A
 
5
    Tutte ferme all'arrivo nel Set 1.
Duplicando i fotogrammi ed invertendone l'ordine succede questo (tipo veneziana):
 
   

 
6
    Torniamo a Photoshop. E parliamo del riflesso sull'acqua.
La guida per creare un riflesso la trovate su due pagine, che ora vi descrivo:

La prima, riflessioni con lo schizzo, è una guida per creare dei pattern.
Dovreste leggere, ma facendo le debite proporzioni con le dimensioni dell'immagine sulla quale si sta lavorando:
Photoshop
   

 
7
    La mia immagine è di 300 x 130 px.
Ho semplicemente letto i pattern realizzati alla pagina citata prima, ho tolto il bianco in alto e li ho ridotti a 200x130 (200 bastano a coprire la scritta ACQUA)
Ho tolto il bianco e lasciato l'eccesso di pattern inutile in alto per non sgranare troppo l'effetto riflessione.
Ed ho salvato i pattern, con lo stesso nome
(pattern-nn.psd) nella cartella che contiene il mio PSD (che ho chiamato acqua.psd)

(I pattern ve li passo sottobanco in fondo alla pag.)
 
   
 
8
    L'altra pagina è quella successiva:
riflessioni con lo schizzo (seconda parte)
ed è una guida per l'utilizzo dei pattern con il filtro distorsione > muovi.
Guardate come funziona, così poi lo facciamo qui.
 
   

 
9
   

Primo spiegone.
Man mano che le lettere ruotano (appaiono) anche il riflesso sull'acqua (che ora facciamo, neh?) deve seguirne il movimento, e non solo, deve anche muoversi per conto suo seguendo un teorico ondeggiamento. E fin qui tutto facile.
Cominciamo a far riflettere le lettere (che magari nel frattempo si sono distratte)

Duplico Set 1 (> Set 1 sotto)
Collego fra di loro i 5 livelli (le cinque lettere)
Lo ribalto in verticale
(modifica > trasforma > rifletti verticale)

Non lo sposto, per ora, meglio farlo con tutti i riflessi degli altri 4 Set.

 
   

 
10
   

Faccio la stessa cosa per gli altri Set
(Set 2 sotto, 3, 4, 5 sotto).
Duplico e ribalto.

Collego fra di loro i 5 Set ribaltati e li sposto in verticale, a filo basso della scritta ACQUA.

 
   

 
11
   

Per ognuno dei livelli di ogni set applico un pattern, ma non lo stesso, e mi spiego:

Set 1 = pattern-01
Set 2 = pattern-02
etc.
L'ordine non è importante, basta che si cambi il pattern per ogni set.

   

 
12
    Secondo spiegone
Visto che mi sono complicato la vita facendo apparire le lettere in tempi diversi, mi tocca pensare a come far "muovere"
il riflesso sull'acqua dal momento che le singole lettere si fermano.

Cioè, avendo ribaltato le 5 rotazioni, se applico il pattern ad ognuno dei livelli di ciascun Set ottengo una riflessione coerente delle lettere, ed un movimento sull'acqua altrettanto.
Per non impazzire io a spiegare e voi a non capire, vi mostro cosa succede
 
   

 
13
   

Ecco il problema: finchè ruota il riflesso si muove. Quando la lettera smette di ruotare, il riflesso sta fermo.
Che se sta fermo pochino forse manco si noterebbe, ma io ho intenzione di lasciare le lettere ferme per un certo numero di fotogrammi, tanto per apprezzare che il riflesso sull'acqua c'è, altrimenti che lo metto a fare?

Ora facciamo due conti: Ho 10 pattern, dovrei farmi altre 9 copie del Set 1 sotto, applicare ad ogni set (=lettera) un pattern alla volta per utilizzare tutto il movimento dell'acqua. Troppa fatica.

Ed ho pensato al veletto. Che sarebbe una maschera da mettere sopra a quello che non voglio vedere in quel momento.
E mi spiego.

Mettiamo che io, anzichè 5 livelli di scritta nel Set 1 sotto, ne abbia solo 1, con tutte le 5 lettere di ACQUA.
E mettiamo che ne faccio altre 9 copie, in modo da poter applicare i 10 pattern ad ogni livello (la scritta ACQUA intera).
Solo che le accidenti di lettere si fermano in tempi diversi, e sono al punto di prima.

Ma se uso un veletto (una tacca nera, alta tanto da coprire le scritte sotto, e, man mano che una lettera si ferma, io sposto la tacca per far vedere tutte le lettere ferme, e nascondere quelle che ancora stanno ruotando, il gioco è fatto.

Qui sotto vi mostro come lavora il veletto. E' semitrasparente, per capire dov'è e come si sposta. Naturalmente i tempi non saranno questi, ma si dovrà spostare il velo ad ogni fotogramma, man mano che le lettere si fermano.

 
   

 
14
   

Fatto lo spiegone, ora faccio il lavoro.
Collego ed unisco fra di loro i 5 livelli del Set 1 sotto.
Duplico questo livello fino ad arrivare ad averne 10.

Per ciascun livello applico un pattern diverso:

Livello 1 = pattern-01
Livello 2 = pattern-02

e cosi' via.

Nel Set 1 sotto aggiungo un nuovo livello, in testa, e traccio con la selezione rettangolare un perimetro abbastanza grande da coprire le scritte del set, e lo riempio di nero. Lo chiamo tacca nera, tanto per non sbagliarmi.

   

 
15
    Poi diamo un senso alla riflessione.

Un po' di colore.
Mi sono costruito questa immagine. Ma non m iricordo come l'ho fatta e quindi ve la passo direttamente da qui, basta copiarvela da qualche parte.
 
   

 
16
    L'ho sistemata sopra ai set delle scritte riflesse e l'ho definita come: Colore brucia, con opacità 50%.

E se non vedete niente, ora provvediamo.

Al di sotto dell'immagine ho creato un nuovo livello.
Ho tracciato un rettangolo fino a circa metà schermo, e l'ho riempito di nero.

Poi l'ho sfocato un bel po', tanto da ottenere questa roba qui (dietro c'è un fondo bianco, per vedere.)
   

 
17
    Quindi, per ricapitolare, abbiamo:

5 Set con le scritte in rotazione
sotto la tacca colorata
sotto il nero sfocato
Sotto 4 Set con le scritte riflesse
Sotto 1 Set con 10 livelli di scritta riflessa ed una tacca nera.
 
   

 
18
   

Ed andiamo ad animare il tutto su ImageReady.

Per prima cosa rifaccio tutta la prima animazione di 10 fotogrammi, senza preoccuparmi dei riflessi.

Poi ricomincio:
seleziono dal 2° al 10° fotogramma
Rendo visibili per tutti questi fotogrammi la tacca colorata ed il nero sfocato

seleziono uno ad uno i fotogrammi dal al fotogramma e rendo visibili le lettere riflesse secondo lo schema:

Image Ready
   

frame
set5 sotto
set4 sotto
set3 sotto
set2 sotto
set1 sotto
1
2
A
3
C
A
4
Q
C
A
5
U
Q
C
A
19
   

seleziono il fotogramma
Rendo visibile il primo livello del Set 1 sotto.
Sposto a destra, sempre nel Set 1 sotto la tacca nera per scoprire solo la lettera A

 
   

frame
set5 sotto
set4 sotto
set3 sotto
set2 sotto
set1 sotto
6
A
U
Q
C
20
   

seleziono il fotogramma
Rendo visibile il secondo livello del Set 1 sotto.
Nel Set 1 sotto sposto (a destra) la tacca nera per scoprire le lettere AC

 
   

frame
set5 sotto
set4 sotto
set3 sotto
set2 sotto
set1 sotto
7
A
U
Q
21
   

seleziono l' fotogramma
Rendo visibile il terzo livello del Set 1 sotto.
Nel Set 1 sotto sposto (a destra) la tacca nera per scoprire le lettere ACQ

   

frame
set5 sotto
set4 sotto
set3 sotto
set2 sotto
set1 sotto
8
A
U
22
    seleziono l' fotogramma
Rendo visibile il quarto livello del Set 1 sotto.
Nel Set 1 sotto
sposto (a destra) la tacca nera per scoprire le lettere ACQU
 
   

frame
set5 sotto
set4 sotto
set3 sotto
set2 sotto
set1 sotto
9
A
23
   

seleziono l'l 10° fotogramma
Rendo visibile il quinto livello del Set 1 sotto.
Nel Set 1 sotto rendo invisibile la tacca nera per scoprire le lettere ACQUA

 
   

frame
set5 sotto
set4 sotto
set3 sotto
set2 sotto
set1 sotto
10
24
   

Poi inserisco un nuovo fotogramma
e rendo visibile il sesto livello del Set 1 sotto.


altro fotogramma, visibile il
settimo livello del Set 1 sotto.
altro fotogramma, visibile l'
ottavo livello del Set 1 sotto.
altro fotogramma, visibile il
nono livello del Set 1 sotto.
altro fotogramma, visibile il
decimo livello del Set 1 sotto.
Ne aggiungo altri, ripartendo dal
primo livello del Set 1 sotto
fino ad arrivare al quarto livello

Se ho contato bene siamo al
19° fotogramma

Seleziono i fotogrammi dal
10 al 19 e li duplico un due o tre volte (più ne duplico più a lungo vedrò il riflesso).

Seleziono i fotogrammi dal
al (quelli della comparsa delle lettere, i primi)
li duplico
li trascino al fondo dell'animazione e
li inverto.

Così abbiamo chiuso il loop.

Capito ora perchè c'ho messo tanto tempo a fare la guida del testo che ruota e si riflette nell'acqua?
ora la vediamo qui sotto, poi ancora più sotto c'è la sorpresina.

 

 
   

Sorpresina numero uno: un bello zip con 1 10 pattern
(servono su un'immagine 300 x 130, se più grande, ingranditeli prima)

Sorpresina numero due: un bello zip col PSD bell'e fatto.
(Ho ingrandito limmagine base dopo averapplicato i pattern, quindi è un po' smangiata, ma la potete ridurre)

Le trovate sfruttando il bottoncino dorato in alto o in basso sulla destra

 

fine della guida

 
 


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