Quattrossa's Planet » Grafica e Design » Tutorial: glitter effetti su testo 
Sito personale Guida in italiano Typo3 e consigli SEO
Effetto glitter animato su testo
Effetto glitter animato su sfondo nero
testo colorato animazione
Effetto glitter su sfondo bordeux
Effetto glitter con animazione stelline
Effetto glitter con animazione stelline
Animazione glitter effetto colorato schintillante
Effetto glitter su cuori

Tutoriale: creare effetti glitter scintillanti personalizzati su testi e immagini senza uso di plugin

Online si trovano diversi generatori di effetti glitter, i cosidetti effetti scintillanti con i quali si può dare un tocco di personalità e vivacità sia alle scritte sia alle fotografie o cartoline virtuali. Queste scritte o immagini animate, vengono spesso ricercate dagli utenti per essere usate nelle firme dei Forum, o come piccole immagini da usare poi come avatar accanto al proprio nome. Ma forse vi è anche già capitato che un'amico o amica, vi abbiano spedito delle cartoline virtuali con questi tipi di effetti grafici, magari per ringraziarvi della loro amicizia, o magari per farvi gli auguri di una festa particolare.
Specialmente sotto Natale e Pasqua, si trovano in rete centinaia di immagini con gli effetti glitter o animazioni colorate. Vi siete mai chiesti come si possono creare queste immagini senza l'aiuto di un plugin o di un sito in rete che le genera automaticamente? Avete mai avuto il desiderio di esser capaci anche voi di creare scritte o immagini glitter con effetti scintillanti o colorati personalizzate? Volete mandare un messaggio grafico e personale ad un amico? O forse volete inserire le vostre creazioni glitter nei social media quali Facebook? O forse ancora vorrete rendere colorato ed animato un vostro Blog?
In questo mio tutoriale vi introduco alla creazione delle immagini e scritte glitter usando il programma di Photoshop. La versione che uso io è Photoshop CS5 ma anche usando le versioni dal Photoshop CS è possibile creare questi effetti o scritte glitterate, scintillanti.

Io uso Photohop in liingua tedesca. Gli screenshot sono in questa lingua. Potete cliccarci sopra e ingrandirli. Cercherò di spiegarvi al meglio nel testo usando i termini di Photoshop in italiano ed inglese.

Come creare effetti grafici glitter e scintillanti su un testo a piacere

glitter effetti scintillanti su testo
Inserire un gradient colore metallo

Creiamo in Photoshop un nuovo file di grandezza 100px x 100px impostando lo sfondo in: trasparente.
Clicchiamo sull'icona del Strumento Sfumatura (gradient tool) e scegliamo una sfumatura a piacere, in questo caso ho deciso per un colore dorato. Interessante è in questo caso la scelta di un gradient color metallo. Le sfumature con effetto metallo di Photoshop li trovate nel menu della paletta dell'editore di sfumature sotto la parola "metallo".

effetti scintillanti glitter su testo
Interpolare la luminosità

Applichiamo la sfumatura color oro sull'immagine con sfondo trasparente.
Dal menu di navigazione in alto andiamo nella sezione filtri e scegliamo:
Filtri -> Disturbo -> Intermedio (median - interpolare luminosità).
Completiamo inserendo 25px nel campo libero e clicchiamo su ok chiudendo la finestra.

effetti grafici scintillanti
Visibilità del Layer

Ora duplichiamo il livello (Layer) per 2 volte, cosichè da aver 3 livelli con la stessa immagine grafica. Nascondiamo i livelli 2 e 3 cliccando sull'occhio accanto all'icona (indicates layer visibility).

glitter photoshop add noise
Add noise all'immagie grafica

Clicchiamo sul primo Livello (Layer) rimasto visibile e applichiamo il filtro:
Filtro -> disturbo -> aggiungi disturbo (noise -> add noise)
Usiamo la seguente impostazione:

  • Quantità / Amount 15,0 %
  • Clicchiamo su sfocatura (Gaussian)
  • Scegliamo Monocromatico (Monochromatic, in questo modo avremo die glitter di un colore unico)

Clicchiamo ora su ok e chiudiamo la finestra.

glitter e grafiche scintillanti
Creare pattern

Ora dal menu in alto a sinistra scegliamo la voce:
Modifica -> Crea Pattern ( Edit -> define pattern )
e salviamo la nostra prima immagine glitter con il nome di:
glitter-1

Clicchiamo ora sull'icona dell'occhio del secondoLivello (layer) e rendiamo la nostra seconda immagine visibile . Torniamo a cliccare su:
Filtri -> disturbo -> aggiungi disturbo (Filtro -> noise-> add noise)
con queste impostazioni:

  • Quantità / Amount 15,5
  • Sfocatura (Gaussian)
  • Monocromatico (Monochromatic)

Ora salviamo la nostra seconda immagine glitter come muster eseguendo il procedimento effettuato prima:
Modifica -> crea pattern (Edit -> define pattern)
e chiamiamo la nostra seconda immagine glitter con il nome: glitter-2

Clicchiamo ora sulla nostra terza immagine, rendendola visibile, Torniamo a cliccare su
Filtri -> disturbo -> aggiungi disturbo (Filtro -> noise-> add noise)
e mettiamo queste impostazioni:

  • Quantità / Amount 16
  • Sfocatura (Gaussian)
  • Monocromatico (Monochromatic)

Salviamo anche la nostra terza immagine glitter come Patternr:
Modifica -> crea pattern (Edit -> define pattern)
e chiamiamo la nostra seconda immagine glitter con nome: glitter-3

Ora salvatevi l'immagine con i vostri 3 livelli come file di tipo .tiff o .psd. In questo modo, se in futuro volete cambiare i colori all'immagine glitter / scintillante, vi basta richiamare l'immagine salvata e colorarla a piacere. Per esempio usando sul Layer la saturazione / tonalità (Hue / Saturation) con la modalità di "colorize" cliccata. Queste immagini, una volta rese animate, possono anche essere usate per esempio come sfondi per il vostro sito personale o sfondi per le tabelle di html.

Creare l'effetto glitter su una scritta a piacere

glitter effetti colorati animazioni
Testo grassetto per glitter

Creiamo ora un nuovo file di grandezza 600px x 150 px con sfondo trasparente. Scriviamo il nostro testo usando principalmente una calligrafia con lettere spesse/grosse, come per esempio la parola:GLITTER

grafiche glitter animate scintillanti
Applicare all'immagine il patter

A questo punto, non applicate la modalità retinatura (rasterizen) sul testo! Non convertitelo, ma lasciate il testo come modalità scritta che in futuro potete cambiare a piacere. A seguito più informazioni.
Duplichiamo ora il livello del testo per 3 volte.

Clicchiamo ora sul primo livello di testo. Entriamo nella finestra dello stile del layer ( Layer style) e applichiamo la funzione: sovrapponi pattern (pattern overlay).
Scegliamo qui la nostra prima immagine creata con effetto glitter: glitter-1
A questo punto se volete potete scegliere anche altre opzioni, quali ombre, saturazione, bordi, ma ricordatevi che le stesse opzioni che aggiungerete su questo layer, dovranno poi essere riportate anche sugli altri 3 Layer di testo

Ora clicchiamo sul nostro secondo livello di testo, entriamo nel Layer style e anche qui scegliamo la funzione sovrapponi pattern (pattern overlay). Applichiamo qui la nostra seconda immagine glitter: glitter-2
Se avete applicato altre impostazioni nell'immagine precedente, ricordatevi di applicarle anche a questa immagine glitter.
Clicchiamo ora sul nostro terzo e ultimo liveelo di testo, andiamo nuovamente nel layer style e applichiamo anche qui il sovrapponi pattern (pattern overlay). Scegliamo qui la nostra terza immagine glitter: glitter-3
A questo punto, per sicurezza salvatevi il file, ma non chiudetelo :)

Ora due parole del perché non dovete applicare la modalità retinatura (rasterizen) sul testo.

Se in futuro desiderate crearvi altri testi animati / scintillanti con glitter, basta riaprire questo file salvato in precedenza e modificare il testo a piacere. Per far ciò basta cliccare sull'icona del testo da cambiare (cliccare due volte sulla T) , Fare attenzione a non spostare i testi; tutti e tre i livelli devono avere le stesse posizioni e le stesse opzioni. Unica differenza è l'immagine glitter apllicata. Vi basterà poi animarlo nella finestra dell'animazion.

Animazione di un testo colorato con effetto glitter / scintillante

Aprite la finestra delle animazioni dal menu in alto sotto window / finestra.
In caso usate una versione di Photoshop dove non vi è la finestra delle animazioni, dovrete usare il programma di Image ready. Cliccate in Photoshop sull'icona in basso nella paletta a sinistra, oppure usate la combinazione dei tasti: Strg+Shift+M

Nella finestra delle animazioni, vediamo ora il livello dell'immagine creata. Se volete avere uno sfondo trasparente, saltate direttamente alla sistemazione della velocità dell'animazione descritta più in basso.
Inseriamo innanzitutto uno sfondo di colore scuro in un nuvo livello e sistemiamolo sotto gli altri layer. In questo caso ho scelto il nero.

ora cliccate in alto a destra nel menu della finestra delle animazioni e scegliete l'opzione di creare le frames tramite i layer. Vi verranno inseriti nella finestra di animazione le vostre 3 grafiche inclusivo il layer di sfondo con colore nero. Cliccate con il destro sulla frame dello sfondo nero e cancellate l'immagine dello sfondo nella finestra delle animazioni.
In questo modo vi rimangono 3 frame costituite dalle vostre 3 immagini di testo con glitter. Sistemiamo ora l'animazione cosichè da avere per ogni grafica, lo sfondo nero. Cliccate sulla prima frame, andate poi nella finestra dei livelli e rendete visibili solamente il livello di sfondo e il primo testo.

Ora cliccate nella finestra dell'animazione sulla seconda immagine, andate nuovamente nella finestra dei livelli, nascondete il primo testo schiacciando sull'icona dell'occhio e attivate il secondo testo insieme allo sfondo nero.

Ora cliccate sulla terza immagine nella finestra di animazione, tornate nuovamente nella finestra dei layer e rendete invisibile il secondo testo.
Attivate il terzo testo insieme allo sfondo nero. Qui sotto riporto un immagine cosi da vedere le singole visibilità dei layer ogni volta che cliccate su un'immagine nella finestra dell'animazione.

Animazione della grafica Glitter
Animazione della grafica Glitter

Ora non resta che sistemare la velocità dell'animazione.
Cliccate sotto l'icona e definite come velocità 0,1 secondi e scegliete sulla sinistra l'opzione illimitata / tempo indeterminato, cosichè da fare animare la grafica all'infinito.
Ora potete salvarvi l'immagine glitter / scintillante per il web, usando la combinazione di tasti: strg + shift+alt+s oppure dal menu
File -> salva per il web. Scegliete qui la modalità .GIF e salvate la vostra grafica.
Ora la vostra immagine Glitter con animazione è pronta per l'uso.

Tipps
Una volta che avete preso la mano nel creare scritte glitter animate, con sfondi colorati o su sfondi trasparenti, potete lasciare libera la vostra fantasia! Potete scegliere per ogni layer di testo un'altra impostazione, potete cambiare colori, inserire diversi gradient, aggiungere bordi e molto altro. Vi stupirete degli effetti animati che possono esser creati. Nel mio prossimo tutoriale, spiegherò come far uso dell'animazione glitter sopra immagini, fotografie e cartoline virtuali, cosi come creare stelline e renderle animate. Un esempio? eccovi un'immagine di stelle animate:

effetto animato stelle
Stelle e ancora stelle
effetto glitter stelline
Borbala una nostra gettina

Commenti

scrivi commento


To top

  Quattrossa's Planet » Grafica e Design » Tutorial: glitter effetti su testo