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

Effetto profilo (outline)

Il problema giocando con i testi e che non so mai come classificare le boiate che mi vengono giù, se roba grafica o effetti o che ne so.
Questa prova d'autore (nel senso che un autore c'è, non che sia roba pregevole) ha un solo pregio: la prima versione è veloce e semplice da realizzare mentre è poco meno veloce e semplice la seconda.
Parto dalla prima poichè è la base per realizzare la seconda e non sto a far perdere altro tempo in chiacchiere utili solo ai robot di gugol.

 
1
   

Fornisco le dimensioni dell'immagine e del font poichè, basandosi tutto sul profilo, conta il numero di pixel di spessore. Però conta solo se si vuol rifare esattamente quello che segue: liberissimi di modificasre lo spessore dell'outline.

Aperto Photoshop ho creato un'immagine di 800x600 px, fondo nero.

Per il testo ho usato un font Cooper, black, colore bianco con un corpo di 144,07 pt.


Bon. Scrivo OUTLINE.
Il livello verrà battezzato OUTLINE da Photoshop.
Lo vedete qui sotto (l'immagine è ridotta in verticale per risparmiare carta, non fateci caso).

Photoshop
   


 
2
    Seleziono la trasparenza di livello del livello OUTLINE
Riduco la selezione di 9 pixel (selezione > Modifica > Contrai)
 
   

 
3
   
Creo un nuovo livello, che chiamo
2
E riempio l'area selezionata di nero
 
   


situazione
livelli:

2
OUTLINE
Sfondo
4
    Seleziono la trasparenza di livello del livello OUTLINE
Riduco la selezione di 7 pixel (selezione > Modifica > Contrai)


Creo un nuovo livello, che chiamo 3
E riempio l'area selezionata di nero
 
   


situazione
livelli:

3
2
OUTLINE
Sfondo
5
    Ripeto le stesse operazioni riducendo gradualmente la selezione, ovvero:
1 - selezionare la trasparenza di livello del livello
OUTLINE
2 - ridurre la selezione gradualmente con i valori indicati nell'elenco qui sotto
3 - creare un nuovo livello, rinominandolo in progressione
4 - riempire la selezione di bianco.

Questi sono i valori per ciascun livello successivo:
Livello 4 - Selezione ridotta di 6 pixel
Livello 5 - Selezione ridotta di 5 pixel
Livello 6 - Selezione ridotta di 4 pixel
Livello 7 - Selezione ridotta di 3 pixel
Livello 8 - Selezione ridotta di 2 pixel
Livello 9 - Selezione ridotta di 1 pixel
 
   


situazione
livelli:

9
8
7
6
5
4
3
2
OUTLINE
Sfondo
6
    E basterebbe così, ma mi va di inserire altri due livelli, anzi 3.
Duplico il livello
OUTLINE, lo rinomino OUTLINE nero, modifico il colore della scritta in nero, trascino il livello in cima alla lista dei livelli.

Seleziono la trasparenza di livello del livello OUTLINE nero
Aumento la selezione di 2 pixel (selezione > Modifica > Espandi)
 
   

 
7
   
Creo un nuovo livello, al di sotto del livello OUTLINE nero e lo chiamo 10
poi riempio l'area selezionata di bianco.
situazione
livelli:
   


OUTLINE nero
10
9
8
7
6
5
4
3
2
OUTLINE
Sfondo
8
    Ripeto le stesse operazioni:
1 - seleziono la trasparenza di livello del livello
OUTLINE nero
2 - aumento la selezione di 3 pixel
3 - creo un nuovo livello, sopra al livello 10 e lo rinominano 11
4 - riempio la selezione di bianco.
 
   

 
9
    Passo ad ImageReady.
Per chi non avesse letto in precedenza le robe di questo posto (le pagine di questo sito) chiarisco: le guide sono riferite a Photoshop 7 che prevede l'uso di ImageReady per l'animazione, a differenza delle versioni successive (CS etc) che presentano il pannello di animazione inserito in Photoshop.
Fine chiarimento.

Si tratta semplicemente di rendere visibili, un fotogramma alla volta:

prima il solo livello OUTLINE
poi il livello OUTLINE e, uno alla volta, i livelli da
2 a 9.

Poi il livello OUTLINE nero ed il livello
10
Infine il livello OUTLINE nero ed il livello 11


Se non vi piace il "blink" iniziale buttate via il primo fotogramma ed avrete quel che si vede nella seconda animazione, qui sotto:
ImageReady
   


 
10
    Ora faccio un esperimento.
Torno su Photoshop (si fa prima, anche se la stessa cosa si può fare direttamente con ImageReady).
Leggo un nuovo file, un'immagine, la potete copiare ad libitum, si tratta di una foto di un fior di gardenia che staziona sul mio balcone, quindi roba scopirait.

Seleziono l'immagine (seleziona > tutto), copio (CTRL + C), mi sistemo sul livello sfondo della nostra animazione ed incollo (CTRL + V).
Praticamente infilo un nuovo sfondo all'animazione, al posto del fondo nero.
Photoshop
   


situazione
livelli:

OUTLINE nero
11
10
9
8
7
6
5
4
3
2
OUTLINE
gardenia
Sfondo
11
    Poi torno su ImageReady, sostituendo lo sfondo nero con l'immagine appena inserita
e ... e mi accorgo di un particolare ...

Bello, ma l'interno del profilo (dell'outline) è nero.
Già, sto usando i livelli 2, 3, etc come mascherine nera per nascondere il bianco pieno del livello
OUTLINE facendolo sembrare un bordo.
Forse dovrei, dovremmo bucare il livello OUTLINE per far apparire il nuovo sfondo, così l'outline sarebbe tale e non una roba fasulla.
Lo famo? (come dicono a Roma?).
Dai, lo famo,
ImageReady
   

 
12
     
Photoshop
   

Torno su Photoshop.
Si tratta, come detto sopra, di bucare la scritta bianca (livello OUTLINE) con l'ingombro dei vari livelli.

Un testo non è bucabile. Occorre rasterizzarlo.

Duplico il livello OUTLINE e lo rasterizzo.
Lo rinomino
1B, tanto per distinguerlo dagli altri livelli.
Lo duplico (
2B) che mi serve per dopo.
Ora descrivo le operazioni da ripetere per ogni livello (
2 - 3 - ... 9):

1- Seleziono la trasparenza di livello del livello 2
2 - Sul livello 1B cancello la selezione (tasto CANC).
3 - duplico il livello 2B (3B)

1- Seleziono la trasparenza di livello del livello 3
2 - Sul livello 2B cancello la selezione (tasto CANC).
3 - duplico il livello 3B (4B)

1- Seleziono la trasparenza di livello del livello 4
2 - Sul livello 3B cancello la selezione (tasto CANC).
3 - duplico il livello 4B (5B)

1- Seleziono la trasparenza di livello del livello 5
2 - Sul livello 4B cancello la selezione (tasto CANC).
3 - duplico il livello 5B (6B)

1- Seleziono la trasparenza di livello del livello 6
2 - Sul livello 5B cancello la selezione (tasto CANC).
3 - duplico il livello 6B (7B)

1- Seleziono la trasparenza di livello del livello 7
2 - Sul livello 6B cancello la selezione (tasto CANC).
3 - duplico il livello 7B (8B)

1- Seleziono la trasparenza di livello del livello 8
2 - Sul livello 7B cancello la selezione (tasto CANC).

1- Seleziono la trasparenza di livello del livello 9
2 - Sul livello 8B cancello la selezione (tasto CANC).

1 - duplico il livello 10 (10B)
2 - duplico il livello 11 (11B)
3- Seleziono la trasparenza di livello del livello OUTLINE nero
4 - Sul livello 10B cancello la selezione (tasto CANC).
5 - Sul livello 11B cancello la selezione (tasto CANC).





situazione
livelli:

OUTLINE nero
11B
11
10B
10
9
8
7
6
5
4
3
2
8B
7B
6B
5B
4B
3B
2B
1B
OUTLINE
gardenia
Sfondo
   

 
12
    Torno per l'ultima voltqa su ImageReady.

Si tratta di rendere visibili i livelli 1B, 2B, ... 8B al posto dei livelli 2, 3 ... 9.

prima il solo livello OUTLINE
poi il livello 1B e, uno alla volta, i livelli da 2B a 11B.


Anche in questo caso se non vi piace il "blink" iniziale buttate via il primo fotogramma
Qui sotto l'animazione in formato gif, quella in cima alla pagina è un flash (swf).
ImageReady
   

 
13
    E' tutto.
Prossima guida altro outline, ma più incasinato.

Scordavo: il psd e l'immagine di sfondo si possono scaricare con il bottoncino dorato qui sotto a destra (ma anche in alto a destra, in cima alla pagina).
 
   

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