fuoco su di un testo, o testo infuocato, come preferite

Sai come succede, che sei li seduto al pc con la voglia di combinar qualcosa che non sia il solito tentativo di farcela con FreeCell, che tanto lo sai già che non ce la fai, che lo sai che lo pigli sottogamba e lui ti frega, che fra l'altro hai una versione monca dell'undo, della retromarcia, del ripensamento, del rimorso, dell'aspetta scusa mi son sbagliato ... insomma te ne stai li e, come ti succede, che ti succede dai e dai, succede che ripensi alle cose che hai fatto, una roba tipo i bei tempi andati, e ti vien voglia di riguardar qualcosa.
Sai cosa succede quando riguardi qualcosa, oh se lo sai: succede che intanto ti pare tutto o troppo bello o troppo brutto, che se ti pare troppo bello di viene il terrore di non esser più in grado di far robe così; e se invece ti par brutto ti vien la frenesia di riprovarci, di migliorare, di arricchire, di implementare, di .. insomma, ti incasini quel tanto da farti star peggio.

Ecco, ti ho chiarito la situazione.
Che la guida del testo infuocato nasce da uno di quei momenti lì, dalla libido di riprovarci che-si-sa-mai.

Per cui ora beccati la guida all'effetto fuoco su di un testo, rivisitato (stavo per scrivere riscottato) e - forse - un pochetto migliorato.
Spero che ti piaccia: puoi anche sistemarlo nel caminetto per scaldarti il Natale ... come?  Non hai il caminetto? Ma tutti a me capitano?

La guida è suddivisa in tre parti, con tanto Photoshop ed un pizzico di ImageReady  e la trovi a questo indirizzo: fuoco su un testo 
Non farci caso se la prima pagina non ha animazione, è per via della suspence.
(C'è anche una versione video su You Tube)

BigBang - effetto prospettiva

L'altro giorno (mi tocca sempre dire l'altro giorno, riferendomi ad un giorno del passato più o meno prossimo, e mai una volta che mi capiti di dire l'altro giorno pensando al futuro, un qualcosa tipo il giorno che verrà, l'anno che verrà; forse queste accezioni sottengono ad una sorta di velleitaria rivalsa verso accidenti che la vita non manca di distribuire lungo il percorso fra un altro giorno a caso e quello successivo che, si spera, prima o poi verrà: forse si tratta solo di un fatto pratico, un elemento di credibilità: sarebbe pretendere un po' troppo sostenere che una guida, questa guida, è nata da un caso che accadrà fra un paio di giorni. Forse è solo questo. In compenso ho risolto alla grande le prime dodici righe dell'incipit, che a scriverlo non so mai da che parte iniziare)... l'altro giorno, stavo dicendo, mi han chiesto di realizzare una scritta un po' particolare per un piccolo jpg (che poi si è risolto in un png) a scopo didattico-didascalico.
Ed avendoci messo un 4 minuti 4, e non potendo lasciar intendere che mi fosse costata così poca fatica, che a farsi desiderare c'è solo da guadagnarci, ma questo non ditelo in giro, ho aspettato una decina di minuti prima della consegna e son rimasto guardare il risultato: una barba da non crederci, ma dopo i primi 5 passati in trance m'è venuta l'idea di riproporre il tutto come animazione, qualcosa tipo una fisarmonica.
Solo che se scrivevo fisarmonica l'ingombro in orizzontale sarebbe stato eccessivo per le dimensioni della paginette di questo posto (non so bene il motivo di essermi limitato orizzontalmente in cotal guisa - cotal guisa non è offensivo, sta per "in questo modo") quindi alla fine ho deciso per "bigbang".
Poi la cosa mi ha preso la mano e, dovendo in qualche modo giustificare graficamente l'affermazione primigèniìa, chi ho anche messo quella serie di outline (perimetro costituito da una linea) che si ingrandiscono e vengono verso lo spettatore, tanto per dar l'idea di un'esplosione. Abbastanza pacchiano da soddisfare le mie necessità di roba forte, almeno dopo i pasti.
Credo che come scuse anticipate o alibi non richiesti ce ne sia da vendere, quindi passerei alla guida.
Se non vi siete addormentati.


E la guida la trovate:
effetto prospettiva

effetto marmo

Continuo a spulciare quei vecchi CD.
Ho trovato un bell'effetto marmo verde (malachite) per una scritta marmorizzata. La rivista con CD allegato si chiamava PC TARGET.
Non è complicato, l'effetto, solo che richiede Alien Skin. Ed allora mi sono ingegnato a trovare soluzione che imiti l'effetto bevel (che sarebbe una specie di estrusione tondeggiante, con colpi di luce in ogni dove, una roba molto carina, insomma).
Ah, non sapete cosa sia l'estrusione? Orbene, fate così, per vederne l'effetto: mettete un sacchetto di plastica sul tavolo, poi prendetelo con le dita al centro (solo un lato del sacchetto) e sollevate delicatamente: quella è un'estrusione.
Altro esempio lo potete fare col soufflè.
Nel forno (non apritelo altrimenti si sgonfia) pian piano la pasta si solleva, aumenta di volume in altezza, si estrude, ecco.
Basta premesse.
Devo solo compiere un gesto cavalleresco nei confronti dei CD.
Ho provato ad andare sul sito, ma di quelle guide non ho trovato traccia.
Il materiale, almeno così spiegano i grafici-commentatori sulla pubblicazione originale, è free, libero da vincoli. Io ho rifatto tutto, ovviamente, però mi sento un pochino verme se non ne cito la fonte:
http://www.xenia.it/
Trovate tutto sulla guida:
effetto marmo

Lazo

Tempo fa ero in tilt; non capivo come si facesse a sovrapporre ad un fondo non unito quelle immagini scontornate, ma che sfumavano sul niente. Sapete, quel depliants con un bel panorama e con sopra una voiture, una macchina, messa magari di traverso, che si capiva che era un fotomontaggio.
Ma lo scontorno non era netto, sfumava. Nel trasparente.
So che non vi è chiaro, che neanche a me è chiaro.
Vi farei un esempio, ma sono sulla parte sbagliata del sito, il problema riguarda Photoshop, magari il ritocco, certamente non l'animazione.
Però qui vi parlo di testi, e visto che sono capatosta, i testi stanno qui, porcal'oca, che se sposto i testi altrove poi non li trovo più.
La soluzione, una perlomeno, era talmente semplice che solo perchè siamo in confidenza ve ne ho parlato.
E ne approfitto per un effetto niente male, che se non lo spiego mi sa che non ci si arriva facile a rifarlo.
Magari si, ma non in 5 minuti cinque, compresa la pausa siga (si, sto fumando, dopo le guide per il fumo mi sono rovinato).

La guida la trovate seguendo il link:
Effetto onda

Testo su ombra - un esempio di banner

Testo che si muove e l'ombra resta immobile
Mi spiego.
E' roba da banner.
I banner sono quelle piccole animazioni che trovate in giro per il web, tipo consigli per un clic.
E' tutta roba semplice, pochi livelli in photoshop e pochi fotogrammi in animazione. L'importante è che si vedano sui paginoni dei siti.
sono realizzati in un formato forse troppo grande, in realtà vanno poi scalati in misure più ridotte vuoi per il peso (peso = costo in termini di spazio) vuoi per lo spazio che non sempre ce n'è molto sui siti.
Fine dello spiegone sui banner.

Questo è un effettaccio molto semplice da realizzare. Trovate tutto sulla guida:
Testo su ombra

Effetto metallo arrugginito

Questa guida è un po' strana. Intanto il risultato non è come dovrebbe essere, poi è parecchio "incasinata" ed infine è probabilmente zeppa di errori.
Ma tant'è: una volta scritta e chi ha il coraggio di buttarla? Anticipo un po' di roba presa all'inizio della pagina:


... 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, che passando ti ha urtato la spalla, tipo Oh bello! Statti attento. Ne tantomeno uno sfottò 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 ...

Chiaro il tono ed il perchè sia una guida un po' strana?

comunque il link è questo: Effetto metallo arrugginito

Effetto metallo, versione grigio scuro.

I testi sono un po' come le ciliegie, uno tira l'altro. Che poi l'altro sia solo una variante dell'uno è un caso fortemente non casuale. E poi mi pareva pericoloso non mettere una guida per un bell'effettone metallico classico.
Anche semplice da realizzare: una maschera col buco del testo, il profilo bianco su fondo trasparente, una sfumatura bianca in diagonale che corre sullo schermo, mettere in forno per un dieci minuti e servire accompagnando il tutto con un bianco leggero freddo freddo, che in agosto fa caldo caldo.

La guida (niente vino, che per il vino dovete far da voi) la trovate a questo indirizzo: Effetto metallo 2

Ondasuonda

La guida è un misto fra l'animazione di un testo, nella fattispecie ONDASUONDA ed una riflessione, cioè di un riflesso, non condizionato, di una città a caso su uno specchio d'acqua a caso.

Era un qualcosa di lasciato appeso da un paio d'anni almeno, ed era ora di metterci mano per farne una guida, che dai e dai sono diventate tre guide, con alcune varianti sull'animazione del testo.
Mi piacerebbe dilungarmi ma sento che state fremendo dalla voglia di andare a vedere di cosa si tratta, e pertanto e per poco e per quel che vale vi dò il link

ONDASUONDA

Dropshadow

Dropshadow.

Che letteralmente credo significhi goccia di ombra.
Meno letteralmente è un'ombra disegnata in modo da dare l'idea che l'oggetto che la determina sia sollevato dal piano su cui l'ombra si posa.
Nell'esempio però mi sono rifatto ad un effettaccio molto usato nelle presentazioni per dar risalto ad un titolo. Naturalmente sto parlando di immagini statiche, mentre in animazione ci si può sbizzarrire con diversi movimenti, giocando o meno sul colore.
Nella guida ne propongo un paio, tanto per fornire qualche spunto.

 
Il link da seguire per la guida è:
Dropshadow

Rotazione

Testo che ruota.
Si riparla di assi, che non sono un'altro tipo di moneta,  e di rotazione in prospettiva.
Qui ruota una lettera soltanto, sull'asse delle Y (sulla verticale).
Nella guida ci sono due esempi, uno per  le lettere non simmetriche, come la B.
Una versione più complessa la si trova in Effetti. che non è in effetti, ma proprio Effetti, neh?
 
Il link da seguire per la guida è:
Rotazione

Clessidra

Testo come clessidra.
La tecnica per animare questo tipo di testi è pressochè la stessa.
Dovreste avere la pazienza di guardare la prima pagina di questa sezione, dove ci sino le indicazioni di interlinee sopra e sotto, interspazi, et similia.
Io lo so che anzichè scrivere ste bojate, tipo et similia, se poco poco riscrivo ogni tanto le mie parole-chiave (le keywords, per gli italiani) magari scalo anche la classifica di google, ma alla fine della fiera, e chissene.
Sarebbe troppa fatica, e magari perfino per nada.

Qui il problema, se è un problema, è di modulare (mioddio, mi piace quando mi vengono ste parole) la dimensione del testo in base ad una ipotetica clessidra che gli sta intorno.

Per fare il lavoretto, però, è meglio se disponiamo di una clessidra, o almeno di un profilo.
E la guida ne fornisce uno, fatto di corsa, alla bell'e meglio (o alla va là che va bene, secondo come vi gira).
 
Si parte, tenetevi stretti che .. tempus fugit (che sarebbe the time goes by, per gli italiani):
Clessidra

Posapiano

Testo che si posa, ovvero animazioni digitate.
Mi spiego.
Qui tutto il movimento viene fatto da tastiera, semplicemente utilizzando spazi e "a capo". Quello che si ottiene è un testo animato, nel senso che la scritta si muove lungo il percorso che avete deciso di realizzare.
Ora non avendo voglia di riscrivere tutta la guida vi scrivo l'antefatto. Che non ha niente a che fare con l'animazione, ma ...
Beh, qualche anno fa giochicchiavo coi banner e m'ero stufato di far testi che slittano da sinistra a destra o viceserva (si, viceserva, volutamente viceserva) o vanno su e giù, ed allora, scocciato, avevo dato un invio di troppo sulla tastiera ed il testo si era ... mosso.
Ora nel riscrivere i passaggi mi è venuto in mente matrix.
Il film, cioè non tutto, solo quella parte con quelle file di lettere/numeri che non ricordavo bene se scorrevano dall'alto in basso o si limitavano a cambiare, dando l'impressione di un movimento (Allora propendevo per il cambio, tipo conteggio alla rovescia, per intenderci.).

E m'è venuto in mente di realizzare quell'effetto, solo col cambio di numeri da un fotogramma all'altro. Insomma fare un'animazione da tastiera. Ma tanto per non sbagliarmi sono andato in giro per il ueb (che sarebbe il web) a cercare qualcosa su quella sequenza, per rinfrescarmi la memoria.
Ed ho trovato di tutto, davvero. Sia filmati che tutor per schermate fisse, animazioni cortine (si, di un tre quattro fotogrammi) ma fra tutto quello che ho trovato non ce n'era una con l'animazione del testo.
Cioè, si, ci sono codici per programmare lo schermo del piccì, ma niente di ... trasportabile, ecco.
E quei pochi che si piccano di animare col solo movimento dall'alto in basso, si, quello che mi aveva stufato anni fa, ci mettevano anche l'indicazione: NON COPIARE.
Ma quando mai, ma COPIATE, porca l'oca.

Solo che vedere tutta quella roba mi ha fregato. Ho cercato di rifare quella, non quella che avevo in testa io.
Ed allora sono nate tre versioni di matrix. Dell'effetto matrix, come lo si chiama.
Una con tutto che scorre, un'altra con tutto che scorre, ma non va mai via, ed una terza con tutto fermo lì, ma sembra che scorra.
Non vi dò il link delle pagine qui nel posto, le sto preparando e quando saranno finite mi sarò dimenticato di quello che scrivo ora, qui, ma un link lo troverete di sicuro magari su incip.it o sulla bussola o su Photo_Stop ... urca, ma quante pagine ho già fatto?

Tutto questo, in verità, era per dire che uno non sa mai se un'idea è la sua o di un altro, che magari hai visto senza tanto farci caso e poi ti viene in mente proprio come fosse tua, ecco.
Per questo il "ma COPIATE", accidenti, che tanto lo facciamo tutti, sapendolo o no.


La guida si sviluppa su 3 pagine, che sono poi tre versioni dell'animazione:
Testo che si posa

STUdente

Altro esempio di testi parlanti.

O dolenti.
O anche peggio, poichè questo è un esercizio di scempiaggine assoluta.
Non leggete la guida.
Ma se ci tenete il link è:
STUdente

Materasso

Quarto esempio di testi parlanti.

O dormienti.
Che parla parla, viene anche sonno, ed allora un bel materasso fa all'uopo.
Io ficco ogni tanto un termine desueto, sperando di far da contraltare all'inglisc che imperversa in ogni dove.
Che c'è poco da scherzare, ci stanno mangiando anche la lingua ed in cambio solo amburgher ed altri fud all'ingrosso come fossimo bestie all'ingrasso.
Stop con le riflessioni, che stancano, e passo ad una breve descrizione dell'ambaradan che si vede sopra.
Trattasi di un materasso, a molle, che per certi versi ricorda anche il mare, tanto che alla fine della guida ci trovate un paio di esempi con la scritta Onda-su-onda, anche come omaggio al Paolo Conte.

Il link è:
Materasso

RIMBalzo

Terzo esempio di testi parlanti.

Qui c'è poco da scherzare.
Ad alzare un rimba magari ci vuole la gru.
Dite che non è politically correct?
Embè, mica è un caffè che lo si corregge, dai.
(Politically correct è il coffi, il caffè dei parlamentari, se non lo sapevate).


Se l'incip.it non vi scoraggia, cercate di non perdere la trebisonda nel seguire un passo della guida, un passo a caso e non necessariamente quello falso:
Devo separare tra di loro le lettere R I M B A e conservare la scritta ALZO per altri scopi.
La tecnica veloce per separare le lettere l'ho già sperimentata più volte. 
Per prima cosa si rasterizza il testo. Poi si parte con due copie del testo da separare. 
Sulla prima si seleziona tutto tranne la prima lettera e si cancella il resto. Si inverte la selezione e, sulla copia, si cancella lasciando le altre lettere.
Di qui in poi, sempre uguale. Si parte dal testo con più lettere, lo si duplica, si lascia solo la prima lettera (che sarà poi la seconda, la terza, etc.), poi si inverte la selezione, si va sulla copia e si cancella la lettera or ora isolata ...

Sempre convinti di volerlo alzare? Il rimba?
E allora seguite il link:
Rimbalzo

Ping Pong

Secondo esempio di testi parlanti.
Giochiamo a ping pong.
La pallina cambia: una volta è la lettera O, l'altra la lettera I,  e la lettera sostituita si sistema a formare la scritta PING o la scritta PONG.
Una roba molto cervellotica..

La via per una partita a ping pong è quella indicata dal link:
Ping Pong

CACCIAvite

Primo esempio di testi parlanti.
Nel senso che gioco sul significato di un testo e si cerco di adattarci un'animazione.
Praticamente un calembour animato, un gioco di parole mosso, insomma.
Questo è un cacciavite, come testo e come funzione: il CACCIA è l'arnese, la vite è la vite, ovvìa.
C'è anche la versione con la vite non testuale, un po' più complicata da realizzare.

La via per la guida è quella indicata dal link:
CACCIAvite

testo in cornice

Altra guida, altro testo.
Sempre di corsa.
Ma questa volta corre lungo il perimetro del rettangolo su cui è costruita l'animazione.
L'ho chiamato cornice, che intanto è un richiamo al tipo di percorso e poi ha il vantaggio di quel cor in radice, che mi ri-cor-da tanto la cor-sa.
La guida si  trova cliccando sul link:
Cornice

Testo che corre

In queste guide ci sono le istruzioni per realizzare dei testi di corsa ... si, anche velocemente, ma nel senso che sono testi che corrono. Restando fermi.
Il senso di movimento lo dà l'ingrandimento del carattere.
Ci sono 8 esempi, tutti realizzati con lo stesso PSD di base.
Se ne possono fare almeno altri 8.000, ma non ne avevo voglia.
Come esempio ho usato il primo della serie, ma per vederli tutti in fila conviene guardare la guida,
che si trova seguendo il link:
Testi che corrono

Effetto sfocatura

Ne ho fatte tre versioni. Mi pareva il giusto modo di valorizzare un effetto la cui realizzazione ha di difficoltoso solo la lettura della guida che ho fornito.
Si tratta di un banner con su un effetto ricavato unicamente dall'ingombro del testo opportunamente ingrandito e gradualmente sfocato in rapporto alla dimensione dell'ingrandimento.
Un lavoretto molto isi, facile (francese), facile (italiano), facil (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", alla quale si

si arriva seguendo questo link:
Effetto sfocatura