Proizvodnja animiranog GIF-a sa GIMP-om

Sadržaj:

Proizvodnja animiranog GIF-a sa GIMP-om
Proizvodnja animiranog GIF-a sa GIMP-om
Anonim

GIMP je izuzetno moćan komad softvera s obzirom da je besplatan. Web dizajneri, posebno, mogu biti zahvalni na njegovoj sposobnosti da proizvede jednostavne animirane GIF-ove.

Animirani GIF-ovi su jednostavne animacije koje ćete vidjeti na mnogim web stranicama i, iako su mnogo manje sofisticirane od Flash animacija, vrlo ih je jednostavno proizvesti svako ko ima osnovno razumijevanje GIMP-a.

Kako napraviti animirani-g.webp" />

Sljedeći koraci prikazuju jednostavnu animaciju veličine web banera koristeći nekoliko osnovnih grafika, nešto teksta i logotip.

Upute u ovom članku se odnose na GIMP verziju 2.10.12.

  1. Otvorite novi dokument. U ovom primjeru, odabrali smo unaprijed postavljeni predložak Web banner veliki mobilni 320x100.

    Za svoju animaciju, možete odabrati unaprijed postavljenu veličinu ili postaviti prilagođene dimenzije ovisno o tome kako ćete koristiti svoju konačnu animaciju.

    Za ovaj tutorijal, animacija će se sastojati od sedam okvira i svaki okvir će biti predstavljen pojedinačnim slojem, što znači da će konačna GIMP datoteka imati sedam slojeva, uključujući pozadinu.

  2. Postavi okvir jedan. Animacija će početi s praznim prostorom tako da nisu potrebne nikakve promjene u stvarnom sloju Background jer je već obično bijeli.

    Međutim, potrebna je promjena naziva sloja u Layers paleti. Desni klik na sloj Background u paleti i odaberite Edit Layer Attributes.

    Image
    Image
  3. U dijalogu Edit Layer Attributes koji se otvori, dodajte (250ms) na kraj naziva sloja. Ovo postavlja količinu vremena u kojoj će ovaj okvir biti prikazan u animaciji. ms označava milisekunde, a svaka milisekunda je hiljaditi dio sekunde. Ovaj prvi okvir će se prikazati na četvrt sekunde.

    Image
    Image
  4. Postavi okvir dva. Za tutorijal, grafika otiska se koristi za ovaj okvir. Idite na File > Otvori kao slojeve i odaberite grafički fajl. Ovo postavlja otisak na novi sloj koji se može postaviti prema potrebi pomoću Move Tool.

    Image
    Image
  5. Kao i kod pozadinskog sloja, ovaj novi sloj treba preimenovati da bi se dodijelilo vrijeme prikaza za okvir. U ovom slučaju, 750ms.

    U Layers paleti, novi pregled sloja izgleda kao da prikazuje crnu pozadinu oko grafike, ali u stvarnosti ovo područje je transparentno.

    Image
    Image
  6. Postavite okvire tri, četiri i pet. Sljedeća tri okvira su više otisaka stopala koji će hodati preko banera. Oni su umetnuti na isti način kao okvir dva, koristeći istu grafiku i drugu grafiku za drugu nogu. Kao i ranije, vrijeme je postavljeno na 750ms za svaki kadar.

    Svaki sloj otiska treba bijelu pozadinu kako bi samo jedan okvir bio vidljiv – trenutno svaki ima prozirnu pozadinu. To možemo učiniti kreiranjem novog sloja odmah ispod sloja otiska, popunjavanjem novog sloja bijelom bojom, a zatim desnim klikom na sloj otiska i klikom na Merge Down

  7. Postavi okvir šest. Ovaj okvir je samo prazan okvir ispunjen bijelom bojom koja će dati izgled konačnog otiska koji nestaje prije nego što se pojavi konačni okvir. Ovaj sloj smo nazvali Interval i odabrali smo da ovaj prikaz bude samo 250ms.

    Ne morate imenovati slojeve, ali to može olakšati rad sa fajlovima sa slojevima.

    Image
    Image
  8. Set okvira sedam. Ovo je završni okvir i prikazuje nešto teksta zajedno sa logotipom Lifewire.com. Prvi korak ovdje je dodavanje još jednog sloja s bijelom pozadinom.

    Image
    Image
  9. Dalje, koristite Text Tool da dodate tekst. Ovo se primjenjuje na novi sloj, ali ćemo se time pozabaviti kada dodate logo ili novu sliku, što se može uraditi na isti način na koji je grafika otiska dodana ranije.

    Image
    Image
  10. Kada ovo posložimo po želji, možemo koristiti Merge Down da kombiniramo slojeve logotipa i teksta, a zatim spojimo taj kombinovani sloj sa bijelim slojem koji je dodan prethodno. Ovo proizvodi jedan sloj koji će formirati konačni okvir i mi smo odabrali da ga prikažemo na 4000ms.

    Image
    Image
  11. Pregledajte animaciju Prije nego što sačuvate animirani GIF, GIMP ima opciju da ga pregleda u akciji tako što ćete otići na Filters >Animacija > Reprodukcija Ovo otvara prozor za pregled sa dugmadima koji su razumljivi za reprodukciju animacije. Ako nešto ne izgleda kako treba, to se može izmijeniti u ovom trenutku. Inače, može se sačuvati kao animirani GIF.

    Slijed animacije je postavljen redoslijedom po kojem su slojevi naslagani u paleti Layers, počevši od pozadine ili najnižeg sloja i napredujući prema gore. Ako se vaša animacija reproducira van niza, morat ćete podesiti redoslijed slojeva tako što ćete kliknuti na sloj za odabir i koristiti strelice gore i dolje na donjoj traci palete slojeva da promijenite njegovu poziciju.

    Image
    Image
  12. Sačuvaj animirani GIF. Čuvanje animiranog GIF-a prilično je jednostavna vježba. Prvo idite na File > Sačuvajte kopiju i dajte vašem fajlu relevantno ime i izaberite gde želite da sačuvate fajl.

    Image
    Image
  13. Dalje, idite na File > Izvezi kao da ga sačuvate kao animirani GIF.

    Image
    Image
  14. U dijalogu Izvoz slike koji se otvori, izaberite Odaberite vrstu datoteke i skrolujte do-g.webp" />. Ako dobijete upozorenje o slojevima koji se protežu izvan stvarnih granica slike, odaberite dugme Crop.

    Image
    Image
  15. Ovo će sada dovesti do dijaloga Sačuvaj kao GIF sa odjeljkom Opcije animiranih GIF-a. Možete ih ostaviti na zadanim vrijednostima, iako ako želite da se animacija reproducira samo jednom, trebate poništiti kvačicu Loop forever.

    Image
    Image
  16. Sada možete podijeliti svoj animirani GIF.

Zaključak

Ovdje prikazani koraci će vam dati osnovne alate za izradu vlastitih jednostavnih animacija, koristeći različite grafike i veličine dokumenata. Iako je krajnji rezultat prilično jednostavan u smislu animacije, to je vrlo jednostavan proces koji može postići svako s osnovnim znanjem o GIMP-u.

Preporučuje se: