nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
sfera discoteca
___________________
prima parte
___________________
 

 

Sfera da discoteca
(omaggio a google)

Avete visto la pagina iniziale di google?
Per capodanno?
2014?
C'era, fra l'altro, una sfera del tipo di quelle appese nelle discoteche.
E, come ogni sfera che si rispetti, girava.
Cioè, pareva che girasse, e lo scopo di questa guida sta tutto nello svelare l'arcano di una sfera che pare che giri, ma in realtà cammina.
Questo nella prima pagina.

Poi, dopo aver realizzato l'animazione 2D, la guida si dipana sull'aspetto 3D, quello di rendere la sfera tondeggiate, e qui la cosa si farà più complicata ed avrà tutta una paginona a disposizione per farsi vedere.


1
   

Per non tenervi in ansia vi dico subito in cosa consiste il trucco: una maschera, ovvero un livello (che può essere di colore unito o contenere un'immagine di varia natura, un paesaggio, un disegno, quel che vi pare) con un foro circolare al centro, cioè bucato.
Al di sotto c'è il livello con la sfera sistemata su di un piano, cioè come una tovaglia, tutto meno che una sfera.

Facendo scorrere la tovaglia al di sotto del buco ci parrà che essa diventi una sfera, e ve la mostro subito qui sotto, rendendo parzialmente opaco il livello superiore, quello con il buco, per capire cosa succede al di sotto

Photoshop
   

 
2
   

Se qualcuno ha già fatto un giro qui sul posto avrà visto una roba analoga nella guida per il mappamondo, ed infatti la tecnica è la stessa, solo che in questo caso a passar sotto alla maschera col buco è una tovaglia a quadretti, che ora vediamo come fare alla veloce.
L'immagine di base che ho usato è di 1200 x 800 pixel, ma si può lavorare su altre dimensioni a piacere, tenendo presente che alla fine, alla peggio, è meglio doverle ridurre e non ingrandire, sempre per via del degrado che si ottiene ingrandendo troppo un'immagine non vettoriale.


Delimito un quadratino (Shift premuto per ottenere un quadrato e non un rettangolo) su di un nuovo livello e lo riempio di un colore fucsia (qui è #A53FEB).

 
   

 
3
   

Ora posso fare in tanti modi per fare quello che mi serve, cioè una serie di quardatini di diverso colore tutti in fila sull'orizzontale.

1) Uso la selezione corrente e, creando un livello alla volta, lo riempio di diversi colori, ed al termine sposto i livelli per sistemare i quadratini uno a fianco dell'altro, oppure

2) sposto la selezione in orizzontale, creo un nuovo livello che riempio di altro colore e così di seguito, con la certezza di dover poi sistemare a registro tutti i quadratini, come nel primo caso.
O altrimenti

3) duplico il livello, lo sposto a registro con il quadratino precedente, ne seleziono la trasparenza e lo riempio di altro colore e così di seguito.

Solo da scegliere la strada, ma il risultato è quello che si vede qui sotto, dove il quinto quadratino è colorato di nero:

 
   

 
4
   


Ho ottenuto 14 livelli e 14 quadratini.
Seleziono il primo quadratino (o uno a caso) e lo duplico, chiamando il livello:
quadratino, e me lo scordo, che mi servirà alla fine della fiera.

Non unisco, per ora, i 14 livelli fra di loro, ma li sistemo in un set di livelli.
Duplico il set e lo sposto in verticale, a filo del set superiore.


Collego fra di loro ed unisco i livelli del PRIMO set (non mi servono più come elementi separati.

 
   

 
5
   

Poi devo modificare i colori del secondo set.
Anche qui ci sono due possibilità:

1) seleziono la trasparenza di livello di ogni quadratino presente nel secondo set e ne riempio alcuni di altro colore, come nella seconda fila di quadratini nella figura qui sotto.

2) Mi limito a spostare orizzontalmente il secondo set, sfalsando di uno o più quadratini (nella figura è l'ultima fila di quadratini, quella con la freccia rivolta a destra). Poi provvedo a spostare l'ultimo quadratino (o gli ultimi) a destra nella posizione rimasta scoperta a sinistra (nell'immagine il percorso è indicato dalla linea bianca).

 
   

 
6
   

Duplico il secondo set e seguo la procedura indicata al punto precedente (4).
Proseguo duplicando sempre l'ultimo set, fino a riempire l'immagine con una scacchiera multicolore:

 
   

7
   

Finisco anche l'ultimo set, collegando ed unendo fra di loro tutti i suoi livelli.
Collego fra di lori i livelli (ormai unici) contenuti nei 14 set che ho costruito fin qui e li unisco in un unico livello: la
scacchiera.

Duplico il livello
scacchiera rinominandolo scacchiera2 e lo sposto a sinistra fino a far coincidere il suo fianco destro con il fianco sinistro del livello scacchiera (che nell'immagine qui sotto è scurito di proposito).

Collego, ma NON UNISCO fra di loro i due livelli: mi servono separati per un problema di registro che vediamo al prossimo punto

 
   

 
8
   

Ora la maschera.
Rendo invisibile il livello
scacchiera2


Creo un nuovo livello e traccio un cerchio stando all'interno dell'ingombro del livello scacchiera
Riempio la selezione di nero.

 
   

 
9
   

Creo un nuovo livello, lo rinomino maschera e lo riempio di nero.
Seleziono la trasparenza di livello del cerchio fatto al punto precedente, torno sul livello
maschera e cancello la zona selezionata (tasto CANC)
Rendo non visibile il livello con il cerchio nero, che altrimenti vedrei tutto nero.

Così abbiamo il buco con il nero intorno, quel che ci serve per vedere dei livelli scacchiera solo la parte che si trova al di sotto del buco del livello
maschera

 
   

 
10
    Aprendo il file su ImageReady dovreste trovare la palette dell'animazione con un solo fotogramma contenente i livelli visibili su Photoshop al momento di passare ad ImageReady.

A noi occorre che siano visibili i livelli: maschera scacchiera scacchiera2 e naturalmente lo sfondo.

Si duplica l'unico fotogramma e sul nuovo fotogramma si spostano i due livelli scacchiera verso destra (sono collegati, ne sposto uno e l'altro mi segue), fino ad ottenere la coincidenza fra la posizione di scacchiera nel fotogramma uno con la posizione di scacchiera2 nel fotogramma due.
Per vederci meglio conviene ridurre l'opacità del livello maschera in entrambi i fotogrammi, oscurare il livello scacchiera2 nel fotogramma uno, oscurare il livello scacchiera nel fotogramma 2 e passare da un fotogramma all'altro per controllare che siano identici.

Sistemato il secondo fotogramma si rimette a posto il tutto: maschera opaca al 100% e visibili i due livelli scacchiera nei due fotogrammi.
Seleziono i due fotogrammi ed imposto un tweening di 29 fotogrammi, lo eseguo, butto via il fotogramma 31 che è identico al fotogramma 1, ed ecco il risultato:
ImageReady
   

 
11
    Però la sfera di google aveva altri particolari.
Uno era il cambio di colore di alcuni quadratini nel corso dell'animazione.
Che ora vediamo come farne almeno uno.



Vi ricordate il livello
quadratino, quello realizzato in cima alla pagina?
Ora ci serve.

Seleziono la trasparenza di livello del livello
quadratino, creo un nuovo livello, al di sopra dei livelli scacchiera e riempio la selezione di bianco.

Questo livello li chiamo
Q1

Nell'immagine lo si vede al di sopra del livello maschera, ma è solo per mostrarlo.
Photoshop
   


12
    Rileggendo il file con ImageReady mi ritrovo i 30 fotogrammi dell'animazione.
Per prima cosa li passo uno ad uno per verificare che il livello quadratino ed il livello Q1 non siano diventati visibili in qualche fotogramma ed in tal caso li rendo invisibili.

Ora devo far apparire il livello Q1 a registro su un quadratino dei livelli scacchiera
per coprirne il colore, essendo Q1 sovrapposto ai livelli scacchiera

Diciamo che parto dal fotogramma 3, tanto per complicarci la vita.

Rendo visibile Q1
Lo sposto (a registro) su un quadratino della scacchiera (qui ho scelto il quadratino nero, il secondo a sinistra della sesta fila)

Passo al fotogramma 4.
Rendo visibile Q1 (lo ritrovo nella posizione iniziale, non sul quadratino nero).
Lo sposto ancora sul quadratino nero della sesta fila, che nel frattempo si è spostato un poco a destra.

Fotogramma 5 ... e così via.

E per vedere in immagine cosa fare cliccate sulle icone dei fotogrammi poste in basso nell'animazioncella qui sotto
 
   




NB: prima di uscire da ImageReady salvare il psd per congelare l'animazione e non dover poi rifare tutto.


13
   

Potete spostare Q1 in modo diverso, potete colorare Q1 di altri colori e non di bianco.
In questo caso, nel caso di uso di diversi colori, dovreste rifare il tutto aggiungendo un secondo quadratino (Q2), ed un terzo (Q3) ed un quarto (Q4) ... più ne mettete, ovviamente su file (non fail, file, italico) diverse e magari in tempi diversi (nel senso di fotogrammi diversi) più animate la sfera.
Si tratta di perderci un po' di tempo e di pazienza, nel senso che la pazienza è più facile perderla che mettercela, ed il gioco sarà fatto.

Quel che conta è poi salvarvi il PSD per non perdere l'animazione.

   

 
14
   

Resta un'ultimo particolare per rendere omaggio a google: i colpi di luce, le stelline.


Usando il pennello a forma di stella, grande abbastanza da farne una bella tosta, si crea un nuovo livello e, con il colore bianco, si crea una stellina.
Per ottenerla più carica di colore ci sono due modi: il primo è cliccare più volte, con il mouse fermo in posizione.
Il secondo è duplicare il livello una o più volte e poi collegare ed unire i livelli creati.


Fatta una stellina la si posiziona, al di sopra del livello maschera, dove più vi aggrada.
Poi ne potete aggiungere altre, qui e là.

Se non volete usare il pennello potete sempre farvi da voi la vostra stellina; io, che mi ero dimenticato dei pennelli, ho proprio fatto così, con un risultato inguardabile, ma ormai il fatto era fatto.

In Image Ready si tratterà di renderle visibili lungo i fotogrammi già esistenti le stelline, ottenendo il "blink" o lampeggio per i non italiani, che fa tanto cine.

 

 
   

 
   

 

Il risultato, stelline comprese, lo si può vedere in cima a questa pagina.
con una considerazione.
Presenta il tentativo di rendere in 3D un'animazione 2D. Una robetta che trovate nella guida per il mappamondo, al punto 18.
Nella prossima pagina vediamo come complicarci la vita, sempre se ne avete voglia e non mi lasciate qui da solo a scrivere ed a correggere, ed a riscrivere, ed a ricorreggere, e a ri-riscrivere ed a .....

 

fine prima parte

 
altri giramenti
di sfere
 


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