Kako napraviti gifs u Photoshopu?

Program "Photoshop" univerzalni je alat koji vam omogućuje rad s različitim formatima grafičkih datoteka. Među njima - GIF, s kojim možete stvoriti tzv. Po čemu se ove datoteke razlikuju? Kako napraviti gifs u Photoshopu?

Na ovo pitanje možemo odgovoriti:

• istraživanje specifičnosti gifova;
• Ispitali smo osnovne alate za stvaranje ove vrste datoteka koji se nalaze u Photoshopu.

Krenimo od prve točke.

Sadržaj članka

• Što su GIF-ovi??
• Algoritam za stvaranje animiranih gifova u Photoshopu

Što su GIF-ovi??

Pod GIF-ovima se podrazumijevaju najčešće animirane slike u grafičkom formatu GIF. U većini slučajeva smještaju se na web stranice i mogu se koristiti, na primjer, kao reklamni natpis, dizajnerski element na web mjestu ili kao medij za multimedijski sadržaj. GIF je jedan od najčešćih formata slikovnih datoteka, zajedno s jpeg, png, BMP. Njegove glavne prednosti, koje posebno određuju popularnost GIF-ova među web dizajnerima, jesu:

• moguće je stvoriti male slikovne datoteke (to može značajno uštedjeti resurse internetskih poslužitelja smanjujući promet);
• izrada animiranih slika u obliku gif-a pri korištenju popularnih programa, posebno Photoshopa, vrlo je jednostavna - čak i neiskusni korisnik to može započeti;
• dotični grafički format je univerzalan (GIF datoteke podržane su gotovo svim modernim računalnim platformama, preglednicima i većinom programa za obradu grafike).

Gifovi mogu prikazati ne previše boja - samo 256 (za usporedbu, u jpeg-u odgovarajuća brojka iznosi oko 16,7 milijuna), ali to je u mnogim slučajevima dovoljno za stvaranje tematskog "grafikona", značke, animiranih bannera ili video zapisa. Usput, u nekim slučajevima slike u boji u boji u boji preoblikovane su u svojevrsni GIF..

Stoga spomenuto obilježje GIF-a - prikazivanje ograničenog broja boja - ne bi se uvijek trebalo smatrati nedostatkom formata.

Međutim, najčešće GIF-ovi postaju popularni zbog sposobnosti stvaranja animacija kad se koriste. Njihova struktura može biti predstavljena s nekoliko okvira u određenom slijedu, kao i algoritmi, u skladu s kojima se određuje trajanje prikaza pojedinih slika na ekranu. Animacija pomoću gifova često je konfigurirana za kretanje kroz okvire (kada se prva slika započne kada serija završi s igranjem). Može se primijetiti da videozapisi u standardnim multimedijskim formatima, kao što su, na primjer, AVI, Quick Time, MPEG-4, ne sadrže interne algoritme koji omogućuju cikličku reprodukciju - odgovarajuću funkciju obavlja program za reprodukciju.

GIF format ima analoge - na primjer, Apng. Međutim, Apng standard je rjeđi i nije toliko univerzalan. Photoshop ga posebno ne podržava. Za razliku od GIF-ova - koje ovaj program može obraditi na različite načine. Proučit ćemo najjednostavniji algoritam za stvaranje odgovarajuće vrste animacija u Photoshopu.

Algoritam za stvaranje animiranih gifova u Photoshopu

Ključni princip za pokretanje GIF-ova u pokret je isti kao onaj koji se koristi u konvencionalnom filmu. Njegova je struktura predstavljena, kao što je poznato, nizom okvira postavljenih na plastični nosač. Film se, pak, igra na ekranu s određenom brzinom.

Dakle, da bismo stvorili animirani gif, prije svega trebat će nam "okviri" iz kojih ćemo zatim izgraditi potrebni slijed, "film" na koji će ih trebati postaviti, kao i mehanizam za "reprodukciju" kadrova.

Prva komponenta iz gore spomenutog broja mogu biti obične slike. Dopušteno ih je stvoriti u bilo kojem formatu datoteke - zapravo GIF, jpg ili, na primjer, png i sam Photoshop mogu vrlo dobro biti uključeni..

Da bismo razmotrili algoritam za stvaranje gifova, koristimo Photoshop u CS6 verziji, jedan od najčešćih u Rusiji i svijetu. Neka bude u engleskoj verziji - mnogi ljubitelji računalne grafike radije ga koriste, jer je ogromna količina dokumentacije za Photoshop sastavljena na Shakespeareovom jeziku.

Dakle, otvaramo Photoshop, odabiremo stavku File, a zatim - New. Neka veličina stvorene slike bude 800 x 200 piksela.

Nakon toga, pomoću alata Gradient koji se nalazi na lijevoj ploči, možemo dati pozadini slike određeni efekt. Aktivacija se provodi jednostavno - trebate, klikom na odgovarajuću ikonu i držanjem lijeve tipke miša, nacrtati crtu izravno na slici. Ovisno o duljini, gradijent će se širiti po slici u jednom ili drugom omjeru.

Zatim možete na pozadinu, koja je ispunjena označenom metodom, napisati neki tekst pomoću odgovarajućeg alata - Tekst, koji se također nalazi na ploči koja se nalazi s lijeve strane prozora Photoshopa. Neka riječ bude na prvom kadru našeg gif-a. Ako ga napišete, možete urediti boju, veličinu fonta (odgovarajuće opcije nakon odabira alata Text otvorit će se na vrhu prozora programa) i dodati pomicanje (desnim klikom na sloj teksta koji će se nazvati, poput teksta, odabirom Opcije miješanja i onda Stroke).

Prvi okvir je spreman. Mora se ispravno spremiti. Odaberite Datoteka, a zatim Spremi kao. Optimalan format spremljene datoteke u ovom slučaju je png (kada se aktivira, slova se relativno glatko prikazuju). Ali prije nego što ga odaberete s popisa predloženih proširenja, svakako biste trebali potvrditi okvir pored Spremi kopiju. To će značiti da će u prozoru Photoshopa ostati "izvor" ove datoteke, koji se može uređivati. Nakon što spremimo prvi okvir, nastavit ćemo raditi s tim vrlo "izvorom".

Tim se odlučio razlikovati po kvaliteti. Stoga, još jednom odabirom alata Text umjesto riječi pišemo „Razlikovati“. Ovo će biti drugi okvir - spremite ga na odgovarajući način u png formatu.

Nakon toga vraćamo se „izvoru“ i umjesto „Razlikovati“ upisujemo riječ „Kvaliteta“. Spremi datoteku.

Sad imamo na raspolaganju 3 okvira iz kojih je sasvim moguće izraditi animaciju forme „- razlikujemo se u kvaliteti“.

Zatvorite sve prozore u programu Photoshop (čak možete u potpunosti napustiti program radi pouzdanosti i ponovo ga preuzeti). Nakon - kliknite Datoteka, a zatim Otvori i odaberite sve 3 spremljene datoteke. Na ekranu će se pojaviti 3 okvira -, "Razlikovati", "Kvaliteta".

Sada moramo provesti jednu neobičnu operaciju - rasporediti ove okvire jedan preko drugog. Najniža će očito biti. Ostalo ćemo mu nametnuti. To je vrlo lako napraviti..

Potrebno je odabirom Alata za kretanje - također na lijevoj ploči kliknite okvir "Razlikovati". Zatim pomoću tipkovnih prečaca Ctrl i A trebate odabrati cijelo područje slike i kopirati ga - pomoću Ctrl i C, a zatim - Ctrl i V, u okvir. Budući da su iste veličine, kopirana će slika potpuno zatvoriti prvu. Isti postupak se mora provesti s okvirom "Kvaliteta" - kopirati u, zatvoren slikom "Razlikovati". Sada će svi prethodni okviri biti zatvoreni riječju "Kvaliteta".

Nakon toga, idite na ploču slojeva koja se nalazi s desne strane Photoshop prozora, a okvire smještene na vrhu učinite nevidljivima. Da biste to učinili, lijevim klikom na slike malih "očiju" smještenih lijevo od naziva sloja (Sloj 1 i Sloj 2).

Kao rezultat toga, samo će okvir postati vidljiv. U ovom će slučaju biti označeno kao Pozadina, odnosno kao pozadina. Nasuprot njemu treba prikazati "oko". Windows s dvije druge datoteke - "Razlikovane" i "Kvaliteta", izvorno učitane u program zajedno s okvirom - može se zatvoriti.

Sljedeći korak je aktiviranje najvažnijeg Photoshop alata, naime, vremenske trake ili Vremenske trake. Može se smatrati analogom „filma“ - druge komponente animacije. Trebat će objaviti okvire koje smo stvorili mi. Kako biste aktivirali alat Vremenska traka, odaberite stavku izbornika Prozor, a zatim - Vremenska traka.

Nakon toga otvorit će se nova ploča u donjem dijelu prozora Photoshopa (ispod radnog prostora na kojem se nalazi okvir, kao i dvije skrivene - „Razlikovati“ i „Kvaliteta“). Ovo je vremenska crta. Imat će gumb Stvaranje vremenske trake videozapisa. Trebali biste ga kliknuti, nakon čega će se animacijska ljestvica učitati, a u njoj su tri okvira s kojima smo radili gore. Radi praktičnosti možete ga prebaciti u okvir okvira - klikom na ikonu u obliku tri pravokutnika koja se nalazi s lijeve strane.

Svaki će okvir sadržavati određeni okvir. Prva na redu bit će ona koja se podudara s onom na zaslonu - u kojoj je slika vidljiva, a "Razlikovati" i "Kvaliteta" - nevidljive slike.

Naš je zadatak stvoriti sljedeće okvire smještajući ih u odgovarajuće okvire. Da biste to učinili, kliknite na ikonu u obliku četiri vodoravne pruge i odaberite Novi okvir.

Dakle, novi okvir - slijedeći prvi - bit će drugi. U njoj je zauzvrat potrebno aktivirati sliku "Razlikovati" - tako da se ona pojavi u prvom planu, prekrivajući sebe. Da biste to učinili, mišem odaberite drugi okvir, a zatim kliknite mali kvadrat nasuprot nazivu odgovarajućeg sloja - Sloj 1. Trebao bi se pretvoriti u "oko", zbog čega će riječ "Razlikovati" biti vidljiva slika na drugom okviru..

Sljedeći korak je stvaranje trećeg okvira. Slično tome, koristeći opciju Novi okvir. U treći će se okvir nalaziti okvir "Kvaliteta". U njemu je potrebno zauzvrat deaktivirati "oko" nasuprot slike "Razlikovati" i aktivirati odgovarajući element koji se nalazi nasuprot željenom sloju, tj. Sloju 2.

Tako će sva tri okvira biti postavljena zauzvrat na "film", koji je alat Timeline.

Sada možete konfigurirati neke opcije za reprodukciju budućih animacija. Na primjer, trajanje svakog okvira. Potrebno je zauzvrat odabrati sve okvire - to je lako učiniti mišem, držeći Ctrl, a zatim - kliknite strelicu koja se nalazi u krajnjem desnom okviru, nakon toga - odaberite željenu vrijednost za odgovarajući parametar. Na primjer - 2 sekunde.

Sljedeći korak je korištenje mehanizma "reprodukcije" animacije. Zapravo će i sama GIF datoteka djelovati kao takva. Da biste ga stvorili, trebate spremiti našu animaciju u ovaj format. Kliknite Datoteka, nakon što - odaberite stavku izbornika Spremi za web. Otvorit će se prozor postavki GIF-a.

Ima ogroman broj opcija. Po želji možete eksperimentirati s njima. Ali do sada ne mijenjamo ništa, neka sve bude postavljeno prema zadanom. Kliknite Spremi, odredite ime GIF datoteke i mjesto na kojem bi je trebalo spremiti.

Otvaranje gotovih animiranih gifova najbolje je u bilo kojem pregledniku. Činjenica je da ako pokrenete GIF datoteku u uređivaču, okviri se najvjerojatnije neće reproducirati..

Ako otvorite gif u pregledniku - na primjer, Opera, Mozilla, Chrome, Internet Explorer, tada započinje animacija u kojoj će se zauzvrat reproducirati riječi "Razlikovati", "Kvaliteta"..

Dakle, naučili smo kako napraviti gifove u Photoshopu. Umjesto okvira koje mi koristimo mogu se koristiti bilo koje slike, a njihov broj može biti vrlo velik - bit će ograničen samo performansama računala. Ako želite, u Photoshopu je lako stvoriti pomoću dostupnih alata za rad s GIF-animacijom, čitavim crtanim filmom ili, na primjer, prezentacijom.