Animacija na Internetu odavno je prestala biti jednostavna dekoracija stranice i pretvorila se u koristan alat za poboljšanje upotrebljivosti. Pomaže korisniku u interakciji sa interfejsom i skreće pažnju na važne tačke.
Animacija je sekvencijalni prikaz sličnih kadrova jedan za drugim. Svaki okvir se neznatno mijenja, tako da izgleda da se slika kreće.
Za animiranje sučelja, kreiranje interaktivnih prototipova ili reklama, koristite posebne programe, na primjer, Adobe Animate ili After Effects.
Da biste kreirali jednostavan web banner ili prezentaciju, ne morate razumjeti posebne programe. Ugrađeni Photoshop alati su također pogodni za ovo.
Prvi korak je da odlučimo šta ćemo animirati i kakav rezultat planiramo postići.
Da bih napravio animaciju, uzeo sam jedan od sjajnih projekata sa Behancea i precrtao ga u Photoshopu. Poravnao sam ga prema mreži sadržaja, odabrao veličine i smjestio svaki element u poseban sloj. Kao rezultat toga, prvi ekran stranice je nacrtan u PSD formatu, koji sam potom animirao.
Prije nego što kreirate animaciju, morate pripremiti potrebne alate - uključite prikaz "Vremenske linije", koja pomaže u upravljanju okvirima u animaciji.
Da bih to učinio, otvaram karticu "Prozor" i označavam okvir pored linije "Vremenska linija".
Na dnu prozora Photoshopa trebala bi se pojaviti široka linija, pomoću koje možete kontrolirati okvire u animaciji.
Da biste kreirali prvi kadar, kliknite na ikonu "Kreiraj animaciju okvira" na "Vremenskoj liniji".
Kada se pojavi prvi okvir, možete početi stvarati pokret.
U Photoshopu se element može animirati na nekoliko načina:
Prvo animiram sliku balalajke. Da bi slika izgledala glatko, koristim alatku “Insert Intermediate Frames”. Da bi Photoshop sam animirao element, potrebno je postaviti dva stanja za element - početno stanje na prvom kadru i krajnje stanje na sljedećem.
Tako da ću dodati još jedan okvir na vremensku liniju koristeći dugme "Napravi kopiju okvira".
Nakon dodavanja novog okvira, prelazim na prvi i uklanjam vidljivost sloja balalajke. Također možete postaviti neprozirnost sloja na 0%.
U sljedećem kadru provjeravam da li se vidi sloj sa balalajkom.
Nakon rada sa slikom balalajke, prilagođavam izgled linije teksta. U prvom kadru biram tekst "Duša pjeva" i pomjeram ga udesno izvan izgleda. Isto radim i sa tekstom "3 žice" - pomjerite ga ulijevo dok ne nestane.
U drugom kadru vraćam tekst nazad.
Odlično. Sada ubacimo srednje okvire između ključnih okvira.
Da biste to uradili, kliknite na dugme „Kreiraj srednje okvire” na „Vremenskoj liniji”.
U dijaloškom okviru koji se pojavi označavam koliko okvira treba dodati.
Što je više okvira, animacija je duža i element se glatkije kreće. Ako ima premalo okvira, elementi će se trzavo kretati.
Prvi dio animacije je spreman. Sada možete da ga reprodukujete i vidite šta se dogodilo.
Kliknem na dugme za reprodukciju na vremenskoj liniji.
Umetanje srednjih kadrova pomoglo je brzom stvaranju animacije s glatkim izgledom i kretanjem elemenata.
Pojavljivanje, nestajanje i kretanje mogu se kombinirati jedno s drugim kako bi se postigli još zanimljiviji efekti.
Osim linearne animacije, ponekad je potrebno stvoriti haotično kretanje ili prikazati složenu interakciju elemenata. Obično, da bi to učinili, kreiraju nekoliko kopija prvog kadra, a zatim malo mijenjaju svaku kopiju - crtaju animaciju kadar po kadar.
Kopirat ću zadnji okvir nekoliko puta da stvorim kretanje strelice i tekst "idi u kupovinu".
U sljedećem kadru biram željeni sloj sa tekstom i strelicom, pomjeram ga malo gore, au posljednjem kadru - dolje.
Sada možete pokrenuti animaciju i vidjeti rezultat.
Pošto se okviri brzo mijenjaju, oči nemaju vremena da se fokusiraju na posljednji kadar i fiksiraju konačan položaj objekata na ekranu.
Stoga sam povećao trajanje posljednjeg kadra: trebate kliknuti na strelicu pored natpisa "0 sec." i izaberite drugi put sa liste.
Za zadnji kadar sam podesio trajanje na dvije sekunde. Reprodukcija se sada usporava na kraju. Stoga je ugodno promatrati kretanje elemenata.
U prozoru za pregled možete ponovo pogledati animaciju i promijeniti postavke čuvanja.
Podrazumevano, animacija se zaustavlja nakon reprodukcije. Stoga mijenjam način reprodukcije u “Ponavljanje” i čuvam.
Ovo je rezultirajuća animacija:
U Photoshopu je lako kreirati kratke interaktivne banere i prezentacije i animirati pojedinačne elemente. Zgodno je eksperimentirati s rezultatom.
Kreirajte novi fajl sa dimenzijama 700 x 300 px.
Otvaranje prozora Vremenska linija((Prozor - Vremenska linija)).
Kliknite na dugme " Kreirajte animaciju okvira» (Kreirajte animaciju okvira).
Koristeći alat () kreiramo 3 sloj s tekstom (“Animacija”, “ovo”, “jednostavno”).
Koristite alat (Move Tool / V Key) da postavite tekst kao na slici ispod.
U prozoru Vremenska linija(Vremenska skala) odaberite prvi kadar i kliknite na “ Duplicira odabrane okvire» (Kreiranje kopije odabranih okvira).
Mi stvaramo 4 kopije odabranih okvira.
Odaberite u prozoru Vremenska linija(vremenska linija) drugi kadar i ostavite vidljivim samo slojeve " Animacija" i " Pozadina».
Izaberi četvrti kadar i ostavite vidljivim Sve slojeva.
Postavimo parametar ponavljanja za našu animaciju. U meniju prozora Vremenska linija(Vremenska skala), promijenite parametar ponavljanja iz " Jednom" na " Konstantno"(slika ispod).
Sada možemo koristiti početak reprodukcije animacije.
Postavke animacije u “File - Save for Web” (File – Save for Web) Photoshop CC. Konačan rezultat 
Da biste napravili animaciju, ne morate imati neko fenomenalno znanje, samo trebate steći odgovarajući alat i koristite ga ispravno. Postoji dosta takvih rješenja, ali je najpoznatije od njih Adobe Photoshop. Ovaj članak će vam pokazati kako možete brzo napraviti animaciju u njemu.
Ako Photoshop nije na vašem računaru, preuzmite ga sa gornje veze, zatim ga instalirajte prateći uputstva iz ovog članka i pokrenite ga.
Sada na njima možete nacrtati ono što će biti prikazano u animaciji. U našem jednostavnom primjeru, ovo će biti pokretni kvadrat. Na svakom sloju se pomiče nekoliko piksela udesno.
Sve! Animacija je spremna. Rezultat možete pogledati klikom na dugme "Pokreni reprodukciju animacije". I nakon toga možete ga sačuvati u formatu GIF.
Na ovaj jednostavan, ali dokazan način, uspjeli smo napraviti GIF animaciju u Photoshopu. Naravno, može se značajno poboljšati smanjenjem vremena kadrova, dodavanjem više okvira i, naravno, umjesto stvaranja crnog kvadrata, stvaranjem nečeg originalnijeg i kvalitativno boljeg. Ali to ovisi o vašim preferencijama, željama i vještinama.
Počevši od verzije CS3 Extended, dostupan je rad sa animacijom. GIF-ovi se kreiraju iz skupa okvira ili direktno iz video zapisa. Dakle, hoćete li sami kreirati dinamičnu sliku za web stranicu, avatar ili prezentaciju? Čestitka. Slična grafika se može koristiti u drugim projektima ili tokom uređivanja. Naučite kako napraviti animaciju u Photoshopu kako biste mogli slobodno raditi s ovom vrstom slike.
Adobe Photoshop ima mnogo funkcija, uključujući kreiranje animacija
Ne morate biti umjetnik ili dizajner da biste to učinili. Sve funkcije su jasne čak i početniku. Sve što vam treba je početni set okvira iz kojih će se kreirati gif datoteka.
Najlakši način je da pretvorite video u animaciju. Ne morate ništa da konfigurišete. Samo trebate otvoriti video u Photoshopu. Uslužni program prihvata avi, mov, mp4, mpg, mpeg, m4v formate. Da biste ih ispravno pokrenuli, trebate instalirati QuickTime. Ovako dodana medijska datoteka ne može se uređivati ili skratiti. Samo ga pretvorite u grafiku.
Ali postoji još jedna metoda. Evo kako napraviti gif od filma u Photoshopu:
Evo kako napraviti animaciju u Photoshopu koristeći slike:
Ako kreirate veliki raspored, ova metoda će oduzeti dosta vremena. U tom slučaju možete učiniti sljedeće:
Iste radnje su dostupne sa slikama kao i sa video slajdovima.
Također je važno shvatiti kako sačuvati animaciju u Photoshopu. Ako ga formatirate kao psd datoteku ili "statičnu" sliku sa ekstenzijom jpg, bmp, png, neće biti smisla. Umjesto kretanja, transformacije ili treperenja, dobijate jedan zamrznuti kadar. Da biste napravili skup slika koje se mijenjaju, morate dokument pretvoriti u GIF format.
Dovoljno je samo razumjeti aplikaciju Photoshop i kako napraviti animaciju. Čak i ako niste profesionalni web dizajner, možete kreirati ovakvu sliku. Imat ćete jedinstveno umjetničko djelo, sastavljeno vlastitim rukama.
Dobro veče, dragi pretplatnici i samo čitaoci mog bloga! Da li ste spremni da naučite kako da oživite svoju sliku? I to ne uz pomoć magije, već uz pomoć svega iz našeg voljenog Photoshopa! Koliko dugo sam odlagao ovu lekciju, a da nisam shvatio zašto. Uostalom, ovo su osnove Photoshopa! Ali sada sam odlučio da se poboljšam.
I poboljšajte se toliko da će na kraju videa i vaši dobiti video lekciju o tome kako napravi animaciju u photoshopu.
Već dugo nisam pisao tutorijale za Photoshop, a imao sam razloga za to. Na kraju krajeva, završavao sam svoju priču “”. Slobodno ga pročitate i izrazite svoje mišljenje direktno u komentarima!
Sada pređimo na lekciju. U videu ispod, reći ću vam kako da postepeno dodajete tekst, ali u tekstualnoj lekciji zadatak će biti malo komplikovaniji.
Imamo Cipollina i moramo ga natjerati da nam odmahne rukom.
Korak 1. Prvo morate "uključiti" animaciju u Photoshopu. Za ovo idemo “Prozor”->”Animacija”. Možda je još napisano “Vremenska linija”.
Korak 2. Da bi se ruka kretala, trebamo je izrezati i staviti u različite položaje. Za izrezivanje ruke, ja lično koristim “Magnetni laso”. Napravite kopiju glavnog ( Ctrl+J) i rad s kopijom. Original ne diramo.
Pažljivo odaberite ruku i izrežite je!
Korak 3. Sada stavljamo ruku, koliko god strašno zvučalo, i stavljamo je u različite položaje. Ruka će biti ubačena u nove slojeve, to je čak i u našu korist.
Korak 4. Ovaj korak nije obavezan, ali je bolje koristiti alat Eraser da malo ispravite ruku, čineći je prirodnijom. To je, naravno, teško objasniti riječima. Ako razumijete zašto koristimo gumicu, slijedite ovaj korak; ako i dalje ne razumijete, možete ga preskočiti. Ovo nije važno, jer nam je najvažnije da naučimo kako napraviti jednostavnu animaciju!
Korak 5. Sada radimo sa kadrovima. U svakom okviru uključujemo samo one slojeve koji su nam potrebni. Na primjer, u okviru 1 trebamo naš original, au našem slučaju “Sloj 0”.
Sada kreirajmo novi okvir:
I u novom okviru uključujemo druge slojeve. To je naš “Kopija sloja 0” I “Sloj 1”, odnosno drugačiji položaj ruke. Nadam se da vam je algoritam jasan, dragi čitaoci.
Korak 6. Podesite kašnjenje kadra. Odnosno, nakon kojeg vremenskog perioda će se prikazati sljedeći okvir.
Korak 7 Sačuvajmo naše. Postoji razlog zašto sam ovaj korak uključio u svoj vodič, jer je spremanje GIF-a malo drugačije od samo slike.
Odaberite format (podrazumevano je GIF) i sačuvajte.
