Animazione testi - Roba da banner

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.


1
		Se mi sono spiegato come si deve, dovreste essere tornati con un PSD con due soli livelli: il fondo bianco ed il livello onde che, a muoverlo in orizzontale pare un rotolo di una certa carta, che non finisce mai. Nella figura la parte più scura è la parte che non si vede, o meglio la si vede facendo scorrere il livello da sinistra verso destra.	Photoshop

2
	Frame 1	Ora c'è solo da pensare a quanti fotogrammi vogliamo dar vita. Io ho fatto così: Il livello onde lo porto a filo destro (voglio muoverlo verso destra, quindi mi serve tutto il resto (la parte che nn si vede) a sinistra. Duplico il frame.	Image Ready

3
	Frame 2	Sposto il livello onde verso destra, fino ad ottenere il registro col primo frame. Il registro significa la coincidenza del disegno, non quello della prof. Per controllare mi limito a guardare uno dopo l'altro i due frames: se niente si muove, ci sono, a registro. (Qui l'immagine è superflua, i due frames sono identici, ma ormai l'avevo preparata)

4
	Tweening	Seleziono i due frames (clicco sul primo e, tenendo premuto il tasto Ctrl o quello delle maiuscole, clicco sul secondo) Cliccando e tenendo premuto sul triangolino in alto a destra del pannello animazione seleziono, sul menù a comparsa, l'opzione tweening. Sul pannello uso i seguenti parametri: Fotogrammi da aggiungere: 10 Livelli: tutti i livelli Parametri: flag (clic) su tutti i parametri. Quindi adesso ho 1 + 10 + 1 fotogrammi. Dove il primo e l'utimo sono identici. Ergo, butto via l'ultimo. Il risultato è qui sotto

5
		Ah, la scritta? Speravo ve ne foste dimenticati. Ok. Torniamo su Photoshop. Clic sullo strumento carattere, scelgo un font a muzzo (non mi chiedete quale, non me lo ricordo) scelgo un colore verde colline verdi (cfr. MarcellaBlla, ma quello sono montagne) e scrivo ONDA. Lo sistemo sul bordo destro (ma voi dove vi pare, solo questione di gusti) come nella figura	Photoshop

6
		Sposto il livello al di sotto del livello onde

7
		E scopro che qualcosa non va. Le onde sono su un livello bucato (nel senso che tutto quello che non è coperto da colore è trasparente) e quindi si vede la scritta fra un'onda e l'altra. Mi occorre una maschera. Cioè un qualcosa di bianco che segua l'onda e mascheri la parte di scritta sottostante. E questo non sarebbe un problema se non fosse che il resto delll'onda non la si vede, è fuori schermo. Come fare? Duplico il livello onde (lo chiamo bianco) Menù > Immagine > regola > Tonalità e saturazione. Sul pannello porto: la saturazione a -100 (tutto a sinistra) la luminosità a +100 (tutto a destra) E le onde diventano bianche. Porto il livello bianco sotto al livello onde, in modo che stia sopra alla scritta. Lo sposto in alto, fino a mascherare un poco di scritta:

8
		Lo duplico e lo sposto in basso, per coprire la parte centrale fra le due onde blu:

9
		In questo modo ho la maschera di colore bianco che è identica alle onde blu, ed è altrettanto lunga, nel senso che c'è anche la parte che non si vede, quella a sinistra. Basta che colleghiate onde e i due livelli di bianco e li facciate scorrere a destra per rendervene conto. Ah, se lo fate, poi date undo, ok? Collego ed unisco i livelli onde, bianco e bianco copia. Il tutto, se ho selezionato per primo il livello onde, si chiamerà onde di nuovo. Altrimenti lo rinomino in quel modo. C'è il problemino della parte di scritta sotto alle onde che si vede ancora. Creo un livello sopra alla scritta (e sotto a onde), traccio col selettore rettangolare un rettangolo che sia abbastanza alto, ma non troppo, considerando che l'onda cammina, da mascherare per benino:

10
		e lo riempio di bianco:

11
		Naturalmente volete che la scritta si muova a fisarmonica, vero? (ma come faccio ad essere cosi' perspicace? boh?) Dai, diamoci da fare. Duplico il livello del testo e lo riduco in orizzontale: Ctrl + T, sposto col mouse da sinistra a destra, agendo sul quadratino centrale sinistro ...

12
		... fino al punto che mi pare giusto:

13
		Duplico l'ultimo testo e ripeto la riduzione, e così via. Ne faccio un po', tipo un sei e vi spiego perchè: nell'animazione ho in testa 11 fotogrammi (vedi sopra, 1-3). Nei primi diciamo sei la scritta si riduce, nei successivi si ringrandisce, quindi me ne bastano 6 di testi, saltando un passaggio nell'ingrandimento dal fotogramma 7 al fotogramma 11. Tutto chiaro? Se non è chiaro non è poi molto importante, tanto in animazione non si noterà l'eventuale stacco fra una riduzione e la successiva. Bon, con sto po' po' di livelli torniamo ad Image Ready e vediamo cosa fare.
14
	Frame 1	Faccio tutto quello che ho spiegato all'inizio, punti 1 - 3, tweening compreso, con una sola piccola differenza: Sui primi due frames ho reso invisibili tutti i livelli delle scritte. Seleziono il 1° frame rendo visibile la scritta più grande (la prima, quella non ridotta)	Image Ready

15
	Frame 2	Seleziono il 2° Frame (seleziono, non duplico, neh?) rendo visibile la seconda scritta (la prima riduzione)

16
	Frame 6	Seleziono il 3 ° Frame e poi via fino al 6° rendo visibili una alla volta le successive riduzioni della scritta. (qui sotto il 6° frame)

17
	Frame 7 - 11	Dal 7 ° Frame all'undicesimo rendo visibili una alla volta la scritta che ingrandisce, fino alla seconda (la prima è presente sul 1° frame, sarebbe un doppione) Ed ecco il risultato finale.

		Ok, non è granchè. Però ci siamo fatti il mazzo per un trucchetto che può servire in altre circostanze, no? Dateci di banner, amigos, che la vida l'è loca forte. La prox vediamo l'effetto lazo (la prox sarebbe un clic sulla doppia freccina, quella rivolta verso dx)


		Onda su onda (*) Altro esempio di banner, facile facile. Il disegno è un po' meno facile, ma trovate tutto lo spiegone se andate qui. Siete tornati? ok, si va: