venerdì 29 giugno 2012

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


giovedì 28 giugno 2012

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

mercoledì 27 giugno 2012

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

giovedì 21 giugno 2012

Effetto ferro













Succede che nell'applicare una guida altrui si arrivi ad un punto di non ritorno.
Che sarebbe quel momento tragico nel quale, dopo aver smanettato con Photoshop e con l'inglese, ti ritrovi proprio sul finire, proprio quando il lavoro dovrebbe assumere la fisionomia desiderata, insomma nel momento cruciale ti ritrovi con in mano una guida che suggerisce di fare un qualcosa che non funziona.
E quel momento che, oltre a farti sentire sgradevolmente tonto, visto che i commenti alla guida sono tutti di uno strepitoso lecca-lecca, e tu sei l'unico che ha cuccato la caramella al fiele, oltre a ciò, dicevo, ti convincono a lasciar perdere tutto. E a non scrivere più guide forever.
Poi passa.
E ti capita di vedere un'immagine nel corso di una ricerca, non una guida, solo un'immagine. Un testo con un bell'effetto metallico, come ferro o nichel o alluminio o acciaio.
Un bel lucore di metallo, insomma.
E ti vien voglia di rifarlo e di scriverci come lo hai fatto e magari di aggiungere un'animazioncella isi isi, facile facile.
Et voilà, ecco la guida. Non qui, al solito posto, seguendo il link:
Effetto ferro