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

Effetto sfocatura

Non so dove ho letto un trattatello sull'efficacia delle animazioni sul ueb, nel quale si dissertava sul rischio (in realtà il testo lasciava intendere che fosse una certezza più che una probabilità) che troppa roba in movimento fosse controproducente in quanto il navigatore scafato ormai non si sarebbe soffermato su presenze animate, anzi, confondendole o assimilandole a banner pubblicitari, le avrebbe inconsciamente rimosse.
Sosteneva inoltre che elementi non statici fossero di disturbo alla lettura del testo in quanto avrebbero costituito elemento di distrazione, e quindi il navigatore scafato, sempre lo stesso di prima, avrebbe velocemente abbandonato pagine troppo movimentate.

Probabilmente è vero, come dire che il troppo stroppia (mai capito perchè il troppo dovesse stroppiare e non stroppare, semmai toccherebbe al troppio stroppiare, sempre che il troppio esista e sappia cosa significa stroppiare).

Il primo pensiero è stato: povero iutiub.
Il secondo pensiero è stato: povero me.
Il terzo pensiero è stato: ciuffolate: io ho un sito di animazione, ed esibisco la mercanzia, ohibò. Come se per un negozio di scarpe fosse controproducente mostrarle in vetrina, o fosse consigliabile mostrarne al massimo un paio di paia (bello, paio di paia, dai).

Che cosa c'entri tutto ciò con l'animazione di un testo sfumato è cosa che trascende la mia capacità di comprensione dei percorsi nei quali la mia mente inconsciamente mente sapendo di mentine ... mmm ... credo di essere uscito nuovamente dal seminato.
Ed uno di questi giorni mi piacerà disquisire sui luoghi comuni e sul significato profondo delle problematiche che deve affrontare chiunque abbia avuto in sorte l'essere uscito dal seminato, sempre che non si tratti di un seme, che allora ...

Per ora direi bon e passerei alla guida.

 
1
   

E' un lavoretto molto isi, facile (francese), facile (italiano), fàcil (piemontese). Tanto che a metter su una guida un po' mi sono anche vergognato, ma poi mi sono detto: e metti che qualcuno non lo sappia fare, metti che un trucchetto come questo possa togliere d'impaccio che ne so chi.
E metti uno metti l'altro, ho messo anche questa guida bella magra, nel senso di "in linea".

Ho lavorato (si fa per dire) su un file da 400x200 pixel con il fondo di colore bianco.

Ho usato un font Century Gothic, colore rosso puro (#FF000C) corpo 500 pt.
Ma ciascuno può usare il font che crede nella dimensione che preferisce. Solo sul colore si dovrebbe seguire la guida, che altrimenti, se manco sul colore siamo d'accordo, tanto valeva che la guida la scrivessi, no?


Bon. Scrivo SFOCATURA.
Il livello verrà battezzato SFOCATURA da Photoshop.
Lo vedete qui sotto.

Photoshop
 
   

   
2
    Seleziono la trasparenza di livello del livello SFOCATURA
Aumento la selezione di 15 pixel:

Selezione > Modifica > Espandi

   
   

   
3
   
Creo un nuovo livello (lo chiamo
SFOCO 30) e riempio la selezione di rosso pieno (#FF000C).
Sistemo il livello al di sotto del livello
SFOCATURA.
   
   


situazione livelli:

SFOCATURA
SFOCO 30
Sfondo
 
4
    Sfoco il livello SFOCO 30

Filtro > Sfocatura > Controllo sfocatura
applicando un raggio di 30 pixel.

   
   

   
5
    Seleziono la trasparenza di livello del livello SFOCATURA
Aumento la selezione di 13 pixel:

Selezione > Modifica > Espandi
 
   

   
6
   
Sotto al livello SFOCATURA e sopra al livello SFOCO 30 creo un nuovo livello (lo chiamo
SFOCO 20) e riempio la selezione di rosso pieno (#FF000C).
   
   



situazione livelli:

SFOCATURA
SFOCO 20
SFOCO 30

Sfondo
 
7
    Sfoco il livello SFOCO 20

Filtro > Sfocatura > Controllo sfocatura
applicando un raggio di 20 pixel.
Che così si capisce il perchè del nome del livello.
   
   

   
8
    Ripeto le operazioni indicate dal punto 5 al punto 7, modificando i nomi dei nuovi livelli ed i valori di selezione e di sfocatura secondo la tabella seguente, nella quale le prime due righe contengono i valori dei due livelli già descritti:    
   

livello
aumento selezione gradi sfocatura
     
SFOCO 30 15 30
SFOCO 20 13 20
     
SFOCO 15
10 15
SFOCO 10
8 10
SFOCO 7
6 7
SFOCO 5 4 5
SFOCO 3 2 3
SFOCO 2 1 2

situazione livelli:

SFOCATURA
SFOCO 2
SFOCO 3
SFOCO 5
SFOCO 7
SFOCO 10
SFOCO 15
SFOCO 20
SFOCO 30

Sfondo
 
9
   
Duplico il livello SFOCATURA e lo chiamo BIANCO
Lo sistemo al di sopra di tutti i livelli.
Modifico il colore del testo in bianco.
   
   


situazione livelli:

BIANCO
SFOCATURA

SFOCO 2
SFOCO 3
SFOCO 5
SFOCO 7
SFOCO 10
SFOCO 15
SFOCO 20
SFOCO 30

Sfondo
 
10
    Come sempre in queste guide l'animazione in ImageReady non presenta alcuna difficoltà. Si tratta solo di rendere visibili alcuni livelli.
L'unica accortezza è di definire di 1.0 secondi il tempo di permanenza del fotogramma 9 (quello con il testo rosso da solo).
Ma anche questo particolare non è affatto obbligatorio, si tratta essenzialmente di gusti ... e de gustibus etc etc.
Anche per chi piglia il tram, ovviamente (*).

Qui sotto ci sono i 12 fotogrammi con la specifica dei livelli visibili e del grado di opacità degli stessi.
Image Ready
 
 

1


livelli visibili
opacità   livelli visibili opacità
BIANCO 100   BIANCO 100
SFOCO 30 80   SFOCO 20 90

2
 
 

3


livelli visibili
opacità   livelli visibili opacità
BIANCO 100   BIANCO 100
SFOCO 15 100   SFOCO 10 100

4
 
 

5


livelli visibili
opacità   livelli visibili opacità
BIANCO 100   BIANCO 100
SFOCO 7 100   SFOCO 5 100

6
 
 

7


livelli visibili
opacità   livelli visibili opacità
BIANCO 100   BIANCO 100
SFOCO 3 100   SFOCO 2 100

8
 
 

9


livelli visibili
opacità   livelli visibili opacità
SFOCATURA 100   BIANCO 100
100   SFOCO 3 100

10
 
 

11


livelli visibili
opacità   livelli visibili opacità
SFOCATURA 100   BIANCO 100
100   SFOCO 3 100

12
 
11
    Seguendo le indicazioni dovreste ottenere quel che si vede qui sotto:    
   

   
12
    Variante nera.

Con pochissime modifiche è possibile ottenere varianti: qui sono descritte quelle necessarie ad ottenere la variante col fondo nero, quella che si vede in cima alla pagina.


Duplico il livello SFOCATURA e lo chiamo NERO
Lo sistemo al di sopra di tutti i livelli.
Modifico il colore del testo in nero.

Coloro di nero lo
Sfondo.
In animazione sostituisco come livello visibile:
NERO al posto di BIANCO
BIANCO al posto di SFOCATURA.

Tutto il resto è invariato:
Photoshop
 
   


situazione livelli:

NERO
BIANCO
SFOCATURA

SFOCO 2
SFOCO 3
SFOCO 5
SFOCO 7
SFOCO 10
SFOCO 15
SFOCO 20
SFOCO 30

Sfondo
 
13
    Variante poco sfumata.

Si tratta di modificare i livelli sfocati, ciascuno nel modo seguente:

dopo la sfocatura, selezionare nuovamente la trasparenza di livello del livello
SFOCATURA, ed aumentare la selezione dello stesso numero di pixel usati per generare il livello sfocato:
SFOCO 30 > 30 pixel, etc.

Posizionarsi sul livello
SFOCO nn
Invertire la selezione
   
   

   
14
    Cancellare (tasto canc) la parte esterna, in eccesso.
queste operazioni non vanno eseguite per il livello
SFOCO 2
   
   

   
   
Nell'esempio qui sotto ho seguito la traccia della prima animazione, con le seguenti modifiche:

fotogramma 7: visibile solo il livello
SFOCO 2.
fotogramma 8: visibile solo il livello
SFOCATURA, con permanenza di 1,0 secondi.
fine col fotogramma 8.
   
   

   
 

 

 

   
    (*)
Odio spiegarle, ma m'è successo di rientrare su questa pagina il giorno dopo per controllare che non ci fossero troppi errori di battitura, e mi sono accorto di non capire la battuta.
Quindi la spiego proprio il minimo indispensabile:
de gusti ... bus
Vedete voi dove mettere il tram. ^^
   
         

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