nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
effetto matrix
___________________
prima parte
___________________
 
 

Effetto matrix - prima parte

Per chi non avesse visto la serie di matrix, poco male: è l'occasione per farlo. Qui mi interessava provare a giocare con i testi. L'idea mi è venuta mentre preparavo il testo che si posa sul fondo (se interessa, qui da qualche parte c'è la guida).
Non è mia intenzione rifare quello che si vede nei film, ma solo di provare a cimentarmi con quello che chiamo effetto matrix, utilizzando i soliti due applicativi.
Al massimo, alla fine, per farvi vedere qualcosa e non ridurre troppo il formato, ricorro a flash, ma solo per quello, neh?

Il lavoro è un po' lunghetto, non ho trovato scorciatoie per l'obiettivo che mi ero posto: modificare le scritte (i numeri), tipo conta alla rovescia. Ad un certo punto ho smesso di muovere tutto in quanto il cambio di numero non era percettibile se il testo scorreva verso il basso, quindi ora, pian piano, vi racconto cosa ho combinato.
Tipo diario di matrix.

 
1
   

Per prima cosa ho aperto Photoshop ed ho creato un file di 800x650 px, fondo nero.
Poi, usando lo strumento carattere, ho scritto una serie di numeri, dallo 0 al 9, e così via, mettendo solo un numero per ogni riga, tipo insegna dei negozi con l'insegna.

La prima serie l'ho fatta come nella prima figura, qui sotto.
Il font: Terminal, regular, grassetto simulato
Il colore: RGB
12,179,719

Poi, con doppio clic sull'icona "T" del livello testo e scorrendo col mouse sui due ultimi numeri della fila, ho cambiato il colore da verde a bianco. Ho fatto la stessa cosa sul terz'ultimo numero, ma qui ho messo un verde più chiaro
(RGB
156,210,176) Come nella seconda figura.

Poi ho selezionato un paio numeri in mezzo ed anche a loro ho cambiato il colore da verde chiaro a verde scuro (RGB 5,81,32),
come nella terza figura.

Stessa operazione per i primi tre numeri della fila:
il primo l'ho colorato di verde scurissimo (RGB
1,26,10),
il secondo un po' piu' chiaro (RGB
2,35,13)
il terzo ancora un po' più chiaro (RGB
4,46,19)
Vedi ultima figura.

Photoshop
   



 
2
   

Ho duplicato il livello e, sempre cliccando due volte sull'icona "T" di questo nuovo livello ho riscritto i numeri, iniziando da 1 in poi.
I primi tre, essendo di colore diverso, per evitarmi il fastidio del cambio colore, li ho modificati uno ad uno. Così ho fatto per i due centrali e per gli ultimi tre.
Dovete solo provare: attenzione a questo: il colore viene preso dal numero al di sopra, quindi se volete cambiare qualcosa, inserite una nuova riga solo DOPO il primo numero della sequenza di colori.

La nuova serie di numeri è quella della seconda figura.

Ho duplicato questo livello ed ho modificato i numeri anche qui.
La terza figura a sinistra vi mostra quello che ho ottenuto.

Altra livello duplicato, altra modifica dei numeri.
Quarta immagine a destra.

Non è molto importante che le quattro serie siano proprio come quelle che vi mostro, l'importante è che i numeri non siano mai uguali sulla stessa riga.

Ho creato un set di livelli (lo chiamo Set-piccolo) e ci ho portato tutti i livelli delle file dei numeri.

 
   

 
3
   

Intorno alle file di numeri vorrei un alone sfumato. Per farlo ho fatto cosi':

prima figura:
Ho catturato la trasparenza di livello della prima fila di numero (ma non è essenziale che sia quella, una a caso). Poi:
Menù > seleziona > modifica > espandi: ho aumentato di 3 pixel la selezione.
Ho creato un nuovo livello (
alone 1) e l'ho riempito col colore verde chiaro
RGB
12,179,719.

Seconda figura:
Con la bacchetta magica ho selezionato, su QUESTO livello, le ultime tre cifre della fila, ho aumentato di 2 pixel la selezione (Menù > seleziona > modifica > espandi) e , sempre su quel livello le ho riempite di bianco.

Terza figura:
Ho duplicato il livello (
alone 2) e l'ho sfocato del 5%.
Ne ho modificato l'opacità al 20%.

Quarta figura:
Ho riselezionato quello originale (
alone 1).
Con lo strumento lazo poligonale ho circondato i PRIMI tre numeri in alto ed ho cancellato (tasto CANC).
Ho sfocato il livello del 5% e ne ho modificato l'opacità al 40%.

(Nelle 2 figure a sinistra si vedono i due livelli alone con opacità al 100%)

 
   

 
4
   

Sistemo i due livelli alone al di sotto delle file dei numeri, collego fra di loro tutti i livelli del set e vado a controllare in animazione cosa succede.

Ed è quello che ho fatto:l'animazione, dà questo risultato.

Noterete che mentre per gli ultimi tre numeri l'unico movimento sembra quello del cambio di numero, per il resto della fila, a causa della presenza del cambio di colore centrale che non ho lasciato fermo in quella posizione, si ha come l'impressione che, oltra a cambiare il numero, anche la fila abbia un movimento discendente.

Poco male, in fondo non mi dispiace.

 
   

 
5
   

Mi serve una guida per l'animazione:
Ho creato un nuovo livello. Con lo strumento selezione singola riga (lo trovate in alto, l'icona è quella del quadrato, dovete solo scegliere sul menù a scorrimento) ho cliccato sull'immagine ed ho riempito la selezione di bianco.

Poi ho spostato il livello poco sopra la metà dell'immagine.
Ho duplicato il livello e l'ho spostato verso il basso. Ho duplicato ancora e l'ho portato ancora più in basso.
Come nella figura.

Mi rendo conto che voi direte: ma che c'entra con matrix quella roba?
Ve lo spiego qui, più sotto, nell'animazione.

Ho salvato (
matrix.PSD) e chiuso Photoshop.

 
   

 
6
   

Ed eccoci qui. Per concludere la prima parte di matrix.

dovreste avere un ... due livelli ed un set con 6 livelli dentro.
uno per il fondo nero
uno per la guida per l'animazione
Il set con 4 livelli di numeri impilati e due livelli di roba sfocata per fare l'alone.

Ora vediamo a cosa serve la guida (le tre righine bianche) per l'animazione
Ho fatto una prova, se la fila di numeri scorre dall'alto in basso, non si nota il cambio dei numeri, a meno di farli correre molto lentamente. Ma questo porterebbe ad un numero di fotogrammi eccessivo.
Allora ho pensato (mi riesce a volte di farlo, dai): una prima corsa verso il basso la faccio veloce, una seconda un po' meno, poi la terza molto lenta, che si possano vedere i numeri che cambiano, infine la quarta, veloce, fino ad uscire dallo schermo.

Le tre righine sono i punti nei quali modificare la velocità della corsa.
Col
tweening.

Sul primo fotogramma rendo visibile la guida, il livello più in basso di numeri e i due livelli dell'alone.
I livelli del set sono collegati (altrimenti fatelo ora).

Porto tutto il set (basta cliccare su un livello a caso, ma di quelli visibili, altrimenti si rende visibile quello sul quale avete cliccato, e li trascino in alto, quasi a filo schermo (figura a sinistra)
Duplico il fotogramma e trascino il tutto a filo prima riga bianca (figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 10 fotogrammi

ImageReady
 
7
    Ora ci sono 12 fotogrammi, i primi due più i dieci di tweening

Duplico il 12mo fotogramma, e fanno 13, (figura a sinistra) e trascino il tutto a filo della seconda riga bianca (figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 5 fotogrammi
 
 
8
    Ora ci sono 18 fotogrammi, i primi 13 più i 5 di tweening.

Duplico il 18mo fotogramma (figura a sinistra) e trascino il tutto a filo della terza riga bianca (figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 15 fotogrammi
 
 
9
    Ora ci sono 33 fotogrammi (fate voi la verifica, che mi sono perso)

Duplico il 33mo fotogramma, l'ultimo, (figura a sinistra) e trascino il tutto fuori schermo (figura a destra)

Seleziono i due fotogrammi (clic con lo Shift pigiato) ed imposto il tweening a 15 fotogrammi
 
 
10
    Mi riporto sul fotogramma 18 e comincio a far cambiare i numeri.

Fotogramma 18: visibile la prima fila di numeri.
Fotogramma 19: visibile la seconda fila di numeri.
Fotogramma 20: visibile la terza fila di numeri.
Fotogramma 21: visibile la quarta fila di numeri.
Fotogramma 22: visibile la prima fila di numeri....

E così via, fino al fotogramma 34.

Il risultato finale è quello dell'immagine in cima alla pagina.
 
   


Salvo (matrix-prima fase.GIF) ottimizzando al massimo (256 colori, dithering 100%).
Rileggo il gif appena salvato e lo salvo col nome (che vuol dire come PSD)
matrix-prima fase.PSD.

Mi servirà su Photoshop (un trucco diabolico), nella seconda parte.
Quando avete finito ci si rivede lì, che io intanto mi faccio una siga.

 

fine prima parte

 
altre guide
matrix
 


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