Kako napraviti animirani GIF preloader u Photoshop-u

Kako-napraviti-animirani-prelaoder-u-Photoshopu

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.

Animirani preloader slika 1

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

Animirani preloader slika 2

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)

Animirani preloader slika 3

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:

Animirani preloader slika 4

Korak 2

Kreiranje oblika – background pattern

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

Animirani preloader slika 5

Odabrati crnu boju:

Animirani preloader slika 6

Podesiti debljinu četkicu na 1px:

Animirani preloader slika 7

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

Animirani preloader slika 8

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:

Animirani preloader slika 9

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

Animirani preloader slika 10

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.

Animirani preloader slika 11

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.

Animirani preloader slika 12

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.

Animirani preloader slika 13

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.

Animirani preloader slika 14

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:

Animirani preloader slika 16

Odaberite Rounded rectangle tool (taster U)

Animirani preloader slika 15

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:

Animirani preloader slika 17

Odaberite sada Direct Selection tool:

Animirani preloader slika 18

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

Animirani preloader slika 19

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:

Animirani preloader slika 20

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:

Animirani preloader slika 21

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.

Animirani preloader slika 22

To sada izgleda ovako:

Animirani preloader slika 23

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

Animirani preloader slika 24

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

Animirani preloader slika 25

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

Animirani preloader slika 26

 

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.

Animirani preloader slika 27

Ovo je drugi sloj (iznad osnovnog):

Animirani preloader slika 28

Ovo je treći sloj:

Animirani preloader slika 29

Ovako izgleda četvrti sloj:

Animirani preloader slika 30

I poslednji, peti sloj sadrži ovaj element:

Animirani preloader slika 31

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

Animirani preloader slika 32

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):

Animirani preloader slika 33

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

Animirani preloader slika 34

Odmah zatim i Iner Shadow sa parametrima sa slike:

Animirani preloader slika 36

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

Animirani preloader slika 35

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:

Animirani preloader slika 36

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

Animirani preloader slika 37

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:

Animirani preloader slika 38

Grupu možete nazvati Loader deo 1:

Animirani preloader slika 39

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).

Animirani preloader slika 40

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.

Animirani preloader slika 41

 

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

Animirani preloader slika 42

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

Animirani preloader slika 43

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

Animirani preloader slika 44

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

PRIJAVITE SE ODMAH ZA NAJNOVIJE TEKSTOVE SA NAŠEG BLOGA!

 

Tags: , , , ,

No comments yet.

Submit Comment