Izrada gif animacija. GIF Animator: Besplatan softver za kreiranje GIF animacija na mreži

Na svoju ruku. U ovom materijalu ćemo razmotriti mogućnost stvaranja takve animacije u programu Photoshop, kao i pružiti druga softverska rješenja koja su za to prikladna.

Photoshop program

GIF se kreira bez kodiranja ili korištenja Flasha. Zatim ćemo pogledati kako napraviti GIF u Photoshopu. Pokrenite Photoshop. Kreirajte novi dokument tako što ćete kliknuti na karticu "Datoteka", a zatim u padajućem izborniku odabrati "Novo", unesite željenu visinu i širinu za buduću GIF animaciju.

Postavite standardnu ​​rezoluciju na 72 piksela po inču. Zatim kliknite na "OK" levim tasterom miša. Odaberite karticu pod nazivom "Datoteka", a zatim "Otvori". Označavamo datoteke koje ćemo koristiti u animaciji. Kliknite lijevu tipku miša na željenu sliku da biste je odabrali. Da biste odabrali više slika, pritisnite i držite tipku Ctrl.

rad sa slikom

Koristimo funkciju "Otvori" kada su svi fajlovi odabrani. Nakon toga će Photoshop otvoriti slike na bini. Idite na mjesto gdje lijevom tipkom miša kliknite na "Premjesti". Dugme se nalazi na vrhu lijeve kolone. Držite lijevu tipku miša na slici i prevucite je u novi dokument.

Photoshop će svaku sliku postaviti na novi sloj. U ovom slučaju, svi slojevi su na kartici istog imena. U sljedećem koraku kliknite na karticu "File" i odaberite "Open with ImageReady". Ako panel za animaciju nije otvoren, kliknite na "Prozor", a zatim na "Animacija". Paleta će se pojaviti u donjem dijelu radnog područja i prikazat će malu sliku datoteke koju ste odabrali.

Kako napraviti GIF: prvi kadar

Pritisnite lijevu tipku miša na funkciji "Duplicate selected files", prelazeći na paletu animacija. Potrebna ikona se nalazi pored "Trash" na dnu panela. Od sada se navedeni okvir duplicira. Sledeća faza. Pritisnite lijevu tipku miša na prvom kadru kako biste ga odabrali.

Zatim isključite vidljivost slojeva u paleti klikom na sliku oka, izuzetak je slika koja je odabrana za prvi okvir animacije. Tako smo napravili prvi okvir. Kliknite na drugu da biste je odmah odabrali u paleti. Isto tako, isključite sve slojeve osim druge slike. Sljedeći okvir je spreman.

Ponavljamo proces

Već smo uspostavili osnovni algoritam kako napraviti GIF, sada samo trebate ponoviti proceduru za svaki kadar animacije. Ponovo se okrećemo funkciji "Duplicate odabrane datoteke". Prelazimo na treći kadar. I tako, dok se animacija ne sastavi. Nakon što završite rad sa okvirima, kliknite na dugme PLAY da vidite verziju GIF datoteke koju kreirate.

Kliknite na "Stop". Levim tasterom miša kliknite na crnu strelicu na dnu 1. kadra na paleti animacija. Odaberite jednu od opcija "Jednom" ili "Uvijek" u meniju. U prvom slučaju, animacija će se reproducirati jednom, u drugom će reprodukcija biti neprekidna.

Pritisnite lijevu tipku miša na crnu strelicu, koja se nalazi na dnu svakog od okvira, i odaberite vrijeme tokom kojeg će se ova slika prikazati. Kao rezultat, spremamo animaciju klikom na "Datoteka", a zatim odabiremo opciju "Sačuvaj kao". Unesite naziv animacije i kliknite na crnu strelicu u polju "Files of type". Odaberite Samo slike.

Alternative

Ako govorimo o programima koji vam mogu pomoći da kreirate animacije, obratite pažnju na aplikaciju Easy GIF. Ovo rješenje je namijenjeno razvoju animiranih GIF slika i istovremeno ih može dopuniti raznim specijalnim efektima. Aplikacija ima puno postavki pomoću kojih možete promijeniti gotovo sve karakteristike datoteke animacije.

Korisnik definiše trajanje videa i njegovu šemu boja. Ostale karakteristike programa uključuju: dodavanje teksta slici, pregled projekta u pretraživaču i pretvaranje GIF animacije u AVI datoteku. Možete dodati zvučni zapis svom projektu, a zatim ga sačuvati u SWF formatu.

Aplikacija je pogodna za web programere. Činjenica je da program automatski generiše HTML kod, koji je spreman za postavljanje na sajt. Za kreiranje animacija možete koristiti različite grafičke formate: GIF, BMP, PNG i JPG. Da bi smanjili veličinu rezultirajućih datoteka, programeri su implementirali sistem optimizacije za gotov materijal, koji uključuje nekoliko pristupa ovom pitanju. Program je idealan za programere promotivnih proizvoda.

U zadatku vam mogu pomoći i sljedeći programi: Adobe Flash, Blender, Pivot Stickfigure, Anime Studio, FotoMorph, 3DMonster, Funny Photo, Active GIF, Falco GIF, Abrosoft FantaMorph, Hippo Animator, Flex Gif, CoffeeCup GIF. Sada znate kako napraviti GIF. Nadamo se da će vam naši savjeti pomoći.

Jeste li se ikada zapitali kako nastaju animirani GIF-ovi? Autor tutorijala vas poziva da savladate neke od tajni animacije u jednoj noći koristeći ovaj tutorijal. Također ćete naučiti kako koristiti vremensku liniju, koja je dostupna u Photoshopu CS6. Hajdemo sada!

Rezultat lekcije.

Korak 1

Kreirajte novi dokument ( Ctrl + N) veličine datoteke 800 x 500 piksela. Ispunite pozadinu bojom koju želite. Sada idite na meni Slojevi- Stilsloj- Preklapanjegradijent(Sloj> Stilovi sloja> Preklapanje gradijenta). Primijenite sljedeće postavke: Stil Radijalno(Radijalno), boje od crne (# 000000) do plave (# 54799b), koje će se koristiti u centru.

Korak 2

Kreirajte novi sloj i nazovite ga Sloj buke... Odaberite alat Fill(Paint Bucket Tool) i popunite kreirani sloj tamnom bojom (# 231f20). Ostavite sloj aktivnim Sloj buke i idite na meni Filter - Buka - Dodaj buku(Filter> Buka> Dodaj šum). U dijalogu postavki filtera postavite sljedeće vrijednosti: efekat(Iznos) 3%, distribucija Uniforma(Uniforma) i kliknite na OK.

Korak 3

Pritisnite kombinaciju tastera (Ctrl +U) i u dijaloškom okviru postavki korekcije koji se pojavi unesite vrijednosti Saturation(Saturation) 100%: Promijenite način blendanja ovog sloja u Soft light(Meko svjetlo).

Napomena prevodioca: Da biste postigli istu boju kao autorova na snimku ekrana, možete podesiti vrijednost Hue na - 140 kada ispravljate Hue / Saturation.

Korak 4

Dodajte bilo koji tekst koji želite. Ovdje ćemo koristiti tekst logotipa web stranice 123RF. U slojevima koristite stilove Outline(Moždani udar). Odaberite vrijednosti veličine poteza prema vašim željama.

Napomena prevodioca: Na autorskom ekranu već postoji rasterizovani tekst uz stil Stroke. Da biste postigli isti rezultat, nakon nanošenja poteza, uklonite Fill (Fill) tekstualnog sloja na 0%, pretvorite ovaj sloj u pametni objekat, a zatim ga rasterizirajte.

Korak 5

U ovom koraku ćemo kreirati sjajni efekat za tekst koristeći stilove slojeva. Dvaput kliknite na sloj da biste otvorili prozor postavki stila. Koristite slike ekrana u nastavku da prilagodite stilove slojeva.

Embossing(košenje i reljef)

Unutrašnja sjena(Unutrašnja sjena)

Unutrašnji sjaj(Unutarnji sjaj)

Preklapanje boja(preklapanje u boji)

Vanjski sjaj(Vanjski sjaj)

Shadow(Drop Shadow)

Korak 6

Kada završite sa kreiranjem svetlosnih efekata pomoću stilova slojeva, idite na paletu slojeva i smanjite vrednost ovog sloja. Ispuna(Popuni) za 0%.

Korak 7

Duplirajte sloj koji ste kreirali u koraku 5 i isključite sve stilove slojeva na ovoj kopiji. Sada postavite stilove ovako:

Unutrašnja sjena(Unutrašnja sjena)

Unutrašnji sjaj(Unutarnji sjaj)

Korak 8

Ispod je rezultat nakon što ste primijenili stilove slojeva.

Korak 9

Sada ćemo kreirati pokretne svjetlosne mrlje. Napravite 5 slojeva iznad postojećih i preimenujte ih u 1,2,3, R i F. Ako imate svoj tekst kreirajte slojeve prema svojim slovima. Grupirajte ove slojeve u folder i dajte mu ime. Svetle tačke i promijenite način miješanja u Posvetljavanje baze(Boja Dodge).

Aktivirajte alat Četka(Alatka za četkicu), odaberite mekanu četku, postavite Opacity(Neprozirnost) na 95% i sa bijelom bojom nekoliko mrlja preko teksta. Za svako slovo posebna svjetlosna tačka na vlastitom sloju. U nastavku na snimku ekrana možete vidjeti kako slojevi gledaju na autora u paleti slojeva.

Korak 10

Sada idite na meni Prozor - Vremenska linija(Prozor> Vremenska linija). Primijetit ćete da su vaši slojevi već ugrađeni u ovu paletu na lijevoj strani. Odaberite svaki od pet reflektorskih slojeva u grupi. Svetle tačke i uvjerite se da je indikator trenutnog vremena (plavi klizač) na nultom kadru. Sada na svakom sloju u grupi, kada je aktivan, kliknite na opciju Pozicija(Pozicija) za kreiranje ključnog kadra.

Napomena prevodioca: Da aktivirate vremensku liniju, pritisnite dugme Kreirajte vremensku liniju za video(Kreirajte vremensku liniju videa) i svi vaši slojevi će se učitati u vremensku liniju. Odabrani sloj će biti isti sloj ili grupa kao u paleti slojeva.

Korak 11

Postavite indikator trenutnog vremena (plavi klizač) na 01:00 F i pomerajte slojeve sa svetlim tačkama duž putanje njihovog kretanja u odnosu na obris slova.

Korak 12

Ovako će izgledati početni položaj svjetlosne tačke na slovima. Pomerajte indikator trenutnog vremena duž vremenske linije i pomerajte slojeve sa svetlosnim tačkama, stvarajući ključne kadrove. Nastavite ih pomicati dok ne završite pomicanje mrlje preko cijelog slova svakog sloja teksta. Za uputstva pogledajte nekoliko snimaka ekrana ispod.

Postojao je zadatak napraviti gifove na određenu temu.
Poenta je da baneri i teaseri najbolje rade kada su animirani. Prodati pravi proizvod je najlakše ako kupac vizualno vidi reklamirane proizvode. Stoga je najbolje napraviti takve banere od recenzija željenog proizvoda. Na sreću, na Youtube-u ćete vjerovatno pronaći više od desetak recenzija o proizvodu koji vam je potreban.

Najlakši i najprikladniji način da napravite vlastite GIF-ove za reklamne svrhe je da ih generirate iz video zapisa.

Usput, ovo ne mora nužno biti promotivni materijal. Animirani GIF-ovi vrlo dobro funkcioniraju u dizajnu redovnih članaka. Uostalom, ljudi se "drže" dobrih i zanimljivih gifova. To znači da provode više vremena na stranici i proučavaju je. Ono što direktno utiče, a samim tim i na

Usput, ovo je odličan način da svoj članak stilizirate jedinstvenim slikama. Ne postoji toliko jednostavnih načina da ga dobijete na internetu. Evo nekoliko njih:. A korištenje GIF-ova je odlična i zanimljiva praksa koja pozitivno utječe na percepciju sadržaja od strane čitatelja.

Kako jednostavno napraviti GIF sliku za reklame, banere i teasere?

Samo idemo na youtube, tražimo odgovarajući video, gledamo ga, biramo nekoliko sekundi videa, gdje nam se prikazuju okviri koji su nam potrebni.

Sada vam treba usluga. Postoji mnogo takvih usluga, ali neke od njih su vrlo nezgodne, neke su plaćene. Pokušao sam sa desetinama različitih servisa i pronašao najpovoljniji, koji vam omogućava da odaberete željeni fragment s preciznošću od desetinki sekunde. I tako kreirajte jasnu animaciju, bez nepotrebnih okvira. Mnoge usluge vam omogućavaju da odaberete fragment samo uz pomoć klizača, s kojima je prilično teško podesiti početak i trajanje fragmenta s takvom preciznošću

Usluge iz vrha Google-a nisu pokazale najbolje alate za to. Na prvom nisam mogao uopće učitati video, a na drugom nisam mogao precizno označiti željeni fragment klizačem.

Servis za kreiranje GIF-a iz videa

Naznačavamo željeni fragment. Vrlo je zgodno što možete pregledati i odabrati željene kadrove s preciznošću od desetinki sekunde. Nakon pregleda animirane slike, možete promijeniti ivice. I tako radite onoliko ponavljanja koliko želite.

Usluga je jednostavna i praktična, radi brzo.

Ali to nije sve. Uostalom, cijeli fragment iz videa nije uvijek prikladan za nas. Često ga trebate dodatno obraditi - dodati neke efekte, natpise ili izrezati GIF. Da, iste crne ivice, ili odrezan vodeni žig same usluge. Ova usluga to ne može učiniti. Na sreću, ima mnogo drugih. I opet morate birati među njima. Stoga idemo na drugu uslugu koja vam omogućava da to učinite povoljno.

Kako da izrežem GIF ili da mu dodam tekst?

Za to se pokazalo da je najpovoljnija usluga ezgif.com i njegova funkcija izrezivanja GIF-a - obrezivanje

Ovdje jednostavno odaberite željeni dio animirane slike mišem i kliknite Crop IT. I opet, pregled nam je dostupan. Ako vam opcija ne odgovara, možete promijeniti granice. Kao rezultat toga, možete izrezati animirani baner bilo kojeg prikladnog formata.

Dodajte natpis GIF animaciji

Kreirajte gifove iz videozapisa pomoću ekstenzije preglednika Google Chrome

Mali priručnik o tome kako možete kreirati gif-animaciju na mreži, bez instaliranja programa. Postoji samo jedno malo proširenje koje treba instalirati za naš omiljeni Google Chrome. A mi ćemo snimiti video zapise za kreiranje gifova sa web stranice za video hosting YouTube.com. Upozorenje: Svi oni koji su pri pogledu na ime Chrome pretraživača počeli da pljuju, molim vas da se udaljite od ekrana - ovaj članak nije za vas.

čemu sve ovo? Možete se samo poigrati, možete umetnuti ove iste gifove na svoj blog ili možete njima ispuniti svoju stranicu na društvenoj mreži. Radi interesa, nedavno sam napravio gif-animaciju od videa o mačjim trikovima i postavio je u tematsku grupu na Google+. Kao rezultat, slika je dobila oko 400 plus znakova i više od 80 dijeljenja za manje od dva dana.

Ljudi vole ovakav sadržaj, zašto ga ne iskoristiti? Ako ste bloger i pišete članke u kojima se ne možete izvući samo pričama, ali morate nešto pokazati, onda možete snimiti video ili napraviti screencast, staviti ga na YouTube i napraviti gifove od dijelova videa . Cijela stvar se može ugraditi pomoću koda, tako da ne morate brinuti o prostoru za hosting. Ali bolje je o svemu po redu.

Kao i uvijek, volim malo povući gumu. Počnimo već. Odmah moram da kažem da sam ovu ekstenziju testirao samo sa YouTube video zapisima, iako bi, prema rečima kreatora korisnog dodatka za pretraživač, sve trebalo da radi i sa Vimeom. Ali to možete sami provjeriti ako želite.

Onda krenimo sa kreiranjem GIF animacije. Ovo je zaista vrlo jednostavno za napraviti. Ali prvo, morate se složiti s nečim. Nemojte se uplašiti, samo trebate otići na stranicu http://www.youtube.com/html5
i pristajete da učestvujete u testiranju HTML5 plejera. Ako vam nešto ne odgovara, u budućnosti uvijek možete ući i odbiti.

Nakon ove jednostavne manipulacije, samo trebate preuzeti ekstenziju za Chrome pretraživač (naziva se MakeGIF Video Capture) i pronaći odgovarajući video. Možete odabrati apsolutno bilo koji video na YouTube-u - nije važno vaš ili ne. Jeste li odabrali? Zatim kliknite na play, a zatim kliknite na dugme za proširenje u ominboxu. Nažalost, ova ekstenzija se ne može pohvaliti bogatim postavkama i efektima. Najviše što možete učiniti je prilagoditi kvalitetu animacije, maksimalan broj kadrova (do 1000) i veličinu slike. Možete umetnuti i neki jednostavan tekst, kao i pokrenuti animaciju unatrag (na ovaj način je često mnogo smješnije i zanimljivije).

Dakle, odaberite pravi trenutak u videu i kliknite na start. U tom procesu možete pritisnuti pauzu i izostaviti nepotrebno. Kada se završi trenutak koji ste odlučili da uhvatite, kliknite na stop. I nije važno ako dobijete dodatne snimke. Možete ih jednostavno izrezati.
Ako je animacija spremna, možete je preuzeti na svoj računar ili poslati na online servis MakeGif.com. Druga opcija je mnogo atraktivnija jer vam se otvaraju dodatne mogućnosti. Koji? Reći ću ti sada.

Tako, uz pomoć ekstenzije MakeGIF Video Capture i web stranice MakeGif.com, dobijate dva korisna alata za kreiranje gif-animacije online odjednom, bez instaliranja programa na vaš PC. Koliko ja znam, na internetu postoji dosta sličnih servisa. Pohvali se ako znaš nešto bolje.

Postoji nekoliko načina komunikacije koji vrlo precizno mogu prenijeti vaše raspoloženje, stanje, pa čak i unutrašnji monolog. Jedan od ovih načina je GIF animacija.

Putem memova, reklama i društvenih medija, GIF-ovi prodiru u naše svakodnevne lične i profesionalne interakcije. I, vidite, bila bi velika greška ne pokušati imati koristi od ovoga. Osim toga, stvaranje GIF animacije će vam oduzeti nekoliko sekundi - a ovo nije šala.

Facebook, iPhone poruke, Android platforme - svi imaju tastaturu sa ugrađenim skupom animiranih slika. Usudite se reći da su GIF animacije nove (emoji).

Ako imate problema s pronalaženjem savršenih GIF-ova ili imate briljantnu ideju za novu GIF animaciju, pogledajte ovaj članak da naučite kako brzo i jednostavno kreirati GIF animaciju. U ovom slučaju vam apsolutno nije potrebno poznavanje Photoshopa.

Bilo je potrebno samo 75 sekundi da kreirate GIF koji vidite ispod:

Kreirajte animirani GIF

1. Prijavite se na Canva

Ako nikada ranije niste koristili Canvu, sada je vrijeme da to popravite. Canva je fantastičan besplatni online alat sa opsežnom bibliotekom slika, fontova i grafika. Zahvaljujući njemu, svako može proći za genija grafičkog dizajna.

2. Odaberite slike

Možete koristiti vlastite slike, ili birati između gotovih rješenja, kojih postoji ogroman broj Canva. Provjerite njihovu biblioteku i možda ćete pronaći onu koja vam savršeno odgovara.

Takođe možete pronaći besplatnu grafiku na resursima kao što su Vecteezy.com, HubSpot (ako ste njihov klijent) i Creative Market.

Za osnovu je uzeta sljedeća slika iz Canva biblioteke:

3. Kreirajte slojeve

Animirani GIF-ovi izgledaju "animirani" po tome što kombinuju više statičnih slika/slojeva u petlje. Morate kreirati svaki od ovih slojeva.

Da biste kreirali gif kao u primjeru s tekstom kao animiranim dijelom, trebate:

• Uklonite sve natpise sa originalne slike i ostavite samo pozadinu, ivice itd.
• Dodajte prvi red teksta: "Samo zamisli!" (Pogodi šta!)
• Preuzmite rezultirajuću sliku.

Nakon toga:

• Ne dirajte ništa drugo. Važno je! Ako premještate elemente ili tekst između slojeva, nećete dobiti glatku animaciju.
• Dodajte drugi red teksta: Napravio sam ovaj GIF.
• Preuzmite rezultirajuću sliku (sada imate dvije).

Ponovite ove korake još jednom sa zadnjim redom teksta "Za 75 sekundi" i ponovo preuzmite rezultirajuću sliku.

Kao rezultat, imate tri sloja za svoju buduću GIF sliku. Možete dodati koliko god želite slojeva, ali važno je zapamtiti sljedeće:

• Pričaš priču.
• Uskladite elemente između slojeva.
• Koristite gotovu grafiku kad god je to moguće.
• Canva vam omogućava da otpremite svoje slike.

4. Kreirajte animirani GIF

Da biste kreirali animirani GIF, preporučujemo da koristite uslugu GIPHY.

GIPHY je jedna od najvećih animiranih GIF biblioteka koju čak i Apple koristi.

Pomoću ovog alata možete kreirati video ili animirani GIF i spremiti ga na svoj računar u bilo kojem od predloženih formata.

Evo kako ga koristiti:

1. Idite na GIPHY web stranicu i kliknite na dugme “Kreiraj”.

2. Da kreirate animirani GIF, idite na karticu Slideshow:

3. Učitajte svoje slojeve.

4. Organizirajte slojeve onim redoslijedom kojim želite da se pojavljuju:

7. Čestitamo! Upravo ste kreirali animirani GIF za nekoliko sekundi.

Kreirajte GIF animaciju iz videa

U GIPHY-u možete kreirati GIF animaciju ne samo od slika, već i od video datoteka. Evo kako to možete učiniti:

1. Preuzmite video datoteku

2. Odaberite željeni video segment

3. Sačuvajte rezultujući fajl

Dodatne mogućnosti

GIPHY vam omogućava da svoju GIF animaciju učinite još privlačnijom dodavanjem raznih filtera, naljepnica i teksta.

Da biste to učinili, idite na karticu GIF Editor i zalijepite vezu do svoje GIF datoteke u polje za unos.

Odaberite najprikladniji filter, naljepnicu i dodajte naslov svojoj novoj GIF animaciji.

GIF animacija je zabavan i moćan način izražavanja koji se može uspješno koristiti u marketingu. I kao što vidite, zaista ga je vrlo lako stvoriti!