Zapisi

Izrada animiranog GIF-a u programu „The GIMP“

Ko voli da surfuje netom, susreo se sa animiranim reklamama (banerima) na raznim stranicama. Iako umeju da izgledaju fascinantno, takođe umeju da odaju utisak kako ih je veoma teško napraviti. Ali nije baš tako. Potrebni su GIMP, ideja, malo vremena i već sledećeg trenutka animacija je tu. Veoma je lako, pokazaću vam kako

Struktura animiranog GIF-a

Animirani GIF je bitmapirana slika sastavljena iz slajdova (frejmova) koje čine crteži u paleti od najviše 256 boja (dakle, u indeksnoj paleti boja). U Layers panelu GIMP-a svaki frejm animiranog GIF-a predstavljen je pojedinačnim slojem poređanim od prvog frejma na dnu liste do poslednjeg na vrhu liste slojeva. Ako već gotov animirani GIF otvorite u GIMP-u, primetićete da svaki sloj ima naziv u formatu „Frame 1 (100ms) (combine)“ ili „Frame 1 (100ms) (replace)“. Jasno je da prvi deo naziva „Frame 1“ nema neku posebnu ulogu u samoj animaciji osim što predstavlja vizuelnu oznaku sloja u listi slojeva Layers. Međutim, sledeći deo „100ms“ predstavlja jednu od bitnijih stavki u animaciji – određuje vremenski period (u milisekundama) za koji će taj frejm biti prikazan u toku animacije. Verovatno naslućujete da u GIF animaciji ne mora svaki frejm da ima isti vremenski period za koji će biti prikazan, za razliku od klasičnih video formata (XviD, recimo). Ipak, zbog samog sistema renderovanja, nije moguće primetiti razliku između frejma od 1 i 10 ms. Poslednji deo naziva „combine“, odn. „replace“ označavaju način smene frejmova. Kako i sam naziv govori, „combine“ kaže interpreteru GIF animacije da sadržaj frejma treba da se sjedini sa prethodno prikazanim frejmom. Ovako se omogućava da frejm ne sadrži celu kompoziciju, t.j. pozadinu prethodnog frejma pored izmene za taj frejm, već samo razliku piksela koji se ne pojavljuju na prethodnom frejmu. Na ovaj način se znatno smanjuje ukupna veličina krajnje GIF datoteke, što kod kompleksnijih animacija može iznositi i na desetine KB. Za razliku od njega, „replace“ govori da frejm treba da zameni prethodni, što znači da on sadrži kompletnu sliku a ne samo razliku u odnosu na prethodni frejm. Ujedno pre prikazivanja tog, prethodni frejm mora da se sakrije u toku animacije. Po pravilu, ovakva vrsta animiraog GIF-a ume da bude primetno veća od animacije sa kombinovanim frejmovima.

Reč-dve o GIMP-u

Na početku života GNUzilla magazina pisao sam o istoriji i razvoju GIMP-a, ali nije na odmet ponoviti šta ovaj program radi. Reč je o naprednom slobodnom softveru za uređivanje bitmapirane gafike. Nije najsrećnije rešenje za profesionalnu primenu (npr. za DTP), ali je zato pobednik kada je reč o veb grafici. Neki autori su već opisivali razne alate i akcije koji se nalaze u GIMP-u, a ja vam ovoga puta pokazujem kako se on može iskoristiti za pravljenje efektnih animiranih GIF banera.

Šablonski baneri

Pre nego što počnete, u glavi ili na papiru treba da imate koncepciju kako baner treba da izgleda. Ja sam zamislio da na desnoj strani stoji deo lica GNUzilla maskote (koja još uvek nema zvanično ime) i u toku animacije namiguje jednim okom (onim koje gleda u posmatrača), dok se sa leve strane smenjuje tekst sa kratkim pauzama dovoljno dugim da se pročita prikazana poruka.

Zagrejavanje

Za početak pokrenite GIMP na uobičajeni način (ako do sada niste naučili kako to da uradite, prvo to naučite a onda nastavite da čitate ovo uputstvo), Iz menija File izaberite opciju New… (prečica ‘Ctrl+N’) i pojaviće se dijalog za kreiranje novog dokumenta. Iz padajuće liste Template treba izabrati predefinisanu stavku Web common banner 468×60, ili ručno uneti željene dimenzije banera, a potom kliknuti na dugme ‘OK’. U ovom uputstvu sam koristio dimenzije najčešće viđenih banera na netu.

Otvorio se prazan dokument pomenutih dimenzija.

Maskota

Već pripremljeni deo lica GNUzilla maskote ubacio sam kao novi sloj u novonapravljeni dokument sa belom pozadinom. Selektovao sam deo maskote sa slike otvorene u GIMP-u, iskopirao selekciju u clipboard (prečica ‘Ctrl+C’), prešao u dokument za baner i umetnuo sadržaj clipboarda (prečica ‘Ctrl+V’). Na ovaj način napravljena je plutajuća selekcija, pa sam iz menija Layer izabrao stavku New Layer, čime je plutajuća selekcija pretvorena u novi sloj. Umetnuti detalj sam pomerio u desnu stranu.

Kako je detalj koji sam ubacio imao transparentnu pozadinu i providnu senku, a kako GIF u indeksnoj paleti ne omogućava fine providne prelive (alfa blending), kao što to omogućava PNG format, odlučio sam da maskotu sjedinim sa belom osnovom pa sam na dijalogu Layers kliknuo desnim tasterom miša na sloj sa maskotom i iz kontekstnog menija izabrao stavku Merge Down.

Sloj „Background“ sam sakrio klikom na indikator prikaza sloja predstavljenog ikonicom oka sa leve strane stavke sloja u listi na dijalogu Layers.

Poruke

Sledeće što sam uradio je kreiranje slojeva sa tekstualnim porukama. Napominjem da GIMP svaki put kada se na površinu platna dokumenta klikne dok je aktivna alatka Add text to image (prečica ‘T’) kreira novi sloj na kome je omogućeno kucanje teksta. Vrsta, stil, veličina i karakteristike fonta određuju se na dijalogu Tool Options, najbolje pre nego što se klikne na površinu dokumenta. Time je omogućeno da se što preciznije odredi mesto od koga će započeti ispis teksta imajući u vidu da je mesto klika gornji levi ugao budućeg polja za tekst.

Kliknuo sam pomenutim alatom na površinu dokumenta i fontom Liberation Sans Bold veličine 58px ispisao „GNUzilla“. Uključio sam još i opcije Hinting, Force auto-hinter i Antialiasing na paleti Tool Options, kako bi tekst imao umekšane ivice.

Kako bi umekšane ivice ostale i nakon prebacivanja u indeksnu paletu boja, dodao sam belu pozadinu za ovaj tekst na sledeći način: desnim tasterom miša kliknuo sam na sloj „GNUzilla“ na dijalogu Layers i iz kontekstnog menija izabrao stavku Alpha to Selection.

Pošto je tekst selektovan, iz menija Select odabrao sam opciju Grow… i postavio vrednost na 2px.

Na ovaj način je selekcija proširena za 2px.

Prešao sam na donji sloj tasterom Page Down, iz menija Layer izabrao stavku New Layer… i napravio transparentni sloj. Na novonapravljenom sloju kreirao sam pozadinu teksta „GNUzilla“ popunjavanjem selekcije bojom pozadine, t.j. belom bojom (prečica ‘Ctrl+tačka’), i nakon toga ukinuo selekciju tasterskom kombinacijom ‘Ctrl+Shift+A’ i spojio sloj „GNUzilla“ sa slojem koji sadrži belu pozadinu, te ovako dobijeni sloj nazvao „GNUzilla“ (napominjem da spajanjem više slojeva naziv ciljnog sloja zadržava naziv sloja koji se nalazi na dnu grupe sjedinjenih slojeva).

Isključio sam vidljivost sloja „GNUzilla“. Drugi tekstualni sloj sa tekstom „Septembar/Oktobar 2007“ ispisao sam fontom Liberation Sans veličine 22px.

Kao i za prethodni sloj, dodao sam belu pozadinu tekstu sa selekcijom širom za 2px od osnovne širine teksta.

Kada se uključi prikaz prethodnog tekstualnog sloja, evidentno je da se delovi teksta, koji inače ne treba da se vide, ipak vide.

Zato pravim selekciju u obliku sloja „GNUzilla“ tako što desnim tasterom miša na dijalogu Layers kliknem na taj sloj i iz kontekstnog menija izaberem stavku Alpha to Selection. Potom pravim novi sloj izborom opcije New Layer… iz menija Layer i na njemu selekciju popunjavam belom bojom (prečica ‘Ctrl+tačka’), ukidam selekciju (prečica ‘Ctrl+Shitt+A’) i gornji sloj spajam sa ovim slojem (opcija Merge Down iz kontekstnog menija dobijenog desnim klikom miša na sloj na dijalogu Layers).

Fontom Liberation Sans Bold veličine 30px ispisao sam tekst „GIMP radionica“. Fontom Liberation Sans, takođe veličine 30px ispisao sam „Animirani GIF“ a potom pozicionirao ova dva sloja, pošto će oni predstavljati jednu dopunjenu celinu, i spojio ih opcijom Merge Down iz kontekstnog menija dijaloga Layers.

Na ova dva sloja sam takođe dodao belu pozadinu sa maskom za sloj „Septembar/Oktobar 2007“.

Mig na jedno oko

Kako bih dodao malo živosti na baner, realizovao sam u uvodu pomenuti detalj kada maskota namiguje okom kojim gleda u posmatrača.

Izabrao sam sloj „Background“ a potom alatom za selekciju Select rectangular regions (prečica ‘R’) selektovao oko na kojem ću raditi animaciju.

Umnožio sam selektovanu površinu sistemom Copy&Paste i napravio novi sloj od plutajuće selekcije (opcija New Layer… iz menija Layer).

Ovaj sloj sam nazvao „kapak“.

Pošto kapak koji će prekrivati oko u tri prolaza treba da ima dve nijanse zelene boje (radi dočaravanja senke), pipetom (Pick colors from the image, prečica ‘O’) kliknuo sam na tamniju nijansu zelene boje koja se nalazi odmah iznad ivice oka, čime je ta boja postavljena kao boja ispisa. Preokrenuo sam boje za ispis i pozadinu tasterom ‘X’ a onda kliknuo na površinu sa svetlijom nijansom zelene boje koja se nalazi iznad polja sa tamnijom nijansom. Na ovaj način sam postavio dve boje koje ću koristiti za crtanje kapka.

Sloj „kapak“ umnožio sam opcijom Duplicate Layer iz menija Layer i nazvao ga „kapak 1“. Na njemu sam četkicom (Paint fuzzy brush strokes, prečica ‘P’) iscrtao deo kapka svetlijom nijansom a potom tasterom ‘X’ postavio tamniju nijansu zelene boje za boju ispisa i docrtao donju ivicu kapka. Pošto se radi o manjem delu slike, zumirao sam radnu površinu za obradu kako bih lakše crtao po njoj.

Umnožio sam ovaj sloj opcijom Duplicate Layer iz menija Layer i novi sloj nazvao „kapak 2“. Na isti način kao i u prethodnom koraku, nacrtao sam donji deo kapka, koji u potpunosti prekriva oko.

Radi simulacije podizanja kapka, umnožio sam sloj „kapak 1“, novi sloj nazvao „kapak 3“ i postavio ga iznad sloja „kapak 2“. Sloj „kapak“ premestio sam iznad sloja „kapak 3“, da bi oko nakon simulacije namigivanja bilo celo otvoreno.

Planiranje frejmova za animaciju

Generalno, napravio sam osnovne frejmove za animaciju.

Usledilo je raspoređivanje osnovnih slojeva, i to: na dnu sloj „Background“ kao pozadina, sledi sloj „GNUzilla“, potom četiri sloja „kapak“ za animaciju miga, iznad sloj „Septembar/Oktobar 2007“ i na vrhu sloj „GIMP radionica“.
Da bih uneo još više živosti u celu priču, jer jedan mig ne čini konstantnu animaciju, umnožio sam četiri sloja „kapak“ i postavio prvu kopiju sa istim rasporedom iznad sloja „Septembar/Oktobar 2007“, a drugu kopiju iznad sloja „GIMP radionica“.

Završni radovi

Kada su frejmovi pripremljeni za animaciju, ostaje još par koraka.

Prvi korak u pripremi materijala za izvoz u animirani GIF jeste pretvaranje kompozicije u indeksnu paletu boja. Što manje boja ima (u svim frejmovima zajedno), to će konačni dokument imati manju veličinu u KB. Iz menija Image izabrao sam podmeni Mode, i sa njega stavku Indexed…, nakon čega se otvorio dijalog za podešavanje parametara konverzije u indeksnu paletu boja. Za ovaj primer sam izabrao 35 boja u optimalnoj paleti. Bitna stavka je i to da sam isključio simulaciju preliva (Dithering) postavljanjem ove opcije na vrednost None.

Sledeći korak je opcimizacija svih slojeva. Kako ću koristiti kombinovani režim pretapanja frejmova u cilju dobijanja što manjeg dokumenta, iz menija Filters i podmenija Animation izabrao sam stavku Optimize (Difference). Na ovaj način su precizno uklonjeni svi suvišni delovi (pikseli) na svim slojevima. Na slici koja sledi prikazani su optimizovani slojevi „GNUzilla“ i „kapak 3“.

Pored optimizacije same slike, postavljeni su i početni parametri animacije za svaki sloj. Naime, naziv svakog sloja je sada u formatu „GNUzilla (100ms) (combine)“. Značenje stavki u zagradama neću ponavljati jer sam o tome pisao na početku članka.

Predpregled i otklanjanje nedostataka

Već u ovom momentu se može videti kako buduća animacija može da izgleda. Kažem „može“, iz tog razloga što se dinamičnost animacije postiže promenom tajminga za frejmove. Plejer za reprodukciju animacije dobija se kada se iz menija Filters u podmeniju Animation izabere stavka Playback…

Ovde se pored uvida u tajming frejmova mogu uvideti i nedostaci. Na primer, ja sam prevideo da će prvi frejm biti bez ispisanog naziva magazina „GNUzilla“, pa sam tu grešku ispravio spajanjem sloja „GNUzilla“ sa pozadinskim slojem „Background“.
Sledeće što sam uradio je promena tajminga. Za svaki tekstualni frejm postavio sam trajanje na 2 sekunde (2.000 ms), osim za sloj „GNUzilla“ koji sam postavio na 4 sekunde (4.000 ms). Frejmove za animaciju kapaka postavio sam na 50 ms, osim slojeva „kapak 2“ i njegovih kopija koje sam ostavio na podrazumevanih 100 ms. Konačne postavke frejmova pre izvoza u animirani GIF izgledaju kao na donjoj slici.

Neka bude baner…

Preostao je još jedan, završni korak: izvoz u animirani GIF. Iz menija File izabrao sam stavku Save As… i na dijalogu Save Image upisao naziv datoteke u koju ću sačuvati animirani GIF sa ekstenzijom („GNUzilla_GIMP_radionica.gif“ u polju Name). Za ekstenziju sam izabrao GIF Image (*.gif), mada ovo nije obavezno raditi jer na osnovu ekstenzije upisane u polju Name, GIMP sâm prepoznaje vrstu datoteke u koju će sačuvati dokument.

Kada se klikne na dugme Save (ili pritisne taster ‘Enter’) otvara se dijalog Export File na kome treba izabrati opciju Save as Animation i potom kliknuti na dugme Export.

Poslednji u nizu je Save as GIF dijalog za određivanje parametara animacije. Ovde sam aktivirao opciju Interlaced koja kod većih slika omogućava parcijalno renderovanje na ekranu. Polje GIF comment nije obavezno popuniti, ali je informativno. Aktivirao sam i opciju Loop forever čime se GIF interpreteru nalaže da animaciju neprestano ponavlja, t.j. da nakon poslednjeg frejma ponovo prikaže prvi, i tako u krug.

Pošto sam u GIMP-u već pripremio slojeve za izvoz u animirani GIF i zadao tajminge i režime preklapanja frejmova, opcije Delay between frames where unspecified i Frame disposal where unspecified nisam posebno podešavao. Međutim, ove opcije su korisne kod pravljenja animacije od prethodno nepripremljenog GIMP dokumenta.

Konačna animirana GIF datoteka napraljvena u cilju pisanja ovog uputstva teška je svega 13 KB, sastavljena je od 15 frejmova a jedan „krug“ animacije traje 8,75 sekundi.

Odjava i najava

Ovde možete videti još animiranih banera koje sam radio u GIMP-u.

baner foruma časopisa „Svet kompjutera“

udruženje korisnika SBB kablovskog interneta KGHUB

baner zahvalnica za torent trekere

I na posletku, zašto statično kad može da se mrda i uz pomoć GNU/Linuks alata.