nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
effetto prospettiva
___________________
 
   

Effetto prospettiva (bigbang solo nel testo)

L'altro giorno (mi tocca sempre dire l'altro giorno, riferendomi ad un giorno del passato più o meno prossimo, e mai una volta che mi capiti di dire l'altro giorno pensando al futuro, un qualcosa tipo il giorno che verrà, l'anno che verrà; forse queste accezioni sottendono ad una sorta di velleitaria rivalsa verso accidenti che la vita non manca di distribuire lungo il percorso fra un altro giorno a caso e quello successivo che, si spera, prima o poi verrà: forse si tratta solo di un fatto pratico, un elemento di credibilità: sarebbe pretendere un po' troppo sostenere che una guida, questa guida, è nata da un caso che accadrà fra un paio di giorni. Forse è solo questo. In compenso ho risolto alla grande le prime dodici righe dell'incipit, che a scriverlo non so mai da che parte iniziare)... l'altro giorno, stavo dicendo, mi han chiesto di realizzare una scritta un po' particolare per un piccolo jpg (che poi si è risolto in un png) a scopo didattico-didascalico.
Ed avendoci messo un 4 minuti 4, e non potendo lasciar intendere che mi fosse costata così poca fatica, che a farsi desiderare c'è solo da guadagnarci, ma questo non ditelo in giro, ho aspettato una decina di minuti prima della consegna e son rimasto guardare il risultato: una barba da non crederci, ma dopo i primi 5 passati in trance m'è venuta l'idea di riproporre il tutto come animazione, qualcosa tipo una fisarmonica.

Solo che se scrivevo fisarmonica l'ingombro in orizzontale sarebbe stato eccessivo per le dimensioni della paginetta di questo posto (non so bene il motivo di essermi limitato orizzontalmente in cotal guisa - cotal guisa non è offensivo, sta per "in questo modo") quindi alla fine ho deciso per "bigbang".

Poi la cosa mi ha preso la mano e, dovendo in qualche modo giustificare graficamente l'affermazione primigènia, ci ho anche messo quella serie di outline (perimetro costituito da una linea) che si ingrandiscono e vengono verso lo spettatore, tanto per dar l'idea di un'esplosione. Abbastanza pacchiano da soddisfare le mie necessità di roba forte, almeno dopo i pasti.

Credo che come scuse anticipate o alibi non richiesti ce ne sia da vendere, quindi passerei alla guida.
Se non vi siete addormentati.

 

 
1
   

Vorrei anticipare un po' quel che verrà dopo: è tutto basato sull'effetto prospettiva di Photoshop. Ma questa volta, dovendone fare un bel po', sono ricorso all'uso delle "azioni".
Che vi spiego fra un attimo. Tutto il lavoro consiste nella solita ripetizione di operazioni semplici per arrivare a disporre di un numero decoroso di livelli-fotogrammi.

Aperto Photoshop ho creato un'immagine di 600x300 px, fondo bianco.

Per il testo ho usato un font Impact, colore nero con un corpo ininfluente in qualto l'ho poi ingrandito ad occhio.


Bon. Scrivo BigbanG.
Il livello verrà battezzato BigbanG da Photoshop.
Lo vedete qui sotto.

Photoshop
 
   

   
2
    Seleziono la trasparenza di livello del livello BigbanG
   
   

   
3
   
Creo un nuovo livello, che chiamo
Big.
   
   


situazione livelli:

Big
BigbanG
Sfondo
 
4
   
Pigiando sul tasto "-" traccio un rettangolo per eliminare parte della scritta in selezione (la parte banG)

   
   

   
5
   
Imposto la sfumatura con i valori dell'immagine qui sotto (ma se preferite altri colori, fate pure), quindi vado di mouse, dall'alto in basso, sulla zona selezionata:
 
   

   
6
    Seleziono nuovamente la trasparenza di livello del livello BigbanG, come al punto 2.


Pigiando sul tasto "-" traccio un rettangolo per eliminare parte della scritta in selezione (la parte Big)
   
   


   
7
    ritorno sul livello Big


Imposto la sfumatura con i valori dell'immagine qui sotto,
quindi vado di mouse, dall'alto in basso, sulla zona selezionata:
   
   

   
8
    Naturalmente si poteva evitare tutto l'ambaradan di selezionare e cancellare la parte in eccesso semplicemente scrivendo BigbanG su due livelli, prima Big e poi banG, ma non mi sembrava il caso di facilitare le cose, dai.


Duplico il livello
Big e lo chiamo Big01
   
   


situazione livelli:

Big01
Big
BigbanG
Sfondo
 
9
    Passiamo alla memorizzazione dell'azione "prospettiva" che useremo per far prima e per far meglio.

Seleziono il livello Big01
Sul pannello Azioni pigio sul tasto >> posto alla destra in alto:
fate riferimento alla figura ed alle spiegazioni laterali
   
   



zona su cui cliccare per
memorizzare una nuova azione:
sulla finestra laterale a comparsa scegliere"Nuova azione ..."




Sul pannello pop-up inserire il nome dell'azione e premere sul pulsante Registra

 



Sul pannello Azioni, al termine delle operazioni, clic sul tasto"stop", il quadratino grigio in basso.

 
   
Per avviare l'azione su altri livelli selezionare l'azione (in questo caso "Prospettiva" e cliccare sulla freccia d'avvio (quella con il cerchietto blu, in fondo al pannello azioni), ma questo viene dopo.
   
10
    La memorizzazione è avviata:
Menù > Modifica > Trasforma > Prospettiva.

Porto verso l'interno la linea orizzontale superiore (basta cliccare e tener cliccato un quadratino in alto su uno dei due lati).

Porto verso l'esterno la linea orizzontale inferiore (anche qui basta cliccare e tener cliccato uno dei due quadratini laterali in basso).

Non devo fare una cosa esagerata, si tratta di dosare, di graduare una sequenza di "prospettive" che è in divenire. Fate una cosetta come quella dell'immagine qui sotto.

Quando avete fatto clicccate sul bottone quadrato grigio nella parte inferiore del pannello azioni per terminare la memorizzazione (vedi punto 9).
 
 

   
 


Per meglio chiarire il meccanismo per la realizzazione della prospettiva potete guardarvi la guida animata qui sotto, che fa il verso alla spiegazione scritta.
E' indicato, ma ve lo dico ugualmente: in alto a destra ci sono due pulsanti azzurri numerati per le due sequenza animate.
Pigiateli e qualcosa dovreste vedere.


 
 
 
11
   


Duplico il livello
Big01 e lo chiamo Big02
Seleziono Big02 (ma in realtà non occorrerebbe, essendo l'ultimo livello creato è automaticamente quello attivo) ed avvio l'azione "prospettiva" (tasto freccina sul fondo del pannello Azioni) Non occorre stopparla, l'azione termina da sola.

Duplico il livello Big02 e lo chiamo Big03
Avvio l'azione "prospettiva"

Duplico il livello Big03 e lo chiamo Big04 ...

Claro, chiaro? è tutto un duplica ed agisci.
Ne faccio una decina, di livelli Big, ed alla fine ottengo questo risultato, che ho messo in animazione con ImageReady onliforiu, solo per voi:

   
   


situazione livelli:

Big09
...
Big03
Big02
Big01
Big
BigbanG
Sfondo
 
12
    Ora dobbiamo memorizzare un'altra azione, la prospettiva contraria.


Duplico il livello Big e lo rinomino Bang01
Sul pannello Azioni pigio sul tasto >> posto alla destra in alto,
scelgo Nuova Azione e la chiamo prospettiva2, poi pigio sul bottone Registra (tutto come al punto 9, a parte il nome dell'azione)


La memorizzazione è avviata:
Menù > Modifica > Trasforma > Prospettiva.

Porto verso l'esterno la linea orizzontale superiore (basta cliccare e tener cliccato un quadratino in alto su uno dei due lati).

Porto verso l'interno la linea orizzontale inferiore (anche qui basta cliccare e tener cliccato uno dei due quadratini laterali in basso).

Quando avete fatto cliccate sul bottone quadrato grigio nella parte inferiore del pannello azioni per terminare la memorizzazione (vedi punto 9).
 
   


situazione livelli:

Bang01
Big09
...
Big03
Big02
Big01
Big
BigbanG
Sfondo
 
13
   


Duplico il livello
Bang01 e lo chiamo Bang02
Seleziono Bang02 (ma in realtà non occorrerebbe, essendo l'ultimo livello creato è automaticamente quello attivo) ed avvio l'azione "prospettiva" (tasto freccina sul fondo del pannello Azioni) Non occorre stopparla, l'azione termina da sola.

Duplico il livello Bang02 e lo chiamo Bang03
Avvio l'azione "prospettiva"

Duplico il livello Bang03 e lo chiamo Bang04 ...

anche qui è tutto un duplica ed agisci.
Ne faccio 9, di livelli Bang, ed alla fine ottengo questo risultato, in animazione con ImageReady:

   
   

situazione livelli:

Bang09
...
Bang03
Bang02
Bang01
Big09
...
Big03
Big02
Big01
Big
BigbanG
Sfondo
 
14
    Seleziono la trasparenza di livello del livello Big


Creo un nuovo livello che chiamo BigNero.
Allargo la selezione di 8 pixel:
Modifica > Selezione > Estendi (valore 8 pixel)

   
   

   
15
   
Riempio la selezione di nero
   
   


   
16
   
Creo un nuovo livello che chiamo BigArancio.
Allargo la selezione di 2 pixel:
Modifica > Selezione > Estendi (valore 8 pixel)
   
   

   
17
    Riempio la selezione di un bell'arancio carico    
   

   
18
    Sistemo BigNero al di sotto del livello Big.
Sistemo BigArancio al di sotto del livello BigNero.
E rendendo visibili solo questi tre livelli ottengo una bella scritta tipo Saint Seiya (con sfumature uniche e non lettera per lettera, che si fa prima)
   
   


situazione livelli:

Bang01 ... Bang09
Big01 ... Big09
Big
BigNero
BigArancio
BigbanG
Sfondo
 
19
   
Ora si tratta di rifare le stesse identiche cose per tutti i livelli Big e per tutti i livelli Big
Basta ripetere le operazioni dal punto 14 al punto 18, sostituendo, di volta in volta, al livello Big prima i livelli Big01, Big02, etc. e poi i livelli Bang01, Bang02, e così di seguito.


Ora ci sono due strade: o colleghiamo ed uniamo fra di loro i livelli:
Big01
- Big01Nero - Big01Arancio e poi
Big02 - Big02Nero - Big02Arancio
e così per tutte le triadi

Per avere un minor numero di livelli da gestire (ma c'è un però
da considerare, magari guardatevi prima il punto 26 e poi decidete) oppure li si lascia così, tanto non è poi
complicatissimo utilizzarli con ImageReady, solo un pochetto
più lungo e noioso.

situazione
livelli:

Bang09
Bang09Nero
Bang09Arancio
...
Bang02
Bang02Nero
Bang02Arancio
Bang01
Bang01Nero
Bang01Arancio
Big09
Big09Nero
Big09Arancio
...
Big01
Big01Nero
Big01Arancio
Big
BigNero
BigArancio
BigbanG
Sfondo
 
         
20
    Comunque e qualunque cosa decidiate, qui c'è il risultato che si ottiene passando a ImageReady (chi ha versioni recenti di Photoshop, tipo CS e simili non dispone di ImageReady, ma della possibilità di realizzare la stessa cosa direttamente su Photoshop: io, che uso ancora Photoshop7, non ho quella facoltà e quindi non ve ne parlo) e rendendo visibili per ogni fotogramma una tripletta (oppure un livello se li avete uniti)
alla volta:
Image Ready
 
   

   
   
E questa è lo schema di cosa visualizzare (per ora):

ftg
  livelli visibili  
1 Big BigNero BigArancio
2 Big01 Big01Nero Big01Arancio
3 Big02 Big02Nero Big02Arancio
4 Big03 Big03Nero Big03Arancio
5 Big04 Big04Nero Big04Arancio
6 Big05 Big05Nero Big05Arancio
7 Big06 Big06Nero Big06Arancio
8 Big07 Big07Nero Big07Arancio
9 Big08 Big08Nero Big08Arancio
10 Big09 Big09Nero Big09Arancio
   
21
   

Forse vi chiederete il motivo d'aver realizzato i livelli Nero ed Arancio DOPO la messa in prospettiva delle scritte, e non prima, sistemando poi in prospettiva anche i livelli Nero ed Arancio e sfruttando l'azione memorizzata. In tal caso, e solo per chi se l'è chiesto, lo dico: l'aumento di 8 e poi di 2 pixel nell'ingombro della scritta avrebbe subito anch'esso un ulteriore incremento in prospettiva, la qual cosa di per sè non era poi errata, anzi, ma avrei accentuato anche le defaillance di nitore (o nitidezza, o incisione, o che ne so) dei livelli Nero ed Arancio, che già così non sono il massimo della definizione.

Ciò detto, passiamo al disgiro, nel senso di far tornare la scritta in piano, fuori prospettiva.
Ci sono due modi.

Il primo (barboso) è quello di inserire altri 9 fotogrammi andando a ritroso sulla tabella dei livelli visibili.

Il secondo, più rapido, consiste nel duplicare i 10 fotogrammi realizzati (si seleziona il primo, poi premendo il tasto del maiuscolo, si seleziona il decimo, e li si trascina sull'iconcina di inserimento nuovo fotogramma presente sul pannello di animazione di ImageReady).
Poi, sempre mantenendo la selezione, si invertono i fotogrammi
Poi si va sull'undicesimo fotogramma e lo si butta via (è un doppione; si poteva evitare non duplicando il decimo fotogramma, ma si trattava poi di trascinare le 9 copie al di la del decimo fotogramma, operazione facilissima ma non agevole, che se si sbaglia si scombina tutta la sequenza animata).
Per vedere in pratica come fare ci sono tre guide attivabili con un clic, qui sotto.

 
   

guide online

Questo è il risultato:
   
   

   
   

 

E questa è lo schema di cosa abbiamo in visualizzazione:

ftg
  livelli visibili  
1 Big BigNero BigArancio
2 Big01 Big01Nero Big01Arancio
3 Big02 Big02Nero Big02Arancio
4 Big03 Big03Nero Big03Arancio
5 Big04 Big04Nero Big04Arancio
6 Big05 Big05Nero Big05Arancio
7 Big06 Big06Nero Big06Arancio
8 Big07 Big07Nero Big07Arancio
9 Big08 Big08Nero Big08Arancio
10 Big09 Big09Nero Big09Arancio
11 Big08 Big08Nero Big08Arancio
12 Big07 Big07Nero Big07Arancio
13 Big06 Big06Nero Big06Arancio
14 Big05 Big05Nero Big05Arancio
15 Big04 Big04Nero Big04Arancio
16 Big03 Big03Nero Big03Arancio
17 Big02 Big02Nero Big02Arancio
18 Big01 Big01Nero Big01Arancio
19 Big BigNero BigArancio
   
22
   

Finalmente ora inseriamo i nuovi fotogrammi per il movimento prospettico dei livelli Bang.

Al fotogramma 20 saranno visibili Bang01 con rispettivi livelli Bang01Nero e Bang01Arancio, al fotogramma 21 si passa a Bang02, e così di seguito.
Inutile che vi elenchi la sequenza, si arriva alla fine, al fotogramma 28 con l'ultimo Bang.

A questo punto si selezionano i fotogrammi dal 20 al 28
li si duplica (finiranno in fondo, dal 29 al 37
li si inverte
e si cancella il fotogramma 29 (prima dell'inversione era il era il 37) che è un doppio del fotogramma 28.

E così abbiamo i nostri 36 fotogrammi finali.

Conviene, a questo punto, salvare il PSD per conservare memoria del lavoro fatto con ImageReady, visto che ci si torna fra un po'.


   
   

   
23
    Torno su Photoshop: m'è venuta l'idea di sistemare un fondo scuro poichè sul bianco la scritta tende a perdere d'incisione.

E visto che si tratta di un bigbang ci vorrei sistemare un fondo stellato, che è un po' un vedere non l'altro giorno, ma il giorno che verrà, una specie di anteprima, di preview, di trailer, di jamais-vu, per dirla in modo esotico.


Vado sul fondo, inserisco un nuovo livello, che chiamo stelle, e lo riempio di nero.
Poi sfrutto i filtri:
Filtro > Disturbo > Aggiungi disturbo
con i valori dell'immagine qui sotto
Photoshop
 
   

   
24
   
Creo un nuovo livello, a ldi sopra delle stelle e lo riempio di nero.


Con il selettore circolare, definendo una sfumatura del 25%, traccio un'ellisse sul fondo nero

   
   

   
25
    e cancello la zona selezionata (tasto CANC)

Così che, con i due livelli sovrapposti, il nero a fare da maschera alle stelle, queste sono visibili solo al centro dell'immagine, ed intorno è tutto niro niro niro niro com'acchè.
 
   

   
26
    ImageReady.
Rileggo (o mi sposto, dipende dalle abitudini, comunque prima salvo il PSD) e mi ritrovo la vecchia animazione, magari con un fotogramma nel mucchio rovinato dall'ultimo intervento con Photoshop.

Lo sistemo (basta seguire l sequenza: fotogramma precedente, fotogramma successivo, per ricostruire l'eventuale fotogramma con visualizzazione di stelle e di cieli neri).

Seleziono tutti i fotogrammi e rendo visibili su tutti il livello stelle ed il livello con il nero bucato (che ho lasciato a mezzo senza dargli un nome)
Image Ready
 
   


   
27
   

Ed ora viene il bello.
Che se ci siete arrivati su consiglio di un punto precedente, il 19, vi si rimando se cliccate qui.

Si tratta di incasinare un poco l'animazione, con qualcosa tipo bigbang, qualcosa di assolutamente inadatto, banale, ridondante, ed anche lungo da spiegare, per cui ne farei anche a meno ... come dite? ... devo spiegarlo? ... ok, ma poi non ci si lamenti, neh?

Vado sul livello Big03Nero
Seleziono la trasparenza di livello.


Duplico il livello Big03Arancio, lo rinomino Bordo1

Photoshop
 
   

   
28
    e cancello la zona selezionata (tasto CANC)

Così ottengo il solo bordo della zona arancione.
   
   


 
29
    Ne faccio un bel po' di copie, del livello Bordo1, ingrandendole ad occhio come nell'immagine qui sotto. comunque in modo irregolare, più in verticale che in orizzontale, per mantenere un assetto corretto nella progressione degli ingrandimenti.
Avrei anche dovuto dargli un nome progressivo a tutti quei livelli, cosa che non ho fatto, preso da un raptus creativo ifrrefrenabile.
Quel che consiglio è, prima di farne copie, di spostare il livello Bordo1 al di sopra del livello Big05Nero o giù, anzi su di lì, per un problema di overlay che vi capiterebbe se non lo fate.
   
   

 

 
30
   

Torno su ImageReady, con tutto il bagaglio della memorizzazione ultima dell'animazione precedente.

Mi limito ad intervenire in visualizzazione sui fotogrammi a partire dai quali è visibile il livello Big03, che è quello base per la realizzazione dei bordi.

Quindi, se non ricordo male, al fotogramma ... no, meglio se faccio uno schemino, ma solo dei livelli base e dei bordi (alla fine li ho rinumerati in un crescendo rossiniano da 1 a 10):

ftg
 
livelli
"bordi"
visibili
 
1 Big        
2 Big01        
3 Big02        
4 Big03 Bordo2      
5 Big04 Bordo3      
6 Big05 Bordo3 Bordo4    
7 Big06 Bordo2 Bordo4 Bordo5  
8 Big07 Bordo1 Bordo3 Bordo5 Bordo6
9 Big08 Bordo2 Bordo4 Bordo6 Bordo7
10 Big09 Bordo3 Bordo5 Bordo7 Bordo8
11 Big08 Bordo4 Bordo6 Bordo8 Bordo9
12 Big07 Bordo5 Bordo7 Bordo9 Bordo10
13 Big06 Bordo6 Bordo8 Bordo10
14 Big05 Bordo7 Bordo9    
15 Big04 Bordo8 Bordo10    
16 Big03 Bordo9      
17 Big02 Bordo10      
18 Big01        
... ...        

 
 
E così ecco il risultato finale
   
 

 
 
   


Detsoll.
A far l'animazione, disegni compresi, ci ho messo una mezz'ora, con tutto che ho tribolato un po' a memorizzare le azioni dato che mi son perso in vari tentativi che ho graziosamente evitato di passarvi in guida.
A far la guida ci ho messo due giorni.
Mi conviene non far guide, mi sa.
Ciao, alla prox.

   
   

 

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