Produseer 'n geanimeerde GIF met GIMP

INHOUDSOPGAWE:

Produseer 'n geanimeerde GIF met GIMP
Produseer 'n geanimeerde GIF met GIMP
Anonim

GIMP is 'n merkwaardige kragtige stuk sagteware as in ag geneem word dat dit gratis is. Webontwerpers, veral, kan dankbaar wees vir sy vermoë om eenvoudige geanimeerde GIF's te produseer.

Geanimeerde GIF's is eenvoudige animasies wat jy op baie webblaaie sal sien, en hoewel hulle baie minder gesofistikeerd as Flash-animasies is, is dit baie maklik om te vervaardig deur enigiemand met 'n basiese begrip van GIMP.

Hoe om 'n geanimeerde-g.webp" />

Die volgende stappe wys 'n eenvoudige webbaniergrootte animasie met 'n paar basiese grafika, 'n bietjie teks en 'n logo.

Instruksies in hierdie artikel is van toepassing op GIMP-weergawe 2.10.12.

  1. Maak 'n nuwe dokument oop. In hierdie voorbeeld het ons die voorafbepaalde sjabloon van Webbanier groot selfoon 320x100 gekies.

    Vir jou animasie kan jy 'n voorafbepaalde grootte kies of pasgemaakte afmetings stel, afhangende van hoe jy jou finale animasie gaan gebruik.

    Vir hierdie tutoriaal sal animasie uit sewe rame bestaan en elke raam sal deur 'n individuele laag verteenwoordig word, wat beteken dat die finale GIMP-lêer sewe lae sal hê, insluitend die agtergrond.

  2. Stel Raam Een. Die animasie sal met 'n leë spasie begin, so geen veranderinge aan die werklike Agtergrond-laag is nodig nie, want dit is reeds eenvoudig wit.

    'n verandering aan die naam van die laag in die Layers palet is egter nodig. Regskliek op die Background-laag in die palet en kies Edit Layer Attributes.

    Image
    Image
  3. In die Edit Layer Attributes dialoog wat oopmaak, voeg (250ms) by die einde van die laag se naam. Dit stel die hoeveelheid tyd wat hierdie raam in die animasie vertoon sal word. Die ms staan vir millisekondes en elke millisekonde is 'n duisendste van 'n sekonde. Hierdie eerste raam sal vir 'n kwart van 'n sekonde vertoon word.

    Image
    Image
  4. Stel raam twee. Vir die tutoriaal word 'n voetspoorgrafika vir hierdie raam gebruik. Gaan na File > Maak oop as lae en kies die grafiese lêer. Dit plaas die voetspoor op 'n nuwe laag wat geposisioneer kan word soos benodig met die Move Tool.

    Image
    Image
  5. Soos met die agtergrondlaag, moet hierdie nuwe laag hernoem word om die vertoontyd vir die raam toe te ken. In hierdie geval, 750 ms.

    In die Layers palet lyk dit of die nuwe laagvoorskou 'n swart agtergrond rondom die grafika wys, maar in werklikheid is hierdie area deursigtig.

    Image
    Image
  6. Stel rame drie, vier en vyf. Die volgende drie rame is meer voetspore wat oor die banier sal loop. Dit word op dieselfde manier as raam twee ingevoeg, met dieselfde grafika en 'n ander grafika vir die ander voet. Soos voorheen is die tyd gestel as 750ms vir elke raam.

    Elkeen van die voetspoorlae het 'n wit agtergrond nodig sodat slegs een raam ooit sigbaar is – tans het elkeen 'n deursigtige agtergrond. Ons kan dit doen deur 'n nuwe laag onmiddellik onder 'n voetspoorlaag te skep, die nuwe laag met wit te vul en dan regs te klik op die voetspoorlaag en Merge Down te klik

  7. Stel raam ses. Hierdie raam is net 'n leë raam gevul met wit wat die voorkoms sal gee van die finale voetspoor wat verdwyn voordat die finale raam verskyn. Ons het hierdie laag Interval genoem en het gekies om hierdie skerm vir net 250 ms te hê.

    Jy hoef nie lae te noem nie, maar dit kan gelaagde lêers makliker maak om mee te werk.

    Image
    Image
  8. Stel raam sewe. Dit is die finale raam en vertoon 'n bietjie teks saam met die Lifewire.com-logo. Die eerste stap hier is om nog 'n laag met 'n wit agtergrond by te voeg.

    Image
    Image
  9. Volgende, gebruik die Teksnutsding om die teks by te voeg. Dit word op 'n nuwe laag toegepas, maar ons sal dit hanteer sodra jy die logo of nuwe prent bygevoeg het, wat gedoen kan word op dieselfde manier as wat die voetspoorgrafika vroeër bygevoeg is.

    Image
    Image
  10. Wanneer ons dit na wense gerangskik het, kan ons Merge Down gebruik om die logo- en tekslae te kombineer en dan daardie gekombineerde laag saam te voeg met die wit laag wat bygevoeg is voorheen. Dit produseer 'n enkele laag wat die finale raam sal vorm en ons het gekies om dit vir 4000ms te vertoon.

    Image
    Image
  11. Voorskou die animasie Voordat jy die geanimeerde-g.webp" />Filters > te gaanAnimasie > Terugspeel Dit maak 'n voorskoudialoog oop met selfverduidelikende knoppies om die animasie te speel. As iets nie reg lyk nie, kan dit op hierdie punt gewysig word. Andersins kan dit as 'n geanimeerde-g.webp" />.

    Die animasievolgorde word in die volgorde gestel dat die lae in die Layers palet gestapel word, vanaf die agtergrond of onderste laag en werk opwaarts. As jou animasie buite volgorde speel, sal jy die volgorde van jou lae moet aanpas deur op 'n laag te klik om te kies en die op- en afpyltjies in die onderste balk van die Lae-palet te gebruik om sy posisie te verander.

    Image
    Image
  12. Stoor die geanimeerde GIF. Om 'n geanimeerde-g.webp" />Lêer > Stoor 'n kopie en gee jou lêer 'n relevante naam en kies waar jy jou lêer wil stoor.

    Image
    Image
  13. Volgende, gaan na Lêer > Voer uit as om dit as 'n geanimeerde-g.webp" />.

    Image
    Image
  14. In die Export Image dialoog wat oopmaak, kies Select File Type en blaai na GIF-prent en kies dit, kies danUitvoer . As jy 'n waarskuwing kry oor lae wat verby die werklike grense van die prent strek, kies die Crop- knoppie.

    Image
    Image
  15. Dit sal nou lei na die Save as GIF dialoog met 'n gedeelte van Animated-g.webp" />. Jy kan dit by hul verstekke laat, maar as jy net wil hê die animasie moet een keer speel, moet jy Loop forever ontmerk.

    Image
    Image
  16. Nou kan jy jou geanimeerde-g.webp

Gevolgtrekking

Die stappe wat hier gewys word, sal jou die basiese gereedskap gee om jou eie eenvoudige animasies te produseer, deur verskillende grafika en dokumentgroottes te gebruik. Alhoewel die eindresultaat redelik basies is wat animasie betref, is dit 'n baie maklike proses wat enigiemand met 'n basiese kennis van GIMP kan bereik.

Aanbeveel: