GIMP Tutorial animat GIF

Com produir un GIF animat amb GIMP

GIMP és un programari notablement potent tenint en compte que és gratuït. Els dissenyadors web , en particular, poden agrair la seva capacitat per produir GIFs animats simples.

Els GIF animats són simples animacions que veureu en moltes pàgines web i, tot i que són molt menys sofisticades que les animacions de Flash , són molt senzilles de produir per qualsevol persona amb una comprensió bàsica del GIMP.

Els següents passos mostren una simples animacions de mida web amb un parell de gràfics bàsics, alguns de text i un logotip.

01 de 09

Obriu un nou document

En aquest exemple, vaig a utilitzar GIMP per produir un bàner web GIF animat molt bàsic. He seleccionat la plantilla predeterminada de la bústia web comuna 468x60 . Per a la vostra animació, podeu seleccionar una mida predefinida o configurar les dimensions personalitzades segons la forma en què usarà l'animació final.

La meva animació consistirà en set fotogrames i cada fotograma estarà representat per una capa individual, el que significa que el meu fitxer GIMP final tindrà set capes, inclòs el fons.

02 de 09

Estableix el fotograma un

Vull que la meva animació comenci amb un espai en blanc, per la qual cosa no fa cap canvi en la capa de fons real que ja és blanca.

Tanmateix, he de fer un canvi en el nom de la capa a la paleta Layers . Faig clic amb el botó dret a la capa de fons de la paleta i selecciona Edita els atributs de la capa . Al quadre de diàleg Edita les capes d'atributs que s'obre, afegeixo (250 ms) al final del nom de la capa. Això estableix la quantitat de temps que aquest marc es mostrarà a l'animació. El ms representa mil·lisegons i cada mil·lisegon és mil·lèsima de segon. Aquest primer quadre es mostrarà durant un quart de segon.

03 de 09

Estableix el fotograma dos

Vull utilitzar una petjada gràfica per a aquest marc, així que vaig a Fitxer > Obrir com a capes i seleccioneu el meu fitxer gràfic. Això situa la petjada en una nova capa que em puc posicionar segons sigui necessari amb l' eina Move . Igual que amb la capa de fons, he de canviar el nom de la capa per assignar el temps de visualització del marc. En aquest cas, he triat 750ms.

Nota: a la paleta Capes , la nova vista prèvia de la capa sembla mostrar un fons negre al voltant del gràfic, però en realitat aquesta àrea és transparent.

04 de 09

Estableix quadres tres, quatre i cinc

Els tres marcs següents són més empremtes que passen pel bàner. Aquests s'insereixen de la mateixa manera que el marc dos, utilitzant el mateix gràfic i un altre gràfic per a l'altre peu. Com abans, el temps s'estableix com 750 ms per cada fotograma.

Cadascuna de les capes de la petjada necessita un fons blanc perquè només un marc sigui visible, en l'actualitat, cadascun té un fons transparent. Puc fer això creant una nova capa immediatament per sota d'una capa d'empremta, omplint la capa nova amb blanc i fent clic amb el botó dret a la capa d'empremta i fent clic a Fusionar .

05 de 09

Estableix el marc sis

Aquest marc és només un marc en blanc ple de blanc que donarà l'aparença de la petjada final que desapareix abans que aparegui el marc final. He nomenat aquest interval de la capa i he triat tenir aquesta pantalla per només 250ms. No és necessari nomenar capes, però pot fer que els fitxers amb capes siguin més fàcils de treballar.

06 de 09

Estableix el fotograma set

Aquest és el marc final i mostra un text juntament amb el logotip de About.com. El primer pas aquí és afegir una altra capa amb fons blanc.

A continuació, faig servir l' eina de text per afegir el text. Això s'aplica a una nova capa, però tractaré d'això una vegada que he afegit el logotip, que puc fer de la mateixa manera que he afegit els gràfics de petjada anteriorment. Quan tinc aquests arranjaments com vulgueu, puc utilitzar Fusionar per combinar el logotip i les capes de text i, a continuació, fusionar aquesta capa combinada amb la capa blanca que es va afegir prèviament. Això produeix una sola capa que formarà el marc final i vaig triar mostrar això per 4000ms.

07 de 09

Previsualitza l'animació

Abans de desar el GIF animat, GIMP té l'opció de previsualitzar-lo en acció, aneu a Filtres > Animació > Reproducció . Això obre un diàleg de visualització prèvia amb botons que s'explicaran per reproduir l'animació.

Si alguna cosa no es veu bé, es pot modificar en aquest moment. En cas contrari, es pot guardar com un GIF animat.

Nota: la seqüència d'animació s'estableix en l'ordre que les capes s'apilen a la paleta Capes , començant pel fons o la capa més baixa i treballant cap amunt. Si la vostra animació s'executa fora de seqüència, haureu d'ajustar l'ordre de les capes fent clic a una capa per seleccionar i utilitzar les fletxes amunt i avall a la barra inferior de la paleta Layers per canviar la seva posició.

08 de 09

Desa el GIF animat

Estalviar un GIF animat és un exercici molt senzill. Primer, aneu a Fitxer > Desa una còpia i doneu al vostre fitxer un nom rellevant i seleccioneu on voleu desar el fitxer. Abans de prémer Desa , feu clic a Selecciona Tipus de fitxer (Per extensió) cap a la part inferior esquerra i, des de la llista que s'obre, seleccioneu la imatge GIF . Al quadre de diàleg Exporta fitxer que s'obre, feu clic al botó Desa com a animació i feu clic al botó Exporta . Si obteniu un avís sobre capes que s'estenen més enllà de les vores reals de la imatge, feu clic al botó Cultius .

Això ara portarà al diàleg Desa com a GIF amb una secció d' opcions de GIF animat . Podeu deixar aquests per defecte, encara que si només voleu que l'animació es reprodueixi una vegada, haureu de desmarcar Loop per sempre .

09 de 09

Conclusió

Els passos que es mostren aquí us donaran les eines bàsiques per a produir les vostres pròpies animacions simples, utilitzant diferents gràfics i mides de documents. Si bé el resultat final és bastant bàsic pel que fa a l'animació, és un procés molt senzill que qualsevol persona amb coneixements bàsics de GIMP pugui aconseguir. Els GIF animats probablement van més enllà del seu moment, però amb una mica de pensament i una planificació acurada, encara es poden utilitzar per produir elements animats eficaços molt ràpidament.