Tutorial Banner con Gimp

« Older   Newer »
  Share  
95figo95
icon10  view post Posted on 27/1/2010, 20:16




In questo tutorial, imparerai come usare i layer di gimp in un modo nuovo. Diversamente dalla sua funzione standard di composizione, quando usi Gimp come un pacchetto per l’animazione, devi pensare ad ogni livello come ad un frame dell’animazione.
Tutti conoscerete il famosissimo programma open source (quindi gratuito) GIMP, è installato di default sulla maggioranza delle distribuzioni Linux ed è installabile anche su windows, per quest’ultimo lo trovate cliccando su questo idirizzo. E’ davvero un ottimo programma, pieno di funzioni ed espandibile tramite plugins di ogni genere. Compete ed in alcuni punti batte i più blasonati Paintshop, Photoshop e simili…
Andiamo al punto: vogliamo creare un’animazione gif da usare non so, magari per pubblicizzare il nostro sito.
Creeremo ora un semplicissimo banner. Iniziamo con una nuova immagine 468×60 px . Usa il bianco come colore di sfondo. Crea un nuovo livello trasparente. Seleziona l’intera immagine con Ctrl+A e riempila di nero ( Ctrl+, ). Riduci la selezione di 1 px (immagine/selezione/riduci) e cancella la selezione con Ctrl+K . Abbiamo creato una cornice di un pixel attorno al banner.Adesso è ora di inserire il nostro logo o un’immagine nel banner. Ho preparato un fiore.
Per realizzarlo ho semplicemente incollato il fiore sotto il frame col bordo, ho poi usato alpha a selezione, creato un livello vuoto sotto, riempito la selezione col nero usando Ctrl+, .

Dopo questo, ho sfocato l’ombra usando Sfocatura Gaussiana (RLE) e l’ho spostata di due px in basso a destra. Non ho resistito ad aggiungere l’effetto interlacciato usando immagine / Filtri / Render / Pattern / Griglia e un livello maschera.
In questo livello maschera ho aggiunto un gradiente bianco/nero, cosicchè la parte sinistra del fiore non presenta l’effetto interlacciato.
Questa parte del tutorial non è comunque l’elemento chiave, quindi ritieniti libero di sperimentare. Una volta pronto appiattisci l’immagine usando immagine/ Livelli / Appiattisci immagine.
Adesso siamo pronti per il reale lavoro di animazione. Creeremo un banner formato da tre linee di testo animato. Ogni frame sarà costituito dall’immagine del fiore e sarà accompagnato dal testo. Non voglio diventare noioso, e allora creiamo questi tre livelli. Il primo passo sarà naturalmente copiare la nostra immagine appiattita due volte usando il pulsante duplica livello nella finestra dei livelli.
Poi useremo lo strumento testo per inserire una piccola nota di testo su ogni frame. Dopo aver digitato il testo nel frame, GIMP creerà una selezione fluttuante, che dovrai posizionare a destra usando lo strumento muovi e fissarla con Ctrl+H. Il posizionamento può essere cruciale per l’animazione finale, cosi puoi usare il seguente trucco per rendere il posizionamento meno complesso. Prima di usare lo strumento testo, regola la trasparenza del livello ad un valore più basso, così puoi vedere il livello sottostante. In questo modo puoi posizionare il testo appena creato in relazione al testo sul livello sottostante.

In ogni animazione GIF puoi specificare il ritardo dei frame. In questo modo puoi creare un’animazione di 12 secondi con pochi frame, perchè il ritardo non deve essere costante. In GIMP puoi specificare il ritardo come un commento al livello.Ti basta cliccare due volte sul commento del livello nella Finestra Livelli e inserire un’attesa in ms racchiusa tra parentesi ( ) . Per controllare se i tempi sono giusti, puoi ottenere un’anteprima dell’animazione usando immagine / Filtri / Animazione / Animazione playback. Puoi addiritttura trascinare l’anteprima in giro per il desktop.
Ora useremo una funzione veramente utile per applicare un filtro a livelli multipli. Prima di fare questo, abbiamo bisogno di creare una nuova immagine dal terzo frame. E’ semplice, basta trascinare l’anteprima del livello dalla finestra dei livelli sulla toolbar (finestra principale di GIMP). Adesso duplichiamo l’immagine quattro volte.



Con lo strumento selezione rettangolo, disegnamo una selezione attorno al testo. Adesso siamo pronti per applicare il filtro sfumatura gaussiana su ogni livello usando parametri variabili. Usa la funzione immagine / Filtri / Filtra tutti i livelli e seleziona plug-in-gauss-rle2 dalla lista e premi il pulsante apply varying . Quindi comparirà la finestra di dialogo sfocatura. Adesso dobbiamo specificare i parametri per il livello più basso della pila, cioò il primo frame.Vogliamo sfocare il testo progressivamente, cosi per il primo frame, specifichiamo un valore basso. Sfocheremo solo in orizzontale, e quindi scegliamo come valori v:0 h:2.
Dopo aver cliccato OK comparirà un’altra finestra di dialogo. Qui, scegli continue e specifica i parametri per l’ultimo frame. Inseriremo 20 px per la sfocatura orizzontale. Puoi salvare i progressi (backup), ma per adesso applicheremo il filtro su tutti i livelli intermedi cliccando su continue nella finestra successiva. Ora dobbiamo solo trascinare i livelli nell’immagine originale.
Adesso non ci resta che salvare la nostra animazione come GIF. Prima di procedere ottimizziamo l’animazione usando la funzione immagine / Filtri / Animazione/ Animazione ottimizzata . Questo creerà una nuova immagine usando un modo diverso da quello visto finora. Puoi usare due modi diversi per ogni frame della tua animazione.
Puoi usare sia il modo (default) replace , che rimpiazzerà il vecchio frame col nuovo. E’ come sostituire il vecchio frame col successivo.

L’altro metodo è combine nel quale il nuovo frame viene aggiunto al precedente. In questo modo solo i cambiamenti vengono aggiornati. Ecco cosa sostanzialmente fa la funzione Animazione ottimizzata.
Le dimensioni (in Kb) del file si riducono notevolmente. Adesso dobiamo indicizzare l’immagine usando la funzione immagine / immagine / modalità / scala di colore ( Alt+I ). Cerca di usare meno colori possibili e rifiuta il dithering. Sia il numero di colori che il dithering tendono a far lievitare le dimensioni del file.
Non ho usato il dithering del colore e ho generato una palette di 32 colori. La dimensione del file del banner è di circa 7kB. Se adesso salvi l’immagine come una GIF, GIMP ti chiederà se vuoi salvare l’immagine come un’animazione, che è esattamente cio’ che vogliamo. Nella finestra di dialogo GIF, puoi specificare il ritardo di default (nel nostro esempio sarà usato per i frame sfocati) e il metodo di disposizione.
Puoi usare il tuo browser web (tasto destro > Apri con e scegli internet explorer, firefox, safari, netscape o qualsiasi browser tu abbia sul pc) per controllare l’animazione, o puoi usare la funzione Animazione playback nella sezione Animazione del menù immagine.
 
Top
Potekim98
view post Posted on 29/7/2010, 22:16




Ti consiglio Ti semplificare In poche e semplici parole!
 
Top
95figo95
view post Posted on 31/7/2010, 22:49




ma è semplice e in poche parole non si può dire xD
 
Top
Potekim98
view post Posted on 31/7/2010, 22:50




xD aha xD ok :D
 
Top
Gattopauroso
view post Posted on 1/8/2010, 11:45




Giusto in poke parole nn si puo dire xD
 
Top
95figo95
view post Posted on 3/8/2010, 16:26




???
 
Top
Potekim98
view post Posted on 3/8/2010, 17:55




Forse Vuole dire quello che hai detto prima e vero nn si puo semplificare xD :D
 
Top
95figo95
view post Posted on 3/8/2010, 23:01




aaaah xD
 
Top
8 replies since 27/1/2010, 20:16   113 views
  Share