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

 

Sfera (pseudo) 3D
Ovvero come far ruotare una sfera.

Credo ci siano migliaia di modi per realizzare una sfera che dia l'idea della tridimensionalità.
Dico l'idea perchè di 3D nella grafica non c'è nulla, a parte lo spessore del supporto (solo la scultura è 3D).
Qui tutto bidimensionale, che l'asse Z (quello che dal primo piano ci porta all'orizzonte)
quello per ora lo dobbiamo solo rappresentare con escamotages (che sarebbero trucchi) tipo prospettiva, gradazioni di colore, differenze nei dettagli, nel fuoco, ed altre robe, come ama
dire una nota mini-catena montuosa.
Vediamo di fare una sfera nel modo più semplice che conosco.

Tanto per non confonderci. 
Quando dico: seleziono il livello tale, significa che semplicemente clicco col tasto DX del mouse sull'icona di quel livello sulla palette dei livelli. Capisco che il livello è selezionato dal fatto che la sua descrizione appare in reverse (scritta bianca su fondo blu) accanto all'icona, sempre sulla palette livelli.

Diverso quando dico seleziono la trasparenza di livello del livello tale. Questo significa che sto facendo qualche cosa sul livello attualmente in selezione, attivo, di lavoro, sulla selezione (che si vede tratteggiata) che ho attivato.
Una selezione tratteggiata è la zona di lavoro, ma è anche una zona neutra. Le operazioni avranno effetto limitatamente a quella zona, e solo sul livello attivo in quel momento.
Una selezione (tratteggiata) puo' essere utilizzata per più livelli, selezionandoli (rendendoli attivi) uno ad uno

 
 

La guida on-line per tutta la prima parte è questa: Photoshop-1


 
     
 
Tutorial on line
 
     
       
Photoshop-1
 
     
1
   

Apro Photoshop e creo un file nuovo di 200 x 200 pixels, fondo bianco.
Creo un nuovo livello (Livello 1)

Con lo strumento ELLISSE traccio una sfera (SHIFT inserito, altrimenti viene fuori un cocomero) quasi a tutto schermo, e la coloro di rosso
pieno (RGB 255,0,0).
Senza togliere la selezione creo un altro livello (Livello 2) e lo coloro di rosso scuro (RGB 80,0,0).
Creo un altro livello (Livello 3) e lo coloro di rosa (RGB 250,63,63).
Aggiungo un altro livello (Livello 4) e lo coloro di bianco. Deseleziono (CTRL + D)

Sposto i livelli 2 - 3 - 4 a sinistra in alto, in modo da vedere sia la sfera rossa che i livelli sovrastanti.
Riduco il Livello 4 (la sfera bianca) di circa il 70% e la sposto come nella figura

Photoshop
   


 
2
   

Oscuro i Livelli 3 - 4.
Seleziono il Livello 2 (sfera rosso scuro) la sfoco:
Menù > Filtri > Sfocatura > Controllo sfocatura (raggio 16,9%)

Ingrandisco il Livello 2 di un 15% (Qui le misure sono imprecise, che ciascuno poi decide come fare)
e lo sposto a sfiorare il bordo DX basso della sfera rossa (Livello 1)

Dovrei ottenere una roba all'incirca così.

 
   


 
3
   

Seleziono il Livello 3 (sfera rosa), lo sposto leggermente verso il centro, poi lo sfoco:
Menù > Filtri > Sfocatura > Controllo sfocatura (raggio 26,4%)

Qui sotto si vede il risultato.

 
   


 
4
   

Seleziono il Livello 4 (sfera bianca), lo sposto un po' di più a destra
ed in basso come nell'immagine qui a sinistra.

 
   


 
5
   

Poi la sfoco
Menù > Filtri > Sfocatura > Controllo sfocatura (raggio 22,2%)

Riduco l'Opacita' del Livello 4 al 60-70%


 
   


 
6
   

