Producer en animeret GIF med GIMP

Indholdsfortegnelse:

Producer en animeret GIF med GIMP
Producer en animeret GIF med GIMP
Anonim

GIMP er et bemærkelsesværdigt kraftfuldt stykke software i betragtning af, at det er gratis. Især webdesignere kan være taknemmelige for deres evne til at producere simple animerede GIF'er.

Animerede GIF'er er simple animationer, som du vil se på mange websider, og selvom de er meget mindre sofistikerede end Flash-animationer, er de meget enkle at producere af alle med en grundlæggende forståelse af GIMP.

Sådan laver du en animeret-g.webp" />

De følgende trin viser en simpel animation i webbannerstørrelse, der bruger et par grundlæggende grafik, noget tekst og et logo.

Instruktionerne i denne artikel gælder for GIMP version 2.10.12.

  1. Åbn et nyt dokument. I dette eksempel har vi valgt den forudindstillede skabelon Webbanner stor mobil 320x100.

    For din animation kan du vælge en forudindstillet størrelse eller indstille tilpassede dimensioner afhængigt af, hvordan du vil bruge din endelige animation.

    For denne øvelse vil animation bestå af syv rammer, og hver frame vil være repræsenteret af et individuelt lag, hvilket betyder, at den endelige GIMP-fil vil have syv lag, inklusive baggrunden.

  2. Set Frame One. Animationen starter med et tomt felt, så der kræves ingen ændringer til det faktiske Baggrund lag, da det allerede er almindeligt hvidt.

    Det er dog nødvendigt at ændre navnet på laget i Layers paletten. Højreklik på Background laget i paletten, og vælg Edit Layer Attributes.

    Image
    Image
  3. I dialogboksen Rediger lagattributter, der åbnes, skal du tilføje (250ms) til slutningen af lagets navn. Dette indstiller det tidsrum, som dette billede vil blive vist i animationen. ms står for millisekunder og hvert millisekund er en tusindedel af et sekund. Dette første billede vises i et kvart sekund.

    Image
    Image
  4. Sæt ramme to. Til selvstudiet bruges en fodaftryksgrafik til denne ramme. Gå til File > Åbn som lag, og vælg grafikfilen. Dette placerer fodaftrykket på et nyt lag, som kan placeres efter behov ved hjælp af Move Tool.

    Image
    Image
  5. Som med baggrundslaget, skal dette nye lag omdøbes for at tildele visningstiden for rammen. I dette tilfælde 750 ms.

    I Layers paletten ser det nye lag-forhåndsvisning ud til at vise en sort baggrund omkring grafikken, men i virkeligheden er dette område gennemsigtigt.

    Image
    Image
  6. Indstil rammer tre, fire og fem. De næste tre rammer er flere fodspor, der vil gå hen over banneret. Disse indsættes på samme måde som ramme to, ved at bruge den samme grafik og en anden grafik til den anden fod. Som før er tiden indstillet til 750ms for hvert billede.

    Hvert af footprint-lagene har brug for en hvid baggrund, så kun én ramme nogensinde er synlig – i øjeblikket har hver enkelt en gennemsigtig baggrund. Vi kan gøre dette ved at oprette et nyt lag umiddelbart under et footprint-lag, udfylde det nye lag med hvidt og derefter højreklikke på footprint-laget og klikke på Merge Down

  7. Set ramme seks. Denne ramme er blot en tom ramme fyldt med hvidt, der vil give udseendet af det endelige fodaftryk, der forsvinder, før den endelige ramme vises. Vi har navngivet dette lag Interval og har valgt at have denne skærm i kun 250 ms.

    Du behøver ikke at navngive lag, men det kan gøre lagdelte filer nemmere at arbejde med.

    Image
    Image
  8. Set Frame Seven. Dette er den sidste ramme og viser noget tekst sammen med Lifewire.com-logoet. Det første trin her er at tilføje endnu et lag med en hvid baggrund.

    Image
    Image
  9. Næste, brug Tekstværktøj for at tilføje teksten. Dette påføres et nyt lag, men det løser vi, når du har tilføjet logoet eller det nye billede, hvilket kan gøres på samme måde, som footprint-grafikken blev tilføjet tidligere.

    Image
    Image
  10. Når vi har arrangeret disse som ønsket, kan vi bruge Merge Down til at kombinere logo- og tekstlagene og derefter flette det kombinerede lag med det hvide lag, der blev tilføjet tidligere. Dette producerer et enkelt lag, der vil danne den endelige ramme, og vi valgte at vise dette i 4000 ms.

    Image
    Image
  11. Se forhåndsvisning af animationen Før du gemmer den animerede GIF, har GIMP mulighed for at få vist den i aktion ved at gå til Filters >Animation > Afspilning Dette åbner en forhåndsvisningsdialog med selvforklarende knapper til at afspille animationen. Hvis noget ikke ser rigtigt ud, kan det ændres på dette tidspunkt. Ellers kan den gemmes som en animeret GIF.

    Animationssekvensen indstilles i den rækkefølge, lagene er stablet i Layers paletten, startende fra baggrunden eller det nederste lag og arbejder opad. Hvis din animation afspilles ude af rækkefølge, skal du justere rækkefølgen af dine lag ved at klikke på et lag for at vælge og bruge op- og ned-pilene i den nederste bjælke på lagpaletten til at ændre dets placering.

    Image
    Image
  12. Gem den animerede GIF. At gemme en animeret-g.webp" />Fil > Gem en kopi og giv din fil et relevant navn og vælg, hvor du vil gemme din fil.

    Image
    Image
  13. Gå derefter til File > Eksporter som for at gemme det som en animeret GIF.

    Image
    Image
  14. I dialogboksen Eksporter billede, der åbnes, skal du vælge Vælg filtype, rul til GIF-billede og vælg det, og vælg derefterEksport . Hvis du får en advarsel om lag, der strækker sig ud over billedets faktiske grænser, skal du vælge knappen Crop.

    Image
    Image
  15. Dette vil nu føre til dialogboksen Gem som GIF med en sektion af Animerede GIF-indstillinger. Du kan lade disse være som standard, men hvis du kun ønsker, at animationen skal afspilles én gang, skal du fjerne markeringen i Loop forever.

    Image
    Image
  16. Nu kan du dele din animerede GIF.

Konklusion

Trinnene vist her vil give dig de grundlæggende værktøjer til at producere dine egne simple animationer ved hjælp af forskellige grafik- og dokumentstørrelser. Selvom slutresultatet er ret grundlæggende med hensyn til animation, er det en meget nem proces, som alle med et grundlæggende kendskab til GIMP kan opnå.

Anbefalede: