Naučimo se, kako v kratkem času animirati objavo v družabnih medijih
Če želite, da vaše objave v družabnih medijih izstopajo, se morate naučiti dodajati animacije. V samo nekaj minutah lahko slabo sliko spremenite v internetno zlato. Vsi razumemo, da je ohranjanje prisotnosti na teh platformah ključnega pomena za gradnjo podjetja in blagovne znamke, vendar lahko časovna obveznost odvrne veliko novih ustvarjalcev. Tukaj smo, da vam pokažemo boljši način.
Od grafičnih oblikovalcev se danes zahteva, da ustvarjajo več vsebin za družbene medije, in veste, kaj je boljše od privlačnega oblikovanja? Privlačno oblikovanje, ki se premika. Če že nekaj časa delate v programu Photoshop, vam je dodajanje animacije bližje, kot si mislite. Danes bomo zagnali program After Effects, da boste lahko videli, kako domač je lahko vmesnik. Vzeli bomo nekaj modelov inv programu After Effects dodajte nekaj subtilnih gibov.
{{svinčni magnet}}
Priprava slike v programu Photoshop
Delali bomo s programoma Photoshop CC 2022 in After Effects CC 2022, vendar bi te tehnike morale delovati tudi v starejših različicah. Pri tem bomo zelo preprosti. Zdaj bi lahko animirali v programu Photoshop, vendar je to lahko precej zahtevno. Namesto tega je lažje pripraviti datoteke, da bodo bolje delovale v programu After Effects.
Kako izbrati pravo sliko za animacijo
Za začetek morate izbrati prave slike. Poiščite nekaj, kar ima dober kontrast med elementi v ospredju in ozadju. To nam bo pomagalo čisto ločiti slike. Če imate še vedno težave z izrezovanjem slik, imamo za vas celotno vodilo, v katerem so predstavljeni vsi nasveti in triki.
Izbrali smo sliko deskarja in želimo animirati ozadje. To je precej podobno delu, ki ga opravljate kot samostojni oblikovalec in animator. Vaša stranka bo želela, da se nek element vzame iz ospredja in se postavi na novo mesto ali na nek način animira.
Če pogledamo zgornjo sliko, kako naj jih premaknemo? Uporabili bomo star trik. Namesto da se premika subjekt, se bo ozadje premikalo od leve proti desni, kar bo ustvarilo vtis premikanja.
Pozorni morate biti tudi na osvetlitev. Medtem ko je izrazit vir svetlobe na mirujoči sliki videti odlično, se bo zdel napačen, ko ga boste začeli premikati na drugem ozadju ali na ozadju, na katerem se osvetlitev ne ujema več. Gledalec morda ne bo natančno vedel, kaj je narobe, vendar ga bo to odvrnilo od učinka. Kot pijan čarovnik to res uniči iluzijo.
Ločite plasti (in jih poimenujte)
Kot lahko vidite v zgornjem videoposnetku, uporabljamo maske (po možnosti nedestruktivne) za ločevanje predmeta, plošče, sence in ozadja. To nam omogoča subtilne popravke, če na poti opazimo težavo. Če bi samo izbrisali piksle, jih za vedno ni več (ko presežete območje CTRL/CMD+Z).
Poskrbite, da boste vsako plast poimenovali. Nič ni hujšega, kot če poskušate najti eno sliko na seznamu plasti 1-100.
Ozadje je treba še malo dodelati, saj ni povsem usklajeno z našo predvideno perspektivo.
Naš namen je, da bi ozadje oblikovali v zanko, vendar lahko vidite, da se obe strani ne ujemata povsem. Ker je leva stran bolj usklajena z našimi vodili, kopirajmo to stran, jo obrnimo in jo spustimo čez desno. Ko sta plasti poravnani, jih združimo z uporabo CTRL/CMD+E.
Preverite velikost slike
Preden sliko prenesemo v program After Effects, moramo preveriti velikost slike. Program After Effects lahko obdeluje precej velike datoteke, vendar vaš računalnik morda ni tako zmogljiv. Obstaja več načinov za spreminjanje velikosti slike, vendar bomo začeli s spreminjanjem platna. S tem spremenimo platno, ne da bi posegali v piksle, nato pa lahko spremenimo velikost slike, da bo ustrezala.
Prilagodili smo svoje platno ( Slika> Velikost platna... ) na 1920x1080. Zdaj so bile naše slike veliko večje, zato jih bomo morali prilagoditi, da bodo ustrezale.
Še vedno je nekaj nepopolnosti, vendar jih lahko popravimo v programu After Effects z majhno zameglitvijo gibanja. Opazili boste, da nekaj pikslov visi zunaj roba platna. Včasih boste morda želeli, da ostanejo, vendar jih v programu AE ne bomo potrebovali. Uporabite ukaz Pridelki orodje ( C ), da slike hitro prilagodite platnu. Zdaj je čas, da sliko prenesete v program After Effects in začnete animirati.
Uvoz datotek Photoshopa v program After Effects
Preverite imena plasti in nato shranite svoje delo (priporočamo, da dodate nekaj, kot je "to_AE", da boste zlahka našli svojo datoteko. Če potrebujete pomoč pri prehodu v program After Effects, smo vam na voljo. Oglejte si ta videoposnetek ali pa uporabite to hitro metodo.
Kako uvoziti datoteko iz programa Photoshop v program After Effects
- Odprite program After Effects
- Pojdite v Datoteka> Uvoz> Datoteke
- Izberite svojo datoteko
- Kliknite Uvoz
Zdaj si oglejte primerjavo med programom Photoshop in programom After Effects.
Izgleda precej podobno? Adobe se je potrudil, da so stvari med različnimi programi podobne, zato je prehod med aplikacijami v Creative Cloud še lažji. Naše plasti boste opazili spodaj na časovnici, čeprav so videti nekoliko drugače. Zato je bilo poimenovanje plasti tako pomemben korak.
S tem novim sestavkom (za nas profesionalce) boste lahko nastavili FPS ali število slik na sekundo. Na splošno se animacija izvaja s hitrostjo 24 slik na sekundo (24 slik je enako 1 sekundi posnetka), vendar se lahko zgodi, da boste potrebovali več ali manj. Vse je odvisno od projekta in potreb vaše stranke.
Nastavitev sestave
Upamo, da ste že spili kavo, ker bomo delali hitro (ime igre je animirana objava na družabnih omrežjih v kratkem času, kajne?)
Tega skejterja bomo najlažje animirali tako, da premaknemo ozadje, kajne? Ko ga premaknemo s poti, se zdi, kot da skejter drsi naprej.
Vse, kar moramo storiti, je podvojiti ozadje, kot to počnejo v risankah. Ujemite sloj, nato pa pojdite na Uredi> Podvoji ( CMD/CTRL + D ) in dobili boste povsem novo plast. Teoretično bi lahko naredili na desetine kopij in jih animirali, kako letijo mimo, vendar obstaja lažja metoda: Motion Tile.
Animiranje v programu After Effects
Ploščica za gibanje
Na desni strani zaslona pojdite v Učinki in prednastavitve ter poiščite ploščice gibanja. Povlecite in spustite jo na plast (pazite, da je ne spustite na napačno plast, čeprav lahko to ustvari nekaj čudovitih učinkov).
Na levi strani so prikazani gumbi za upravljanje učinkov z dvema ključnima možnostma: Output Width in Output Height. Ko v polje Output Width vnesemo vrednost "200", lahko...
Zdaj imamo na levi in desni strani malo več našega ozadja. Sliko smo učinkovito podvojili za majhen del. Če zdaj poskušate klikniti na podvojeno območje, tega ne boste mogli storiti. Premaknete lahko samo izvirno plast.
Seveda tudi preprosto podvajanje ali polaganje ploščic ustvarja majhne artefakte. Če pogledamo tla ali ozadje, se pojavijo črte, ki niso videti povsem pravilno. In končno, ne pretiravajte s številom Output. Razbili boste računalnik.
Če želite to animirati, najprej prilagodite dolžino kompozicije. Pojdite na Composition> Composition Settings (Nastavitve kompozicije).
Spremenimo lahko tudi FPS, kot smo obravnavali zgoraj. Nastavite to vrednost na 5 sekund in čas je za animacijo te slike.
Animiranje s ključnimi okvirji
Zavrtite se navzdol po čisti plasti krožnika in videli boste možnosti za preoblikovanje.
Prepričajte se, da je vaš Igralna glava na začetku časovnice, nato kliknite Štoparica ob Položaj To označuje x in y os vaše plasti v tistem trenutku na časovni osi. Pravkar ste ustvarili svoj prvi Ključni okvir To so osnovni gradniki animacije v programu After Effects.
Premaknite predvajalno glavo na konec časovnice in ustvarili boste še en ključni okvir. Zdaj se vrnite v Transform in prilagodite položaj, da se bo ozadje premaknilo z leve na desno (ali z desne na levo, če želite, da ta imitator Tonyja Hawka obrača 360 na Boneless).
Ko pritisnete predvajanje, program After Effects interpolira, kako se mora plast premakniti, da bo v določenem času obstajala v prvem in zadnjem ključnem kadru.
GIF
Če želimo, da se naš skejter premika hitreje, se moramo v predvidenem času premakniti dlje po ploščici. Če se želimo premikati počasneje, moramo premakniti manj prostora. Vendar pa smo opazili nekaj, kar ni tako varčno. Šiv, kjer se naša podvojena ploščica združi, je nekoliko neroden. Na srečo lahko to zakrijemo z nekaj zameglitve gibanja.
Dodajanje zameglitve gibanja
Zameglitev gibanja je razmazovanje slik, ki ga povzroči premikanje predmeta med osvetlitvijo objektiva. Pri videu je zameglitev gibanja običajno posledica tega, da se objektiv osredotoča na en predmet, medtem ko se v ozadju premikajo neostri predmeti. V našem primeru želimo uporabiti prav ta učinek.
Pritisnite na Zameglitev gibanja (trije krogi blizu skupaj). Ob slikah se bodo pojavila polja. Izberite samo čisto ploščo in opazujte, kako gibljiva zameglitev skrije nepravilnosti. Tako smo dobili odlično animacijo, ne da bi se znojili. Vedno pa lahko stvari še bolj izboljšamo.
Dodajanje realističnih senc
Opazili boste, da ima senca pod desko še vedno črto iz prvotne podlage.
Ne poskušamo ustvariti običajne družabne slike, temveč nekaj, kar bi bilo vredno deliti z drugimi. Hitro to popravimo. To bi lahko preprosto popravili v programu Photoshop, preden bi jo prenesli, vendar smo pozabili (ali bolje rečeno, preskočili smo ta korak, da vam ga lahko pokažemo tukaj! Vidite, ves čas smo vedeli, kaj počnemo).
Najprej ustvarite novo plast tako, da greste v Layer> Novo ( CMD/CTRL + Y ) in izberite črno polnilo. S tem ustvarite črno celoto v velikosti naše kompozicije. Z orodjem Pero (P) bomo narisali preprosto obliko. Ni treba, da je popolna, le osnovna ideja o senci.
Ko zapremo masko, bomo ustvarjeno obliko videli nad našo sliko. To je... v redu. Vendar lahko to naredimo. S pomočjo točk in Bezierjevih ročajev prilagodite obliko, dokler se ne prilega pod skateboard. Če ste maske ustvarili v programu Photoshop, vam bo to že znano.
Z nekaj dela smo dobili nekaj, kar se prilega pod desko.
Zdaj izklopite prvotno plast senc in preimenujte novo plast v Shadow (ali Shadow 2, Darkwing Duck ali karkoli vam ustreza). Tako kot v programu Photoshop imamo tudi tu režime mešanja. Če jih ne vidite, pritisnite F4 . Preklopite svojo novo senco na Pomnožite .
To je videti nekoliko ostro, zato poenotimo robove. Z vrtenjem odprite meni Maska in videli boste več možnosti.
Prilagodite Feathering in voila! Ko predvajamo nazaj, imamo zdaj elegantno animirano sliko, kar nam ni vzelo prav nič časa.
Izrisovanje v čakalni vrsti za izrisovanje
Seveda vam ta slika ne bo nič koristila, če bo večno ležala v programu After Effects. Poglejmo, ali lahko to popravimo.
Če tega izraza ne poznate, Rendering samo pove programu After Effects (ali katerikoli aplikaciji, ki jo uporabljate za sestavljanje kompozicije), da vse plasti zapeče v en film (mp4, mpeg, Quicktime itd.). Quicktime bo ustrezal večini vaših potreb, priporočamo pa tudi Apple ProRes 422. V tem primeru uporabimo Animation, ki bo nestisnjena datoteka visoke ločljivosti. Če imate kakršen koli zvok, poskrbite, daje obrnjen na dnu okna.
Hit V redu , nato pa morate izbrati, kam bo ta datoteka poslana. Izhod na in poiščite želeno lokacijo.
Pravkar ste ustvarili animacijo. Vzeli ste sliko, jo razrezali na lične plasti, te plasti animirali in to kompozicijo spremenili v film. Zdaj smo zelo navdušeni, da vas poznamo.
Seveda, če želite pridobiti res Fantazija, vrnite se na videoposnetek, da vas naučimo še nekaj trikov.
GIF
Začnite svojo pot s programom After Effects
Z animacijo svojih modelov v Photoshopu lahko spremenite slabo socialno sliko v viralni hit (morda). Ko boste razumeli osnove, boste lahko svoje delo oživili na neverjetne načine. Če iščete kraj, kjer bi lahko začeli z animacijo, se odpravite na After Effects Kickstart!
After Effects Kickstart je najboljši uvodni tečaj After Effects za oblikovalce gibljivih vsebin. V tem tečaju se boste naučili najpogosteje uporabljenih orodij in najboljših praks za njihovo uporabo, hkrati pa obvladali vmesnik After Effects.