Animacije u Adobe Photoshop

Photoshop omoguava da kreirate animirane GIF datoteke koje moete postaviti na blog ili sajt i time ih uiniti interesantnijim. Prednost kreiranja animacija u GIF formatu je da ih moe prikazati svaki Internet ita (Web Browser) bez ikakvih specijalnih zahteva i instalacija dodatnih komponenti. Jedino o emu trebate voditi rauna je da ne kreirate animaciju sa previe okvira (frame) jer ovaj format moe da bude prevelik za uitavanje ako postane kompleksan i sa previe ramova ili okvira. Jo jedna stvar koju trebate znati pre nego ponete da kreirate animacije je da je GIF format limitiran na 256 boja koje maksimalno moe ovaj format da sadri i prikae. U Photoshopu moete kreirati animacije na dva naina: automatski (Tweening) i manualno okvir po okvir (frame by frame). Tweening metoda automatski odrauje posao i sve zavrava umesto Vas. Automatski kreira odreeni broj okvira koji Vi budete naveli i odrauje i ostalo kao na primer podeavanje providnosti sloja tako da dobijate Fade In efekat gde se objekat postepeno pojavljuje na scenu. Drugi nain je manualan i on podrazumeva da imate unapred kreirane slojeve sa sadrajem koji e biti prikazivani u animaciji na osnovu vidljivosti sloja (vidljivost sloja reguliete preko ikonice oka ispred minijaturnog prikaza sloja na LAYERS kartici).
Automatizovana metoda animacije

Da krenemo od automatizovane metode. Slojeve sa sadrajem koji e biti koriteni u animaciji moete unapred kreirati ili na licu mesta. U ovom sluaju ja u kreirati novi dokumenat 300X250 px sa belom pozadinom i rezolucijom 72 jer mi vea nije potrebna iz razloga jer na Internetu vea rezolucija ne moe ni biti prikazana. U Color Mode trebate imati RGB izabrano jer animacija ide na Internet odnosno bie prikazivana na ekranu, 8 bit i u Color Profile podesite na sRGB IEC61966-2.1, Pixel Aspect Ratio treba da bude Square Pixels. Sloj koji slui kao pozadina moe biti providan, popunjen bojom, obrascem, da sadri neku grafiku koju ste kreirali ili ak fotografiju. Imajte na umu da GIF animacije mogu da sadre maksimalno 256 boja.

Ovim sam kreirao novi dokumenat i imam samo Background sloj. Napomena da Background

sloj ne moe biti animiran. Sledee to sam uradio je da sam izabrao Horizontal Type Tool i upisao Photoshop. Automatski je kreiran novi sloj za slova na LAYERS kartici i sada imam ukupno 2.
Rad sa slojevima za animaciju

Kada kreirate novi sloj na LAYERS kartici on je vidljiv na svim okvirima animacije. Ovo je fabriki ukljuena opcija i moete je iskljuiti preko menija ANIMATION (FRAMES) kartice. Kliknite ispred New Layers Visible In All Frames da se izgubi znak za potvrdu. Da bude kreiran novi sloj svaki put kada kreirate novi okvir ukljuite Create New Layer For Each New Frame opciju koja se nalazi u istom meniju kao i prethodna opcija.

Prikazivanje ANIMATION (FRAMES) kartice

Sada je na redu prikazivanje Animation kartice preko koje treba kreirati animaciju. Da prikaete Animation karticu idite na Window > Animation. Ukoliko vam se desi da je prikazana ANIMATION (TIMELINE) kartica kliknite na ikonicu za meni kartice koja se nalazi u gornjem desnom uglu i izaberite Convert to Frame Animation. Druga kartica MEASUREMENT LOG je dostupna samo u Photoshop Extended verziji.

ANIMATION (FRAMES) kartica

Imaete prvi okvir kreiran na Animation (FRAMES) kartici. Obadva sloja bie vidljiva i samim tim imaete belu pozadinu i tekst koji ste upisali u boji koju ste izabrali prilikom upisivanja teksta.

Kreiranje Fade In efekta

Kliknite na ikonicu za novi okvir (duplira okvir koji je aktivan) i napravili ste jo jedan koji je duplikat prethodnog. Kliknite na prvi okvir da ga aktivirate.Na LAYERS kartici kliknite na sloj sa tekstom. Iskljuite opciju Propagate Frame 1 i podesite providnost Opacity na 0%. Propagate frame 1 opcija slui da prenese odnosno iskopira promene i na ostale povezane (dobivene dupliranjem) okvire koji se nalaze na istom sloju to u ovom sluaju nije potrebno. Kada podesite Opacity na 0% primetiete da je na okviru jedan ostala samo bela pozadina odnosno slova se ne vide. Tekst na prethodno dupliranom okviru je u potpunosti vidljiv (jer je iskljuena opcija Propagate Frame 1).

Kada koristite Tween opciju bitno je koji je okvir aktivan (slektovan, obojen plavom bojom): 1. Ako je aktivan samo jedan okvir imaete opciju da izaberete izmeu kojih okvira treba da budu ubaeni oni koje e Photoshop automatski kreirati u Tween dijalogu: 2. Ako ste selektovali odnosno aktivirali dva susedna okvira bie ubaeni okviri izmeu njih.

3. Ako ste selektovali vie od dva okvira koji moraju da budu kontinuirani da bi Tween

opcija bila dostupna, okviri koji su izmeu prvog i poslednjeg e biti zamenjeni novim.
4. Ako selektujete prvi i poslednji okvir animacije, automatski kreirani okviri e biti

ubaeni iza poslednjeg okvira. Sa prvim okvirom aktivnim (selektovanim) kliknite na Tween (Tweens animations frames) dugme. U Tween dijalogu podesite da parametri budu kao na snimku:

Tween With je opcija koja odreuje izmeu kojih okvira da automatski budu kreirani novi okviri:

Next Frame odreuje da budu ubaeni okviri izmeu aktivnog i onog koji dolazi sa njegove desne strane. Previous Frame odreuje da budu ubaeni okviri izmeu aktivnog i onog koji je prvi sa leve strane na ANIMATION (FRAMES) kartici. First Frame odreuje da budu ubaeni okviri izmeu prvog i poslednjeg okvira i ova opcija je dostupna samo kada je selektovan poslednji okvir animacije. Last Frame odreuje da okviri budu ubaeni izmeu prvog i poslednjeg okvira i ova opcija je dostupna samo kada je selektovan prvi okvir animacije.

Frames to Add odreuje broj okvira koje Photoshop treba automatski da kreira. Layers odreuje koji slojevi sa LAYERS kartice da budu ukljueni. U ovom sluaju je ostavljena opcija All Layers (svi slojevi) a imate i opciju da ukljuite samo selektovane slojeve (oni koji imaju plavu pozadinu). Parameters sekcija ima tri opcije i obino ih treba sve ostaviti ukljuene. Prva opcija je pozicija sloja, druga providnost a trea efekti (misli se na efekte koji su primenjeni na sloj). Photoshop e kreirati 5 nova okvira jer je u tekst polju Frames to Add pisalo 5 i svi e imati

razliit stepen providnosti od 0% za prvi koji ste vi podesili do 100% za poslednji koji je ostao nepromenjen. Kliknite na svaki od okvira i pogledajte ta pie u polju Opacity. Sa svakim okvirom koji je automatski kreiran moete raditi zasebno recimo dodati stil ili efekat sloja (dodati senku-Drop Shadow ili promeniti boju). Promena koju ste napravili bie vidljiva samo na tom okviru.

Podeavanje trajanja svakog okvira animacije

Ispod svakog okvira se nalazi crni trougao koji kada kliknete na njega otvara listu sa ponuenim trajanjem svakog okvira. Izaberite neki od predefinisanih trajanja ili ukucajte novo vreme trajanja odnosno prikazivanja okvira klikom na Other... Vrednosti su izraene u desetim delovima sekunde (0.1 seconds) i sekundama 1.0. Da odredite za sve okvire isto vreme trajanja kliknite na prvi okvir zatim pritisnite Shift i kliknite na poslednji da ih sve aktivirate. Zatim kliknite na mali crni trougao ispod bilo kog okvira i izaberite vreme trajanja. Kliknite na dugme Play i bie vam prikazana animacija koja se sastoji od postepenog pojavljivanja upisanog teksta u ovom primeru. Broj ponavljanja animacije odreujete iz liste koja se pojavljuje kada kliknete na mali crni trougao koji se nalazi nasuprot Forever natpisa odmah ispod prvog okvira (Frame). Za broj ponavljanja imate tri pre-definisane opcije: Once to jest samo jednom, 3 times je da animacija bude tri puta ponovljena i Forever odnosno da se non-stop ponavlja u Internet pregledau (Browser) sve dok je stranica na kojoj se animacija nalazi prikazana. Poslednja opcija

je Other i tu imate mogunost da sami ukucate i odredite broj ponavljanja.

Dodatne opcije na LAYERS kartici

Na LAYERS kartici imate tri dodatne opcije u vidu ikonica u odnosu na LAYERS karticu kada ne radite sa animacijama a to su:
1. Unify layer position za sluaj da se predomislite i recimo pomerite tekst da bude pri

vrhu a ne na sredini kao to je to sluaj u ovom primeru. Aktivirajte sloj sa tekstom, izaberite Move Tool, kliknite na slova na ekranu i prebacite ih na drugu lokaciju (bilo koji okvir da je aktivan). Zatim kliknite na prvu ikonicu iza Unify natpisa i potvrdite na Match dugme. Pozicija teksta odnosno sloja na ostalim ramovima animacije bie podeena automatski. 2. Unify layer visibility je druga ikonica i ona slui da izjednaite vidljivost sloja. U ovom sluaju moete recimo kliknuti na poslednji okvir i iskljuiti vidljivost sloja sa tekstom na LAYERS kartici tako to ete kliknuti na ikonicu oka da ostane prazno polje a zatim na Unify layer visibility (sloj sa tekstom treba da je aktivan) da iskljuite vidljivost sloja sa tekstom i na svim ostalim okvirima.
3. Trea ikonica je Unify layer style da biste izjednaili stil ili efekat sloja na svim

okvirima. Ako primenite stil sloja na slova dok je selektovan (oznaen) samo jedan okvir na ANIMATION (FRAMES), on e biti vidljiv samo kada je prikazan taj okvir animacije. Da primenite stil ili efekat na sve ostale okvire kliknite na Unify layer style. Kada izaberete neku od ovih opcija pojavie se dijalog u kome treba da kliknete na Match dugme da Photoshop izvri zadatu komandu. Ukljuena opcija je naglaena kao to se vidi na snimku ispod (prva ikonica nasuprot Unify natpisa).

Kreiranje Fade Out efekta

Sada emo kreirati Fade Out efekat koji radi suprotnu stvar od Fade In i ini da tekst polako gubi boju i nestaje sa ekrana. Poto je prvi okvir prazan, ne vidi se nita na njemu njega treba preskoiti i kliknuti na drugi okvir. Poslednji okvir animacije ima providnost od 100% i njega treba izostaviti iz selektovanja jer je cilj da postignemo efekat smanjivanja vidljivosti od tog stanja ka providnosti odnosno ne-vidljivosti teksta. Sa drugim okvirom aktivnim pritisnituo sam Shift na tastaturi i kliknuo na pretposlednji okvir. Sada su selektovani okviri 2-6. Da iskopiram okvire kliknuo sam na meni kartice koja se nalazi u gornjem desnom uglu i izabrao Copy Frames. Ispod ove opcije se nalazi opcija Paste Frames koju treba koristiti prilikom nalepljivanja iskopiranih okvira.

Sada treba kliknuti na poslednji okvir animacije (7) da bude samo on selektovan (selektovan okvir ima plavu pozadinu) i nalepiti iskopirane okvire preko Paste Frames opcije iz menija kartice. Pojavie se Paste Frames dijalog sa svojim opcijama nalepljivanja:

Replace Frames opcija slui da zamenite selektovane okvire sa onima koje nalepljujete. Ne kreiraju se novi slojevi ve se sadraj nalepljuje na postojee kada se radi o istom dokumentu, kada nalepljujete u drugi dokumenat to jest animacijiu nalepljeni slojevi su vidljivi a postojei sakriveni.

Paste Over Selection radi potpuno istu stvar s tim to se duplira broj slojeva kada nalepljujete u istoj animaciji, kada nalepljujete u drugi dokumenat to jest animaciju nalepljeni slojevi su vidljivi a postojei sakriveni. Paste Before Selection nalepljuje okvire ispred selektovanog ili selektovanih a kada nalepljujete u drugi dokumenat to jest animaciju nalepljeni slojevi su vidljivi a postojei sakriveni.. Paste After Selection nalepljuje iza selektovanog ili poslednjeg u nizu selektovanih, kada nalepljujete u drugi dokumenta to jest animaciju nalepljeni slojevi su vidljivi a postojei sakriveni. Ovo je opcija koju treba izabrati u ovom sluaju.

Link Added Layers slui da povee slojeve koji se nalepljuju. Koristite je samo kada nalepljujete u drugi dokumenat odnosno animaciju i planirate da ih premetate. Kada izaberete opciju potvrdite na dugme OK.

Sada u naem projektu imamo nalepljene okvire koji idu u suprotnom pravcu od onoga koji nam je potreban da bismo dobili Fade Out efekat. Nalepljeni okviri idu od skoro providnog ka skoro vidljivom. Da biste ovakvu situaciju odnosno redosled okvira izokrenuli kliknite jo jednom na meni kartice u gornjem desnom uglu (nalepljeni okviri su selektovani i imaju plavu pozadinu) i izaberite Reverse Frames. Sada imamo redosled koji je potreban i moete pregledati kako to izgleda klikom na dugme Play.

Na isti nain pomou Tween opcije moete kreirati i ovakvu animaciju:

U ovom sluaju nakon dupliranja prvog okvira (opisano na poetku), vratite se na prvi okvir, iskljuite Propagate Frame 1 i prevucite tekst, logo ili bilo koji sadraj van platna za crtanje (podruje slike na centralnom delu ekrana). Drite Shift dok prevlaite objekat da bi ste pravolinijski pomerali. Sve ostalo je potpuno isto kao i za Fade In/Out. Ja sam u drigoj animaciji koristio ubaeni Smart Object sa logom koji sam imao unapred kreiran. Kasnije sam se predomislio i promenio Background sloj koji slui kao pozadina.

Manualno kreiranje animacije

Za manualno ili runo kreiranje animacije trebate imati unapred kreirane slojeve. Ovo je preporuljivo ali ih moete kreirati i u toku kreiranja animacije jer sami odreujete koji su slojevi vidljivi na LAYERS kartici. U ovom sluaju ja sam unapred pripremi sve slojeve. Pozadina animacije je opet bele boje a iznad nje su slojevi sa slovima. Svaki sloj sadri samo jedno slovo rei Photoshop. Iskljuio sam vidljivost svih slojeva osim Background koji e posluiti kao pozadina. Postupak je isti kao i prethodno opisani: otvorite datoteku sa pripremljenim slojevima a zatim prikaete karticu za animacije iz Window > Animation. Prvi okvir je kreiran automatski. Ostavite vidljivo oko ispred sloja na LAYERS kartici iji sadraj

treba da bude prikazan u tom prvom okviru. Kliknite na ikonicu za novi okvir (Duplicates selected frames) i napravili ste jo jedan koji je duplikat prethodnog. Sada na LAYERS kartici kliknite ispred sloja iji sadraj treba da bude prikazan na drugom okviru animacije da se pojavi ikonica oka.

Kliknite ponovo na ikonicu za novi okvir da dodate trei i iskljuite vidljivost u ovom sluaju slova P (kliknite ispred sloja da se izgubi ikonica oka) a ukljuite vidljivost slova H. Nastavite sa dodavanjem okvira i ukljuivanjem i iskljuivanjem slojeva sa slovima (u ovom primeru, sadraj moe biti po vaem izboru).

Kada zavrite sa dodavanjem okvira i njihovim sadrajem preite na trajanje i broj ponavljanja kao to je prethodno opisano.

Sauvaj animaciju na disku

Na kraju treba sve to sauvati na disku. Prvo treba optimizirati animaciju. Kliknite na ikonicu menija ANIMATION (FRAMES) kartice i izaberite Optimize Animation.. U dijalogu koji se pojavi ostavite kako jeste a po fabrikom podeavanju su ukljuene obadve opcije:

Bounding Box otseca svaki okvir ako je bilo promena u odnosu na prethodni. Reduntant Pixel Removal ova opcija je korisna za smanjivanje veliine datotetke jer pretvara sve piksele koji su isti kao na prethodnom u providne, drugim reima prikazuje jedne te iste za vie okvira to dovodi do smanjenja veliine. Da bi ova opcija imala funkciju Transparency opcija treba da bude ukljuena prilikom finalne optimizacije u Save for Web & Devices dijalogu. Takoe je bitno da je Disposal Method podeen na Automatic. Disposal Method odreuje dali pikseli sa jednog okvira mogu biti prikazani na mestima gde je naredni okvir providan:

Automatic je u veini sluajeva najbolja opcija i ona odreuje da trenutni okvir ne bude vidljiv prilikom prikazivanja narednog ako naredni ima podeenu providnost sloja. Do Not Dispose odreuje da sadraj trenutnog okvira bude vidljiv kroz providne delove narednog. Dispose odreuje da trenutni okvir ne bude vidljiv kroz providne delove narednog.

Da proverite Disposal Method i eventualno ga promenite kliknite na okvir da ga selektujete a zatim kliknite desnim klikom. Kada hoete da odredite odjednom za sve okvire kliknite na prvi, pritisnite Shift i kliknite na poslednji da selektujete sve okvire a zatim kliknite desnim klikom. Iz lebdee liste koja se pojavi kliknite ina opciju koju hoete da aktivirate.

Kada ste odradili optimizaciju idite na File > Save for Web & Devices. U ovom dijalogu prvo kliknite na Optimized pri vrhu sa leve strane da biste gledali samo datoteku koju trebate da sauvate. Izaberite GIF za format jer ostali dostupni formati ne podravaju animacije. Ispod liste sa formatima izaberite jednu od Perceptual, Selective ili Adaptive metode redukcije boja. Gledajte na animaciju i veliinu datoteke (metoda takoe utie na veliinu) i procenite koja vam metoda najvie odgovara. Imate mogunost da podesite paletu sa bojama odnosno koliko boja da bude prikazano. Gledajte da izaberete to manji broj a da animacija odnosno boje budu korektno ili zadovoljavajue prikazane. Broj boja koji je izabran direktno utie na veliinu datoteke i bira se iz Colors padajue liste. Tabela sa bojama koje se pojavljuju u animaciji se nalazi na sredini sa desne strane - Color Table. Ukljuite Transparency ako Vaa animacija ima providnu pozadinu a u nekim sluajevima (kada vie okvira ima isti sadraj koji se ponavlja - Reduntant Pixel Removal) ova opcija e smanjiti veliinu datoteke. Ne zaboravite da proverite da je opcija Convert to sRGB ukljuena, ako nije ukljuite je. Interlaced opcija omoguava da animacija (GIF datoteka generalno) bude prikazana pre nego se uita njen kompletan sadraj i ova opcija nije preporuljiva pogotovo ne za animirane GIF datoteke.

Animaciju ili svaki okvir zasebno moete pregledati u ovom dijalogu preko dugmia u donjem desnom uglu. Moete se predomisliti i promeniti broj ponavljanja animacije iz Looping Options padajue liste. Da vidite kako animacija izgleda u Vaem podrazumevanom itau Internet stranica kliknite na Preview.. dugme sa leve strane. Kada sve podesite i pregledate kliknite na Save dugme i sauvajte datoteku na disku.