Izrada animiranog GIF-a s GIMP-om

Sadržaj:

Izrada animiranog GIF-a s GIMP-om
Izrada animiranog GIF-a s GIMP-om
Anonim

GIMP je iznimno moćan softver s obzirom na to da je besplatan. Web dizajneri bi mu posebno mogli biti zahvalni za sposobnost izrade jednostavnih animiranih GIF-ova.

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 bilo tko s osnovnim razumijevanjem GIMP-a.

Kako napraviti animirani-g.webp" />

Sljedeći koraci prikazuju jednostavnu animaciju veličine web bannera koristeći nekoliko osnovnih grafika, malo teksta i logotipa.

Upute u ovom članku odnose se 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 vodič, 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 započeti s praznim prostorom tako da nisu potrebne nikakve promjene na stvarnom sloju Background jer je on već čisto bijel.

    Međutim, potrebna je promjena naziva sloja u Layers paleti. Kliknite desnom tipkom 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 tijekom kojeg će ovaj kadar biti prikazan u animaciji. ms označava milisekunde, a svaka milisekunda je tisućinka sekunde. Ovaj prvi okvir prikazat će se četvrt sekunde.

    Image
    Image
  4. Postavi Frame Two. Za tutorial se za ovaj okvir koristi grafika otiska. Idite na File > Open as Layers i odaberite grafičku datoteku. Ovo postavlja otisak na novi sloj koji se može postaviti prema potrebi pomoću Move Tool.

    Image
    Image
  5. Kao i s pozadinskim slojem, ovaj novi sloj potrebno je preimenovati kako bi se dodijelilo vrijeme prikaza za okvir. U ovom slučaju, 750 ms.

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

    Image
    Image
  6. Postavite okvire tri, četiri i pet. Sljedeća tri okvira su još otisaka stopala koji će hodati po transparentu. Oni su umetnuti na isti način kao drugi okvir, koristeći istu grafiku i drugu grafiku za drugu nogu. Kao i prije, vrijeme je postavljeno na 750 ms za svaki okvir.

    Svaki od slojeva otiska treba bijelu pozadinu kako bi samo jedan okvir ikada bio vidljiv – trenutno svaki ima prozirnu pozadinu. To možemo učiniti stvaranjem novog sloja odmah ispod sloja otiska, ispunjavanjem novog sloja bijelom bojom, a zatim desnim klikom na sloj otiska i klikom na Spoji dolje

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

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

    Image
    Image
  8. Postavi okvir sedam. Ovo je posljednji okvir i prikazuje tekst zajedno s logotipom Lifewire.com. Prvi korak ovdje je dodavanje još jednog sloja s bijelom pozadinom.

    Image
    Image
  9. Zatim upotrijebite Alat za tekst za dodavanje teksta. Ovo se primjenjuje na novi sloj, ali mi ćemo to riješiti nakon što dodate logotip ili novu sliku, što se može učiniti na isti način na koji je prethodno dodana grafika otiska.

    Image
    Image
  10. Kada ih posložimo po želji, možemo upotrijebiti Spajanje prema dolje za kombiniranje slojeva s logotipom i tekstom, a zatim spojiti taj kombinirani sloj s bijelim slojem koji je dodan prethodno. Ovo proizvodi jedan sloj koji će oblikovati konačni okvir i odlučili smo ga prikazati 4000 ms.

    Image
    Image
  11. Pregled animacije Prije spremanja animiranog GIF-a, GIMP ima opciju da ga pregleda u akciji odlaskom na Filteri >Animacija > Reprodukcija Ovo otvara dijaloški okvir za pregled s gumbima koji sami po sebi objašnjavaju za reprodukciju animacije. Ako nešto ne izgleda kako treba, to se može ispraviti u ovom trenutku. U suprotnom, može se spremiti kao animirani GIF.

    Sekvenca animacije postavljena je redoslijedom kojim su slojevi naslagani u paleti Slojevi, počevši od pozadine ili najnižeg sloja pa prema gore. Ako se vaša animacija reproducira izvan niza, morat ćete prilagoditi redoslijed svojih slojeva, klikom na sloj za odabir i korištenjem strelica gore i dolje na donjoj traci palete slojeva za promjenu položaja.

    Image
    Image
  12. Spremite animirani GIF. Spremanje animiranog GIF-a prilično je jednostavna vježba. Najprije idite na Datoteka > Spremi kopiju i dajte svojoj datoteci odgovarajući naziv i odaberite gdje želite spremiti datoteku.

    Image
    Image
  13. Zatim idite na Datoteka > Izvezi kao da biste je spremili kao animirani GIF.

    Image
    Image
  14. U Izvoz slike dijaloškom okviru koji se otvori, odaberite Odaberite vrstu datoteke i pomaknite se do-g.webp" />. Ako dobijete upozorenje o slojevima koji se protežu izvan stvarnih granica slike, odaberite gumb Crop.

    Image
    Image
  15. Ovo će sada dovesti do dijaloga Spremi kao GIF s odjeljkom Opcije animiranog GIF-a. Možete ih ostaviti na njihovim zadanim postavkama, no ako želite da se animacija reproducira samo jednom, trebali biste poništiti odabir Ponavljaj zauvijek.

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

Zaključak

Ovdje prikazani koraci dat će vam 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 svatko s osnovnim znanjem o GIMP-u.

Preporučeni: