nebbiaenuvole
guide animazione 2D Photoshop, ImageReady, Swish Max
 
bottone
___________________
 
bottone animato
   

Bottone - Un caso di ... diligenza

L'intenzione sarebbe di attaccarlo. Il bottone.
Dovevo fare un qualcosa di animato per comunicare che questo posto (sito) ha attaccato un blog per i commenti. Ed ho pensato, visto che i commenti in fondo sono due chiacchiere fra amici, che attaccarci un bottone fosse la cosa più ovvia. Poi però, in un posto che parla quasi solo di animazioni, mica potevo metterci un bottone statico. La cosa più semplice che mi è venuta in mente come animazione è stata quella di far scorrere la scritta. In orizzontale.
Una roba che ci si impiega il tempo di una sigaretta.

Ma ne è venuto fuori uno strano caso di "effetto diligenza".
Che è quell'effetto che, quando il John Wayne si scapicolla sul tetto della diligenza in fuga, per sparare alle Ombre rosse (*) , se uno ci fa caso, le ruote girano al contrario. Al contrario del senso di marcia.
La diligenza corre verso sinistra, le ruote sono in retromarcia.

C'è tutta una spiegazione del fenomeno, ha a che fare col numero di fotogrammi, colla persistenza dell'immagine sulla rètina, su altre cose che non mi ricordo, e che magari poi ci scrivo un esempio.

Ora Basta parlarne, lo vediamo insieme, se vi va ...

Ah, prima di cominciare: Il bottone ciascuno lo attacca del colore e forma che gli va, qui è solo un esempio.


1
   

Apro Photoshop e creo un file nuovo da 220x80 pixel, fondo non importa.

Creo un nuovo livello e lo coloro di #77DAFF
Poi gli definisco un po' di opzioni di fusione

Photoshop
 
   

fusione
fusione
   
2
    A sinistra si vede il risultato.

Passiamo a destra.
Duplico il livello.
Sistemo come foreground (colore di primo piano) il valore #77DAFF
Sistemo come background (colore di sfondo) il valore #0034F5
Poi uso: Filtro > rendering > Nuvole
Poi uso: Filtro > Artistico > Involucro plastica
Poi definisco le opzioni di fusione come: luminosità
Poi porto l'opacità del livello al 70%

Questo per il fondo del bottone.
   
   

bottone
   
3
    A sinistra.
Con lo strumento testo scrivo la parola BOTTONE.
Io ho usato un Arial black, nero, grandezza 3,4 pt.

A destra.
Duplico il livello.
Ingrandisco il testo (8 pt, ma fateriferimento all'immagine)
Lo rendo opaco al 20%.
Lo sposto in orizzontale (Shift inserito per evitare che si muova anche sulla verticale) a sinistra, che si veda la NE soltanto.
Duplico quest'ultimo.
Lo sposto tutto a destra, che si veda BO.
Insomma, come nella figura.
   
   

bottone
   
4
    A sinistra.
Collego le due scritte grandi er isposto il tutto verso destra, tanto da leggere BOTT. Nella figura ho tolto via per un attimo il livello "plastificato" per vedere meglio.

A destra.
Il risultato, con tutti i livelli visibili.

   
   

bottone
   
5
    Apro il file (O semplicemente passo da Photoshop a ImageReady, ma a me non piace granchè, spesso mi dimentico di salvare, oppure salvo qualcosa di sbagliato)

Beh, il primo fotogramma è quello che vedo aprendo il file.
Duplico il fotogramma.
Seleziono unadelle due scritte grandi (sono collegate, neh?) e trascino verso sinistra (SFITH premuto) fino a leggere di nuovo BOTT, ma sulla seconda delle due scritte, quella che era fuori campo a destra.

Per verificare che le due scritte coincidano basta cliccare sui due fotogrammi e controllare.

Imposto un tweening di 10 fotogrammi.
Lo eseguo e poi elimino l'ultimo fotogramma (è identico al primo)
Image Ready
 
   

bottone animato
   
   
    Ora ditemi voi se non vi sembra che le scritte facciano un po' la fisarmonica?
Prima vanno a sinistra, poi sembra che ci ripensino e si mettano a correre destra.

Strano, vero?
Ci sarà una morale in tutto ciò?
Da preoccuparsi o da farlo notare a qualche partito?
   
 

 

(*)
Ombre Rosse - John Ford, 1939 ...

http://it.wikipedia.org/wiki/Ombre_rosse

 

   

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