Gif animate, glitter ed emoticons con GIMP

Giusto per chiarire sia le immagini glitter che le emoticon animate di msn non sono altro che gif animate, questo tutorial spiega un po tutto.
Questo tutorial si rivolge a utenti inesperti, se gia sapete cosa sono i layer e come funzionano le gif animate vi basti sapere che per crearli basta fare un fotogramma per layer e salvare come gif, vi verrà chiesto se salvare come animazione, semplice no?

Consiglio di seguire prima questo tutorial, se gia avete un po di esperienza con GIMP e state cercando un modo per creare glitter potete passare direttamente al tutorial sulle immagini glitter con gimp.

1 Star2 Stars3 Stars4 Stars5 Stars (Nessun voto)
Loading ... Loading ...

Glitter hack con PNG

Quando si vuole creare un’immagine glitter o una gif animata in generale ci si trova spesso a dover scendere a compromessi per il limiti che il formato gif impone, ma c’è un’alternativa, utilizzare i CSS e le immagini PNG.
Limiti del formato GIF e differenze con il formato PNG.
Il formato GIF ha una profondità di colore a 8 bit e canale alpha ad 1 bit, significa che le immagini gif supportano un massimo 256 colori e non permettono di fare sfumature sulla trasparenza.
Il fomato PNG di contro non permette la creazione di animazioni.
Un’ immagine png permette di rappresentare milioni di sfumature di colore. La stessa immagine salvata in formato GIF perde di qualità a causa dei limiti del formato.
Trasparenza tra un’immagine GIF e un’immagine PNG a confronto.

ATTENZIONE!
Se state utilizzando Internet Explorer 6 o inferiore non potete visualizzare la trasparenza delle immagini png, nonostante il formato esista dal ’95 IE lo supporta solo dalla versione 7.

Lo sfondo a quadretti rappresenta la trasparenza, la differenza tra i due formati è evidente

Prova con uno sfondo diverso:

Immagine GIF, non è possibile utilizzare sfumature nella trasparenza.

Immagine PNG, si possono utilizzare 256 livelli di trasparenza nelle immagini.

Continue reading

1 Star2 Stars3 Stars4 Stars5 Stars (Nessun voto)
Loading ... Loading ...

Glitterare e decorare immagini con GIMP

Le immagini glitter sono in genere delle animazioni in formato gif utilizzate per decorare delle foto con brillantini e simili.
Poco cambia dal punto di vista tecnico se invece dei brillantini si vogliono aggiungere fiocchi di neve, foglie che cadono, fiamme o qualsiasi cosa vi suggerisca la vostra fantasia.

Se non avete le idee molto chiare su cosa siano le gif animate, i livelli e GIMP vi consiglio di seguire prima questo tutorial introduttivo, i passaggi sono comunque molto semplici.
Se gia avete un po di pratica con gli editor di immagini e i codici HTML potreste trovare interessante questo tutorial per forzare il limite di 8 bit per i colori delle gif utilizzando immagini png.

Con le tecniche che state per apprendere potete creare diversi tipi di decorazioni animate ma se non avete tempo potete raggiungere comunque degli ottimi risultati utilizzando altri strumenti.

Plugins:
Sparkles ad esempio è un plugin prodotto da Xero per photoshop che potete utilizzare su GIMP grazie alle librerie PSPI.

Editor online:
Il problema di questo tipo di editor è che spesso aggiungono il loro logo all’immagine e non è possibile gestire immagini di grandi dimensioni, avere un editor con funzioni preconfigurate e standard rende la cosa molto più semplice a discapito della libertà di sprigionare la propria creatività. Eccone alcuni:
www.glitterfy.com
blingee.com

Iniziamo ora con il tutorial.

Quello che andremo a fare per creare l’animazione è costruire i fotogrammi singolarmente in livelli per poi salvarli come gif animata.
Per aggiungere le decorazioni possiamo utilizzare principalmente due tecniche, l’una o l’altra potrebbe risultare più comoda a seconda del risultato che vogliamo ottenere.

Per la prima utilizzeremo una base sulla quale sovrapporre l’immagine da decorare (es. 1) per la seconda utilizzeremo un pennello personalizzato per decorare l’immagine dopo averla duplicata in tanti livelli quanti frame vogliamo abbia l’animazione (es 2). In effetti detta così potrebbe risultare un po incomprensibile ma con gli esempi risulterà tutto più chiaro.

Potete scaricare questo file zip con quasi 200 basi glitter per esercitarvi o modificare le vostre foto.

Esempio 1
Creare un’immagine glitter utilizzando un motivo di riempimento personalizzato.

Prima di iniziare dovrete preparare il motivo personalizzato da aggiungere alla lista dei motivi di GIMP, in questo esempio ne utilizzerò uno preso dal pacchetto del paragrafo precedente ma potete anche crearne uno da voi con le tecniche apprese nei precedenti tutorials.

Per questo esempio utilizzerò questo motivo.
1.
Aprite l’immagine con gimp e visualizzate i livelli con CTRL+L

Se quello che vedete è qualcosa del genere, ovvero solo il primo fotogramma è normale mentre gli altri mostrano il canale alpha significa che l’immagine è stata salvata in modalità “combine” ovvero vengono salvate solo le differenze tra un fotogramma e l’altro.

In questo caso il motivo deve essere corretto, altrimenti Saltate il prossimo passaggio.

2.
Per correggere il motivo dobbiamo copiare il livello di base sotto ogni livello da correggere.
Per farlo selezionate il livello di base e utilizzate il tasto “copia livello” (cerchiato in rosso).
Con il mouse spostate i nuovi livelli appena creati sotto i livelli da correggere come in figura.
Utilizzate il comando “fondi in basso” che appare quando cliccate con il tasto destro sul livello per unire le coppie “livello da correggere” – “duplicato del livello di base”
A questo punto avrete ottenuto dei livelli indipendenti.
3.
Salviamo i livelli in immagini separate nel formato utilizzato da gimp per i motivi.

Per farlo visualizziamo il solo livello da salvare e clicchiamo su
file>salva con nome

Come tipo di file dalla schermata “Salva Immagine” scegliamo “Motivo GIMP” che ha estensione pat.

Dato che i motivi gimp non supportano i livelli ci verrà chiesto se vogliamo unire l’immagine e se vogliamo convertirla in scala di grigi o RGB, cliccate su esporta.

Date una descrizione al pattern e salvate l’immagine.
Cercate di dare dei nomi significativi e ripetete l’operazione per tutti i livelli.

Potete scaricare qua lo zip con i motivi appena creati.

4.
Copiate i motivi appena creati nella cartella dei motivi di GIMP

nella versione utilizzata per questo tutorial è:
C:\Programmi\GIMP-2.0\share\gimp\2.0\patterns

Chiudete e riaprite GIMP o utilizzate il tasto aggiorna dalla finestra di selezione pattern.

5.
Apriamo l’immagine da modificare, per questo esempio ho utilizzato questa foto:

dalla schermata dei livelli clicchiamo con il tasto destro del mouse sul livello dell’immagine e su “aggiungi canale alpha”, in questo modo le parti cancellate verranno rese trasparenti.

6.
Utilizzando lo strumento gomma (o cancellino, Maiusc+E) e il pennello più adatto a quello che vogliamo fare portiamo in trasparenza la parte dell’immagine dove vogliamo che si veda il motivo di sfondo.

In questo caso voglio che il motivo non copra la luna, i quadretti indicano la trasparenza.

7.
A questo punto duplichiamo in livelli separati l’immagine tante volte quanti sono i motivi che abbiamo creato e per ogni livello ne aggiungiamo un’altro nuovo subito sotto da utilizzare come sfondo.

Utilizzate i tasti cerchiati in rosso rispettivamente per creare i nuovi livelli e per duplicare quelli dell’immagine e ordinateli con il mouse.

Nuovo livello, Nuovo livello#1 e Nuovo Livello#2
sono i livelli che utilizzeremo come sfondo, gli altri sono i duplicati dell’immagine che stiamo modificando.

8.
Andiamo ora a riempire i livelli da utilizzare come sfondo con i pattern appena creati.

Selezioniamo lo strumento “Riempimento di colore”.

Selezioniamo “riempimento con motivo” e il primo dei motivi da noi creati
e “riempi intera selezione”.

Dopo aver selezionato il primo livello di sfondo, nell’esempio “Nuovo Livello”
clicchiamo sull’immagine per applicare il motivo.

Ripetete la procedura su tutti i livelli di sfondo applicando rispettivamente i diversi motivi creati.

Ecco come dovrebbe risultare dalla schermata dei livelli.

Unite ora i livelli a coppie, il primo con il secondo e così via come abbiamo visto nella creazione del motivo utilizzando il tasto destro sul livello e il tasto fondi in basso.

9.
Come visto nel tutorial introduttivo sulle gif animate con GIMP salviamo l’immagine come gif, selezioniamo “salva come animazione” ed “esporta”.

Ecco il risultato:

Con un po più di pratica e di pazienza, possiamo utilizzare diverse gradazioni di trasparenza sull’immagine.

Per ammorbidire il tratto della comma e creare semi trasparenze impostate un livello inferiore di opacità nelle proprietà della gomma.

Questa a fianco è la seconda immagine utilizzata come esempio con il canale alpha.

E questo è il risultato ottenuto dopo aver applicato il motivo ripetendo i passaggi dal punto 7 di questo esempio.

Si possono anche aggiungere altri motivi, meglio se formati dallo stesso numero di elementi, ripetendo gli ultimi passaggi di questo tutorial e applicando trasparenze a diverse parti dell’immagine.

Con il primo esempio abbiamo finito, se lo avete trovato interessante aggiungete pure nei commenti un link ai vostri lavori.

Esempio 2
Creare un’immagine glitter utilizzando un pennello personalizzato.

Mentre nel primo esempio abbiamo inserito un motivo sotto l’immagine rendendo trasparenti le parti dove volevamo si vedesse, in questo caso andiamo a decorare direttamente con il pennello le parti interessate.

Prima di seguire questo esempio vi consiglio di consultare il manuale sull’utilizzo dei pennelli e la creazione di pennelli animati personalizzati a questa pagina.

Dopo le precedenti spiegazioni non è necessario dilungarsi più di tanto, quello che andiamo a fare è duplicare la nostra immagine in tanti livelli quanti frame vogliamo abbia l’animazione per poi decorare ogni livello con il pennello che preferiamo.

Per questo esempio ho utilizzato una maschera per decorare con pennelli diversi la scritta e lo sfondo, potete scaricare il file zip contenente il file originale in formato GIMP.

Conclusione.

Mischiate le tecniche appena apprese e fate un po di pratica, al passaggio 8 del primo esempio potreste usare la modalità riempi colori simili o riempire una selezione invece di usare i livelli di sfondo.
Non limitatevi al glitter e le stelline, potreste aggiungere delle foglie che cadono in un viale alberato o una cometa che attraversa il cielo stellato.
Date enfasi alle scritte e aggiungete sempre un bordo o un’ombra per farle risaltare sullo sfondo, fatele muovere per dare allegria e aggiungere movimento all’immagine.

I tutorial che avete appena seguito possono essere migliorati grazie al vostro aiuto, aggiungete commenti e critiche e i link alle vostre creazioni in modo che possano essere di aiuto agli altri.

Aggiornamento

Da alcuni commenti sembra non risulti chiaro che dopo aver inserito i pattern bisogna aggiornare la lista, se non trovate il tasto aggiorna chiudete e riavviate GIMP, assicuratevi di aver caricato i pattern nella giusta cartella.

Ho cercato di essere il più preciso possibile con esempi e immagini ma quello che risulta immediato per alcuni può non esserlo per altri, se qualcosa non dovesse essere chiaro spiegate cosa in modo da poter migliorare il tutorial invece di limitarvi a lasciare commenti del tipo “nn ci capisco niete!”.

1 Star2 Stars3 Stars4 Stars5 Stars (Nessun voto)
Loading ... Loading ...

Creare pennelli personalizzati con GIMP

Spesso il set di pennelli (brushes) forniti insieme a GIMP non è abbastanza e risulta comodo poterne creare di nuovi o personalizzare quelli esistenti.

In questo tutorial introdurrò prima il pannello di personalizzazione dei pennelli per passare poi alla creazione di pennelli personalizzati e di pennelli animati.
Su deviant art, come in molti altri siti potete scaricare liberamente diversi pennelli da aggiungere al vostro GIMP.

La cartella che contiene i pennelli e dove andrete ad aggiungerne di nuovi è:
C:\Programmi\GIMP-2.0\share\gimp\2.0\brushes
per quanto riguarda la versione di GIMP utilizzata per questo tutorial.

Una volta aggiunto un nuovo pennello riavviate GIMP o selezionate aggiorna dalla finestra di selezione del pennello.

“Per creare delle linee dritte con GIMP selezionate un punto con il mouse poi premete Maiusc (Shift) e selezionate il punto dove volete arrivi la linea”.

Andate avanti per seguire il tutorial.

Proprietà dei pennelli
Un primo livello di pesonalizzazione dei pennelli ci viene dato gia dalle proprietà degli stessi senza bisogno di andare a crearne di nuovi.

Ecco la schermata di GIMP con le proprietà del pennello visualizzate.
(i) indica l’indice dell’esempio nella figura in alto.

Nel primo esempio (1) nella figura in alto il pennello con le impostazioni standard.

  • Modalità:A questa pagina potete trovare una descrizione delle modalità.
  • Opacità (5):Imposta il livello di trasparenza del pennello, da 0=completamente trasparente a 100=completamente opaco.
  • Pennello:Seleziona la forma del pennello da usare.
  • Scala:Ingrandisce o rimpicciolisce il pennello.
  • Sensibilità pressione:Per impostare la sensibilità per tavolette grafiche e simili.
  • Sfumatura in uscita (2) :D opo la lunghezza impostata la pennellata sfuma in trasparenza.
  • Applica Jitter:Sposta casualmente il pennello durante la pennellata.(3) con jitter 1 e sfumatura in uscita.

    (4) con jitter 4.

  • Incrementale (6):L’opacità viene incrementata ogni volta che il pennello passa sullo stesso punto.
  • Gradiente (7):Invece di un colore viene usato un gradiente.Oltre la modalità normale è possibile utilizzare la modalità “Onda a dente di sega” dove il gradiente viene ripetuto quando la lunghezza impostata termina.

    In modalità “Onda triangolare” il gradiente viene ripetuto in senso opposto dopo la lunghezza impostata.

Dalla schermata precedente cliccando sull’anteprima del pennello possiamo selezionare il pennello da utilizzare.

In fondo alla lista trovate i tasti per lo zoom delle anteprime, la loro disposizione e il tasto per aprire la “Finestra di selezione pennello”.

Aprite la “Finestra di selezione pennello” che potete vedere qua a lato dove ho evidenziato in verde l’indicatore di tipo di pennello.

Una freccetta rossa indica che il pennello è animato.
La freccia blu indica che il pennello è normale.
Un simbolo + sopra la freccetta indica che la dimensione reale del pennello è maggiore di quella visualizzata nell’anteprima, cliccate sopra l’anteprima con il mouse e tenete premuto per visualizzare l’anteprima in dimensione reale del pennello.

Evidenziati in blu i tasti per modificare, creare, duplicare e cancellare i pennelli.
L’ultimo a destra è il tasto per aggiornare la lista dei pennelli quando ne aggiungete uno manualmente nella cartella dei pennelli di GIMP.

Cliccate su “Nuovo pennello” per aprire l’editor dei pennelli.

Dalle impostazioni potete scegliere la forma del pennello, il rettangolo e il quadrato sono praticamente uguali dato che possiamo ruotare il pennello.

Raggio: imposta la dimensione.

Vertici: imposta il numero di vertici, la forma circolare non è influenzata a meno che non aumentiamo il rapporto dimensioni.

Durezza: sfuma il pennello.

Rapporto dimensioni: per il numero di vertici varia la forma del pennello.

Angolo: ruota il pennello.

Spaziatura: imposta la distanza tra un tocco di pennello e l’altro.

Il primo degli esempi qua in basso è il pennello ottenuto con le impostazioni della schermata “Editor pennelli” qua sopra utilizzando un gradiente come colore.
Gli altri sono dei pennelli animati forniti con GIMP.

Pennelli personalizzati.

Se gli strumenti forniti per la personalizzazione degli strumenti non sono abbastanza possiamo sempre crearne di nostri.

Creare un pennello dagli appunti.
Quando creiamo una selezione con lo strumento maschera e la copiamo con la combinazione di tasti CTRL+C la possiamo immediatamente utilizzare come pennello, la prima voce nella lista dei pennelli è infatti quello che abbiamo negli appunti.
Creare un pennello statico.
Qualsiasi immagine può essere trasformata in pennello, fate attenzione ad usare appropriatamente le trasparenze.
Una volta creata l’immagine salvatela come “Pennello GIMP” che ha estensione gbr e aggiungetela alla cartella dei pennelli di GIMP.
Creare un pennello animato.

Per creare un pennello animato utilizzate i livelli, per ogni livello create il fotogramma che verrà utilizzato nella pennellata e salvate come “Pennello GIMP Animato” che ha estensione gih.
Durante il salvataggio potete assegnare una descrizione al pennello che verrà utilizzata come nome nella lista dei pennelli, la spaziatura in percentuale rispetto alla dimensione del pennello che verrà utilizzata come distanza tra un tocco e l’altro del pennello e il rango del pennello che indica come devono variare le immagini durante la pennellata.

Con questo abbiamo finito con i pennelli, per dubbi, perplessità, incertezze non esitate ad aggiungere commenti.

1 Star2 Stars3 Stars4 Stars5 Stars (Nessun voto)
Loading ... Loading ...

© Skipstorm 2010. Buona parte del contenuto di questo sito è utilizzabile nei termini della licenza cc by-nc-sa.