Mare, ombrellone e sdraio.

Qualche tempo fa ho inserito un'animazione che contavo di tradurre in guida al più presto.
Infatti son passati un sei mesi, ma ora la guida l'ho sistemata sul sito.
Non è gran che come guida, però ho piazzato un tre PSD da scaricare, col lavoro pressochè fatto.

La trovate a questo indirizzo: mare mare mare

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

Finchè la barca va

In questa guida viene mostrato come produrre una serie di files PSD che costituiscono le mappe di spostamento per il filtro DISTORSIONE > MUOVI di Photoshop.
Al termine della guida le mappe vengono applicate, per ottenere l'effetto che si vede quando viene gettato un sasso in uno stagno: le onde concentriche che si allargano lentamente, increspando il pelo dell'acqua.

Nella guida si mescola l'effetto di animazione circolare che si vede nell'immagine qui sopra con un effetto di onda da risacca, su un tratto di mare nel quale si specchia una New York realizzata totalmente con strumenti di grafica vettoriale, e poi importata in Photoshop al solo scopo di ottenerne un'animazione.

Il link è questo, e la guida non è ampollosa come questa presentazione qui:
Finchè la barca va

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

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

Pesce d'aprile

Ho cercato un pesce per la ricorrenza, ed il primo che m'è venuto sottomano, ops sott'acqua, è questo qui.
Sarà un paio d'anni che se ne sta lì buono buono a passare davanti all'oblo facendo le sue brave bollicine.
Dispone anche di una guida ad hoc per fare il mare e tutto il resto dell'ambaradan.
Solo che è una guida lunghetta, e non tratta solo di pesci ma di ben altro.
Io ci metto il riferimento sulla pagina (che sono un sei o sette pagine di guida) nella quale il pesce è concluso, e quindi basta risalire la corrente, come i salmoni, che sono pesci pur'essi, no?
La pagina della guida si trova a questo indirizzo:
Pesce d'aprile

Effetto metallo

La scritta MET non tragga in inganno. La guida cui fa riferimento l'immagine è completa. Solo che dovendo scrivere METALLO  per esteso, l'immagine e l'animazione finali sarebbero state troppo piccole. Ho sacrificato parte del testo per lasciare maggior visibilità al disegno.
Per il resto, si tratta di creare l'effetto della riflessione dell'universo mondo su una superficie di metallo di colore neutro, diciamo un bell'acciaio.

Ora c'è tutta una teoria sulla distribuzione del colore riflesso da una superficie metallica neutra. Pare che la parte superiore, quella rivolta verso l'alto, rifletta l'azzurro del cielo e che la parte inferiore, quella rivolta a terra, rifletta l'ocra del terreno. E che la parte di mezzo, raccordando le due zone contrapposte, finisca con lo sfumare al nero centrale.
Il tutto con passaggi sfumati dolci o bruschi, a seconda dello stato d'animo del grafico, della disponibilità di gradazioni di colore e del tempo che uno ha per contarsela.

Messa così è abbastanza attraente, no?
La trovate a questo indirizzo: Effetto metallo

Uccelli di carta e clouds con catena

Qualche giorno fa ho inserito il link ad una guida per l'animazione di un uccello di carta, quasi un origami.
Poi ho proseguito con la guida e questo è il risultato finale.

Trattandosi di animazione priva di riferimenti realistici e non sapendo a che santo votarmi per esprimere un titolo appropriato, sono ricorso a quello banale, quello a muzzo per intenderci: fantasy.
Ma in realtà si tratta di una catena che sta sospesa su di un panorama improbabile costituito da uno spot (sole?) di luce azzurra e da una catena di nuvole (clouds? che c'entri col nome del sito?).

Chiarito, o forse oscurato,  il titolo, resta da spiegare come uno arrivi a far qualcosa senza averla pensata prima.
Mentre dò una sistemata alle pagine CGM mi ritrovo un vecchio disegno, scandito da una stampa molto ridotta e con un retino ingombrante, e mi punge vaghezza (la prossima volta uso: mi piglia l'uzzolo) di rabberciarla, di restaurarla, insomma di renderla presentabile. Solo che, una volta risistemata l'immagine (rifatta praticamente tutta), m'è pigliato l'uzzolo (visto che l'ho usato?) di animarla, muovendo tutti gli elementi del disegno; catena, orizzonte montuoso o nuvoloso - non si capisce - ed uccelli di carta che volano verso il nulla o a sciogliersi nel sole azzurro.

In questa guida è spiegato tutto il lavoro, dal disegno iniziale all'animazione.
La trovate a questo indirizzo: Uccelli di carta

Uccello di carta

C'è una guida un po' complicata sul sito, dalla quale ho estratto una parte che può vivere autonomamente, dalla qual cosa si ricava che in grafica ed in animazione, come in cucina, e dico cucina per non dire del maiale, non si butta via niente, del maiale ed in cucina, ma proprio nada de nada.
La parte estratta riguarda un volo di uccelli di carta, molto schematici, sia gli uccelli che il volo, volo che si sviluppa sopra un paesaggio che potrebbe rappresentare indifferentemente cumuli di nuvole blu, onde di un mare blu, profili di montagne o colline blu, insomma quel che più vi piace, purchè vi piaccia blu.

La guida più che altro, o meno che l'uno, spiega come fabbricare l'uccello di carta e come ricavarne nove fotogrammi per l'animazione del volo. Il paesaggio sottostante essendo di pura fantasia è sostituibile con qualunque elemento grafico che consenta lo scorrimento dello stesso dall'alto verso il basso, a simulare un movimento in soggettiva verso l'orizzonte, un volo in avanti, per dirla in modo semplice.

Chissà poi perchè a tentar di spiegare le cose ci si incasina sempre di più.
E perchè poi uno si ostini a farlo.
Visto che basta veder l'immagine qui sopra.

La guida, prolissa quanto basta,  la trovate a questo indirizzo: Uccello di carta