nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
effetto metallo
___________________
 
   

Effetto metallico o metallo 3

Questa l'ho trovata sul web.
E non funziona. Non del tutto.

Ricapitolo.
Non nel senso che capitolo per la seconda volta, tanto più che recentemente non mi sono cimentato in alcuna pugna o bello. O bello non è una frase rivolta ad un tizio particolarmente belloccio, nè tantomeno una provocazione ad altro tizio di aspetto del tutto ininfluente, è il bellum romano, la pugna per l'appunto.
Presente il gallico? Ecco, quel bello lì.
Il ricapitolo è nel senso di: faccio un resumè, un riassunto, insomma spiego l'origine del male.

Stavo considerando per benino l'effetto metallico realizzato di corsa e non ne ero proprio tanto convinto. Vebbè che i limiti imposti dall'animazione sono palesi, ma più lo guardavo più mi convincevo che proprio non fosse granchè.
E mi sono catapultato sul ueb a cercare delle immagini di effetti metallici che mi fornissero uno spunto per qualcosa di meglio. E son finito su un posto che partiva con un'immagine finale niente male.

C'erano comunque delle controindicazioni.
Intanto il posto era tutto in inglese (almeno credo). Poi tutto il uorc, il lavoro, si basava sulle opzioni di fusione di un livello con su scritto il testo, ed io non è che abbia qualcosa contro le opzioni di fusione, sono loro che hanno qualcosa contro di me: non mi riescono mai, e poi non mi ricordo quali siano le conseguenze di scegliere questo o quel valore per questo o quel parametro.
Altro tasto dolente è che il tutorial si sviluppava su 3 pagine, e per passare da una alla successiva dovevo aspettare un paio di minuti.
Insomma tutto stava lì a scoraggiarmi. Ma io duro, io no, io chissenefrega degli osta e coli, io lo vojo sto metallo rugginoso raschiato.
Si, perchè il titolo della guida aveva più o meno quel significato: rusty-scraped metal.
E mi son messo a farlo, seguendo pedestremente le indicazioni.
Solo che arrivato a pagina 3 ho scoperto l'ultimo inghippo e mi sono arenato.
Il filtro indicato, quello che dovevo applicare, non funzionava, dava tutt'altro risultato.
O mancava un passaggio oppure anche si.
Mi sono anche letto i commenti e tutti stavano a dire ma che bravo ma che bello, almeno credo, essendo i commenti in inglese e spagnolo.
A proposito, loro, gli inglesi, loro i commenti li scrivono, anche se in inglese, neh?

Però il finale era molto grazioso e non mi andava di non farne menzione e di non farci una guida in italico.

Quindi fornisco il link e passo a stendere la guida (sembrerebbe un tappeto, vero?) con qualche variante per supplire al problema del filtro Chrome.

Il link, sperando che basti ad omaggiare il copyright, è: graphisutra
Ho comunque modificato parecchio, tanto da ritenere di poter presentare questa guida (che almeno in parte serve da traduzione).

 

1
    Ho lavorato su un file da 650x400 pixel con il fondo di colore grigio medio.
La guida originale suggerisce #434343, ma credo si tratti di una scelta determinata dall'habitat di una scritta in metallo rugginoso e raschiato.
In fondo serve un grigio non così scuro da impedire la vista delle ombre nere che metteremo intorno al testo.
Ma per non fare le cose pedestremente io ho preparato un fondino usando un pattern recuperato anni fa non mi ricordo dove.

Si presenta come una superficie granulosa, metallica satinata.

Per costruire il pattern create un nuovo file di 4x4 pixel.
Suddividete l'area in porzioni da 2 pixel orizzontali ed 1 pixel verticale e coloratele con i valori di grigio indicati ai lati della figura.
Generate il pattern utilizzando: Modifica> Definisci pattern, ed assegnandogli un nome a vostro piacere.

Ciò fatto, torniamo sul file 720x420. Duplicate lo sfondo (io l'ho chiamato Sfondo pattern) ed applicate l'opzione di fusione sovrapposizione pattern, con i valori indicati qui sotto ed utilizzando il pattern appena creato.
   
   

   
2
   
Usando un font a piacere (qui c'è un Calisto MT bold, italic) scrivo Metallo, di colore bianco,
proprio come si vede nella figura.
   
   

   
3
    Si tratta ora di applicare sul livello Metallo una serie di opzioni di fusione, secondo i parametri delle figure che snocciolo qui sotto e che potete vedere cliccando come indicato.
Buona con...fusione.
   
   


situazione livelli:

Metallo
Sfondo pattern
Sfondo
 
   
Il pattern utilizzato per la texture dello smusso ed effetto rilievo è scaricabile utilizzando il bottoncino dorato disponibile in cima ed in fondo alla pagina.

I valori cromatici utilizzati sono naturalmente indicativi e soggettivi.
   
4
    Ci sono ora (punti 4 - 5) un po' di operazioni tutte destinate a muovere lo sfondo, rendendolo assimilabile ad una superficie di metallo opaca e graffiata.
Le indico senza ulteriori commenti, la considero una parte opzionale.


Creo un nuovo livello.
Duplico il livello
Metallo.
Collego e unisco fra di loro la copia del livello Metallo ed il nuovo livello.

Rinomino il nuovo livello ottenuto come Sfoco.

Faccio una copia del livello Sfoco (Sfoco copia) e la rendo invisibile, ma mi servirà fra breve.

Porto Sfoco al di sotto del livello Metallo.
Sul livello Sfoco applico il filtro sfocatura > controllo sfocatura con un valore all'incirca del 20%
   
   


situazione livelli:


Sfoco copia (osc)
Metallo
Sfoco
Sfondo pattern
Sfondo
 
5
   
Duplicate il livello Sfoco copia e rinominatelo pattern, lasciando invisibile Sfoco copia.
Portate il livello pattern al di sotto del livello Sfoco.

Sul livello pattern applicate il filtro sfocatura > controllo sfocatura con un valore all'incirca del 65%.
Sempre sul livello pattern applicate
l'opzione di fusione Sovrapposizione pattern con i valori indicati dell'immagine qui sotto ed utilizzando il pattern indicato al punto 7.
   
   


situazione livelli:

Sfoco copia (osc)
Metallo
Sfoco
pattern

Sfondo pattern
Sfondo
 
6
    E qui sono acidi.
E' la parte che non funziona, salvo mancanza di qualche indicazione, come dicevo in premessa.

Comunque provate anche voi.


Duplico il livello Sfoco copia e lo rinomino Cromo, lasciando invisibile Sfoco copia.
Lascio il livello Cromo al di sopra del livello Metallo.

Applico al livello Cromo il filtro > schizzo > Effetto Cromatura.
Con i valori
Dettaglio 4
Sfumatura 7.

Ed ottengo quel che si vede qui sotto.

Non è assolutamente quello che ci serve.
Ho provato un po' di corsa a trovare una soluzione ripetibile ed abbastanza veloce, ma non m'è riuscito di ottenere qualcosa di presentabile, ergo se qualcuno riesce ad ottenere l'effetto cromatura simile alla guida originale, per favore ce lo dica.
   
   


situazione livelli:

Sfoco copia (osc)
Cromo
Metallo

Sfoco
pattern

Sfondo pattern
Sfondo
 
7
    Non è assolutamente quello che ci serve.
Ho provato un po' di corsa a trovare una soluzione ripetibile ed abbastanza veloce, ma non m'è riuscito di ottenere qualcosa di presentabile, ergo se qualcuno riesce ad ottenere l'effetto cromatura simile alla guida originale, per favore ce lo dica.
   
         
8
    Butto il livello Cromo.
Ora diamo un po' di luce al testo.

Rendo visibile e rinomino il livello Sfoco copia come ruggine
Porto (o lascio) il livello ruggine sopra al livello Metallo.

Applico al livello ruggine il filtro > Artistico > pennello a secco.
Con i valori indicati qui sotto.
   
   


situazione livelli:

ruggine
Metallo

Sfoco
pattern

Sfondo pattern
Sfondo
 
9
    Come metodo di fusione scelgo colore scherma, con opacità del 60%.    
   

   
10
    Duplico i livelli:
Sfoco, Metallo, Ruggine.
Li collego fra di loro e li unisco in un unico livello, che rinomino come:
Colore.

Ora dobbiamo portare verso un giallo-arancio il tono del livello Colore


Menu > Immagine > Regola > Tonalità e saturazione.
Modifico i valori di tonalità e saturazione come nell'immagine qui sotto:
   
   


situazione livelli:

Colore
ruggine

Metallo

Sfoco
pattern

Sfondo pattern
Sfondo
 
11
    Seleziono lo strumento gomma.
Scelgo un pennello standard con un diametro abbastanza grande (180-190 px).
Ne definisco opacità (52%) e flusso (50%).

Cancello alcune parti del livello Colore

In questo modo rendo visibili zone più o meno vaste dei livelli sottostanti, quelli sul verde bluastro per intenderci.
   
   

   
12
       
   


situazione livelli:

Colore (oscurato)
Mascherina (osc)
Maschera
Ruggine
Metallo
Sfoco
pattern
Sfondo pattern

Sfondo
 
13
    E' giunta l'ora del livello Mascherina.



Definisco sfuma 5 pixel lo strumento lazo poligonare e traccio, sul livello Mascherina, il perimetro delle zone più scure della scritta.
Qui alcune sono invisibili a causa della funzione sfuma, ma sono tuttavia state selezionate.

Poi o copio e incollo, rischiando il fuori registro, oppure inverto la selezione e cancello.
Stesso risultato, ma nel secondo caso non ho fuori registro da correggere.
Questo livello lo sistemo al di sotto del livello
Maschera.
   
   


situazione livelli:

Colore (oscurato)
Maschera
Mascherina
Cromo
Metallo
Sfoco
pattern
Sfondo pattern
Sfondo
 
14
    La parte a mano libera.


Ho creato 4 livelli, chiamandoli
scia1 - scia2 - scia3 - scia4.
Li ho sistemati al di sopra del livello
Mascherina.
Utilizzando pennelli di varia grandezza e con valori medi di opacità e flusso ho disegnato delle forme orizzontali, irregolari sia di forma che di intensità.
Ho usato colori dal giallo al marrone che ora vi mostro.
(Non è che non voglia essere preciso, è che non mi sono segnato una cippa e non mi ricordo, ma non è preoccupante, anzi: più la cosa si sviluppa in modo casuale, meglio è.
   
   


situazione livelli:


Sfoco copia (osc)
Metallo
Sfoco
Sfondo pattern
Sfondo
 
   
Questo è il livello scia2. Un giallo chiaro.
   
   

   
   
Per il livello scia3 devo aver usato due toni di giallo-arancio, ma modificando il metodo da normale in dissolvi.
   
   

   
   
Per il livello scia4 il colore è un arancio carico, ma il metodo di fusione è Colore brucia.
   
   


situazione livelli:

Colore (oscurato)
Maschera
Mascherina
scia1
scia2
scia3
scia4
Ruggine
Metallo
Sfoco
pattern
Sfondo pattern

Sfondo
 
15
   

Finito. Si passa su ImageReady per muovere un po' il materiale.
Io ho pensato di far scorrere chi in orizzontale chi in verticale i 4 livelli scia, senza cercare particolari agganci per il loop, confidando che nella confusione di movimenti da direzioni diverse non si notassero sgradevoli sganci.
Se la terminologia che ho usato vi pare ostica vuol dire che buona parte delle guide del sito ve le siete perse, accidenti.
Ripasso.
Loop: moto perpetuo, ciclo infinito, sequenza di fotogrammi ripetibili ad libitum in quanto l'ultimo della sequenza si raccorda col primo della stessa. Ho detto si raccorda, non che è uguale. Se fosse uguale andrebbe rimosso per evitare uno stop nel movimento. Un loop minimo è composto da 2 fotogrammi.
Aggancio: due fotogrammi che apparentemente sono consecutivi, anche se il primo è l'ultimo del ciclo e l'ultimo è il primo.
Sgancio: interruzione brusca della fluidità di un movimento. Da non confondere con lo stacco. Anch'esso è una interruzione, ma voluta.
Quindi se vi capitano sganci chiamateli stacchi e nessuno potrà obiettare.

Riprendo dopo l'interruzione:
nel primo fotogramma sistemo i 4 livelli scia al blocchi di partenza, chi in centro schermo, chi un po' fuori a destra o a sinistra, chi un po' in alto o in basso.

Nel secondo fotogramma sposto ciascun livello scia lungo la direzione teorica del loro movimento.

Seleziono entrambi i fotogrammi definisco un tweening di un certo numero di fotogrammi e lo eseguo.

In cima alla pagina c'è un esempio.
Che però, tanto per fare il furbo, ho realizzato col doppio delle scie, duplicandole tutte.
E con un bello sgancio, che non ho assolutamente voglia di sistemare.


ImageReady
 

fine della guida

 
 


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