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

 

Insegna luminosa
Tipo auguri.


Quando arriva questo periodo dell'anno (sto scrivendo ed è il 18 dicembre 2016) mi viene la voglia di far qualcosa per fare gli auguri.
Non che io sia circondato da gente a cui farli, che di per sè non sarebbe un male, che ti evita un sacco di noie incombenti o di incombenze noiose ed a volte annoiate, ma tant'è: se a Natale non fai e non ricevi auguri rischi di sentirti come un cane in chiesa, e se non avete idea di che cosa io stia parlando, rivolgetevi ad un cane, possibilmente sul sagrato, che lui vi spiega meglio di quanto possa fare il sottoscritto.

Ma tornando a noi, dopo aver propinato i vecchi auguri con le palle di Natale, che naturalmente non è un amico ma una ricorrenza, che mi viene in mente quella volta che io ho provato a rincorrerla.
Come chi?
Enza.
Ma quella era una centometrista ed hai voglia di rincorrere, che poi in quel periodo fumavo e di fiato stavo un pochetto a corto, che solo un velleitario poteva sperare di pigliarla quell'Enza lì.

Mi sa che ho deviato, vero?
Stavo dicendo che dopo un Jingle Balls riciclato mi sono sentito in dovere di provvedere ad una nuova animazione. Ed ho alzato gli occhi al cielo. Ed ho visto le luminarie. E mi son detto: perchè no? mai fatto una luminaria (che credo si chiamino così per via che stanno sospese in aria, che se fossero appoggiate al pavimento chissà, forse luminbasse?)

Questa guida mostra come fabbricare delle scritte da usare come lumini, come lucine, per rallegrare tutti quelli che rincorrono Enza e non ce la fanno.

 


1
   

File nuovo, formato 1280 x 720, fondo nero.

Con un carattere "square" scrivo AUGURI.
Se non trovo il carattere disegno la scritta AUGURI.
Usando come traccia un carattere.
Bella fregatura, vero?
In realtà sono andato sul ueb ed ho trovato modo di procurarmi il font:

http://www.dafont.com/it/code-predators.font

Scrivendo nell'apposita casella - quella che bordata di giallo nell'immagine qui sotto - il testo che si desidera e cliccando sul tasto inserisci, sulla riga sottostante compare il testo nel font previsto.
Quindi si usa il tasto stamp, si corre su Photoshop, si crea un nuovo file (accettando le misure proposte) e si incolla.

Photoshop
 


   
    Di qui in poi tutto facile. Si seleziona la parte di immagine contenente il font, la si copia e la si incolla sul nostro file da 1280 x 720.
Si ingrandisce quanto basta, si aggiusta di sale ... pardon, mi pareva d'essere a master chef.
Qui sotto c'è un esempio di font ripulito: la scritta è nera su fondo nero, ma il fondo l'ho reso trasparente al 50%, motivo per cui si vede la scritta, che in caso contrario potevo anche non mettere alcuna immagine che l'era l'istess (*), era lo stesso.
   
 


   
2
   

Creo un set di livelli che chiamo A.


All'interno del set creo un nuovo livello, che non sto a rinominare.
Traccio un cerchietto (sistemate l'opzione "Sfuma su di un valore di 3-4 px) nella posizione indicata dall'immagine.

Riempio la selezione di bianco.
   
   


   
3
    Cliccando con il tasto destro del mouse sull'icona posta sulla palette livelli scelgo l'opzione Opzioni di fusione.
Utilizzo soltanto l'ombra esterna, con i valori indicati nella figura.

Faccio 11 copie del livello, l'ultima la sistema in basso, mantenendo la posizione orizzontale, cosa che si realizza o utilizzando la freccina che punta in basso oppure mantenendo premuto il tasto delle maiuscole.
Collego ma NON unisco i 12 livelli e li distribuisco utilizzando la funzione:
Livelli > distribuisci collegati > Centro verticali.

Dovreste ottenere quel che si vede qui sotto: 11 livelli equamente distribuiti lungo la stanghetta sinistra della A.
   
   

   
4
    Faccio 11 copie del livello, l'ultima la sistema in basso, mantenendo la posizione orizzontale, cosa che si realizza o utilizzando la freccina che punta in basso oppure mantenendo premuto il tasto delle maiuscole.
Collego ma NON unisco i 12 livelli e li distribuisco utilizzando la funzione:
Livelli > distribuisci collegati > Centro verticali.

Dovreste ottenere quel che si vede qui sotto: 11 livelli equamente distribuiti lungo la stanghetta sinistra della A.
   
 

   
5
    Duplico il set di livelli A e lo sposto a destra. Non sto a rinominarlo, tanto avrà vita corta.
Non state ad impazzire a far di conto o ad usare il centimetro. Ho fatto io il conto e basta spostarlo utilizzando la freccia volta a destra tenendo premuto il tasto del maiuscolo.
Due colpi ed il livello si posiziona alla giusta distanza.
Duplicate il nuovo livello e spostate, sempre con lo stesso metodo.

Dopo 10 copie (ottenendo quindi 11 livelli) siete arrivati a coprire la lettera A, come nella figura.

Per la meccanica dell'operazione più sotto c'è un (o una, mai saputo di che genere fosse) Gif che ha la pretesa di chiarire la sequenza di operazioni. A me non convince, magari qualcuno è di bocca buona e s'accontenta.
   
   



   
6
   

Bene.
Prima di procedere una piccola spiegazione. L'idea è di imitare le scritte luminose che fingono un'animazione dei caratteri semplicemente accendendo un certo numero di lucine in zone confinanti a quelle dove le lucine vengono spente. Insomma, un bel tabellone pieno di lampadine (o led) in numero tale da poter comporre i caratteri (o le figure) mediante l'accensione di alcune di esse (esse lucine).
Quindi la prima cosa da fare è di preparare il tabellone con le lucine spente.
Noi lo si fa alla fine, ma prima ci mettiamo via un pezzo di tabellone, il pezzo che attualmente ricopre la lettera A.
Ovviamente non sono stato chiaro, fate come se si e vediamo di proseguire.

Quello che segue è uno dei tanti metodi utilizzabili.

Seleziono la trasparenza di livello del primo livello contenuto nel set A.
Tenendo premuto il tasto maiuscole, seleziono la trasparenza di livello del secondo livello (in selezione si aggiunge alla prima).
Sempre tenendo premuto il tasto maiuscole, seleziono la trasparenza di livello degli altri 9 livelli, ottenendo una fila di selezioni circolari in verticale lungo la stanghetta sinistra della lettera A..


Creo un nuovo livello, al di fuori del set A e lo rinomino SPENTO

Riempio la selezione di bianco.
Senza perdere la selezione, sposto la stessa utilizzando la freccia rivolta a destra, mantenendo pigiato il tasto maiuscole: la sposto di due colpi di freccia, come ho fatto al punto 5.

Riempio la selezione di nero.
Sposto di altri due colpi la selezione e riempio di nero.
Insomma, ripeto tutto l'ambaradan del punto 5 spostando, anzichè dei livelli, la selezione.
alla fine avrò una copia del quadrato di cerchietti anzichè bianchi e rossi, neri e sfumati.

   
   

   
7
   
Come vedete i set A coprono anche le zone non necessarie a definire il carattere.
Dovremo rimuovere i pallini in eccesso, ma prima di farlo, prima che sia troppo tardi, mi preparo a predisporre i pallini per la lettera successiva.

Duplico l'ultimo set A, quello a ridosso della stanghetta destra della lettera A e lo rinomino U, tanto per non far confusione.
Utilizzando sempre freccina e tasto maiuscole lo sposto in orizzontale di 4 colpi e raggiungo la stanghetta sinistra della lettera U.
Questo set sarà il punto di partenza per la lettera U, che ora lasciamo lì e passiamo a ripulire la lettera A.
   
   

   
8
    Passiamo ai set A: cancello i pallini (= livelli)in eccesso all'interno dei vari set A.
All'interno dei singoli set collego ed unisco in un unico livello i pallini (= livelli) residui e sposto i livelli risultanti tutti all'interno del set
A.
Poi elimino gli altri set, ormai vuoti.
Ho mantenuto i livelli che costituiscono le linee verticali del carattere poichè serviranno separati in animazione, come si può vedere nell'esempio più sotto.
   
   



   
9
   
Ripeto le operazioni descritte al punto 5 anche per i set U, quelli che definiscono la lettera U.
Ripeto anche quanto descritto ai punti 7 e 8, naturalmente modificando nomi e posizioni:
La copia dell'ultimo set U la rinomino G e la sposto di 4 tacche fino a raggiungere la lettera G.
   
   

   
10
    Alla fine della fiera ottengo la scritta completa, disponendo dei set A, U, G, U, R, I costituiti da file di pallini animabili:    
   

   
11
    Restano da preparare la base della luminaria e lo sfondo.

Seleziono il livello SPENTO.
Lo duplico e lo sposto di 22 colpi di freccia con il tasto maiuscolo pigiato.
Dovrei trovarmi perfettamente a registro con il livello SPENTO iniziale, cioè a coprire lo spazio fra le lettere A e U lasciando scoperto un pezzetto della lettera U, quello della stanghetta di destra.
   

   
12
   
Ripeto l'operazione (duplico e sposto) fino a coprire tutta la scritta.
Probabile che dopo l'ultimo spostamento ci sia un eccesso di pallini neri sulla destra dell'immagine.


Mi limito a cancellarlo selezionando la zona di troppo.

Poi collego ed unisco fra di loro tutti i livelli SPENTO, ottenendo un unico livello SPENTO finale.
Rendo opaco il livello al 40%

   
   

   
13
   

Prima di passare al fondale vediamo di preparare un altro tocco di animazione: Volendo aumentare la luminosità delle lucine ho pensato di ricorrere a dei veletti di vari colori che ricoprano tutta la scritta. Si possono anche fare lettera per lettera ma già così l'animazione è lunghetta e non volevo esagerare.


Creo un nuovo livello, al di sopra del set A e lo rinomino BIANCO .


Quindi col selettore tarato a sfumatura 8% traccio un rettangolo a circoscrivere l'area della scritta
E riempio l'area di bianco (nell'immagine non si vede il bianco).

   
   

   
14
   
Sempre col selettore tarato a sfumatura 8% traccio vari rettangoli (uno alla volta o tutti insieme, fa l'istess) e rimuovo la parte selezionata. Insomma lascio il bianco solo sulle zone interessate, solo sui caratteri.
   
   

   
15
    Definisco il livello BIANCO come "sovrapponi" con opacità 50%.

Il vantaggio di tale definizione è che nascondendo una lettera il livello "sovrapponi" non ha efficacia su di un fondo nero e poichè occorrerà disporre di uno sfondo che sia il più nero possibile, questo è essenziale.
Per avere idea di quel che succede utilizzando il livello BIANCO in presenza ed in mancanza di lettere al di sotto, ho fatto una prova che vi mostro:
   
   

   
16
   

Al che ad uno verrebbe da chiedersi come mai si sia perso tempo a rimuovere le parti in eccesso sul livello BIANCO. Che dire? semplicemente che io non ci ho mica pensato prima, è solo dopo che mi sono accorto che non serviva, ma visto che la faticaccia l'ho fatta io, perchè privarvene?

No, dai, in realtà proprio me ne sono accorto ora che sto a scrivere la guida, che scemo si ma carogna mai.


Comunque mi servono anche altri colori.


Seleziono la trasparenza di livello del livello BIANCO, creo un nuovo livello (AZZURRO) e riempio la selezione di azzurro #0ABDFF.


Mantenendo la selezione creo un nuovo livello (VERDE) e riempio la selezione di verdolino #00FF06.


Mantenendo la selezione creo un nuovo livello (FUSCIA) e riempio la selezione di fuscia #FC00FF.


Mantenendo la selezione creo un nuovo livello (ARANCIO) e riempio la selezione di arancione #FFAE00.


Mantenendo la selezione creo un nuovo livello (GIALLO) e riempio la selezione di giallo #EAFF00.

tutti i colori sono ovviamente facoltativi, ciascuno si sceglie quelli che preferisce, e mi sa che alla fine vien meglio il lavoro.

Qui sotto una prova colore, tanto per allietare gli animi e sollevare il peso del lavoro, che sui bricchi lo si chiama travaj, proprio tipo travaglio, che è tutto un programma no?

   
   

   
17
   

Ora tocca al fondale.
Io Ho scelto una roba con dell'acqua, tanto per complicarmi la vita, una foto del Po visto all'altezza del ponte della Gran Madre, il ponte che collega via Po con corso Moncalieri (o forse lì è dià corso Casale, chi se lo ricorda).
In alto a destra si vedono i Cappuccini, tutto il resto è quasi nero, proprio l'ideale perfar risaltare una luminaria, no?

Voi sceglietevi quel che preferite, ma se ci mettete dell'acqua sappiate che la cosa si complica, dovendola far muovere, sapete, il fatto dell'onda su onda.

Qui comunque (e aihmè) c'è anche la parte dell'animazione dell'acqua, con tanto di riflessione, che complica in modo sgradevole i tempi di realizzazione nonchè i tempi di stesura della guida, che fra un po' è Natale e mi devo sbrigare.

La foto di sfondo non la fornisco, l'ho pescata in giro, la vediamo al momento di animare l'acqua e la riflessione conseguente.

Quindi finirei con la riflessione.
Che io ho fatto errata, cioè l'ho messa in prospettiva, cosa che non si fa se poi si vuol farla correre in orizzontale a meno di ridisegnarla ogni volta modificando il punto di fuga. Che manco se mi pagano, piuttosto fuggo io.

Per far la riflessione occorre disporre di qualcosa da riflettere e noi ce lo procuriamo facendo copia di ogni set delle lettere: A > Ar, U > Ur, G > Gr, U2 > U2r, R > Rr, I > Ir.
E di ogni livello di colore: BIANCO > BIANCOr, etc etc.

Le copie le sistemo appena al di sopra dello sfondo, che stiano sotto agli originali.

Collego (NON unisco) le copie dei livelli ed deii set da ribaltare, li ribalto in verticale, li sposto sotto, oltre il filo della scritta non ribaltata.
Poi li metto leggermente in prospettiva e li schiaccio in verticale.
Insomma tutto il solito necessario per una riflessione come Dio comanda.
Nell'animazione qui sotto non si vedono i livelli di colore, ma vanno modificati insieme ai set.

   
   

   
18
    Mi serve un veletto per oscurare un pochetto sia il fondo sia le copie ribaltate, quelle in riflessione.

Creo un nuovo livello, lo chiamo VELETTO, lo sistemo fra i livelli colore ed i set del testo e fra le copie ribaltate e lo riempio di nero.
Ne definisco le proprietà come luce soffusa, opacità 100%.

La situazione a questo punto è la seguente, fondo incluso
   


 
   

 

(*)
Da qualche parte, qui nel posto, devo aver detto che non so contenermi dall'utilizzare termini in vernacolo. Che sarebbe il dialetto. Quello che uso io è il monferrino, quello dei bricchi. Solo che non so come accidenti si scriva, quindi portate pazienza e non leggete che si fa prima.
Se volete rientrare alla veloce vicino alla riga che vi ha mandato quaggiù cliccate qui che vi ci porto.

 

   

fine prima parte

 
 


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