Een geanimeerde GIF produceren met GIMP

Inhoudsopgave:

Een geanimeerde GIF produceren met GIMP
Een geanimeerde GIF produceren met GIMP
Anonim

GIMP is een opmerkelijk krachtig stuk software gezien het feit dat het gratis is. Vooral webdesigners zullen dankbaar zijn voor het vermogen om eenvoudige geanimeerde GIF's te maken.

Geanimeerde GIF's zijn eenvoudige animaties die je op veel webpagina's zult zien en hoewel ze veel minder geavanceerd zijn dan Flash-animaties, zijn ze heel eenvoudig te maken door iedereen met een basiskennis van GIMP.

Hoe maak je een geanimeerde-g.webp" />

De volgende stappen tonen een eenvoudige animatie ter grootte van een webbanner met een paar basisafbeeldingen, wat tekst en een logo.

Instructies in dit artikel zijn van toepassing op GIMP-versie 2.10.12.

  1. Open een nieuw document. In dit voorbeeld hebben we de vooraf ingestelde sjabloon van Webbanner groot mobiel 320x100. geselecteerd

    Voor je animatie kun je een vooraf ingestelde grootte selecteren of aangepaste afmetingen instellen, afhankelijk van hoe je je uiteindelijke animatie gaat gebruiken.

    Voor deze tutorial bestaat animatie uit zeven frames en elk frame wordt weergegeven door een individuele laag, wat betekent dat het uiteindelijke GIMP-bestand zeven lagen zal hebben, inclusief de achtergrond.

  2. Stel frame één in. De animatie begint met een lege ruimte, dus er zijn geen wijzigingen aan de werkelijke Background-laag nodig omdat deze al gewoon wit is.

    Er is echter een wijziging in de naam van de laag in het Layers palet nodig. Klik met de rechtermuisknop op de Background laag in het palet en selecteer Laagattributen bewerken.

    Image
    Image
  3. In het Layerattributen bewerken dialoogvenster dat wordt geopend, voegt u (250ms) toe aan het einde van de naam van de laag. Hiermee stelt u in hoe lang dit frame in de animatie wordt weergegeven. De ms staat voor milliseconden en elke milliseconde is een duizendste van een seconde. Dit eerste frame wordt een kwart seconde weergegeven.

    Image
    Image
  4. Stel frame twee in. Voor de zelfstudie wordt een voetafdrukafbeelding gebruikt voor dit frame. Ga naar File > Open as Layers en selecteer het grafische bestand. Dit plaatst de footprint op een nieuwe laag die naar wens kan worden gepositioneerd met behulp van de Move Tool.

    Image
    Image
  5. Net als bij de achtergrondlaag, moet deze nieuwe laag worden hernoemd om de weergavetijd voor het frame toe te wijzen. In dit geval 750ms.

    In het Layers palet lijkt het nieuwe laagvoorbeeld een zwarte achtergrond rond de afbeelding te tonen, maar in werkelijkheid is dit gebied transparant.

    Image
    Image
  6. Stel frame drie, vier en vijf in. De volgende drie frames zijn meer voetafdrukken die over de banner lopen. Deze worden op dezelfde manier ingevoegd als frame twee, met dezelfde afbeeldingen en een andere afbeelding voor de andere voet. Net als voorheen is de tijd ingesteld op 750 ms voor elk frame.

    Elk van de voetafdruklagen heeft een witte achtergrond nodig, zodat slechts één frame ooit zichtbaar is - momenteel heeft elk een transparante achtergrond. We kunnen dit doen door een nieuwe laag direct onder een footprint-laag te maken, de nieuwe laag met wit te vullen en vervolgens met de rechtermuisknop op de footprint-laag te klikken en te klikken op Merge Down

  7. Stel frame zes in. Dit frame is slechts een leeg frame gevuld met wit waardoor het lijkt alsof de uiteindelijke voetafdruk verdwijnt voordat het laatste frame verschijnt. We hebben deze laag Interval genoemd en hebben ervoor gekozen deze weergave slechts 250 ms te laten duren.

    U hoeft lagen geen naam te geven, maar het kan gelaagde bestanden gemakkelijker maken om mee te werken.

    Image
    Image
  8. Stel frame zeven in. Dit is het laatste frame en toont wat tekst samen met het Lifewire.com-logo. De eerste stap hier is om nog een laag toe te voegen met een witte achtergrond.

    Image
    Image
  9. Gebruik vervolgens de Text Tool om de tekst toe te voegen. Dit wordt toegepast op een nieuwe laag, maar we zullen dat behandelen zodra u het logo of de nieuwe afbeelding hebt toegevoegd, wat op dezelfde manier kan worden gedaan als de voetafdrukafbeeldingen eerder zijn toegevoegd.

    Image
    Image
  10. Als we deze naar wens hebben gerangschikt, kunnen we Merge Down gebruiken om de logo- en tekstlagen te combineren en vervolgens die gecombineerde laag samen te voegen met de witte laag die is toegevoegd eerder. Dit produceert een enkele laag die het uiteindelijke frame zal vormen en we hebben ervoor gekozen om dit gedurende 4000 ms weer te geven.

    Image
    Image
  11. Een voorbeeld van de animatie bekijken Voordat de geanimeerde-g.webp" />Filters > te gaanAnimatie > Afspelen Dit opent een voorbeeldvenster met zelfverklarende knoppen om de animatie af te spelen. Als iets er niet goed uitziet, kan het op dit punt worden gewijzigd. Anders kan het worden opgeslagen als een geanimeerde GIF.

    De animatiereeks wordt ingesteld in de volgorde waarin de lagen zijn gestapeld in het Layers-palet, beginnend bij de achtergrond of de laagste laag en naar boven toe werkend. Als uw animatie niet in de juiste volgorde wordt afgespeeld, moet u de volgorde van uw lagen aanpassen door op een laag te klikken om deze te selecteren en de pijlen omhoog en omlaag in de onderste balk van het palet Lagen te gebruiken om de positie te wijzigen.

    Image
    Image
  12. Sla de geanimeerde-g.webp" />. Het opslaan van een geanimeerde-g.webp" />File > Save a Copy en geef uw bestand een relevante naam en selecteer waar u uw bestand wilt opslaan.

    Image
    Image
  13. Ga vervolgens naar File > Export As om het op te slaan als een geanimeerde GIF.

    Image
    Image
  14. In het dialoogvenster Export Image dat wordt geopend, selecteert u Select File Type en bladert u naar GIF-afbeelding en selecteert u deze, en selecteert u vervolgensExporteren . Als u een waarschuwing krijgt over lagen die verder gaan dan de werkelijke randen van de afbeelding, selecteert u de knop Bijsnijden.

    Image
    Image
  15. Dit zal nu leiden naar het Opslaan als GIF dialoog met een sectie van Animated-g.webp" />. Je kunt deze op hun standaardwaarden laten staan, maar als je wilt dat de animatie maar één keer wordt afgespeeld, moet je Loop forever. uitschakelen

    Image
    Image
  16. Nu kun je je geanimeerde-g.webp

Conclusie

De hier getoonde stappen geven je de basishulpmiddelen om je eigen eenvoudige animaties te maken, met verschillende afbeeldingen en documentformaten. Hoewel het eindresultaat vrij eenvoudig is in termen van animatie, is het een heel eenvoudig proces dat iedereen met een basiskennis van GIMP kan bereiken.

Aanbevolen: