Producera en animerad GIF med GIMP

Innehållsförteckning:

Producera en animerad GIF med GIMP
Producera en animerad GIF med GIMP
Anonim

GIMP är en anmärkningsvärt kraftfull mjukvara med tanke på att den är gratis. Webbdesigners, i synnerhet, kan vara tacksamma för dess förmåga att producera enkla animerade GIF-bilder.

Animerade GIF-bilder är enkla animationer som du kommer att se på många webbsidor och även om de är mycket mindre sofistikerade än Flash-animationer, är de väldigt enkla att producera av alla som har en grundläggande förståelse för GIMP.

Hur man gör en animerad-g.webp" />

Följande steg visar en enkel animering i webbannerstorlek med ett par grundläggande grafik, lite text och en logotyp.

Instruktionerna i den här artikeln gäller GIMP version 2.10.12.

  1. Öppna ett nytt dokument. I det här exemplet har vi v alt den förinställda mallen Webbanner stor mobil 320x100.

    För din animation kan du välja en förinställd storlek eller ställa in anpassade mått beroende på hur du kommer att använda din slutliga animation.

    För den här handledningen kommer animeringen att bestå av sju bildrutor och varje bildruta kommer att representeras av ett individuellt lager, vilket innebär att den slutliga GIMP-filen kommer att ha sju lager, inklusive bakgrunden.

  2. Set Frame One. Animationen börjar med ett tomt utrymme så inga ändringar av det faktiska Bakgrundsskiktet behövs eftersom det redan är vanlig vitt.

    Det behövs dock en ändring av namnet på lagret i paletten Layers. Högerklicka på Background lagret i paletten och välj Edit Layer Attributes.

    Image
    Image
  3. I dialogrutan Redigera lagerattribut som öppnas lägger du till (250ms) i slutet av lagrets namn. Detta ställer in hur lång tid denna bildruta ska visas i animeringen. Ms står för millisekunder och varje millisekund är en tusendels sekund. Denna första bildruta visas i en kvarts sekund.

    Image
    Image
  4. Sätt ram två. För handledningen används en fotavtrycksgrafik för denna ram. Gå till File > Öppna som lager och välj grafikfilen. Detta placerar fotavtrycket på ett nytt lager som kan placeras efter behov med Move Tool.

    Image
    Image
  5. Som med bakgrundslagret, måste detta nya lager bytas om för att tilldela visningstiden för ramen. I det här fallet, 750 ms.

    I paletten Layers verkar den nya lagerförhandsgranskningen visa en svart bakgrund runt grafiken, men i verkligheten är detta område genomskinligt.

    Image
    Image
  6. Ställ in bildrutor tre, fyra och fem. De nästa tre ramarna är fler fotspår som kommer att gå över banderollen. Dessa infogas på samma sätt som bildruta två, med samma grafik och en annan grafik för den andra foten. Som tidigare är tiden inställd till 750ms för varje bildruta.

    Varje fotavtrycksskikt behöver en vit bakgrund så att bara en ram någonsin är synlig – för närvarande har var och en en genomskinlig bakgrund. Vi kan göra detta genom att skapa ett nytt lager omedelbart under ett footprint-lager, fylla det nya lagret med vitt och sedan högerklicka på footprint-lagret och klicka Merge Down

  7. Ange ram sex. Den här ramen är bara en tom ram fylld med vitt som kommer att ge intrycket av att det slutliga fotavtrycket försvinner innan den slutliga ramen visas. Vi har döpt det här lagret Interval och har v alt att ha den här skärmen i bara 250 ms.

    Du behöver inte namnge lager, men det kan göra lagerfiler lättare att arbeta med.

    Image
    Image
  8. Set Frame Seven. Detta är den sista ramen och visar lite text tillsammans med Lifewire.com-logotypen. Det första steget här är att lägga till ytterligare ett lager med vit bakgrund.

    Image
    Image
  9. Använd sedan Textverktyg för att lägga till texten. Detta appliceras på ett nytt lager, men vi kommer att ta itu med det när du har lagt till logotypen eller den nya bilden, vilket kan göras på samma sätt som fotavtrycksgrafiken lades till tidigare.

    Image
    Image
  10. När vi har ordnat dessa som önskat kan vi använda Merge Down för att kombinera logotypen och textlagren och sedan slå samman det kombinerade lagret med det vita lagret som lades till tidigare. Detta producerar ett enda lager som kommer att utgöra den slutliga bilden och vi valde att visa detta i 4000ms.

    Image
    Image
  11. Förhandsgranska animeringen Innan du sparar den animerade GIF-filen har GIMP möjlighet att förhandsgranska den i aktion genom att gå till Filters >Animation > Uppspelning Detta öppnar en förhandsgranskningsdialog med självförklarande knappar för att spela upp animationen. Om något inte ser rätt ut kan det ändras vid det här laget. Annars kan den sparas som en animerad GIF.

    Animeringssekvensen ställs in i den ordning som lagren staplas i paletten Layers, med start från bakgrunden eller det lägsta lagret och arbeta uppåt. Om din animering spelas ur sekvens måste du justera ordningen på dina lager genom att klicka på ett lager för att välja och använda upp- och nedpilarna i den nedre raden på paletten Lager för att ändra dess position.

    Image
    Image
  12. Spara den animerade GIF-filen. Att spara en animerad-g.webp" />File > Spara en kopia och ge din fil ett relevant namn och välj var du vill spara din fil.

    Image
    Image
  13. Nästa, gå till File > Exportera som för att spara den som en animerad GIF.

    Image
    Image
  14. I dialogrutan Exportera bild som öppnas, välj Select File Type och bläddra till GIF-bilden och välj den, välj sedanExport . Om du får en varning om lager som sträcker sig utanför bildens faktiska kanter, välj knappen Crop.

    Image
    Image
  15. Detta leder nu till dialogrutan Spara som GIF med en del av Animerade GIF- alternativ. Du kan lämna dessa på standardinställningarna, men om du bara vill att animationen ska spelas en gång bör du avmarkera Loop forever.

    Image
    Image
  16. Nu kan du dela din animerade GIF.

Slutsats

Stegen som visas här ger dig de grundläggande verktygen för att skapa dina egna enkla animationer med olika grafik och dokumentstorlekar. Även om slutresultatet är ganska grundläggande när det gäller animering, är det en mycket enkel process som alla med grundläggande kunskaper om GIMP kan uppnå.

Rekommenderad: