U prošlom tekstu opisali smo kompletan postupak izrade flat ikonica koje i sada možete da preuzmete, prilagodite i koristite za svoje potrebe. Tekst se nalazi ovde: Photoshop tutorijali za izradu flat ikonica. U današnjem uputstvu naučićemo kako da napravimo animaciju u Photoshop-u. Tačnije, napravićemo animirani pre-loader koji može biti koristan u različitim prilikama i veb-aplikacijama, vidžetima, banerima, čekanje na download ili pri učitavanju sadržaja, a mesto upotrebe zavisi od vaše mašte i inovativnosti.

Preloader – animacija u Photoshopu

U pitanju je mali animirani preloader u obliku animiranog gif-a koji kreirati koristeći Timeline funkciju u Photoshopu. Na kraju teksta preuzmite radni format ove animacije koji možete otvoriti i dodatno uređivati. Budite slobodni da dodate svoje detalje, oblike ili promenite boje.

Evo šta ćemo uraditi:

• Napravićemo oblike za preloader
• Stilizovaćemo ih
• Animiraćemo celu stvar da bude korisna

U tekstu ćemo koristiti oblik koji vam ako ste početnik može biti teži za kreiranje. Umesto tog oblika, za početak možete koristiti običan krug ili bilo koji drugi oblik.

Korak 1 

Kreiranje oblika i podešavanje

Napravićemo novi konvas (engl. Convas, prev. Platno) koristeći meni File – New ili kombinaciju tastera Ctrl+N(PC). Za veličinu konvasa unećemo 100×100 px.

U paleti slojeva (engl. Layers) pojaviće se prvi sloj pod imenom Background. Kliknite dva puta na njega:

U prozoru koji se otvori pritisnite dugme OK da bi se ovaj sloj pretvorio u običan sloj (videćete da će se izgubiti katančić koji inače stoji podrazumevano u sloju background)

Obojite ceo sloj u tamno-sivu boju, tačnije #3d3d3d

Možete to uraditi kombinacijom tastera Shift+Backspace, pri čemu će se otvoriti prozor Fill. U padajućem meniju pored polja Use, odaberite Color pro čemu će se otvoriti Color picker prozor gde treba uneti 3d3d3d u bolje za boju i kliknuti na dugme OK (pogledajte sliku ispod). Kliknuti na dugme OK u prozoru koji smo otvorili kombinacijom tastera Shift+Backspace:

Korak 2

Kreiranje oblika – background pattern

Napravite novi transparentni dokument veličine 7×7px. Odaberite Pencil tool (taster B na tastaturi):

Odabrati crnu boju:

Podesiti debljinu četkicu na 1px:

I povući dijagonalnu liniju (da linija bude prava kliknuti u jedan ugao, držati taster Shift i kliknuti u drugi ugao):

Definišite pattern i dajte mu ime (možete bilo kako, bitno je da vi znate koje ste ime koristili). Koristite meni Edit – Define Pattern:

Vratite se originalnom dokumentu i napravite slojni stil Pattern Overlay u sivom sloju. Idite na Edit – Layer Style – Pattern Overlay

U prozoru koji se otvori odaberite Pattern koji ste malo pre napravili i postavite Opacity na 20% (ako vam je i to previše upadljivo vrednost u % umanjite dodatno). Kliknite na dugme OK jednom kada budete zadovoljni rezultatom.

Korak 3

Kreiranje vođica (engl. Guides)

Sada ćemo dodati nekoliko oznaka koje će nam pomoći kod kreiranja cele slike. Povucite liniju uz pomoć Line tool-a debljine 1px.

Neka linija bude po sredini dokumenta. Možete to proveriti tako što ćete odabrati oba sloja (linija i background sloj), uključiti Move tool (taster V) i pokrenuti opciju Align horizontal u panelu sa opcijama Move tool-a.

Kopirajte sloj sa linijom i koristeći Transform tool (Ctrl+T) zarotirajte je za 90 stepeni tako da dobijete krst. Povucite sada jednu dijagonalnu liniju. Kopirajte taj sloj sa dijagonalnom linijom i zarotirajte je koristeći Transform tool za 90 stepeni.

Uključite lenjire, Ctrl+R, povucite linije koje će vam pomoći da centrirate sledeći oblik koji treba dodati. Budite pažljivi i ponovite akciju više puta kako bi sve ispalo kako treba. Vidite sliku ispod:

Odaberite Rounded rectangle tool (taster U)

Napravite oblik koji će se uklopiti u linije lenjira koje ste povukli. Možete probati čak i da prvo napravite oblik i nacentrirate ga, a zatim da povučete linije lenjira kako biste što bolje uklopili vođice koje će vam kasnije biti od koristi. Isprobajte sami. Neka bude približno kao na slici ispod:

Odaberite sada Direct Selection tool:

i pomerite donje uglove (uhvatite za tačke – nodes) prema unutra.

Iskoristite Transform tool da kopirane slojeve ovog oblika rasporedite svuda u krug. Postavite centar rotiranja u sam centar konvasa (gde se ukrštaju linije) i rotirajte oblike tako da se postave na svaku liniju koju smo ranije povlačili. Na kraju možete isključiti te linije:

Odaberite sada sve slojeve(držite Ctrl i kliknite na svaki sloj) i spojite ih tako što ćete kliknuti desnim klikom na jedan od njih i odabrati opciju Merge layers:

Korak 4

Stilozovanje oblika, dodavanje senki i boja

Napravili smo oblik za preloader. Sve ostalo možete raditi po sopstvenom ukusu pa istražujte sa količinom različitih opcija, bojama i idejama.

Dodaćemo neke stilove sloju sa oblicima preloadera. Koristite Layer – Layer Styles. Dodajte Color Overlay u boji #242424. Da to uradite dovoljno je da kliknete u pravougaonik pored polja Blend mode i da u prozoru koji se otvori unesete boju koja je navedena u prethodnoj rečenici.

To sada izgleda ovako:

Dodajte i Drop Shadow na isti način koristeći parametre sa slike ispod:

Dodajte i Inner Shadow sloj stil koristeći parametre sa slike ispod:

To će dodati novi, bolji izgled i osećaj dubine:

Korak 5

Dupliranje slojeva

Napravićemo pet kopija ovog sloja koji smo kreirali. Obrisaćemo elemente preloadera tako da se u svakom sloju nađu određeni elementi koji će nam pomoći u građenju animacije.

Osnovni sloj (prvi u Layer paleti odozdo na gore) treba da sadrži samo ove elemente prikazane na slici, sve ostale obrišite Eraser tool-om.

Ovo je drugi sloj (iznad osnovnog):

Ovo je treći sloj:

Ovako izgleda četvrti sloj:

I poslednji, peti sloj sadrži ovaj element:

Da bi sve bilo bolje sređeno i da biste bolje ispratili uputstvo, možete promeniti ime slojevima i srediti ih ovako:

Korak 6

Dodavanje stila svakom elementu

Sada ćemo dodati malo stila svakom elementu koji smo izdvojili. Sloju Sjaj dodaćemo Outer Glow (Layer – Layer Styles) koristeći boju #0be0f9 (ovde možete eksperimentisati sa bojama):

Istom sloju, koristeći istu boju, dodaćemo Iner Glow:

Odmah zatim i Iner Shadow sa parametrima sa slike:

Prepravićemo postojeći Color Overlay koristeći boju #0087c6. Ovo je rezultat:

Idemo dalje. Sloju Opadajući sjaj 1, dodati iste stilove ali bez Outter Glow stila.

Sloju Opadajući sjaj 2, izmeniti Iner Shadow koristeći parametre sa slike i boju #0087c6:

Sloju Opadajući sjaj 3 izmenite Inner Shadow stil postavljajući Opacity na 25%. Ovo je rezultat koji treba da dobijete:

Korak 7

Animacija kroz Timeline u Photoshopu

Grupišimo sada sve slojeve koji se tiču preloadera u jednu grupu. Odaberite ih držeći taster Ctrl i da ih stavite u jednu grupu iskoristite kombinaciju tastera Ctrl+G:

Grupu možete nazvati Loader deo 1:

Duplirajte celu grupu (kopiji promenite naziv u Loader deo 2… i tako redom za svaku novu kopiju). Rotirajte grupu za 45 stepeni koristeći Transform Tool (Ctrl+T) i ponovite ovaj proces dok ne napravite puni krug. To znaći da ćete imati ukupno 8 kopija (svaka, osim prve, je zarotirana za po 45 stepeni).

Sada je sve spremno za animaciju. Otvorite Timeline Panel, nalazi se u Window – Timeline. Isključite sve grupe osim grupe Loader deo 1. Odaberite dugme Duplicate Selected Frames.

Isključite sada prvu grupu i uključite samo Loader deo 2 sa istim postupkom. Ponovite postupak za svaku sledeću grupu.

Odaberite svaki frejm u Timeline-u i postavite duration na 0.1 sec.

Da sačuvate svoj rad kliknite na File – Save for Web i koristite sledeće parametre za animirani .gif:

Da svoj rad sačuvate u radnoj verziji, idite na File – Save As i sačuvajte dokument u PSD formatu.

Preuzmite našu radnu verziju preloadera

Ukoliko želite da iskontrolišete svoj rad ili da biste uštedeli sebi vreme, možete uzeti našu PSD verziju preloadera. Nakon što preuzmete verziju koju smo napravili tokom pripreme ovog uputstva uključite Timeline u Photoshop-u u Window – Timeline kao biste mogli da reprodukujete animaciju. Kao što je na početku navedeno, ovu verziju možete slobodno koristiti za svoje potrebe i dodatno je korigovati.

Da preuzmete datoteku dovoljno je da kliknete na link ispod:

Animirani preloader – Adriahost 2016