Seleziono (tasto di Dx del mouse sull'icona del livello) la Trasparenza
di livello dal Livello 1 (sfera rossa)
Inverto la selezione (Menù > Selezione > Inverti selezione)
In questo modo ho selezionato tutto quello che eccede il perimetro
della sfera rossa.

Seleziono il Livello 2, premo il tasto CANC (l'eccesso di sfumatura sul fondo viene cancellato)
Faccio la stessa cosa per i Livelli 3 - 4 (ho sempre in selezione la trasperenza di livello).

Il Livello 4 (sfumatura bianca) lo sposto usando le frecce ai lati del tastierino numerico di un pixel su e di un pixel a sinistra (cosi' copro il leggero fuori registro che si intravede sulla sfera rossa)

 
   


 
7
   

Oscuro il Livello 4.

Creo un nuovo livello (Livello 5) che si posiziona sopra al Livello 4.
Con lo strumento ELLISSE traccio una sfera (SHIFT inserito) e la coloro
di bianco.
Per la grandezza e la posizione guardate a SX.

Deseleziono (CTRL + D), se occorre riduco il Livello 5 e lo sposto nella posizione sempre qui di fianco a SX.

 
   


 
8
   

Sfoco il Livello 5
Menù > Filtri > Sfocatura > Controllo sfocatura (raggio 20,1%)

Riseleziono la trasparenza di livello dal Livello 1, inverto la selezione,
sto attento che sia selezionato il Livello 6, premo il tasto CANC.
(ho tolto l'eccesso di sfumatura del Livello 6).

Rendo visibile il Livello 5 (che avevo oscurato prima, per lavorare
sul Livello 6).
Se tutto è andato bene, ecco quello che ottengo.

 
   


 
9
    Inverto la selezione (Dovrei avere la selezione della trasparenza
di livello del
Livello 1,
in caso contrario la riseleziono)

Oscuro i livelli:
3 4 5
Creo un nuovo livello (Livello 6)
Lo sposto SOPRA al
Livello 2 (la sfumatura rosso scuro)
Lo coloro di azzurro (RGB 81,153,108)
Deseleziono (CTRL + D)

 
   


 
10
   

Sfoco il Livello 6
Menù > Filtri > Sfocatura > Controllo sfocatura (raggio 10,5%)

Per finire elimino l'eccesso di azzurro.

Riseleziono la trasparenza di livello dal Livello 1, inverto la selezione,
sto attento che sia selezionato il Livello 6, premo il tasto CANC.
(ho tolto l'eccesso di sfumatura del Livello 6)

 
   


 
11
    Rendo visibili tutti i livelli l'immagine finale dovrebbe essere quella che si vede qui sotto.

Si puo' giocare con altri colori, aggiungere altri livelli, sfumarli in altro modo.
La cosa da ricordare è di mantenere sempre un livello con il registro
NON SFUMATO, che vi serve e per creare nuove sfere uguali e per togliere la ridondanza delle sfumatura. (L' "e per creare e per togliere" sta per "sia", trattandosi di una condizione end, nel senso di and, non di fine e neppure di mani, che mi viene in mente quando quel tale mi fa in inglese: ai uosc mai end, ed io gli dico: mi dispiace, soffri molto?).


Ed essendo che non sono troppo 'stardo, vi passo anche il file:
In basso o in alto a sinistra, freccia verde/oro, o direttamente da qui: Sfera-1.zip
 
   


 
   


Ora prepariamo gli elementi per l'animazione.
Che in questo caso è un fatto di rotazione, di far girare, insomma.

E far girare una sfera è facilissimo.
Conosco gente che me ne fa girare due alla volta e manco se ne accorge.
Qui però c'è il solito problema del 3D, che è una bufala, visto che lavoriamo in piatto
(gli anglofoni dicono in plate) con solo due dimensioni (proprio come le due sfere che ... )
Ci sono due esempi, uno semplice semplice, l'altro un poco meglio (due immagini più sotto).

P.S.: di modi ce ne sono tanti altri, ma non provate con le mie sfere, por favor.

Comunque la guida on-line per questa seconda parte è Photoshop-2

     
 
Tutorial on line
 
     
       
Photoshop-2
 
     
12
   

Seleziono il Livello 5 poi oscuro tutti i livelli tranne il Livello 1 (La sfera rossa)
Creo un nuovo livello (lo chiamo anim)
Con lo strumento ELLISSE traccio una sfera (quella bianca della figura) la coloro di bianco

Creo un nuovo livello (lo rinomino anim fucsia)
Con lo strumento ELLISSE traccio un'ellisse come quella fucsia, la coloro di fucsia (RGB 80,0,0)

Creo un nuovo livello (lo rinomino anim azzurro)
Con lo strumento ELLISSE traccio un'ellisse come quella azzurra, la coloro di azzurro (RGB 80,0,0)
Deseleziono (CTRL + D) poi sposto i livelli in mezzo (nella posizione della sferetta bianca)

   


 
13
   

Seleziono il livello anim (la sfera bianca) e la sfoco
Menù > Filtri > Sfocatura > Controllo sfocatura (raggio 17%)

La sposto sulla destra, come nella figura.

 
   


 
14
   

Seleziono prima il livello anim fucsia (l'ellisse fucsia)
poi il livello anim azzurro (l'ellisse azzurra),
ma uno alla volta ... e li sfoco
Menù > Filtri > Sfocatura > Controllo sfocatura (raggio 16,9%)

Li sposto ai lati opposti della sfera rossa, come nella figura.

Il Livello anim azzurro lo sposto tra i Livelli 4 e 5.

 
   


 
15
   

Seleziono la trasparenza di livello del Livello 1 (sfera rossa)
Inverto la selezione (Menù > selezione > inverti selezione)

Creo un nuovo livello che chiamo maschera
Lo coloro di nero.

Quello di selezionare e poi invertire la selezione è sistema
molto comodo
per ottenere uno scontorno o una maschera.

 
   


 
16
   

Duplico il Livello maschera e lo rinomino cornice
Traccio un rettangolo di selezione di circa 3 pixel distante dai bordi
della sfera rossa (vedi figura)
Cancello la parte selezionata (tasto CANC)

Al di sopra del Livello maschera ora ho il Livello cornice con due bande nere verticali ai lati.
(per vederle oscuro il Livello maschera, sennò, nero su nero,
tutto nero, vero?)

 
   


 
17
   

Creo un livello selezionando il livello sotto al Livello maschera
(dovrebbe essere il Livello anim fucsia)

Traccio con lo strumento Lazo Poligonale una selezione tipo quella
nella figura.

La coloro di nero

 
   


 
18
   

Deseleziono (CTRL + D), duplico il livello e sposto quest'ultimo un
poco piu' a destra, sempre con Opacità 80%

Salvo come sfera-1-psd


Fine Photoshop.

Il file PSD pronto per il giramento lo scaricate cliccando sulla freccia verde/oro in basso o in alto a sinistra o direttamente da qui: Sfera-2.zip

 

 
   



 
19
   

Scrivo queste note per puro scrupolo. Trovate tutto ed in modo più comprensibile nel tutorial on-line (Tweening)

L'intenzione è di far scorrere i colpi di luce (livelli anim) da destra verso sinistra. In due tempi, prima
passano i due livelli colorati, poi passa il livello bianco. Lo dico altrimenti non si capisce quello che ora vi faccio combinare.

ImageReady
     
 
Tutorial on line
 
     
       
Tweening
 
     
         
 
     
20
   

Fase 1: scorrono i livelli azzurro e fucsia.

Apro ImageReady e leggo sfera-1.psd

Sul frame 1 oscuro il livello anim (sfumatura bianca)
Collego fra loro i Livelli fucsia e azzurro, li trascino all'estrema destra, fino al punto che spariscono
dal campo visivo.
Questa è la partenza della prima metà dell'animazione.

Optional: se voglio rendere meno evidente il Livello fucsia, lo trascino sopra al Livello azzurro.

 
   

 
21
    Aggiungo un fotogramma (frame 2)
Trascino i Livelli
fucsia e azzurro all'estremità opposta (sinistra), sempre fino ad uscire dal campo visivo.
Cliccando sulla freccia sul bordo destro in alto del pannello Animazione (quella cerchiata di rosso) e tenendo premuto, seleziono la voce Tweening

Sulla finestra che si apre, nella casella fotogrammi da aggiungere scrivo 11.
Dò OK ed ottendo 13 fotogrammi (figura successiva)
 
   

 
22
   

Fase 2: scorre il livello anim (bianco)

Seleziono il fotogramma 13 (l'ultimo)
Oscuro i Livelli fucsia e azzurro e rendo visibile il Livello anim.

Seleziono quest'ultimo e lo trascino all'estrema destra dello schermo (non devo vederlo).
Questo il fotogramma di partenza per il secondo Tweening.

Optional: se voglio rendere meno evidente il Livello anim, lo seleziono e regolo l'Opacità a 80 o meno

 
   
 
23
   

Aggiungo un fotogramma (frame 14)

Trascino il Livello anim all'estremità opposta (sinistra), sempre fino ad uscire dal campo visivo.
Cliccando sulla freccia sul bordo destro in alto del pannello Animazione e selezionano la voce Tweening.

Sulla finestra che si apre, nella casella fotogrammi da aggiungere scrivo 9.
Dò OK (otterrò 23 fotogrammi)

 
   
 
24
   

Se voglio dare il senso di instabilità alla sfera che ruota faccio così (ma non è obbligatorio)
Seleziono il Livello 1 (la sfera rossa) risalendo lungo il pannello dei livelli collego tutti i livelli sino al Livello maschera (escludendo quindi il Livello cornice)

Mi preparo uno schemino tipo:
F F S F F D F S F F F D F F S F F D F F F S F
(dove F = fermi, S = SX, D = DX)

Seleziono i frames 6, 12, 18. Per farlo uso il tasto CTRL sulle selezioni successive alla prima.
Poi Clicco sulla freccia a destra e muovo di un pixel a destra i livelli concatenati.
Seleziono i frames 3, 8, 15, 22 e clicco sulla freccina a sinistra per spostare di un pixel a sinistra
i livelli concatenati.

Ottimizzo l'animazione, scelgo 128 colori (con 256 la differenza è poco percettibile) e salvo ottimizzato.

Vi riconsiglio di guardarvi la guida on-line.
A rileggere queste note ci ho capito una cippalippa anche io che le ho scritte.

 
   
 
       
   

Qui sotto c'è il risultato finale.

Come premesso il movimento di rotazione lo si intuisce solo per le sfumature che passano da destra a sinistra.
Qui abbiamo lavorato su una sfera priva di asperità.

Più avanti uillmideghen (*) con una guida che si rifà a questa sfera, ma con qualcosa da muoverci sopra di meno nebuloso di un due
o tre sfumature.

(*) we'll meet again

 
   
 
       

fine della guida

 
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