Izrada animacije u Adobe Photoshopu. Izrada GIF animacije u Photoshopu Kako napraviti animaciju u Adobe Photoshopu

Da biste napravili animaciju, ne morate imati neko fenomenalno znanje, samo trebate nabaviti pravi alat i pravilno ga koristiti. Postoji dosta takvih rješenja, ali najpoznatiji od njih je Adobe Photoshop. Ovaj članak će vam pokazati kako možete brzo stvoriti animaciju u njemu.

Ako Photoshop nije na vašem računalu, preuzmite ga s gornje veze, zatim ga instalirajte prema uputama iz ovog članka i pokrenite ga.

Faza 1: Priprema platna i slojeva

Sada na njima možete nacrtati ono što će biti prikazano u animaciji. U našem jednostavan primjer ovo će biti pokretni kvadrat. Na svakom sloju pomiče se nekoliko piksela udesno.

Korak 2: Rad s vremenskom trakom

Svi! Animacija je spremna. Rezultat možete vidjeti klikom na gumb "Pokreni reprodukciju animacije". Nakon toga ga možete spremiti u formatu GIF.

Na ovaj jednostavan, ali provjeren način, uspjeli smo napraviti GIF animaciju u Photoshopu. Naravno, može se znatno poboljšati smanjenjem vremena snimanja, dodavanjem više okvira i, naravno, umjesto stvaranja crnog kvadrata, stvaranjem nečeg originalnijeg i kvalitativno boljeg. Ali to ovisi o vašim preferencijama, željama i vještinama.

Jeste li se ikada zapitali kako nastaju animirani GIF-ovi? Autor lekcije vas poziva da svladate neke tajne animacije u jednoj noći uz pomoć ove lekcije. Također ćete naučiti kako koristiti vremensku crtu, koja je dostupna u Photoshopu CS6. Sada počnimo!

Rezultat lekcije.

Korak 1

Napravi novi dokument ( Ctrl + N) s dimenzijama datoteke od 800 x 500 piksela. Ispunite pozadinu bilo kojom bojom koju želite. Sada idemo na jelovnik Slojevi- Stilsloj- Prekrivanjegradijent(Sloj > Stilovi sloja > Prekrivanje gradijenta). Primijenite sljedeće postavke: Stil Radijalno(Radial), boje od crne (#000000) do plave (#54799b), koje će se koristiti u središtu.

Korak 2

Napravite novi sloj i dajte mu ime Sloj buke. Odaberite alat Ispunite(Paint Bucket Tool) i ispunite stvoreni sloj tamnom bojom (#231f20). Ostavite sloj aktivnim Sloj buke i idite na izbornik Filter - Šum - Dodaj šum(Filter>Buka>Dodaj buku). U dijaloškom okviru postavki filtra postavite sljedeće vrijednosti: Posljedica(Iznos) 3%, raspodjela Uniforma(Uniforma) i kliknite OK.

3. korak

Pritisnite kombinaciju tipki (Ctrl +U) i u dijaloški okvir postavki korekcije koji se pojavi unesite vrijednosti Zasićenost(Saturation) 100%: Promijenite način miješanja ovog sloja na Nježno svjetlo(Blaga svjetlost).

Napomena prevoditelja: Kako biste postigli istu boju kao autor na snimci zaslona, ​​prilikom podešavanja Hue/Saturation, možete postaviti Hue vrijednost na - 140.

Korak 4

Dodajte bilo koji tekst koji želite. Ovdje ćemo koristiti tekst logotipa web stranice 123RF. U stilovima slojeva koristite Moždani udar(Moždani udar). Odaberite vrijednosti veličine poteza prema svojim željama.

Napomena prevoditelja: Na autorovoj snimci zaslona već se nalazi rasterizirani tekst uz stil Stroke. Da biste dobili isti rezultat, nakon primjene poteza uklonite Ispunu (Ispunite) tekstualnog sloja 0%, pretvorite ovaj sloj u pametni objekt, a zatim ga rasterizirajte.

Korak 5

U ovom koraku ćemo stvoriti efekt sjaja za tekst koristeći stilove slojeva. Dvaput kliknite na sloj da biste otvorili prozor s opcijama stila. Za prilagodbu stilova slojeva upotrijebite snimke zaslona u nastavku.

Utiskivanje(kosina i reljef)

Unutarnja sjena(Unutarnja sjena)

Unutrašnji sjaj(Unutrašnji sjaj)

Prekrivanje boja(Preklapanje u boji)

Vanjski sjaj(Vanjski sjaj)

Sjena(sjena)

Korak 6

Nakon što završite sa stvaranjem svjetlosnih efekata koristeći stilove slojeva, idite na paletu Slojevi i smanjite vrijednost ovog sloja Ispune(ispuni) do 0%.

Korak 7

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

Unutarnja sjena(Unutarnja sjena)

Unutrašnji sjaj(Unutrašnji sjaj)

Korak 8

Ispod je rezultat nakon što ste primijenili stilove slojeva.

Korak 9

Sada ćemo stvoriti pokretne mrlje svjetla. Napravite 5 slojeva povrh postojećih i preimenujte ih u 1,2,3, R i F. Ako imate vlastiti tekst, kreirajte slojeve prema svojim slovima. Grupirajte ove slojeve u mapu i dajte joj naziv Svjetlosne točke i promijenite način miješanja u Osvjetljavanje baze(Color Dodge).

Aktivirajte alat Četka(Brush Tool), odaberite meku četku, postavite Neprozirnost(Opacity) na 95% i nacrtajte mrlje na vrhu teksta bijelom bojom. Za svako slovo postoji posebna svjetlosna točka na vlastitom sloju. Dolje na snimci zaslona možete vidjeti kako autorovi slojevi izgledaju u paleti slojeva.

Korak 10

Sada idemo na jelovnik Prozor - vremenska traka(Prozor > Vremenska traka). Primijetit ćete da su vaši slojevi već izgrađeni u ovoj paleti na njenoj lijevoj strani. Odaberite svaki od pet slojeva za isticanje koji se nalaze u grupi. Svjetlosne točke i provjerite je li indikator trenutnog vremena (plavi klizač) na kadru nula. Sada na svakom sloju u grupi, kada je aktivan, kliknite opciju Položaj(Pozicija) za stvaranje ključne slike.

Napomena prevoditelja: Za aktiviranje vremenske skale kliknite gumb Napravite vremensku traku za video(Create Video Timeline) i svi će se vaši slojevi učitati u vremensku traku. Bit će odabran isti sloj ili grupa kao u paleti slojeva.

Korak 11

Postavite indikator trenutnog vremena (plavi klizač) na 01:00 F i pomičite slojeve sa svjetlosnim točkama duž putanje njihova kretanja u odnosu na obris slova.

Korak 12

Ovako će izgledati početni položaj svjetlosne točke na slovima. Pomaknite trenutni indikator vremena duž ljestvice i pomaknite slojeve sa svjetlosnim točkama, stvarajući ključne kadrove. Nastavite ih pomicati dok ne završite pomicanje mrlje preko cijelog slova svakog sloja teksta. Za upute pogledajte nekoliko snimaka zaslona u nastavku.

Napravimo animaciju u Photoshopu

Definirajmo to od samog početka...

Što je GIF animacija?

Ovo je animirana slika, tj. slika koja se može kretati. GIF animacija se može napraviti od nekoliko slika ili od videa. Danas je moguće napraviti animaciju online. Učitajte slike, kliknite na Create i dobit ćete gotovu GIF animaciju. Također možete napraviti GIF animaciju iz videa.

Danas ćemo izraditi GIF animaciju u Photoshopu.

Trebaju nam fotografije, slike, slike. Neću vam govoriti kako urediti fotografije! Bavit ćemo se jednim procesom stvaranja animacije!

Imao sam potrebu napraviti GIF animaciju. Pomislio sam zašto ne bih na temelju ove animacije napisao stranicu posvećenu temi izrade animacija u Photoshopu!?

U potpunosti ćemo opisati proces stvaranja animacije!

Otvorite Photoshop i izradite zaseban sloj za svaku sliku.

Kako napraviti zaseban sloj za animaciju?

Ja radim ovako: učitam sve slike u Photoshop, izrežem željeni dio slike i zalijepim te dijelove u zasebnu datoteku. Potrebna je zasebna datoteka kako nehotice ne biste pokvarili neku fotografiju na računalu!

Kada umetnete izrezani dio u animaciju, automatski se stvara sloj!

Ako nemate stavku izbornika "Animacija", kliknite na padajući izbornik, prikažite sve stavke izbornika.

Na samom dnu programa Photoshop pojavit će se izbornik za upravljanje vašom animacijom. Izrađujemo onoliko kopija odabranih okvira koliko će se vaša animacija promijeniti.

Moja gif animacija promijenit će sliku 9 puta. Ako se iznenada broj okvira pokaže većim nego što vam je potrebno, desno od gumba za dodavanje nalazi se gumb za brisanje.

Kako postaviti vrijeme prikaza svakog kadra u animaciji?

Morat ćemo prikazati svaki kadar različito vrijeme. Kako biste uredili prikazano vrijeme kliknite na malu liniju - trokut.

U padajućem izborniku odaberite željeno vrijeme prikaza za svaki okvir. Ako trebate drugo vrijeme za prikaz okvira, odaberite drugo i postavite potrebno vrijeme.

Dobra večer, dragi pretplatnici i samo čitatelji mog bloga! Jeste li spremni naučiti kako oživjeti svoju sliku? I to ne uz pomoć magije, već uz pomoć svega iz našeg voljenog Photoshopa! Koliko sam dugo odgađao ovu lekciju, ne shvaćajući zašto. Uostalom, ovo su osnove Photoshopa! Ali sada sam se odlučio poboljšati.

I poboljšajte se toliko da će na kraju videa i vaš dobiti video lekciju o tome kako napraviti animaciju u photoshopu.

Dugo nisam pisao Photoshop tutoriale, a za to sam imao razloga. Uostalom, završavao sam svoju priču “”. Dobrodošli ste pročitati ga i izraziti svoje mišljenje izravno u komentarima!

Sada prijeđimo na lekciju. U videu ispod ću vam reći kako napraviti postupno dodani tekst, ali u tekstualnoj lekciji zadatak će biti malo teži.

Imamo Cipollina i trebamo ga natjerati da nam odmahne rukom.

Korak 1. Prvo morate "omogućiti" animaciju u Photoshopu. Za ovo idemo “Prozor”->”Animacija”. Možda se još piše "Vremenska Crta".

Korak 2. Da bi se ruka pomicala, trebamo je izrezati i staviti u različite položaje. Osobno koristim da izrežem ruku "Magnetski laso". Napravite kopiju glavnog ( Ctrl+J) i raditi s kopijom. Original ne diramo.

Pažljivo odaberite ruku i izrežite je!

3. korak Sada stavljamo ruku, koliko god to strašno zvučalo, i stavljamo je u različite položaje. Ruka će biti umetnuta u nove slojeve, to je čak i naša prednost.

Korak 4. Ovaj korak nije obavezan, ali bolje je koristiti alat "Eraser" kako biste malo ispravili ruku, čineći je prirodnijom. Teško je to objasniti, naravno, riječima. Ako razumijete zašto koristimo gumicu, slijedite ovaj korak; ako i dalje ne razumijete, možete ga preskočiti. To nije važno, jer nam je najvažnije naučiti kako napraviti jednostavnu animaciju!

Korak 5. Sada radimo s osobljem. U svakom okviru uključujemo samo one slojeve koji su nam potrebni. Na primjer, u okviru 1 trebamo naš original, au našem slučaju "Sloj 0".

Kreirajmo sada novi okvir:

A u novom okviru uključujemo druge slojeve. Odnosno naš "Kopija sloja 0" I "Sloj 1", odnosno drugačiji položaj ruku. Nadam se da vam je algoritam jasan, dragi čitatelji.

Korak 6. Postavite odgodu okvira. Odnosno, nakon kojeg vremenskog razdoblja će se prikazati sljedeći okvir.

Korak 7Čuvajmo naše. Postoji razlog zašto sam uključio ovaj korak u svoj vodič, budući da je spremanje GIF-a malo drugačije od obične slike.

Odaberite format (zadani je GIF) i spremite.

Napravite novu datoteku s dimenzijama 700 x 300 px.

Otvaranje prozora Vremenska Crta((Prozor - Vremenska traka)).

Kliknite na gumb " Stvorite okvirnu animaciju» (Stvori okvirnu animaciju).

Pomoću alata () stvaramo 3 sloj s tekstom (“Animacija”, “ovo”, “jednostavno”).

Pomoću alata (Move Tool / V Key) postavite tekst kao na slici ispod.

U prozoru Vremenska Crta(Vremenska skala) odaberite prvi okvir i kliknite na " Duplicira odabrane okvire» (Stvaranje kopije odabranih okvira).

Mi stvaramo 4 kopije odabranih okvira.

Odaberite u prozoru Vremenska Crta(Vremenska Crta) drugi kadar i ostavite vidljive samo slojeve " Animacija"I" Pozadina».

Odaberite četvrti kadar i ostavite ga vidljivim svi slojeva.

Postavimo parametar ponavljanja za našu animaciju. U izborniku prozora Vremenska Crta(Vremenska skala), promijenite parametar ponavljanja iz " Jednom" na " Konstantno" (slika ispod).

Sada možemo koristiti početak reprodukcije animacije.