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

 

Schermo radar animato
Prima parte: disegno del radar con Photoshop.


Sarà dura.
E lunga.
E forse insoddisfacente.
Ma tant'è, qualcosa bisogna pur fare per una botta de vita (= animazione) no?
Di solito occupo una trentina di righe quale cappello alla guida, che vi confido non sono tanto un incipit, ma un prendere tempo per pensare a come scriverla, la guida. Per allontanare il momento di far le cose sul serio.
Che certe volte ne farei a meno visto che mi ci vuol più tempo ad organizzare le idee per la guida che a fare il lavoro.
Tanto più se il lavoro si basa su qualcosa visto su Youtube.

Piccolo inciso.
Non so se avete mai provato a rifare quello che mostrano in video, a meno che siate dei draghi. Io il più delle volte mi snervo a pigiare pause ed avvia, a ritornare indietro che qualcosa mi devo essere perso se quel che vien fuori non è quello che vien fuori sul monitor, a tradurre alla buona tutti i comandi ed i menù in italiano ed a ceffare regolarmente. E tutta la faticaccia per poi rendersi conto che, da scemo, sto guardando una guida che usa una versione di Photoshop che ha un'opzione che, per quanto mi ingegni, non trovo sulla mia versione vintage.

Stavo cercando idee, avevo trovato una roba su un radar ma avevo continuato a cercare e mi imbatto in questa guida-video, basata su Photoshop CSqualcosa, e mi sono detto: perchè non farne un'animazione bestiale usando Photoshop 7?
Che costa anche meno? Non l'animazione, Photoshop.
Quindi per prima cosa vi passo il link. La guida è in due parti, e questi sono link, tradotti in italico idioma:

Photoshop - prima parte - come realizzare un classico schermo radar
Photoshop - seconda parte - come realizzare un classico schermo radar

Poi passo a descrivere i passi che si dovranno affrontare per arrivare intanto a costruire lo schermo radar e quindi, successivamente, ad animarlo.
Con un'avvertenza: non seguo pedestremente la guida di Youtube per i soliti due motivi: il primo è che magari non ce la farei, il secondo è che devo eliminare l'uso di maschere di livello e di altre amenità che, se l'animazione poi la farò su ImageReady funzioneranno, ma se per caso dovessi decidere (leggasi troppi colori per ImageReady) di passare a SwishMax, buona parte degli effetti andrebbero a donne di facili costumi, come si suol dire.
Quindi ci si accontenta di robetta più semplice, l'importante è che alla fine l'animazione la si possa fare.

fornito il link ed i commenti, la seconda botta consiste nel creare un reticolo utilizzando un pattern.
Quindi la prima botta, alla faccia della coerenza, è farsi il pattern.


1
   

Creo un file di 40 x 40 pixel, fondo nero.
Sistemo la griglia e le guide calamitate in centro (lo spiegone per come farlo lo trovate in un'altra guida, sono un paio di punti, il 4 ed il 5. Fermatevi quando arriva a disegnare il cerchio: non ci interessa)

Questo è il link per i
righelli e le guide calamitate.
Ma poi tornate, si?

Qui sotto c'è un filmatino flash per come disegnare il pattern.
Occorre usare i tasti per passare dal primo segmento al secondo e poi tornare al primo, e così via.
Il primo segmento fornisce solo le indicazioni per definire le caratteristiche dello strumento matita.
Il secondo per come usarla.

Photoshop

costruzione
del pattern
   

 
2
   

Definisco il pattern, cioè lo memorizzo per poi utilizzarlo all'occorrenza:

Modifica > Definisci pattern.

Sul pop-up scrivo il nome (altrimenti prende il nome del file) e clicco OK.

Via il file del pattern.
Creo un nuovo file: 1280 x 720, fondo nero.
E' nel formato video gradito a Youtube, si sa mai che poi ne facciate una copia AVI per la pubblicazione.

Duplico il fondo e rinomino il livello: griglia.
Applico il pattern sl livello griglia:

Modifica > Riempi e seleziono l'opzione pattern, come nella figura qui sotto

Definizione
ed applicazione
del pattern
   

3
   

Questo è il reticolo, la griglia, sulla quale posare il radar.
Per evitare di posarlo a caso farei un buco in mezzo al reticolo che così abbiamo la guida per posarci il radar.

Utilizzando righelli e guide calamitate:


Mouse in mezzo, inizio a scorrere in diagonale verso l'alto a sinistra.
Premo ALT + Maiuscolo (la traccia del cerchio si riposiziona in mezzo)
Proseguo il movimento fino ad uscire dall'immagine, coprendo l'area che si vede qui sotto. Proprio come si vede nella guida precedente, righelli e le guide calamitate, al punto 6.

   

 
4
   

Senza perdere la selezione del cerchio eseguo in sequenza:


Creo un nuovo livello (lo chiamo bordino).
Modifica > traccia
con i parametri: valore di 3 pixel, al centro, colore bianco.


Creo un nuovo livello (lo chiamo cerchio-base).
Modifica > riempi (di nero, di bianco, non importa, mi servirà solo come riferimento)


Creo un nuovo livello (lo chiamo alone esterno).
Modifica > riempi e lo riempio di bianco.


Creo un nuovo livello (lo chiamo alone interno).
Inverto la selezione e poi ...
Modifica > riempi e lo riempio di bianco.

   

5
   

Livello alone esterno
Filtro > Sfocatura > controllo sfocatura.
Uso un raggio di 40 pixel.

   

6
   

Seleziono la trasparenza di livello del livello cerchio-base
Torno sul livello alone esterno e cancello la zona in selezione (il centro) (tasto CANC)

   

7
   

Livello alone interno
Filtro > Sfocatura > controllo sfocatura.
Uso un raggio di 40 pixel.

   

8
   

Seleziono la trasparenza di livello del livello cerchio-base
Inverto la selezione.
Torno sul livello alone interno e cancello la zona in selezione (la periferia)
premento sul tasto CANC

   

9
   

Definisco il livello griglia con opacità del 30%


Creo un set di livelli (
alone)
Trascino nel set i livelli
alone esterno cui assegno un'opacità del 60%
alone interno con opacità del 40%
bordino con opacità del 20%

   


Livelli

Set alone
alone esterno alone interno
bordino


griglia
cerchio-base
sfondo
10
   

Ultimo colpetto alla griglia.

Seleziono la trasparenza di livello del livello cerchio-base


All'interno del Set alone creo un nuovo livello (scuro sterno)
Aumento la selezione di una sessantina di pixel (magari in più volte)

Selezione > Estendi > x pixel.
Quando arrivo ad una situazione come quella della figura qui sotto
riempio la selezione di nero

   

11
    Sfoco il livello di un 40% e lo rendo opaco all'80%.
   


Livelli

Set alone
scuro esterno
alone esterno alone interno
bordino


fuori set
griglia
cerchio-base
sfondo
12
   

Niente mi vieta di collegare ed unire i livelli dei set alone in un unico livello, ma per ora preferisco lasciar le cose libere di ... muoversi.

Un po' di colore.


Creo un nuovo livello al di sopra del set alone. Lo chiamo giallo.
Lo riempio di giallo puro (#FFF600). Definisco il livello come "brucia lineare"

   

 
13
   

Altro po' di colore.
Se voglio accentuare i toni rossi:


Creo un nuovo livello sotto al livello giallo. Lo chiamo fucsia.
Lo riempio di giallo puro (#FF00F0). Definisco il livello come "brucia lineare"
ed opaco al 30%

 
   

14
   

La cornice del radar.
Un anello metallico a scelta fra tanti che se ne possono fare.

Intanto definiamone posizione, grandezza e spessore.
Per farlo usiamo ancora le guide calamitate. Qui sotto ci sono i 4 passaggi per farlo alla veloce.
Il livello finale l'ho chiamato radar e l'ho sistemato in cima a tutto.

   


cornice del radar

Livelli

radar
giallo
fucsia

Set alone
griglia
cerchio-base
sfondo
15
    Metallizziamo il livello radar.
Niente di particolare, un po' di fx.
Passate sui tasti per vederne le opzioni.
   

 
16
   


Clicco con la bacchetta magica, sul livello radar, all'interno del cerchio, nella zona nera ed ottengo in selezione il cerchio vuoto interno.

   

 
17
   


Creo un nuovo livello sotto al livello fuscia.
Lo chiamo schermo.


Imposto i colori della sfumatura come nella figura qui sotto..

   


Livelli

radar
giallo
fucsia
schermo

Set alone
griglia
cerchio-base
sfondo
18
   

traccio la sfumatura dal centro verso l'alto, come nella figura.

 



 
19
   

Duplico il livello schermo, lo rinomino schermo2
Ruoto schermo2 di 180°

Modifica > Trasforma > Ruota a 180°

Lo definisco come "Sovrapponi"
Ne definisco l'opzione di fusione con i valori dell'immagine qui sotto

 




Livelli
radar
giallo
fucsia
schermo
schermo2

Set alone
griglia
cerchio-base
sfondo
20
   

Il reticolo interno.


Clicco con la bacchetta magica, sul livello radar, all'interno del cerchio, nella zona nera ed ottengo in selezione il cerchio vuoto interno. (cfr. punto 15).


Creo un nuovo livello (reticolo interno) sopra al livello schermo
Riduco la selezione: Selezione > Trasforma selezione.
Attivo la catena che blocca le dimensioni e scrivo 75% in una delle due zone, che l'altra m isegue da brava.
Dò conferma e traccio il cerchio bianco con una dimensione di 2 pixel
Modifica > traccia (bianco, centro, 2 pixel)


Clicco nuovamente con la bacchetta magica, sul livello radar, all'interno del cerchio.
Riduco la selezione: Selezione > Trasforma selezione al 50%
Dò conferma e traccio il cerchio bianco con una dimensione di 2 pixel
Modifica > traccia (bianco, centro, 2 pixel)


Clicco nuovamente con la bacchetta magica, sul livello radar, all'interno del cerchio.
Riduco la selezione: Selezione > Trasforma selezione al 25%
Dò conferma e traccio il cerchio bianco con una dimensione di 2 pixel
Modifica > traccia (bianco, centro, 2 pixel)

 





Livelli
radar
giallo
fucsia
reticolo interno
schermo
schermo2

Set alone

griglia
cerchio-base
sfondo
21
   

Attivo le guide calamitate.
Seleziono il livello reticolo interno


Poi seguo le istruzioni dell'animazione qui sotto (cliccare sui tasti numerati)
Una precisazione: ho aumentato lo spessore delle linee per far vedere qualcosa, in realtà solo l'immagine conclusiva del punto 5 è quella corretta.

 


 
22
   

Da qualche parte ho recuperato una mappa.
In realtà non è proprio da qualche parte, l'ho trovata sui simboli di un sito amichevole
del quale fornisco link

http://www.cg-to.it/pagine/MAP-011.html

è l'immagine numero sette scendendo verso il basso. Fate che copiare da lì che fate prima.
Qui ne vedete un esempio e se volete copiarvi questo andate con il bottoncino dorato nella pagina del download.

Mi salvo da qualche parte l'immagine, la leggo con Photoshop e poi


Seleziono il bianco di fondo, inverto la selezione, copio e ri poi ...

 


 
23
   

Incollo sul file del radar.

Rinomino il livello come mappa.
Lo sposto sopra al livello reticolo interno.

Nell'immagine lo si vede con un profilo bianco, ma solo per mostrarlo qui.

 



Livelli
radar
giallo
fucsia
mappa
reticolo interno
schermo
schermo2

Set alone
griglia
cerchio-base
sfondo
24
   

Lo ridimensiono per farlo stare all'interno del cerchio metallico del radar e ne definisco l'opacità al 30% o giù di li.
Io l'ho un pochetto deformato, riducendo di più in orizzontale, ma sono particolari di poco conto.

 


 
   

 

E qui finisce il palo.
Si possono aggiungere le lucine sparse in giro sulla mappa (un cerchietto bianco con una sfocatura intorno ottenibile utilizzando il bagliore esterno (colore bianco opacità 100% e giocare sui valori di estensione e dimensione)
Non sto a mostrarle, fate a vostro giudizio.

E' che sono preccupato per come spiegare l'animazione.
Che in primis prevede di buttare a mare un paio di livelli (schermo, schermo2)
ingestibili al di fuori di photoshop, sostituendoli con altri due livelli, uno per dar luce e vita allo schermo, l'altro per la luce del radar vero e proprio, il triangolo luminoso che gira sullo schermo.
In secundis è che di animazioni ce ne sono due, una semplice ed una complessa, ma tutte e due prevedono la costruzione di un ambaradan che, vista l'ora e vista la lunghezza della pagina, rimando alla prossima puntata.

 

fine prima parte

 
altre guide
radar
               
 


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