GIF-ovi su posvuda. Nekada skromne animirane slike sada su neslužbeni jezik interneta. GIF animacija je najviše brz način izražavati emocije na Twitteru, a također možemo provesti sate gledajući ga, listajući kroz feed vijesti na VK, Facebooku ili Odnoklassniki.

Postoji prilično velik broj stranica na kojima možete pronaći gotove GIF-ove na različite teme. Ali ništa se ne može usporediti s GIF animacijom koja se izrađuje u tvrtki vlastitim rukama. Mislite da je ovo težak proces? Varate se, vrlo je jednostavno. Brzo stvaraj GIF animacija Možete koristiti Photoshop grafički uređivač, pretvoriti postojeći video ili koristiti niz statičnih slika. Pogledajmo pobliže kako se to radi.

Bilješka: U svim primjerima u ovom članku koristim Photoshop CC 2017.

Najprije morate pokrenuti Photoshop, otići na “File” > “Import” > “Video Frames to Layers” i odabrati željeni video zapis.

U dijaloškom okviru koji se otvori možete uvesti cijelu video snimku ili odabrati samo određeni dio. Ako odaberete drugu opciju, povucite ručke ispod prozora pretpregled za postavljanje početne i završne točke. Dio videozapisa između ovih oznaka bit će uvezen.

Bilješka: Imajte na umu da što više videozapisa uvezete, to će vaš GIF biti veći. Također, ako uvozite video koji je predugačak, odabir Zadrži svaka 2 okvira (ili više) je jednostavan način za smanjenje veličine bez previše utjecaja na kvalitetu.

Provjerite je li označen potvrdni okvir Stvori animaciju okvir po kadar, zatim kliknite U redu. Počet će postupak uvoza videozapisa. Ovo može potrajati neko vrijeme, ovisno o veličini isječka. Nakon završetka uvoza, otvorit će se Radni prostor, u kojem će svaki video okvir biti postavljen na svoj sloj.

Na dnu ekrana nalazi se paleta vremenske skale. Prikazuje sve okvire koji će činiti vašu GIF animaciju.

Možete dodavati i uklanjati okvire po želji ili uređivati ​​bilo koji od postojećih slojeva baš kao što biste uređivali slojeve na bilo kojoj drugoj slici. Da biste pregledali svoju GIF animaciju, jednostavno kliknite gumb Reproduciraj na dnu vremenske trake.

Konačni rezultat trebao bi biti nešto poput ovoga:

Stvaranje GIF animacije iz niza statičnih slika

Ako nemate video zapis koji biste upotrijebili kao osnovu za GIF animaciju, možete ga izraditi ručno iz niza statičnih slika. Malo je kompliciranije, pogotovo ako želite napraviti nešto cool, ali osnovni postupak je jednostavan.

Svoj GIF stvarate iz jedne slikovne datoteke koja sadrži više slojeva. Svaki sloj je zaseban okvir vaše buduće animacije. Postoje dva načina za početak:

1. Ako ste već izradili slike za svoju animaciju, uvezite ih odabirom File > Scripts > Load Files into Stack.... Pritisnite Pregledaj i odaberite svoje slike, a zatim kliknite U redu. Svaka slika bit će postavljena na poseban sloj unutar iste datoteke.
2. Ako još niste izradili slike, učinite to sada. Ne zaboravite da je svaka pojedinačna slika dio buduće animacije.

Sada ste spremni za početak stvaranja animacije.

Animiranje statičnih slika

Evo kako to radi. Kada ručno izradite okvir animacije, svaki vidljivi sloj je uključen u njega. Slojevi koji su onemogućeni neće biti uključeni u generirani okvir.

Da biste stvorili prvi okvir, učinite prvi sloj vidljivim i isključite sve ostale. Zatim, kada kreirate drugi okvir, učinite drugi sloj vidljivim, a zatim treći sloj na trećem okviru, i tako dalje. Kad jednom počnete, sve će vam postati jasnije.

Za početak izrade animacije otvorite vremensku traku ako vam se ne otvori automatski. Da biste to učinili, kliknite "Prozor" na gornjoj ploči i odaberite "Vremenska traka" u izborniku koji se otvori. U sredini ploče koja se otvori kliknite "Stvori okvirnu animaciju". Ova radnja će stvoriti prvi okvir vaše animacije. U paleti slojeva sakrijte slojeve za koje ne želite da budu dio okvira.

Sada kliknite gumb "Novi okvir", koji će duplicirati prethodni okvir. Još jednom sakrijte dodatne slojeve i učinite vidljivima one koji bi trebali biti uključeni u okvir.

Ponavljajte ovaj postupak dok ne dodate sve okvire potrebne za animaciju.

Završetak

Na kraju postavite vrijeme prikaza za svaki okvir. Odaberite prvi okvir, a zatim pritisnite Shift i pritisnite zadnji da biste ih sve odabrali. Sada kliknite strelicu prema dolje ispod jednog od okvira i odaberite odgodu. Bez odgode znači da će se animacija izvoditi brzo, dok će postavljeni broj sekundi uzrokovati da okviri ostanu na zaslonu određeno vrijeme.

Na kraju, postavite opcije petlje koje ćete pronaći na dnu ploče Timeline. Ovaj parametar kontrolira koliko će se puta vaša animacija reproducirati. U većini slučajeva odabrat ćete opciju "Uvijek".

Sada kliknite gumb Reproduciraj na dnu zaslona da vidite rezultirajuću animaciju. Trebali biste vidjeti nešto poput ovoga:

Okvire možete uređivati ​​tako da ih jednostavno odaberete i promijenite vidljivost slojeva (također možete promijeniti neprozirnost ili postaviti druge složenije postavke). Dodajte dodatne slojeve ako ih trebate ili kliknite ikonu kante za smeće da biste ih izbrisali.

Kada ste zadovoljni rezultatom, možete prijeći na odjeljak "Spremanje animacije" ili čitati dalje kako biste poboljšali rezultirajuću animaciju.

Poboljšanje animacije dodavanjem srednjih okvira

Photoshop podržava snažnu značajku između animacija. To vam omogućuje stvaranje glatkijih animacija automatskim generiranjem prijelaznih okvira između dva postojeća okvira. U ovom primjeru, proći ću kroz sve okvire kako bih zvjezdanom nebu dao efekt svjetlucanja.

Za početak odaberite prvi okvir i kliknite gumb Create Tweaks na alatnoj traci pri dnu vremenske trake.

U dijaloškom okviru koji se otvori postavite stavku "Međuokviri" na vrijednost "Sljedeći okvir", a za stavku "Dodaj okvire" odredite vrijednost po vlastitom nahođenju. Viša vrijednost znači glatkiji, ali sporiji prijelaz. Pritisnite "OK" za izradu međuokvira.

Sada ponovite ovaj postupak za ostale izvorne okvire koje ste dodali. Kada dođete do zadnjeg, postavite "Inbetween Frames" na "First Frame". To će pomoći u stvaranju glatkog prijelaza na početak vaše petlje animacije.

Photoshop sigurno neće otvoriti video snimljen digitalnom kamerom. Ovo se odnosi na telefonski video, video s web kamera itd. Odgovor se nameće sam od sebe. Moramo se obratiti. Postoji mnogo pretvarača, plaćenih i besplatnih, i, u osnovi, dizajnirani su za pretvaranje određenog formata u drugi određeni format, o čemu nam programeri pretvarača, iz očitih razloga, ne govore.

I ovdje nam u pomoć dolazi besplatni video konverter XviD4PSP 5.0, možete ga preuzeti ili na službenoj web stranici programera. Za rad ovog pretvarača potreban vam je uslužni program AviSynth 2.5.7 koji se može preuzeti.

Ova dva programa instaliramo na uobičajen način.

Evo sučelja ovog prekrasnog pretvarača:

Otvorite program. Pritisnite File-->Open i odaberite datoteku. U glavnom prozoru programa trebate odabrati sljedeće postavke:

• Format - AVI DV PAL
• Korekcija boja i filtracija - onemogućeno
• Video kodiranje - DV-Video
• Audio kodiranje - nije važno

I kliknite na gumb "Kodiraj". Program će od vas tražiti da odaberete mapu za spremanje, odaberite je, OK. Primamo datoteku s dvsd DVC/DV Video kodekom u DV Type 2 AVI Multipart OpenDML AVI spremniku. S vjerojatnošću od 90%, Photoshop će pojesti videozapise s ovim parametrima.

Prijeđimo na sljedeći problem. Ovo je veličina datoteke. Činjenica je da Photoshop, kada otvara video u slojevima, koristi radna memorija Računalo Ako imate x64, onda nema pitanja, možete instalirati pločice do 128GB. Ali iz raznih razloga ljudi ne mogu prijeći na x64 i nažalost sjede na x86, ne zato što se ne mogu prebaciti ili vjera ne dopušta, već iz drugih, sasvim objektivnih razloga. Na primjer, autor ovih redaka, uz svu svoju veliku želju za lijepim i novim, ne koristi x64 zbog nedostatka warez dodataka za 3ds max za to. Međutim, skrenuli smo.

Naravno, za zadatke koji se izvode pomoću Photoshopa nisu potrebni dugi video zapisi, već je potrebno najviše nekoliko desetaka sličica. Ali treba ih nekako izrezati. Normalni video uređivači poput Adobe Premiere Pro zahtijevaju znanje i iskustvo, a također zauzimaju značajne resurse RAM-a i procesora. Jednostavno me je sram reći da se plaćaju (i skupo koštaju). Ukratko, za rijetku upotrebu nema smisla petljati se s takvim programima. Jednostavni uređivači poput standardnih Tvorac filmova da ne komentiram.

Ali postoji izvrstan lagani program koji se zove VirtualDub, iako s jednim nedostatkom. Radi s vrlo ograničenim skupom AVI kodeka. I ovdje se opet sjećamo XviD4PSP pretvarača. S gore navedenim postavkama, video će raditi s njim. Odaberemo potrebne dijelove videa, izrežemo ih, spremimo i otvorimo u Photoshopu. Možete to učiniti drugačije, spremiti pojedinačne video okvire koristeći VirtualDub, a zatim sastaviti animaciju od njih u Photoshopu. Na primjer, stavite naučene datoteke u jednu mapu i otvorite ih u serijama u Photoshopu u jednom dokumentu na različitim slojevima, ali to u pravilu oduzima više vremena, ali u svakom slučaju ne možemo bez XviD4PSP pretvarača.

Ranije smo na web mjestu pogledali one trećih strana, ali većina njih može lako zamijeniti obični Photoshop. Animirane GIF datoteke mogu se vrlo jednostavno i brzo izraditi uz njegovu pomoć. Obično se sastoje od nekoliko slika (frameova), koje, mijenjajući se korak po korak, tvore konačni rezultat. Danas ćemo pokušati razmotriti ovo pitanje od A do Z što je moguće detaljnije:

Snimke zaslona u nastavku su iz Photoshopa CC, ali rad s GIF animacijom u CS6 i drugim verzijama programa sličan je, plus ili minus. Možda će vizualni alati biti malo drugačiji, ali općenito su princip i algoritam radnji slični. Kao primjer, razmotrite trivijalni zadatak kako stvoriti GIF animaciju u Photoshopu od fotografija koje zamjenjuju jednu drugu. Nedavno sam pomoću ovog vodiča napravio gif o svojim avanturama za posljednji post za 2016. na svom osobnom blogu.

Proces je trajao doslovno 5-10 minuta. Ovdje je važno samo pažljivo slijediti sve korake. Na kraju posta pronaći ćete video lekciju na engleskom jeziku o ovoj temi.

Dodavanje GIF animacijskih slika u Photoshop

Prije svega, trebate učitati u grafički urednik sve slike/fotografije koje će sudjelovati u animaciji. Dodajte ih u jedan projekt u različitim slojevima - to će biti okviri za rezultirajuću GIF datoteku. Provjerite veličinu slika i njihov prikaz kako bi sve bilo kako vam treba. Slojevi se mogu sakriti (pomoću ikone oka s lijeve strane sloja) kako bi se vidjeli svi objekti.

U središtu ove ploče nalazi se padajući popis na kojem trebate odabrati opciju "Create Frame Animation" i kliknuti na gumb. Kao rezultat ove radnje, vremenska traka će se malo promijeniti i trebali biste vidjeti sliku s najvišeg sloja kao prvi okvir.

U sljedećem koraku odaberite sve slojeve u projektu (kliknite na njih držeći Tipka Ctrl). Nakon toga otvorite kontekstni izbornik u gornjem desnom kutu prozora Timeline i odaberite “Make Frames From Layers”.

Od svih vidljivih i odabranih Adobe slojevi Photoshop će stvoriti animirane GIF okvire. Kao rezultat toga, vidjet ćete ih na ploči vremenske trake.

Postavke GIF animacije u Photoshopu

Ovdje ćete morati navesti 2 stvari: trajanje prikaza različitih okvira + broj ponavljanja gifa. Počnimo s prvim. Ispod svakog slikovnog objekta na vremenskoj traci pronaći ćete vrijeme prikaza i strelicu prema dolje. Kliknite na njih i odaberite trajanje kartice u skočnom izborniku.

Možete odrediti različita vremena za elemente ili postaviti parametar za nekoliko njih istovremeno (zajednički odabir kao u slojevima - pomoću Ctrl).

Za "petlju" GIF-a u Photoshopu prilikom izrade animacije, odaberite vrijednost Forever u odgovarajućoj postavci kao što je prikazano na snimci zaslona u nastavku.

Tamo također možete odrediti bilo koji broj ponavljanja koji vam je potreban. U blizini se nalazi tipka za reprodukciju koja vam omogućuje da pustite animirani GIF i vidite kako će izgledati konačni rezultat.

Spremanje GIF animacije u Photoshopu

U završnom dijelu našeg vodiča, pogledat ćemo kako pravilno spremiti GIF animaciju u Photoshopu. U tu svrhu koristi se poznati alat Save for Web, ali u najnovije verzije Adobe Photoshop CC nalazi se na novom mjestu izbornika (Datoteka - Izvoz). Srećom, Alt + Shift + Ctrl + S još uvijek radi.

U prozoru postavki koji se otvori potrebno je odabrati GIF format, a također provjeriti je li postavka Looping Options postavljena na Zauvijek. U donjem desnom kutu prozora postoji opcija za pokretanje animiranog GIF-a koji ste izradili u Photoshopu za pregled.

Ako sve radi kako se očekuje, kliknite Spremi i spremite datoteku u lokalno računalo. Da biste provjerili funkcionalnost GIF-a, morate ga otvoriti u pregledniku jer... Ugrađeni Windows preglednik ne reproducira animaciju.

Usput, također možete jednostavno izvesti svoj projekt u video format. Postupak je isti kao kod spremanja GIF animacije, ali u Photoshop izborniku odaberite File - Export - Render Video.

U prozoru koji se otvori bit će različite postavke video, ali ne morate ništa dodatno mijenjati, samo kliknite na gumb Render. Kao rezultat toga, dobit ćete mp4 datoteku s dijaprojekcijom fotografija/slika.

Na kraju, predlažemo da pogledate video vodič na engleskom jeziku o stvaranju animiranih GIF-ova u Photoshopu. Algoritam za rad tamo je isti kao u članku, ali možda će vam biti lakše percipirati informacije iz videa.

Ako još uvijek imate pitanja o tome kako napraviti GIF animaciju u Photoshopu ili imate bilo kakvih dodataka, napišite u komentarima.

GIF format vrlo je čest na internetu. Razlozi za tako veliku popularnost su jednostavni: GIF datoteke imaju vrlo dobar algoritam kompresije, podržavaju transparentnost i omogućuju stvaranje jednostavnih i složenih animacija i reklamnih natpisa.

Ali u isto vrijeme postoji nekoliko problema, a glavni je potreba za promjenom veličine GIF-a. Postavlja se pitanje: kako smanjiti ili povećati veličinu GIF-a? Kako urediti GIF? Na primjer, trebam li izrezati datoteku? U slučaju da radimo s običnim JPG datoteka, takvi problemi ne nastaju - uostalom, u bilo kojem, čak i najjednostavnijem uređivaču, s nekoliko klikova možemo promijeniti veličinu slike ili izrezati nepotrebni dio. Kako urediti GIF? Uostalom, većina uređivača dopušta vam samo rad s fotografijama.

Kako bismo riješili ovaj problem, nudimo vam naš jedinstveni uređivač - GIF Resizer. Uz njegovu pomoć možemo brzo i jednostavno promijeniti veličinu GIF datoteke – smanjiti je ili povećati prema potrebi. Da biste to učinili, slijedite nekoliko jednostavnih koraka:

• Kliknite na gumb "Promijeni veličinu".
• Dodajte GIF pomoću gumba Pregledaj.
• Unesite potrebnu visinu i širinu.
• Pritisnite Primijeni.

Nekoliko sekundi - i veličina GIF animacije postala je veličina koju ste željeli!

Kako pretvoriti GIF u JPG i podijeliti ga u okvire?

Još jedna nijansa koju mnogi korisnici imaju pri radu s GIF-om je potreba da se razbije u okvire. Osim toga, napraviti GIF iz JPG-a nije tako težak zadatak. Ali kako pretvoriti GIF u JPG? Ili pretvoriti u PNG?

Kad se suočite s takvim zadatkom, možete se ponovno okrenuti GIF Resizeru. Koristeći ga za promjenu veličine, smanjivanje ili povećanje GIF-a, možete odmah rastaviti GIF na okvire i tako pretvoriti potrebnu animaciju u JPG.Slijed radnji se ne mijenja - sve se događa brzo i jednostavno:

• Izaberiželjenu animaciju.
• Klik na gumbu “Decompose into frames”.
• Uživajte u rezultatima!

Uređivač GIF Resizer pruža vam izvrsnu priliku da uštedite vrijeme i trud pri radu s GIF datotekama. Što god trebate - promijenite veličinu, obrežite, smanjite ili povećajte, rastavite GIF u okvire, pretvorite u JPG, JPEG, pretvorite u PNG - naša aplikacija vam je uvijek na usluzi! Uređivač GIF Resizer omogućuje vam rješavanje sljedećih problema:

• Kako promijeniti veličinu animiranog gifa?
• U kojem programu možete promijeniti veličinu animirane slike?
• Kako smanjiti veličinu GIF slike?
• Kako smanjiti veličinu animirane slike?
• Kako promijeniti format animiranih slika?
• Kako ukloniti logotip s animirane slike?

Da biste dobili mnogo više opcija s besplatnim mrežnim proizvođačem animacija Gif slike Resizer – samo se registrirajte na našoj web stranici!

Možete nastaviti s izradom Gif animacije, čak i ako ste morali prekinuti rad tijekom prethodne posjete resursu. Uostalom, sve svoje kreacije uvijek možete pronaći na stranici! I najbolje GIF animacije koje ste uspjeli izraditi pomoću naše besplatne online programi Gif Resizer će završiti u galeriji stranice i moći će postati izvor vašeg osobnog ponosa.

Mislim da nitko nije imao želju s vremena na vrijeme ponoviti / završiti / malo promijeniti pronađena gif slika.

Sigurno su mnogi ljudi upoznati sa situacijama poput:
- čini se kao lijep gotovi animirani avatar, ali volio bih da ga mogu malo usporiti...
- Volio bih da mogu napisati nešto na animiranoj slici...
- bilo bi lijepo imati veličinu gifa - neka budu manje slike...
- itd. i tako dalje.

Stoga ćemo danas pogledati ova pitanja.

Prošli put jesmo, danas hoćemo modificirati gotov animirani GIF da odgovara vašim potrebama.

Suočen s ovim “problemom”, ali već znajući kako napraviti animirani GIF, predložio sam gdje i kako je moguće promijeniti GIF. Odmah sam pronašao par gifova na internetu i provjerio svoju pretpostavku - pokazalo se točnim. Ali krenimo redom.

Dakle, imate gotovu animiranu sliku. Razmotrimo 3 mogućnosti za njegovu izmjenu (po mom mišljenju, ovo su najpopularniji slučajevi):
1. Usporimo animaciju.
2. Napišimo nešto na slici.
3. Promijenite veličinu slike.

Promjena brzine animacije u GIF slici.
(promijenite brzinu treptanja slika)

Često se dogodi da mi se sviđa npr. kakav animirani avatar, ali ima previše pokreta i želim ga barem malo usporiti. To je ono što ćemo sada učiniti. Iako je opcija s povećanje brzine animacije su apsolutno isti slučaj.

Otvorite gif datoteku koja nas zanima u Adobe ImageReady: Datoteka(Datoteka) - Otvoren(Otvoren) - …

Sada pogledajmo ploču Animacije

Pažljivo gledamo ovaj svitak i vidimo ono ispod svatko"frame" je vrijeme (u ovom slučaju postavljeno je na 0,17 sekundi).

Ovo je pokazatelj koji trebamo promijeniti, kliknite na potvrdni okvir i pojavit će se padajući popis gdje možemo postaviti trajanje prikaza koje nam je potrebno svatko okvire pojedinačno (ili sve odjednom, odabirom svih okvira dok držite pritisnutu tipku Shift na tipkovnici).

Ovdje i odmah možemo vidjeti što se dogodilo - ima više u nastavku gumbi playera– gledajte animaciju u glavnom prozoru otvorena datoteka(ne u ovom svitku).

Ako ste zadovoljni sa svime, spremite rezultat: Datoteka - Spremi optimizirano kao…- I vidi što se dogodilo.

u redu

u redu

Ako ne, nastavite mijenjati trajanje okvira dok ne dobijete ono što želite.

To je sve!

Ako ste primijetili, u novom GIF-u potpis je uklonjen u donjem desnom kutu. To ćemo sada učiniti, samo što ćemo dodati natpis na sliku, a ne ukloniti ga.

Ispisujemo riječi na animirani avatar (sliku).

Otvori u Adobe ImageReady animirani avatar: Datoteka(Datoteka) - Otvoren(Otvoren) - …

Ovaj gif ima samo 2 okvira(i 2 sloja). I sve što trebamo učiniti je dodati natpis. To se radi vrlo brzo.

Pomoću alata pišemo „prave riječi“ na slici na pravo mjesto Tekst(kao u Photoshopu) novi sloj se automatski stvara na popisu slojeva.

Napravimo to iz teksta rasterska slika: u izborniku Layer - desnom tipkom miša kliknite na sloj s tekstom i odaberite Rasterize Layer s padajuće liste - i tekst je prestao biti tekst, sada je to samo grafički element koji ima jednu (!) boju, što je vrlo važno za težinu turpije.

Sada pogledajmo ploču Animacije(Animacija) u donjem lijevom kutu prozora programa (prema zadanim postavkama tamo se pojavljuje). Ako ga nema, onda trebate nabaviti ovaj “skroluj” (ploču): u izborniku Prozor odaberite Animacija.

Budući da postoje samo dva okvira, bolje da ih stvorimo iznova:

Otvorite padajući popis pomicanja animacije i odaberite Izbriši okvir(Brisanje okvira).

Ostao nam je samo jedan njihov okvir. “Postavimo” ga – želimo vidjeti prvu sliku (Layer 1) i natpis – ostavimo ih uključene (oko pored sloja je uključeno), a za sada isključimo “nepotrebni” sloj (klikni lijevom tipkom miša).

Prvi okvir je spreman.

Napravite njegovu kopiju (odabirom Kopiraj okvir na padajućem popisu ili odgovarajućem gumbu desno od "igrača").

Pojavio se drugi kadar– postaviti:
- natpis je uključen
- Sloj 1 onemogućen
- Sloj 2 omogućen

Pa, to je u biti to. Pokrenite player i vidjet ćete da se na vašem animiranom avataru pojavljuje natpis.

Ako ste zadovoljni sa svime, tada spremite rezultat: Datoteka - SpremiOptimizirano kao…

Možete isključiti riječ u drugom okviru - tada će i ona "treperiti".

I ako želim da slika "treperi" slova riječi postupno su dodavana?

Režemo riječ na posebna slova (kopiramo sloj s riječju i na svakom sljedećem sloju brišemo jedno slovo manje - prvi sloj - ostaje prvo slovo riječi, drugi sloj - 2 slova itd. za cijeli sloj). Da biste to učinili, zgrabite sloj s riječju i povucite ga na ikonu na dnu popisa slojeva - sloj se kopira i pojavljuje na popisu.

Sve promjene sloja vrše se kada je sloj koji se mijenja aktivan, tj. nalazite se na njemu (lijevi klik na sloj i on će biti označen tamnijom bojom).

Sada preostaje samo kreirati nove okvire i na svaki sljedeći staviti sloj s dodanim slovom. Istovremeno naizmjenično uključite/isključite Layer 1 i Layer 2 (tako da se ne mijenja samo riječ, već i slika).

Evo što smo dobili: