U ovoj lekciji ćemo naučiti kako animirati dim cigarete, paru iznad šoljica, itd. na avataru. Reći ću vam ne samo kako oživjeti dim koji već postoji na vrhuncu, već i kako ga izvući od nule.

Šta ćemo naučiti u ovoj lekciji: Alat za četkicu

Potrebno poznavanje lekcije: i ,

Lekcija se sastoji od dva dijela - animiranje postojećeg dima i crtanje dima (poslije toga animacija) od nule.

Da biste brzo prešli na željenu lekciju, kliknite na rezultat koji vas zanima :

Prvi dio. Crtamo (i animiramo) dim/paru od nule.

1. Korištenje alata četkica (četka)

Drugi dio. Animiramo postojeći dim.

1. Korištenje programa Fanta Morph

Prvi dio. Crtamo (i animiramo) dim/paru od nule.

Lekcija #1. Korištenje alata četkica (četka)

Rezultat naše lekcije:

1. Odaberite odgovarajuću sliku sa šoljicom čaja/kafe:

2. Izrežite ga tako da odgovara avataru - 100 x 100 piksela, ostavljajući dovoljno slobodnog prostora iznad šolje da uvuče paru.

Osim toga, obradio sam vrh - promijenio boje, dodao malo jasnoće.

Bilješka: Saznajte više o izrezivanju slike u lekcijama: " " i " ".

3. Odaberite alat za četkicu (četka) od standardni set"osnovni kistovi" su mutni i veličine 4-5 piksela. Boja četke - bijela.

4. Kreirajte novi sloj za naš dim koristeći dugme "kreiraj novi sloj". novi sloj) u panelu "slojevi":

5. Na novom sloju kistom obojite par tačaka, simulirajući curenje pare preko šolje. Nemojte se zanositi i ne crtajte puno - prvo, to je neprirodno, a drugo, ovo je samo dio pare, bit će i drugih slojeva.

savjet: zumirajte svoj avatar tako da ne morate crtati mikroskopsko :) Da biste to učinili, koristite tipke "Ctrl +" i "Ctrl -".

6. Postižući prirodnost, povećavamo transparentnost ovog sloja parom, jer nemamo tako sjajnu i čistu paru. Da biste to učinili, promijenite parametar "prozirnost" u panelu "slojevi" sa 100% na rezultat koji vam odgovara. Zaustavio sam se na 40%:

7. Kreirajte novi čisti sloj iznad ostatka, za drugi tok pare.

8. Ponovo simulirajte paru farbanjem nekoliko tačaka četkom, ali sada u malo drugačijem obliku, lagano pomičući crtež u stranu i gore:

9. Ponovo povećajte prozirnost sloja pare.

10. Dovršite ovaj korak po želji. Obično možete proći sa dva sloja pare, ali ako maksimalna dozvoljena vršna težina dozvoljava, možete napraviti još jedan sloj pare. Pomjerio sam paru u drugom smjeru i malo dolje u odnosu na prvi sloj. Ne zaboravite povećati i transparentnost ovog sloja.

11. Sada kada su svi slojevi spremni, idite na Image Ready, animiraćemo sliku:

12. U panelu "Animacija" dvaput duplirajte originalni kadar, tako da ima tri okvira ukupno - prema broju naših slojeva sa parom. To radimo pomoću dugmeta "dupliciraj trenutni okvir":

13. Postavite vidljivost slojeva. Za prvi sloj vidljivost je (ikona oka pored sloja) u blizini glavne slike (šalice) i blizu prvog sloja sa parom. Za drugi sloj vidljivost je blizu glavne slike (šalice) i blizu drugog sloja sa parom. Za treći sloj, vidljivost je blizu glavne slike (šalice) i blizu trećeg sloja sa parom, respektivno:

14. Za realizam, napravimo srednje okvire između naših blankova. Da biste to učinili, kliknite na drugi okvir i odaberite naredbu "tween" u panelu "animacija":

i u prozoru koji se pojavi, imajte na umu da nam treba 1 (maksimalno - 2) srednja okvira.

Kliknite OK i pogledajte izgled novog okvira.

Isto radimo tako što kliknemo na četvrti (u početku treći) okvir. I zamotavamo animaciju - kopirajte prvi okvir, povucite ga do kraja (postaje posljednji), umetnite srednji okvir između njega i prethodnog. Nakon toga brišemo posljednji okvir (kopiran ranije) kako ne bismo dali vrhunac prekomjerne težine.

15. Postavite vremenski interval između kadrova na “0,1 sekundu” i pokrenite animaciju:

To je sve! Naš vrh je spreman :)

savjet: Ako vam se nakon pokretanja animacije nije svidio rezultat, djelovao je previše nametljivo, svijetlo i neprirodno - vratite se na korak 13, poništavajući umetanje srednjih kadrova i još više povećajte transparentnost svakog parnog sloja. I tek nakon toga ponovo umetnite srednje okvire. Sada će vaš rezultat biti manje svijetao i upečatljiv.

Drugi dio. Animirajte postojeći dim/paru.

Lekcija #1. Korištenje programa Fanta Morph

U ovoj lekciji ćemo naučiti kako animirati dim koji već postoji u izvornom kodu u programu Fanta Morph.
Ovo bi trebalo da dobijete:

1. Dakle, imamo ovu sliku:

2. Otvorite ga unutra Adobe Photoshop i prisjetite to.
Nisam izrezao sliku da ne izgubim dim, već sam povećao sliku oko ivica na jednake proporcije. To se radi na sledeći način: pomoću naredbe Slika (Slika) - Veličina platna (Veličina platna) ili istovremenim pritiskom na tastere Alt-Ctrl-C, poziva se istoimeni prozor u kojem su dimenzije slike ušao. U našem slučaju, 500 x 500 piksela. Pomaknite kvadrat u opciji Anchor na lijevu stranu kako ne biste završili crtanje dima.

Sada odaberite bijeli prazan dio pomoću alata Rectangular Marquee Tool (odabirom pravokutnog područja):

I popunite odabrano područje crnom bojom koristeći Paint Bucket Tool. Evo šta se dogodilo:

Dodao sam i osvetljenost, smanjio kontrast komandom Slika (Slika) - Podešavanja (Podešavanja) - Osvetljenje / Kontrast (Osvetljenje / Kontrast), a primenio filter Izoštravanje (oštrina) komandom Filter (Filteri) - Izoštravanje (Oštrenje) - Oštrenje (Oštrenje).

3. Otvorite program Fanta Morph.

1) Kada se otvori, pojavljuje se prozor Project Wizard.
Odaberite "Kreiraj novi projekat" novi projekat) i kliknite na “Dalje”:

2) Zatim se od nas traži da odaberemo vrstu projekta. U našem slučaju bi bilo logično odabrati “Warp” (warp), koji koristi jednu sliku, koja se automatski ubacuje u 3 prozora odjednom. ALI, putem pokušaja i pogrešaka, ustanovljeno je da se u ovom slučaju dobiva prilično oštra deformacija, koja izgleda nemarno. Stoga biramo “Morph” (morfiranje), kao da ćemo raditi sa dvije slike i tako dobijamo najbolji rezultat. A ako trebate kreirati film od više od dvije slike, odaberite “Multiple morph” (višestruko preoblikovanje). Dakle, odabrali smo “Morph” i kliknuli na “Next”.

3) Ovdje se od nas traži da uvezemo naše slike. Kliknite na dugme sa tačkama i pokažite programu putanju do slike, ona se pojavljuje u levom prozoru programa. Kliknite na sljedeće dugme sa tačkama i ponovo pokažite istu putanju, ista slika se pojavljuje u desnom i donjem prozoru. I ponovo kliknemo „Dalje“ * (dalje).

4) Program nudi rad sa slikama: izrezivanje ili primjena kontrasta, osvjetljavanje itd. Ignoriramo to, jer je naša slika već finalizirana, i... kliknemo “Dalje”.

5) Od nas se traži da odredimo veličinu i dužinu filma. Ostavljamo originalnu veličinu jer ćemo modificirati avatar u Adobe Photoshopu. Postavili smo broj okvira na 15. Idemo dalje.

6) Predlaže se instaliranje filmskih efekata. Nemojmo, idemo dalje.

7) Ovdje program predlaže korištenje klasičnog skupa tačaka za lice, ali mi odbijamo, jer nemamo lice. Kliknite na “Završi”.

8) Prozor nestaje i počinjemo sa radom.
Između gornjih panela vidimo sljedeći panel:

Kliknite na dugme sa znakom plus "Dodaj tačku/liniju" - ovo je dugme za dodavanje tačaka.
Stavljamo tačke u lijevi prozor.

Tačkicama „okružimo“ dim, zahvatajući i malo slobodnog prostora oko njega. To se radi tako da cijela slika ne pluta zajedno s dimom. Nećemo više dirati ove tačke.

Imajte na umu da će se u desnom prozoru bodovi automatski postaviti na ista mjesta.

Pokazao sam kako sam to istakao, a zatim nacrtao tačkice bijelom da biste mogli razumjeti. U stvari, crne tačke se ne vide na crnoj pozadini =)
Sada stavimo tačke na sam dim. Po mogućnosti direktno na njemu kako biste mogli vidjeti gdje su postavljeni. Evo kako sam to uredio:

U desnom prozoru imamo istu stvar (nekoliko tačaka sam označio brojevima da bude jasno šta ćemo kamo premjestiti):

Sada kliknite na dugme sa strelicom "Uredi tačke" na panelu između gornjih prozora. U desnom prozoru strelicom pomeramo tačke u onim pravcima gde bi se, logično, dim trebao kretati, odnosno gore i u stranu, gde su oblaci dima. Inače, ja lično smatram da je zgodnije početi pomicati točke od gornjih, tako da donji imaju mjesta za kretanje.
Ovako sam ga premjestio:

Sada možete obratiti pažnju na donji prozor i panel pored njega:

U ovom prozoru možemo vidjeti rezultat našeg rada. Da biste to učinili, kliknite na dugme "Play" i gledajte. Obratite pažnju na male ikone sijalice iznad dugmeta „Reproduciraj“. Označio sam gore lijevo - "auto loop" (auto petlja). Reproducira animacije bez prestanka, jednu za drugom.

Ako vam se rezultat ne sviđa, možete učiniti sljedeće:
- dodati tačke u kojima nema dovoljno kretanja;
- ukloniti nepotrebne tačke;
- postavite tačke na kojima kretanje nije potrebno i ne dirajte ih u sledećem prozoru.
Ako vam se sviđa rezultat, kliknite na srednje dugme od onih na dnu prozora "Izvoz filma".
Pojavljuje se prozor istog imena:

Ovdje morate odabrati izvezeni format:

Ovdje postoje dvije opcije; koristite onu koja vam je poznatija i pogodnija.
- Možete odabrati Animirani GIF i otvoriti sačuvanu animaciju u Image Ready kao i obično.
- Možete sačuvati film kao zasebne kadrove - “Slijed slika”. (kao što je prikazano na slici iznad) Mnogo mi je lakše to učiniti. Spremam 15 kadrova u poseban folder klikom na dugme "Izvezi".

Naš rad u programu Fanta Morph je završen.

4. Sada otvorite naš projekat u Adobe Photoshopu. Ili bolje rečeno Image Ready.

Da bismo olakšali našu animaciju, neću koristiti sve okvire koje je program sačuvao, već nakon jednog. Zbog toga:

1) ako ste sačuvali svoju animaciju kao GIF datoteku:
- otvorite ga u Image Ready
- u panelu "animacija" pomoću tipke Ctrl birajte okvire jedan za drugim i brišite ih počevši od prvog, jer na prvom i posljednjem kadru naš dim je gotovo netaknut, a ti okviri nam mogu dati efekat trzanja nego glatko klizanje.

2) ako ste sačuvali pojedinačne slike:
- otvorite folder u koji ste sačuvali ove slike
- Izbrišite iste slike u folderu jednu za drugom, počevši od druge.
- otvorite sliku spremnu i pomoću naredbe "file - Import - folder as frames" (file - import - folder as frames) otvorite svoje slike kao animacije.

5. Postavite vidljivost slojeva.
Zatim, u Image Ready, u prozoru "Animacija", na prvom kadru, učinite vidljivim samo prvi sloj (oko blizu sloja). Zatim dupliramo okvire pomoću dugmeta “Duplicate current frames” i na svakom novom činimo vidljivim sljedeći sloj. One. na prvom okviru - samo 1 sloj, na drugom okviru - samo drugi sloj, na trećem - vidljiv je samo treći itd. Imam 7 okvira:

Postavio sam vrijeme kašnjenja za svaki kadar na 0,2 sekunde.

Zatim smanjim sliku na 100 x 100 piksela. Dobio sam ovaj avatar:

6. Revizija.
Samo što smo mi završili sa nekom dosadnom praznom desnom stranom...
Možete nanijeti neku zanimljivu teksturu, a ja ću koristiti kist sa sitnim tekstom. Ako odlučite da uradite isto, ne zaboravite da kreirate novi transparentni sloj iznad postojećih komandom Layer (layer) - New (new) - Layer (layer) ili klikom na panel sa slojevima Kreiraj ikona novog sloja (kreirajte novi sloj) i nanesite je na kist, jer ako je nanesete na jedan od slojeva, ona će se pojaviti i nestati u animaciji.

Bitan! Sva preklapanja na postojećoj animaciji treba da se urade kada je aktivan prvi kadar, zatim sve teksture, fontovi itd. bit će postavljen na cijelu animaciju, inače samo na jedan kadar.

I evo šta se desilo:

P.S. Ako imate bilo kakvih pitanja o lekciji, detaljno opišite svoj problem u komentarima, mi ćemo vam svakako pomoći da ga shvatite! I ne zaboravite se pretplatiti na komentare na lekciji ako želite što prije dobiti odgovor na svoje pitanje.

Najbolje "hvala" za lekciju je vaš komentar! :)

Eksplozije su opasne koliko i lijepe. Vatra uništava sve oko sebe. Ako volite destrukciju ili vam je potrebna posebna slika eksplozije, onda ste na pravom mjestu. GIF-ovi eksplozija, uključujući nuklearne, atomske i bombe transparentna pozadina. Sve ćete to pronaći u našem izboru animiranih GIF slika. Preuzmite besplatno!

GIF animacija eksplozija, 65 komada

Usporena eksplozija. Možete vidjeti udarni talas

Suđenje hidrogenska bomba u okeanu

Nuklearna eksplozija i udarni talas

Mala eksplozija i dim na crnoj pozadini

Time-lapse snimak eksplodiranja ručne bombe

Ogromna plesna pečurka poslije nuklearna eksplozija

Ova eksplozija vas neće razočarati

nuklearna gljiva

Eksplozija bombe na poligonu

Nuklearna eksplozija iz filma Terminator 2: Sudnji dan

Auto je eksplodirao

Eksplozija na prozirnoj pozadini

Požar i eksplozija na putu

Reverzna reprodukcija eksplozije u zgradi

Eksplozija nuklearna bomba u okeanu

Eksplozija energije u svemiru

Nuklearna eksplozija i gljiva

Eksplozija prave nuklearne bombe

Nacrtana eksplozija

Puno vatre

Eksplozija i vatra na prozirnoj pozadini

Šok talas

Crno-bjelo GIF slika nuklearna eksplozija

U jednom trenutku svijet se može promijeniti

Samo jedna takva eksplozija i svijet će se zauvijek promijeniti

Eksplozija automobila na ulici

Svijetla eksplozija na prozirnoj pozadini

Eksplozija sa elementima vatrometa

Eksplozija na bijeloj pozadini

Eksplozija boja

Žuta eksplozija na prozirnoj pozadini

4 eksplozije u jednoj GIF slici

Vojnici su upali u zasedu. Ogromna eksplozija

Još jedna nuklearna eksplozija

Kolaž od desetak eksplozija

Pogled odozgo na nuklearnu eksploziju

Velika eksplozija nuklearne bombe

Svemirski brod je eksplodirao iznad zemlje

Eksplozivni talas uništava sve

Vatromet plaši stanovnike

Eksplozija svemirske rakete

Arnold Schwarzenegger zna kako da raznese stvari

Eksplozija 500 tona dinamita

Predivna nuklearna gljiva

predivna vatra

Šarena eksplozija na prozirnoj pozadini

Jarka svjetlost, nakon koje ništa ne ostaje

Veliki prasak na prozirnoj pozadini

Mala eksplozija na prozirnoj pozadini

Kao što je slučaj sa bilo kojim prirodni fenomen, Najbolji način razumjeti kako sve te sile međusobno djeluju u vremenu i prostoru – posmatranje. Bilo da nas fascinira hrpa zapaljenog lišća, gledamo zgradu zahvaćenu plamenom ili jednostavno gledamo u plamen obične svijeće, možemo uočiti kako i najmanja promjena smjera ili intenziteta vjetra utječe na ponašanje dima i plamena. Što više posmatramo, to dublje shvatamo samu suštinu ovih efekata.

Naravno, ne treba zanemariti bogatstvo divnog referentnog materijala dostupnog u filmovima, pogotovo ako mi pričamo o tome o efektima monstruoznih po snazi ​​i razmjeru, kao što su masivne eksplozije. Lako ćete pronaći obilje slični primjeri u bilo kojem od visokobudžetnih akcionih filmova

Tehnički, para spada u kategoriju "vodenih" efekata, ali se općenito ponaša kao dim. Karakteriziraju ga ista turbulencija i promjene, s tom razlikom što para stvara izraženije oblake. različitih oblika. Ako se iz kotlića diže mlaz pare, moći ćemo uočiti blagu tonsku varijabilnost unutar siluete. Stubovi pare koji se dižu iznad termoelektrana ne razlikuju se od dima, s tom razlikom što im je boja bliža bijeloj.

Napravio sam ovu ilustraciju za drugo poglavlje. Oblaci na njemu mogu biti dim ili para. U stvarnosti bi bilo oboje. Para bi se raspršila mnogo brže od dima. Dim se i dalje diže i širi u vazduhu. Vozite se u autu šumske površine, možete vidjeti stupove dima koji se dižu iz relativno malih izvora vatre sa mnogo kilometara udaljenosti.

Za razliku od dima, para može otpustiti vlagu u zrak i tako se lagano rastvarati. Naravno, i dim se rastvara, ali se pri tome obično raspada u male oblike.

Moramo biti oprezni da ovi oblici ne postanu poput pahuljica kokica, slične veličine i dizajna. Bilateralna simetrija je ubilački pogodak za svaki prirodni efekat. Ako mlaz dima ili pare koji ste uvukli možete podijeliti na dvije približno jednake polovine, onda ovaj efekat postaje sličan mrlja od mastila iz Rorschachovog testa, gubeći svoju prirodnost. Pokušajte da varirate oblike i pobrinite se da njihove siluete budu zanimljive.

Kada animirate dim srednje veličine, važno je imati na umu smjer u kojem se „kotrlja“. Koja je, pak, podložna izvornoj sili. Poput vatre, dim se vrti u smjeru kazaljke na satu i suprotnom, ali to čini na specifičan način. Na primjer, kada se raketa igračka lansira, energija iz motora gura dim dolje i unutra različite strane. To znači da će se na desnoj strani palice okretati u smjeru suprotnom od kazaljke na satu, a na lijevoj – u smjeru kazaljke na satu. Njihov smjer je određen silama koje "pritišću" masu dima iz centra. Istovremeno, dok se sekundarni oblici omotavaju oko predmeta i uvijaju prema unutra, glavna „ideja“ impulsa je i dalje usmjerena direktno prema van.

Dim koji prati raketu energično će biti izbačen iz mlaznice, zatim će se, kada se nađe u vazduhu, naglo usporiti, a zatim će plutati zajedno sa strujama vjetra, raspršujući se. Dim na tlu će se također naglo usporiti nakon polijetanja, ali će zadržati svoj oblik duže od oblaka dima koji prati raketu. Kontrast između dva ponašanja dima stvara vizualnu privlačnost. Ako dim dolazi iz logorske vatre, on će kuljati prema van iz centra. Lijeva stranaće se uvijati u smjeru suprotnom od kazaljke na satu, a desni će se uvijati duž njega. To se dešava zbog činjenice da u u ovom slučaju sila istiskuje masu dima odozdo prema gore i prema van, a ne odozgo prema dolje, kao što je bio slučaj sa raketom. I u oba slučaja ćemo posmatrati kovitlajuće oblike dima, koji se pretvaraju jedan u drugi.

Kada animirate dim, najbolje je početi s osnovnim oblicima i prvo se usredotočiti na akciju i vrijeme. Tek nakon toga crtežu se mogu dodati detalji i svjetlost. Na gornjoj lijevoj slici obratite pažnju pomoćne linije, definirajući ukupnu valovitost oblika.

Kada animira dim koji se diže iz vatre, umjetnik mora imati na umu fizikalnost efekta kako bi izgledao živo i uvjerljivo. Na sljedećoj slici možemo vidjeti kako se dim ponaša tokom vremena: u početku, intenzivna toplina brzo gura dim prema gore, a zatim, kako se temperatura smanjuje, dim počinje da usporava, reagirajući i miješajući se s hladnim zrakom. Od ove tačke, miješanje toplog i hladnog zraka uzrokuje savijanje i kovitlanje dima. Hladni vazduh koji pritiska odozgo tera dim da se kreće u suprotnom smeru i stvara efekat kovitlanja prema unutra. Vidimo kako se dim potiskuje i ponovo kovitla uzdižućim strujama toplog vazduha. Ovo izvanredno kretanje možemo posmatrati u stvarnosti. Na ekranu, dobro animirano, također je pravo umjetničko djelo!

Govoreći o tonalnim rješenjima, u dimu je obično jedna trećina forme u sjeni, a dvije trećine u svjetlu. Ovaj odnos vam omogućava da delikatno istaknete sferne oblike koji se ukrštaju i vizuelno pokažete kako su povezani jedni s drugima, čak i ako nisu linearno odvojeni. Ali pazite da vaš dim ne pretvorite u prozirnu vreću kamenčića! Koristite različite oblike! Obično veće forme sadrže glavnu energiju efekta i mogu "apsorbirati" manje forme dok se kreću i šire.

Pokušajte ne razmišljati o dimu kao o nizu prstenova koji se dižu. U njemu uvijek postoji element „tečnog slučaja“, koji bi se trebao odraziti i na animaciju. Ako oblačiće dima opišemo linearno, onda su oni niz neravnih, valovitih linija koje uokviruju ovalne zamišljene granice. Dim je vezan za sile koje ga stvaraju, bilo da se radi o dugotrajnom požaru ili nasilnoj eksploziji. To znači da na svaki dim utiču iste energije - gravitacija, strujanja hladnog i toplog vazduha i vetar.

Rad sa ogromnim dimnim stupom, kao što smo već naučili, sporo mjerenje vremena plus dodatno sitni dijelovi(i PUNO više crtanja) će dovesti do toga da se efekat percipira kao veliki. Također možete dodati više unutrašnjih vrtloga s detaljnim tonalnim detaljima i pročistiti male oblike koji se odvajaju od glavnog.

Vratimo se na primjer rakete igračke i povećamo njenu veličinu. Prvo što mi pada na pamet je nuklearna eksplozija. Zamislite samo: energija ogromna snaga, udarajući o tlo i odbijajući se od njega, sa istim sekundarnim vrtlozima na površini. Jedina razlika je u tome što je čitava masa dima od nuklearne eksplozije spljoštena i uvijena prema unutra, susrećući se s masom hladnog zraka odozgo. Ova karakteristika daje dimu od eksplozije njegov dobro poznati oblik u obliku gljive. Pogonska snaga takva eksplozija je ogromna, ali se istovremeno širi izuzetno sporo. Vulkanska erupcija će imati sličan efekat, sa mnogim unutrašnjim oblicima koji se uvijaju prema unutra dok se glavna masa kreće.

Ovo je niz kadrova sa slikama eksplozije koji se naslanjaju jedan na drugi. Divna ilustracija koja otkriva prekrasan oblik čiste energije nalik na cvjetni pupoljak.

Prevod: Kiselev Boris zvani Leveler