Cum să creați elemente de animație în Adobe Photoshop

Ce veți crea

Introducere

Bine ați venit în tutorialul meu despre cum să creați elemente de animație în Adobe Photoshop. Acest tutorial nu vă va învăța cum să desenați articolele în mod specific. Este mai preocupat de modul în care să se gândească la elementele de animație. De ce are nevoie animatorul meu și de ce? Vom acoperi ceea ce este titlul Safe și importanța etichetării corecte.

bunuri

  • Futura Handwritten Font 
  • MagicPicker Colour Wheel

Povestea noastră de a anima

Pentru acest tutorial voi folosi Little Miss Muffet ca povestea noastră.

Little Miss Muffet
Sărbătoarea a tuffet,
Mănâncă coace și zer;

De-a lungul a venit un păianjen,
Cine se așeză lângă ea
Și l-au speriat pe domnișoara Muffet.

Activele pe care le vom crea

Pentru a facilita crearea de materiale, vom face o listă a ceea ce trebuie să creăm. Acest lucru ne va ajuta, de asemenea, să înființăm documentul Photoshop în prealabil. 

Little Miss Muffet

  • Profilul merge
  • Profil derulat
  • Aşezat
  • Cap
  • Față: mănâncă, ochii clipesc
  • Arme
  • picioare
  • Corp
  • mâinile
  • Arme: fără mâini

Tuffet 

  • Perna mare

Curăță și zer

  • Castron
  • Linguriţă
  • Brânză de vacă

Spider: Partea laterală și cea din față

  • Picioare x 6; Arme x2
  • Pălăria de sus
  • Baston
  • Ochi
  • mandibulele
  • Abdomen
  • Partea superioară a corpului

Mediu inconjurator

  • Copac 
  • Deal
  • Soare
  • Nor
  • Iarbă

PSD Setup: Storyboard

Pentru storyboarding-ul dvs., puteți seta documentul la orice dimensiune doriți. Cu toate acestea, doar pentru a păstra lucrurile în proporție, am mers pentru 1920 x 1200 px la 72 dpi, cu Modul color setat la RGB (culoarea monitorului)

Iată cum am creat storyboard-ul. Fiecare linie a rimei a primit propriul panou. Pentru asta nu avem nevoie să fie foarte detaliată - gândiți-vă la ea ca la miniatură. Avem nevoie doar de o idee de bază a acțiunii, care poate fi arătată cu săgeți și comentarii, dacă este cazul. Acest lucru este util pentru animator, astfel încât să știe ce trebuie să se întâmple. Aceste cadre pot fi, de asemenea, utilizate pentru a determina cât timp fiecare acțiune trebuie să fie pe ecran și pentru a vă asigura că se potrivește sus atunci când este setat la audio.


Iată povestea mea de scenă, iar animatorul, Dave Bode, este mulțumit de modul în care se uită, așa că pot începe să creez activele.


Setarea PSD: active

Pentru ca pentru aceasta scena nu se schimba, vom crea toate fisierele in acelasi document. After Effects este ca un Photoshop bazat pe timp, deci folosește straturi și grupuri în același mod. Pentru animații mai complexe ar fi recomandabil să creați caractere, active și / sau medii în documente separate. 

Pentru această animație, Dave ar dori ca dimensiunea documentului să fie 3840 x 2160 px la 72 dpi, care este rezoluția de 4K. Acest lucru este astfel încât el poate avea o cameră mică de joacă atunci când vine vorba de zoom-uri și tigăi, dacă este necesar. Eu creez a Document nou prin a merge la Fișier> Nou.


În straturi pe care l-am creat Grupuri pentru a plasa activele noastre în. Grupuri poate fi creat făcând clic pe pictograma dosarului din partea de jos a ferestrei straturi panou. În acest lucru puteți trage sau crea Straturile noi. Acest lucru păstrează totul ordonat. 

Ca bonus, puteți atribui o culoare grupului făcând click dreapta pe el și selectând o culoare. Aceasta va schimba automat toate denumirile de strat din interiorul acelui grup la acea culoare. Puteți schimba culoarea straturilor în cadrul grupurilor făcând clic dreapta pe ele. 

A fi organizat cu Layers este un economizor de timp excelent și este deosebit de important atunci când aveți un termen limitat, este târziu în noapte și tocmai ați băut ultima cafea. 


Cel mai complex element din povestea lui Miss Muffet este păianjenul, datorită în principal numărului de membre. Iată cum am organizat straturile în pregătirea pentru crearea de active. Acesta este punctul nostru de plecare, dar putem adăuga mai multe straturi în viitor pentru expresii suplimentare, elemente de recuzită și așa mai departe.

Există o șansă foarte bună ca unele straturi să poată fi schimbate, mutate, actualizate, duplicate și îndepărtate, deci nu luați acest șablon ca pe cuvânt. Este doar pentru a da o idee despre modul în care lucrurile pot fi înființate. Atunci când creați active, este ușor să pierdeți lucruri aparent simple, fie prin planificarea proprie, fie prin clientul dvs. sau (arta) director, deci așteptați schimbări! 


Titlu sigur: Ce este și de ce avem nevoie de el?

Ce este titlul sigur? În întreaga lume utilizatorii folosesc dispozitive care au diferite rapoarte de aspect și rezoluții și trebuie să ținem seama de cel mai mic numitor comun. Majoritatea oamenilor vor viziona această animație pe un ecran de 16: 9, dar cineva aflat acolo poate avea în continuare un monitor 4: 3, așa că trebuie să ne asigurăm că nici o informație vitală nu este tăiată pe margini. Mai jos este un exemplu de limite de siguranță. 


În acest exemplu, zona albastră va fi văzută pe toate dispozitivele, iar zona purpurie este aproape de limita locului în care ar trebui să se întâmple orice acțiune. Trebuie să ținem cont de acest lucru pentru crearea de materiale, deci atunci când lucrați la o animație, asigurați-vă că aveți limitele de siguranță ale titlului de la animatorul dvs.. 

Crucea de pe pătratul albastru indică centrul scenei, iar liniile perpendiculare de pe periferie indică punctele de mijloc ale scenei. 


În continuare, ceea ce voi face este să selectați această imagine și să o plasați în psd-ul meu. Acest lucru va varia în funcție de modul în care vă este oferit titlul de siguranță. O modalitate rapidă de a obține această imagine este să aveți un ecran de imprimare din After Effects a unei scene 4K cu titlu sigur aplicat. Acest lucru nu poate fi la fel de curat și clare ca exemplul de mai sus, deci dacă simțiți că veți face o mulțime de lucrări de animație în Photoshop s-ar putea să meritați curățarea liniilor. 

Procesul nostru

Începem cu schițe grosiere ale tuturor elementelor. De ce facem asta? Acest lucru este astfel încât să putem obține dimensiunile relative. Lucruri cum ar fi: "Este tuffet suficient de mare pentru ca doi să stea?" "Cât de mare trebuie să fie soarele în cer?" "Există destul spațiu pentru ca acțiunea să se întâmple?"

Pentru fiecare set de elemente, vă voi arăta procesul de la etapa de schiță până la etapa completă a activului. Să începem cu setarea scenei: Fundalul. 

Porniți cu fundalul

Mai întâi de toate m-am rătăcit în fundal cu tufa, Little Miss Muffet și Spider în poziția așezată pentru a vă asigura că totul se potrivește. Fiecare element al schiței se află pe un strat separat pentru comoditate.


Apoi opresc straturile de caractere și tufe și se ocupă doar cu elementele de fundal. 


Acum, când avem scena noastră de bază, trebuie să elaborăm ceea ce avem nevoie. Norul se va deplasa, dar nu se vor schimba forma. Totuși, cred că ar fi interesant să animăm razele solare, așa că cred că vom avea două seturi de raze pe care Dave le poate distruge sau întrerupe.

Cu unele proiecte de animație ar fi probabil lucruri cum ar fi foi de model și culori pre-aranjate cu clientul, dar în acest caz ca este pentru distracție Sunt doar proiectarea în zbor!

Aici am oprit straturile inutile și am redus opacitatea schiței. Setați dosarul de schiță la Multiplica în Strat stiluri, astfel încât să fie mai ușor de văzut. 


M-am hotărât să scut soarele, deoarece e prea mare. Fac acest lucru prin selectarea soarelui plus straturile celor două raze și apăsarea Control-T la Transforma. Trebuie să ne asigurăm că elementele scenei nu depășesc acțiunea.


Iată cum au fost organizate straturile de mediu.


Tuffet

Tuffet-ul este un lucru destul de simplu de adăugat la scenă, dar este, de asemenea, destul de important, deoarece atât Micul Muffet cât și Spiderul trebuie să poată sta pe el. Un tuff este ca un scaun de picior sau o pernă mare.

Mai jos avem scena desenată cu tuffet-ul central, deoarece aici trebuie să se desfășoare majoritatea acțiunii. 


Când creați scene, întotdeauna planificați-le. Caracterele trebuie să fie dimensionate în raport cu împrejurimile și reciproc. După cum puteți vedea, am inclus, de asemenea, o grămadă de castron pentru coace și o lingură pentru o referință pentru o singură oprire pentru noi. O mică planificare poate salva o mulțime de lucruri mai târziu. Aici am desenat tuffeta și folosind o schiță grosieră a personajelor, putem verifica dacă ambele se vor potrivi confortabil. Aceasta poate fi o imagine utilă pe care să o trimiteți animatorului.


Iata cum vor fi oferite activele animatorului nostru. Am desenat o iarba care se suprapune spre pamant, dar am pastrat acest lucru pe un strat separat in cazul in care animatorul doreste sa faca efecte asupra lui in After Effects. 

.

Spider Multiple Assets: Time-Saving Trick!

Când vine vorba de lucruri cum ar fi păianjeni, veți obține elementele repetate, deci de ce să atrageți fiecare pe mâini? Iată o modalitate ușoară de a obține mai multe caracteristici în clipirea a opt ochi cu ochi mari!

Ochi

Pasul 1 

Acum, păianjenii pot avea un număr diferit de ochi și nu vrem să le desenăm pe fiecare în parte. Pe o Strat nou vopsea un singur glob.


Pasul 2

Prin reținere Alt și având Mutați instrumentul (V) selectat, glisați ochiul în afară de șapte ori și poziționați toți ochii pe față.


Pasul 3

Pe o Strat nou, vopsiți pleoapele închise peste un ochi. Repetați procesul de copiere a copiilor peste ceilalți șapte ochi.


Pasul 4

Aranjați straturile astfel încât capacele corespunzătoare să se situeze deasupra ochilor. Ascundeți straturile capacului închis și selectați fiecare set de ochi și capace. Apăsați apoi Control-T pentru a le scala, și repetați procesul cu celelalte seturi de ochi și capace. 


Ar trebui să ajungeți la un set ca acesta. Dacă schimbați și închideți stratul capacelor, parcă ar fi văzut la tine! 


Brațe și picioare

Pasul 1 

Dacă nu veți anima o millipede, domnul Spider va fi probabil un exemplu al celor mai importante resurse pe care va trebui să le creați. Din fericire picioarele păianjen sunt destul de uniforme, astfel încât să ne putem salva ceva timp.

Mai jos sunt asprele păianjen: din față și din lateral. Datorită designului simplu, putem folosi formele picioarelor pentru vederi frontale și laterale. Aveți la dispoziție foaia de model pentru această secțiune.


Pasul 2

Desenați cele trei secțiuni ale piciorului: coapsa, vițelul și piciorul. Voi face pe fiecare Strat nou astfel încât Dave poate anima aceste secțiuni în mod independent. Când desenez cele trei secțiuni, mă asigur că se suprapun ușor. El poate alege să folosească Puppet Tool în After Effects, astfel încât să se alăture împreună celor trei secțiuni ale piciorului. Din experiența mea este mai bine să dau opțiunile animatorului!



Pasul 3

După ce ați pictat cele trei secțiuni ale piciorului, selectați coapsa, vițelul și piciorul și copiați-le încă o dată de trei ori. Puteți face acest lucru selectând cele trei straturi prin menținere Schimb și glisarea lor către Strat nou pictograma din partea de jos a ferestrei straturi panou, care este un pătrat cu un colț pliat. 


Pasul 4

Selectați două picioare și utilizați Transforma, care este Control-T, Flip-le pe orizontală, mergând la Editați> Transformare> Flip orizontal. Grupați fiecare picior în mod individual și dați-i un nume util, cum ar fi Leg. 2.


Pasul 5

Vom repeta procesul de creare a trei secțiuni pentru brațe: brațul superior, brațul și mâna inferioară. Amintiți-vă când pictați secțiunile pentru a permite o mică suprapunere.


Pasul 6

Iată activele Spider în față. El este în această pseudo T-pose pentru comoditate și sunt sigur că Dave va găsi mai ușor să înceapă animarea cu el, așa cum este acesta. 

Înainte copiați toate straturile de picioare și brațe, lipiți-le în grupul lateral și rearanjați-le după cum este necesar. 

Organizația Spider Asset: Spiderul din față

Aici vine secția de organizare non-creativă, care, deși nu este foarte distractivă, este foarte necesară. Veți mulțumi mai târziu pentru verificarea faptului că totul este în ordine. Iată o defalcare a activelor Spider din față.

Caneaua

Bastonul este unul dintre aceste lucruri minunate, unde putem să îl copiem și să îl lipim pentru vederi frontale și laterale. Am putea avea doar acest lucru ca pe un avantaj, dar ca păianjenii frontali și laterali sunt în propriile grupuri, aceasta înseamnă că animatorul dvs. nu va trebui să caute secțiunile individuale. 

Bratele

Aranjați toate secțiunile brațelor în dosare clar definite. Poate fi util să le codifici culoarea. Asigurați-vă că mâinile și brațele inferioare și superioare ale fiecărui grup sunt etichetate.


Picioarele

Ca și înainte, aceasta este o sarcină de etichetare și iată cum i-am pus acest lucru lui Dave.


Ochii

Ochii! Pentru aceasta, asigurați-vă că ochiul corect închis corespunde cu ochiul deschis corect care trebuie să fie direct sub el.


Capul

Acesta este, din fericire, unul mai simplu de organizat! Aici avem capul de bază și mandibulele păianjenului (dacă nu sunteți familiarizați cu anatomia arachnidă, acestea sunt bucățile din jurul gurii păianjenului). Am aceste separat, astfel încât Dave le poate anima dacă dorește.


Corpul

O altă secțiune simplă! Aici avem abdomenul (vagabondul păianjenului) și corpul superior. Ambele sunt în straturi separate, în scopuri potențiale de animație. Păstrați componentele etichetate!


Spider Asset Organization: Profil

Deoarece cea mai mare parte a activelor sunt copii una de cealaltă, singurele diferențe dintre păianjenul de profil și front-on sunt:

  • Elevii ochilor au fost mutați în fața ochilor.
  • Există doar cinci ochi, deoarece unii nu ar putea fi văzuți din acest unghi.
  • Plasarea anatomiei a fost schimbată.

Am inclus capturi de ecran ale setării stratului pentru confortul dvs. Amintiți-vă să păstrați totul clar marcat! 

Caneaua

Bratele


Capul


Ochii

Aceasta este singura schimbare masivă a păianjenului, în cazul în care elevul a fost mutat în fața ochiului în toate cazurile și mai degrabă decât opt ​​ochi sunt doar cinci.


Picioarele


În cele din urmă: Corpul


Aici avem activele noastre de păianjen prezentate în mod clar pentru Dave!


TINE MINTE: Etichetarea corectă estefoarteimportant.

Cireșe și zer

Zer-hei! Secțiunea de păianjen este făcută și acum avem doar masa de prânz Micul Muffet. Acest lucru a fost împărțit în castron, coace, o lingură și câteva coacăze pe lingură. 

"De ce?" tu intrebi. Pentru că am crezut că ar fi grozav că atunci când domnișoara Muffet se sperie, conținutul castronului ei zboară!

Grupați-le și apoi etichetați ca mai înainte.

Micul Mufet al lui Miss Muffet

Acum, că elementele simple au fost create, avem sarcini mai dificile de a face bunuri pentru lucrurile care se mișcă. Pentru Little Miss Muffet vom avea nevoie de două elemente: profil și front-on. Fața este pentru ea ședința mâncând, și partea este pentru ea fugind de pe aparatul de fotografiat. 

Miss M este puțin mai complicată decât păianjenul, în sensul că are nevoie de anatomie și haine diferite și, astfel, va arăta diferit în profil ca să fie direct pe. Iată o defalcare a tuturor părților create.


Iată cum arată minunatul Miss Muffet totul pictat. Cresc atat de repede! *mirosi*


Îmbrăcăminte

Iată principalele părți ale îmbrăcămintei ei, cu excepția pantofilor și mânecilor. Pentru comoditate am păstrat mânecile cu brațele și încălțămintea cu picioarele.

Cap și expresii

Iată expresiile ei secundare, care sunt destul de mult pur teroare.


Arme

Destul de simplu aici. Am pictat bratul drept pentru a reprezenta teama pura. 

picioare

Cea mai mare parte a piciorului va fi ascunsă de fustă, dar i-am dat lui Dave ceva în plus.

Păr

I-am păstrat părul separat, astfel încât atunci când o conduce, Dave o poate anima în spatele ei!

Micul Mufet al lui Miss Muffet

Gura și părul

Pentru a păstra acest lucru cu adevărat expresiv, am creat o varietate de forme de gură și buze, astfel încât Dave îi poate anima să mănânce și să șocheze. Părul este acolo, deoarece părțile gurii se află în partea superioară a părții straturi stiva si parul trebuie sa fie peste tot.

Ochi

La fel ca păianjenul, domnișoara Muffet are ochii deschiși și închisi, dar cu adăugarea de sprancene pentru exprimare.


Baza și corpul feței

Mi-am grupat corpul și îmbrăcămintea împreună aici, deoarece ei nu se vor mișca prea mult în timp ce stă. Dacă observați stratul așezat în fustă, există o mască pe care am inclus-o pentru a permite picioarelor să-i arate și, dacă Dave are nevoie de toată fusta, este acolo pentru el.


Arme

Brațele sunt la fel de dinainte, deși am simțit că avem nevoie de mâini pe cont propriu atunci când ea ține bolul și lingura.



Am adăugat brațele fără mâini într-un dosar separat pentru animație cu mâinile. 


picioare

Picioarele drepte care pot fi folosite în timp ce stau sau stau în picioare.



pigtailuri

Ca și în cazul profilului rulat, i-am pus niște pigtail-uri pe propriile lor piese ca pe un alt instrument emoțional.


Asta însumează elementele noastre de bază. Pe lângă ajustarea activelor, acestea ar putea arăta la fel de bune la ele!

Finalul atinge

De asemenea, trebuie să punem pe picioare Little Miss Muffet și Spider, așa că voi crea un strat de iarbă pentru ca picioarele personajelor să se miște în spatele. 

Pasul 1

Pe o Strat nou, trageți o linie brută în care doriți ca iarba să meargă. Faceți acest lucru într-o culoare evident contrastantă.

Pasul 2

Începeți să pictați lame de iarbă de-a lungul liniei utilizând o pensulă la alegere. 


Pasul 3

După ce ați pictat totul de-a lungul liniei, Copie stratul apăsând Control-C și apoi Pastă (Control-V). Atunci Transforma (Control-T) și îndoiți și rotiți manual iarba pentru ao face mai puțin luxuriantă.


Pasul 4

Apoi blocați transparența stratului apăsând pictograma mică pe șah lângă Blocare pe straturi panou. Adăugați o varietate de verde pentru a da varietate. Deblocați transparența și luați o garnitură moale (E) și se înmoaie marginea bazei de iarbă.

Pasul 5

Am duplicat straturile de iarbă și apoi le-am întors, transformat și distorsionat pentru a le face ușor diferite. Pe iarba cea mai apropiată de aparatul de fotografiat, mă estompez folosind iarba Gaussian Blur pentru a da iluzia profunzimii. Gaussian Blur pot fi găsite prin a merge la Filtru> Blur> Gaussian Blur. Am estompat orizontul iarbii în Mediu inconjurator dosar ușor doar pentru a da o profunzime mică, folosind același Gaussian Blur metodă.

Aici m-am schimbat la Little Miss Muffet pentru a vă asigura că arată bine cu ambele personaje.


Pasul 6

Sunt foarte fericit cu cum arată iarba, așadar îmi așez cele 8 straturi de iarbă în patru straturi de iarbă simple și le numesc în consecință. 


credite

Dave va avea grijă de credite, așa că am pus un text în psd să-i salvez timpul. Fontul pe care îl folosesc este Futura Handwritten.

Pentru asta am creat un ecran de titlu, creditul lui Dave și creditul meu. Puteți face acest lucru prin simpla selectare a Instrument tip orizontal (T), selectând fontul ales și tastând ceea ce aveți nevoie pentru fiecare strat. Aliniați textul în mijlocul ecranului apăsând Control-T la Transforma și alinierea firelor încrucișate ale textului cu firele încrucișate ale titlului 4K în siguranță. 





Ultimul pas

Ultimul nostru pas este de a verifica dacă toate straturile sunt numite și nu există straturi care nu ar trebui să fie acolo, de ex. dururi, straturi goale, palete de culori.

Salvați .PSD într-un folder, cum ar fi "Dave Animation Assets". În acest dosar puneți tot ceea ce animatorul dvs. va avea nevoie, cum ar fi storyboard-ul, scenariul, un voiceover (dacă îl furnizați) și orice fonturi (pe care le puteți distribui și au drepturi). Dacă nu, rasterizați toate straturile de text. Apoi, livrați acel director către animator prin FTP, USB sau rețea și apoi ascundeți! 

Concluzie

Sper că vă place să învățați cum să creați elemente de animație în Adobe Photoshop. Odată ce ați organizat partea din spate, puteți lăsa creativitatea să devină sălbatică! Nu pot să aștept să văd ce creează Dave Bode cu elementele mele!