nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
oblò
___________________
 
OBLO

 

Tutorial photoshop per giocare con i veletti

Prima o poi vi capiterà di incontrare, fra le pagine di questo posto, dei trattatelli su veletti, maschere (non di photoshop) ed altri strumenti per l'animazione. Gestire una maschera (o un veletto) è la cosa più semplice di 'sto mondo. Il problema è quando arriva il sottosquadro: due maschere che fanno a pugni fra di loro, che dovrebbero essere contemporaneamente l'una sopra l'altra. E dato che niente di meglio che un esempio, partiamo con una maschera.

Quella facile.

 
1
   

Apro un'immagine che mi sono costruito in precedenza.
Lo spunto naturalmente arriva dal web. Vi dò anche il link, si sa mai:

http://abduzeedo.com/new-quicktime-icon-photoshop

Comunque l'immagine è disponibile cliccando in fondo o in cima sul pulsantino dorato: oblò.zip (l'ho usata un tot di volte per la storia dei vermetti).

Photoshop
   

oblo
 
2
   

L'intenzione è di far scorrere un testo, partendo da un lato ed arrivando all'altro, ma nascondendo tutta la parte del testo che si trova, lungo il tragitto, nella seconda metà dell'immagine.

Digito un testo: OBLO'
E lo sistemo sulla destra dell'immagine.

 
   

oblo
 
3
    Per farlo sparire nella metà di sinistra dell'immagine mi occorre una maschera (o veletto). Identica all'immagine sottostante al testo, ma da sistemare al di sopra del testo.

Per fare una metà che sia metà e non di meno o di troppo, ricorro al vecchio trucchetto:
La mia immagine è di 400 x chissenefrega. Nel senso che mi basta la dimensione orizzontale.
Faccio una copia dlel'immagine. Dimensiono il quadro a 200 px, lasciando fermo il lato sinistro:
 
   



 
4
   

Seleziono TUTTO il fondo dell'immagine ridotta, copio ed incollo sull'immagine originale.
E chiamo il livello: maschera SX

 
   


 
5
 

Sposto la maschera SX sulla sinistra, a registro col fondo dell'immagine.
Il livello lo metto al di sopra del testo.

Per vedere che tutto funziona basta spostare il testo verso il centro, dovrebbe sparire al di sotto della maschera:

 
   

oblo
 
6
 

E tanto per provare meglio, si va su ImageReady.
Duplico il primo fotogramma, sposto il testo tutto a sinistra, fino a farlo sparire al di sotto della maschera.
Imposto un tweening di 5 fotogrammi. Eseguo.
Duplico il primo fotogramma e lo sposto in coda all'animazione.
Utilizzo il penultimo fotogramma (ora, prima era l'ultimo) quello nel quale il testo non si vede, e l'ultimo (quello col testo tutto a destra) ed imposto un altro tweening, sempre di 5 fotogrammi.
Controllo e salvo il PSD (così mi salvo anche la costruzione dell'animazione).

 
   


 
7
   

E fin qui tutto facile, vero? Ora il busillis: se ho due scritte, una che parte da sinistra e l'altra da destra, e voglio che entrambe spariscano nella metà opposta dell'immagine come si fa?

La maschera di sinistra (maschera SX) puo' essere contemporaneamente sopra al testo di destra e sotto al testo (nuovo) di sinistra:

   

oblo
 
8
   

Ma se metto una maschera per la parte destra, a coprire il testo che da sinistra si sposta appunto a destra, questa inevitabilmente coprirà il testo che da sinistra viene verso destra.

Facciamo la maschera con lo stesso procedimento usato al punto 3, ma tenendo fermo il lato destro:

 
 



 
9
 

Copio ed incollo la nuova maschera e la sistemo a registro sulla destra, chiamando il livello maschera DX.

Poi duplico il testo e lo sposto sulla destra, come di vede al punto 7.

Sistemo i livelli in quest'ordine (dal'alto in basso):

maschera DX
Testo di sinistra
maschera SX
Testo di destra.

E mi sparisce il testo di destra, ovviamente: è coperto dalla maschera DX
Quella nuova, che prima non c'era. E non c'è verso di uscirne, anche se provate a spostare l'ordine di overlay, una maschera finirà inevitabilmente per coprire un testo all'origine.
Ci vuole un trucco, ovvero occorre una maschera che abbia IL MOVIMENTO DI UNO DEI DUE TESTI, MASCHERA relativa COMPRESA.


 
10
    Passo su ImageReady e rileggo il PSD della prima animazione (punto 6).
Se non l'ho salvato, ripeto il punto 6.
Salvo (ottimizzato) il gif con valori massimi: 256 colori, dithering 100%.

Rileggo il gif e lo salvo come PSD (salva con nome) chiamandolo oblodagif.PSD.

ImageReady
11
    Torno su Photoshop, leggo oblodagif.PSD. Creo un set e vi trascino i 13 livelli dell'animazione, stando attento a sistemarli in fila, nell'ordine dell'animazione.
Leggo il file origine, trascino il Set dei livelli animati su quest'ultimo.
Sistemo il set al di sopra del testo di sinistra.

Poi seleziono la trasparenza di livello di
maschera DX
e CANCELLO la parte selezionata su tutti i livelli del set dell'animazione.
Il set costituisce e sostituisce la nuova maschera di sinistra
(
maschera SX)

Qui sotto il set originale e quello ritagliato:

Photoshop
   

 
12
    Duplico il primo fotogramma, che avrà visibile il set animato e la scritta OBLO' sulla sinistra.
Sposto la scritta a destra, al di sotto della maschera costituita dal set dell'animazione precedente. Imposto un tweening di 5 fotogrammi ed eseguo.
Duplico il primo fotogramma e lo trascino in fondo all'animazione. Uso gli ultimi due fotogrammi per un altro tweening di 5 fotogrammi.
Questo il risultato: la maschera, costituita dal set dell'animazione (che qui ovviamente mostra solo un livello del set e quindi sembra ferma lì) copre il movimento della scritta di sinistra.
 
   

oblo
 
13
    Per vedere l'animazione al completo basta mostrare, ad ogni fotogramma, il fotogramma relativo del set dell'animazione precedente.

Seleziono (non duplico) il primo fotogramma e rendo visibile il livello 1 del set dell'animazione.
Seleziono il secondo fotogramma e rendo visibile il livello 2.

Cosi' fino al tredicesimo fotogramma:
 
   

oblo
 
   

 

Si possono fare varianti sui movimenti dei due testi. Naturalmente occorre ripetere la procedura per la costruzione della nuova maschera di animazione.

 

 

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