Cum să faci animații în Photoshop. Crearea de animații avansate în Photoshop: Învățarea de noi tehnici

23.02.16 2.8K

În acest articol, vom combina tot ceea ce am învățat până acum pentru a învăța câteva tehnici noi de animație în Photoshop. Să vedem cum să folosiți diferite combinații de straturi de ajustare și filtre pentru animație, cum să creați mișcare complexă a straturilor de animație și efecte cu aspect natural.

Utilizarea unui strat șablon cu animație inteligentă a obiectelor

Deoarece obiectele inteligente pot conține mai multe straturi, putem crea straturi temporare, ceea ce ne ajută să creăm animații mai complexe. De exemplu, în efectul de animație de mai jos, am creat un punct roșu care se mișcă într-un cerc. Acest efect nu este de obicei ușor de creat și necesită o mulțime de cadre cheie. Cu ajutorul obiectelor inteligente putem folosi straturi șablon și simplifica întregul proces.

Să vedem cum se face acest lucru:

În scena de mai jos am creat două straturi: unul cu un punct roșu ( "Punct"), iar al doilea cu un cerc gri mare ( „Forma șablonului”). Am adăugat semne de separare la cercul gri mare pentru a demonstra mai bine efectul mișcării:

Pasul 1: O scenă formată din două straturi: un punct roșu și un cerc gri mare. ( Versiune mai mare)

În primul rând, selectez ambele straturi și le convertesc într-un obiect inteligent făcând clic dreapta pe unul dintre straturile selectate și selectând „ Convertiți în obiect inteligent»:

Pasul 2: convertiți straturile într-un obiect inteligent. ( Versiune mai mare)

Acum putem anima ambele straturi ca unul singur. Deoarece acesta este un obiect inteligent, am acces la proprietatea Transformări din panoul Timeline, care îmi permite să setez un cadru cheie pentru rotație. Am adăugat un cadru pentru fiecare jumătate de rotație pentru a crea o rotație completă. Ca rezultat, am obținut un cerc care se rotește în jurul axei sale:

Pasul 3: Ambele straturi se rotesc ca unul singur

Acum că animația noastră funcționează, trebuie să ștergem forma șablonului. Pentru a face acest lucru, faceți dublu clic pe miniatura obiectului inteligent din paleta de straturi. Cu obiectul inteligent deschis, putem ascunde stratul „Formă șablon”:

Pasul 4: Ascundeți stratul „Formă șablon”. ( Versiune mai mare)

Înainte de a realiza un banner complet animat în Photoshop, tot ce trebuie să facem este să salvăm documentul obiect inteligent și să revenim la documentul original. Vom vedea că punctul roșu se mișcă într-un cerc fără forma gri:

Punctul roșu se mișcă într-un cerc

Imbricarea animației în obiecte inteligente

Obiectele inteligente pot consta din straturi de orice tip ( sau mai multe tipuri). Inclusiv straturi care conțin deja cadre cheie de animație. Să vedem cum este implementat:

Animație cu puncte care sări, creată folosind mai multe seturi de cadre cheie

În scena de mai jos, am creat deja o animație simplă a unui punct galben care se rotește pe un fundal albastru:

Pasul 1: Punct galben se rotește pe pânză

Pasul 2: Convertiți stratul punct galben într-un obiect inteligent. ( Versiune mai mare)

Avem un nou strat de obiecte inteligente și îi putem adăuga un nou set de cadre. În scena de mai jos, am adăugat un set pentru a anima obiectul inteligent care se mișcă în sus și în jos. Aici putem vedea ambele seturi de cadre cheie în acțiune, care creează efectul de respingere:

Pasul 3: Noile cadre cheie creează un efect de respingere

Convertiți acest strat de obiecte inteligente într-un alt obiect inteligent pe care îl putem edita. În continuare, vom adăuga o proprietate Transformation acestui obiect inteligent. Mergi la Editare > Transformare gratuităși utilizați puncte de ancorare pentru a remodela obiectul inteligent, astfel încât să apară în perspectivă.

Pasul 4: Convertiți animația. ( Versiune mai mare)

Transformarea obiectului inteligent va fi afișată acum când se va rula animația. Aceasta este una dintre principalele modalități de a realiza o imagine animată în Photoshop:

Redarea unei animații cu transformare

Filtru animație

Dacă adăugăm un filtru unui obiect inteligent care conține un strat animat, obținem o animație care se redă prin filtru. Să ne uităm la cum funcționează.

În scena de mai jos am creat deja o animație punctuală simplă ( în interiorul unui obiect inteligent), deplasându-se pe un fundal roșu:

Pasul 1: Animați un obiect inteligent, un punct galben care se mișcă pe un fundal roșu

Deoarece animația noastră este deja în interiorul obiectului inteligent, pot adăuga filtrul direct la acesta. Mă mut la Filtru > Distorsionare > Răsucire:

Pasul 2: Aplicați filtrul Twist la animația obiectului inteligent. ( Versiune mai mare)

Când vizionați această animație, veți vedea niște lucruri interesante care se întâmplă. Filtrul a fost aplicat obiectului inteligent în sine, nu pixelilor conținutului său. Acest lucru oferă pixelilor animați care se mișcă prin filtru un efect unic:

Animarea filtrului Twist

Adăugarea de stiluri de straturi la o animație de obiect inteligent

În scena de mai jos, am deja un obiect inteligent care conține o animație simplă a unui punct care se mișcă pe un fundal alb:

Pasul 1: Animație simplă a obiectelor inteligente

Vreau să aplic un stil de strat Emboss în acest punct. Dar dacă acum încerc să aplic un stil de strat unui obiect inteligent, acesta va afecta tot conținutul acestuia:

Pasul 2: Stiluri de straturi aplicate imaginii ca întreg

Pentru a remedia acest lucru, trebuie să elimin fundalul alb. Mai devreme v-am spus că putem modifica obiectul inteligent pentru a ascunde straturi suplimentare. În acest exemplu vreau să demonstrez o metodă diferită.

Atâta timp cât există un contrast tonal puternic între straturi, putem folosi opțiunea Blend If pentru a elimina fundalul. Faceți dublu clic pe stratul obiect inteligent pentru a deschide panoul Stiluri strat și mutați glisorul Suprapunere dacă până când fundalul dispare:

Pasul 3: Ajustați suprapunerea dacă glisorul. ( Versiune mai mare)

După aceea, faceți clic dreapta pe stratul din paleta Straturi și selectați „Convertire în obiect inteligent”. Vom obține un nou obiect inteligent care va salva modificările pe care le-am făcut:

Pasul 4: Convertiți în obiect inteligent. ( Versiune mai mare)

Când adăugăm un stil de strat setat la animație, efectul se va aplica doar acelui obiect:

Stiluri de straturi adăugate la animația obiectelor inteligente

Modificarea animației utilizând straturi de ajustare

Straturile de ajustare afectează straturile animate în același mod ca și cele obișnuite. Dacă un strat de ajustare este plasat deasupra unui strat care conține cadre cheie, animația moștenește ajustările. Având în vedere acest lucru, putem folosi straturi de ajustare pentru a crea efecte unice.

În scena de mai jos, am creat o animație simplă cu două puncte, unul trecând pe lângă celălalt:

Pasul 1: Animații în două puncte

Deoarece întreaga scenă este în tonuri de gri, folosesc un strat de ajustare Gradient Map pentru a introduce culorile. Puteți utiliza apoi panoul Proprietăți pentru a efectua următoarele ajustări.

Mai devreme, pe site, ne-am uitat la cele de la terți, dar cele mai multe dintre ele pot înlocui cu ușurință Photoshop obișnuit. Fișierele GIF animate pot fi create destul de ușor și rapid cu ajutorul acestuia. Ele constau de obicei din mai multe imagini (cadre), care, atunci când sunt schimbate pas cu pas, formează rezultatul final. Astăzi vom încerca să luăm în considerare această problemă de la A la Z cât mai detaliat posibil:

Capturile de ecran de mai jos sunt din Photoshop CC, dar lucrul cu animația GIF în CS6 și alte versiuni ale programului este similar, plus sau minus. Poate că instrumentele vizuale vor fi ușor diferite, dar, în general, principiul și algoritmul acțiunilor sunt similare. Ca exemplu, luați în considerare sarcina trivială de a crea o animație GIF în Photoshop din fotografii care se înlocuiesc unele pe altele. Recent, folosind acest ghid, am făcut un gif despre aventurile mele pentru postarea finală pentru 2016 pe blogul meu personal.

Procesul a durat literalmente 5-10 minute. Lucrul important aici este să urmați toți pașii cu atenție. La sfârșitul postării veți găsi un tutorial video în limba engleză pe acest subiect.

Adăugarea de imagini de animație GIF în Photoshop

Primul lucru pe care trebuie să-l faceți este să încărcați toate imaginile/fotografiile care vor participa la animație în editorul grafic. Adăugați-le la un proiect în straturi diferite - acestea vor fi cadrele pentru fișierul GIF rezultat. Verificați dimensiunea imaginilor și afișarea lor, astfel încât totul să fie așa cum aveți nevoie. Straturile pot fi ascunse (folosind pictograma ochi din stânga stratului) pentru a vizualiza toate obiectele.

În centrul acestui panou există o listă derulantă în care trebuie să selectați opțiunea „Creare animație cadru” și să faceți clic pe butonul. Ca urmare a acestei acțiuni, cronologia se va schimba puțin și ar trebui să vedeți imaginea din stratul superior ca prim cadru.

În pasul următor, selectați toate straturile din proiect (faceți clic pe ele în timp ce țineți apăsată tasta Ctrl). După aceea, deschideți meniul contextual din colțul din dreapta sus al ferestrei Cronologie și selectați „Creați cadre din straturi”.

Din toate straturile vizibile și selectate, Adobe Photoshop va crea cadre GIF animate. Ca rezultat, le veți vedea în panoul Cronologie.

Setări de animație GIF în Photoshop

Aici va trebui să specificați 2 lucruri: durata de afișare a diferitelor cadre + numărul de repetări ale gif-ului. Să începem cu primul. Sub fiecare obiect imagine din Timeline veți găsi timpul de afișare și o săgeată în jos. Faceți clic pe ele și selectați durata cardului în meniul pop-up.

Puteți specifica timpi diferite pentru elemente sau puteți seta parametrul pentru mai multe dintre ele simultan (selectarea comună ca în straturi - folosind Ctrl).

Pentru a „bucla” un GIF în Photoshop atunci când creați o animație, selectați valoarea Forever în setarea corespunzătoare, așa cum se arată în captura de ecran de mai jos.

De asemenea, puteți specifica orice număr de repetări de care aveți nevoie. În apropiere se află butonul Play, care vă permite să redați un GIF animat și să vedeți cum va arăta rezultatul final.

Salvarea animației GIF în Photoshop

În partea finală a ghidului nostru, vom analiza cum să salvați corect animația GIF în Photoshop. În acest scop, este folosit instrumentul familiar Salvare pentru Web, dar în cele mai recente versiuni de Adobe Photoshop CC se află într-o locație nouă de meniu (Fișier - Export). Din fericire, Alt + Shift + Ctrl + S încă funcționează.

În fereastra de setări care se deschide, trebuie să selectați formatul GIF și, de asemenea, să vă asigurați că setarea Opțiuni de buclă este setată la Pentru totdeauna. În colțul din dreapta jos al ferestrei, există o opțiune pentru a rula GIF-ul animat pe care l-ați creat în Photoshop pentru o previzualizare.

Dacă totul funcționează conform așteptărilor, faceți clic pe Salvare și salvați fișierul pe computerul local. Pentru a verifica funcționalitatea unui GIF, trebuie să îl deschideți într-un browser, deoarece... Vizualizatorul Windows încorporat nu redă animație.

Apropo, vă puteți exporta cu ușurință proiectul în format video. Procedura este aceeași ca și atunci când salvați animația GIF, dar în meniul Photoshop, selectați Fișier - Export - Redare video.

În fereastra care se deschide vor fi diferite setări video, dar nu trebuie să modificați nimic suplimentar, doar faceți clic pe butonul Render. Ca urmare, veți primi un fișier mp4 cu o prezentare de fotografii/imagini.

În cele din urmă, vă sugerăm să vizionați un tutorial video în limba engleză despre crearea GIF-urilor animate în Photoshop. Algoritmul pentru lucrul acolo este același ca în articol, dar poate vă va fi mai ușor să percepeți informațiile din videoclip.

Dacă mai aveți întrebări despre cum să faceți animație GIF în Photoshop sau aveți adăugări, scrieți în comentarii.

Notă importantă. Dacă trebuie să creați rapid cea mai simplă animație din mai multe cadre în Photoshop, mergeți la lecția - .

Sunt interesat de animația stop-motion de destul de mult timp, deși am studiat puțin material. Toate cărțile pe care am început să le citesc erau destul de lungi, dificile și „seci”.

Prin urmare, după ce am început să înțeleg puțin despre tehnologia de creare a animațiilor, am început să caut modalități de a le aduce la viață folosind Photoshop.

Mulți oameni m-au sfătuit să trec la alte programe (de exemplu, TVP Animation Pro), dar eu, nedorind să mă adaptez la noile interfețe ale altor programe, am decis să fac totul în Photoshop.

Și am scris această lecție special pentru cei care nu au înțeles tehnologia de a crea animații cadru cu cadru specific în Photoshop. Cine nu a vrut să sape puțin și să înțeleagă ce este ce?

Voi atinge două subiecte: animațiile scurte și cele lungi. Nu ar trebui să defilați prin tipurile de animații care nu sunt interesante pentru dvs.: pot exista informații acolo care vă vor fi utile pentru animațiile de tipul de care aveți nevoie.

Animații scurte– acestea sunt avatare animate, emoticoane etc.

Animații lungi– acestea sunt desene animate, videoclipuri etc.

Mai întâi vă voi spune teoria și apoi vom crea animație în practică.

Supliment important

Mulți oameni se întreabă: „De ce este animația mea atât de sacadată, de ce personajul/obiectul meu se mișcă rapid/lent?”
Răspunsul este: personajul/obiectul tău se mișcă rapid pentru că ai desenat puţini rame.

Personajul/obiectul tău se mișcă încet pentru că ai desenat mult rame.

Personajul/obiectul tău smuciază pentru că nu ai urmat mișcarea anterioară și ai desenat-o pe următoarea, care nu este în concordanță cu cea anterioară.

Amintiți-vă: într-o secundă 24 cadru!

Deci, când vă pregătiți să vă creați animația, amintiți-vă: 24 cadru = 1 al doilea, 24 cadru = 1 al doilea. Nu uita niciodată acest detaliu foarte important.

Animații scurte

Cred că ați întâlnit adesea animații pe avatare, emoticoane animate.
Unele emoticoane sunt create în Flash, dar eu îl desenez pe al meu în Photoshop. Să nu credeți că astfel de animații scurte sunt ușor de realizat. Pe de o parte, da, au dimensiuni mici, dar pe de altă parte, în timp ce desenați acestea 15 -30 cadre, te vei ocupa (imaginați-vă, dacă doriți să creați un clip de trei minute, atunci va trebui să faceți 4320 rame!).

Ce ar trebui să vă amintiți și să știți?

Să presupunem că ai vrut să desenezi o fată cu părul suflat de vânt pentru avatarul tău. Mijloace:

În primul rând, părul nu este carton - sub influența unui vânt moderat, va forma valuri transversale.

Cam așa este prezentat în diagramă:

Sub influența unui vânt puternic, părul va fi aproape drept, dar personajul tău va trebui să închidă strâns ochii și să se apuce de ceva pentru a evita să fie suflat, deoarece în realitate puțini oameni pot rezista la un asemenea vânt. deși acest tip de animație poate fi folosit atunci când personajul tău merge pe bicicletă, de exemplu.

Și în cele din urmă, o adiere blândă îți ridică și coboară ușor părul.

Vânt ușor:

Vânt mediu:

Vânt puternic:

Același lucru este valabil și pentru țesături și îmbrăcăminte - se vor comporta aproape în același mod ca și părul.

Și acum, de exemplu, ai vrut să desenezi o animație cu mișcarea personajului și obiectului tău. Mijloace:

În al doilea rând, orice acțiune începe de undeva. Ai observat vreodată că, de exemplu, pentru a te ridica de pe un scaun, mai întâi îl miști puțin și te apleci puțin înainte, și abia apoi te ridici? sau că atunci când vrei să dai o lovitură cu racheta, mai întâi o îndepărtezi și-ți întorci corpul cu ea și abia apoi dai o lovitură?

Există o mulțime de astfel de exemple, dar este mai bine să priviți:

Pentru a evita problemele cu acestea mișcări înainte de acțiuni(DPD), analizează și observă mai des mișcările oamenilor sau animalelor.

Mică adăugare

În general, nu uita niciodată de fizică. Greutatea obiectelor, materialele din care sunt realizate (elasticitate, moliciune, duritate etc.), toate acestea sunt necesare.

Realizează că fără aceasta, animația ta va fi moartă, îngrozitoare și urâtă!

Mai bine lucrați la el și să nu vă grăbiți niciodată.

Animații lungi

Oooh, de aici începe distracția!

Ați admirat adesea animația, în timp ce vizionați desene animate sau anime și i-ați invidiat pe cei care știu să le facă? Toate aceste scene minunate, mișcări plastice și multe altele. etc.? Recunosc sincer - da. De fiecare dată când mă uit la ceva, încerc să înțeleg cum au lucrat animatorii cu el? Cum au creat toate acestea?

Dar, din cauza faptului că nu știu în ce programe lucrează, încerc să înțeleg întregul proces folosind mecanisme Photoshop.

Și știi, găsesc răspunsuri la toate întrebările mele!

Dar să luăm totul în ordine.

Procesul de creare a unei animații lungi

1. Inițial avem nevoie de o IDEE

De exemplu, ai decis să faci un scurt videoclip în care mai multe fete vor dansa.

Dacă sunteți un animator experimentat, puteți „face pe cineva să danseze” în videoclipul dvs. din 3 si mai multe fete.

Dar la începutul călătoriei animatorului tău, este mai bine să te limitezi la unul sau doi.

2. Acum trebuie să creați un storyboard scenă cu scenă (RPS)

Ce este și cu ce se mănâncă?

Imaginați-vă un film. Acum imaginați-vă numărul de vizualizări diferite de la camere diferite. Prim-plan, peisaj, cameră care urmărește personajul...

Este în regulă când nu sunt atât de mulți. Dar când facem un clip întreg, s-ar putea să fie mai mulți 30 lucruri!
De aceea, animatorii inteligenți folosesc un lucru atât de minunat care arată ca o carte cu linii.

În el înfățișează scene.

Doar unii desenează câte o scenă în fiecare secțiune a tabelului, apoi alta, o a treia etc., în timp ce alții desenează imagini în fiecare secțiune a tabelului după câteva secunde (îmi cer scuze dacă nu am explicat clar).

De asemenea, este foarte convenabil să o faci pe partea laterală a descrierii, altfel, uneori o desenezi, apoi după un timp te uiți la ea și nu înțelegi - ce am descris aici?

Așa că luăm notă de acest storyboard pentru scene și folosim aceste cărți.
Nici măcar nu trebuie să faci o carte, ci pur și simplu creați un fișier mare în Photoshop și desenați toate scenele acolo.

3. Acum trebuie să veniți cu un fundal, un concept de caracter și o mișcare

Desenăm mișcările în cartea RPS.

Dacă aveți mai multe scene într-un videoclip, va trebui să desenați mai multe fundaluri diferite. Desenați-le în fișiere separate.
Și amintiți-vă un lucru - fundalul nu apare din aer. Deci, dacă doriți ca camera să se miște în lateral, atunci și fundalul ar trebui să fie acolo. acestea. va trebui să desenați fundalul în lungime (sau lățime, sau poate ambele) mai mult.

Apoi proiectați aspectul personajului și începeți să creați animația.

Trecerea de la teorie la practică

Să ne gândim puțin la IDEA de acum înainte și, în general, la punctul „Procesul de creare a animației”. Despre ce vorbesc? Mai mult, acum vei avea nevoie de un cobai pe care îl vei forța să-l muți. Nu vom face un videoclip în care 4320 rame. Cel mai bun și mai ușor mod de a înțelege este cum să creați o animație cadru cu cadru folosind 24 -72 - animație cadru.

Ei bine, să începem!

1. Să creăm un document nou. Pentru animația mea am luat o dimensiune mică - 400 X 500 px.

2. Acum, dacă nu ai o fereastră în stânga jos " Animaţie„, uită-te în sus, deschide fila „ Fereastră» - « Animaţie».*

* - Exemplele folosesc versiunea rusificată Photoshop CS2.

În captura de ecran de mai sus vedem fereastra de animație în care se află primul cadru, sub acesta este un mic panou pe care se află butoanele:

Întotdeauna/o dată- selectând „Întotdeauna” veți bucla animația. Dacă selectați O dată, animația se va reda o singură dată. (În lecția mea există ambele versiuni de animații: în buclă - unde este afișat principiul DPD, reprodus o dată - unde este afișată schimbarea scenei).

Selectați primul cadru- ne duce înapoi la început.

Selectează cadrul anterior- Să nu-l sunăm pe Cap. (=

Redă animație/Oprește animația- Redare/Oprire.

Selectează cadrele următoare- următorul cadru. Şapca ta!

Cadre de animație Tweens- utilizând acest buton putem adăuga tranziții fluide între două cadre adăugând altele noi.

Duplică cadrele selectate- numele nu este chiar corect... Ar fi mai bine să spuneți „Adăugarea unui cadru nou”.

Șterge cadrele selectate- coș.

3. Acum putem începe să desenăm. Pentru a face acest lucru, plasați fundalul pe care l-ați creat mai devreme fundal(Background/Background).

4. Apoi creați un nou strat (Ctrl+Shift+Alt+N) și desenați personajul pe el.

4. Acum vine partea grea: trebuie să desenăm același personaj de multe ori la rând în ipostaze diferite.

Creăm un nou cadru și... Există două opțiuni:

A) Fie începi să-ți desenezi personajul din nou de fiecare dată, fie...

B) Copiați stratul anterior și schimbați-l (terminați de desenat și de șters, mai degrabă decât de a folosi transformarea! Rareori veți avea nevoie de un astfel de instrument, voi scrie mai târziu când).

Odată ce ați primit ceva pregătire în animație, puteți utiliza ambele opțiuni fără durere. (Puteți încerca fiecare dintre ele într-un document separat).

Opțiunea A:

1. Am desenat primul nostru cadru.

2. Pentru a vedea cum îl schimbăm pe următorul, reducem opacitatea stratului la aproximativ 30% și creați un nou strat pe care desenăm deja un iepure pentru al doilea cadru.

3. Terminăm de desenat al doilea cadru și dezactivăm vizibilitatea primului strat anterior.

Opțiunea B:

1. Creați un cadru cu personajul și faceți acest strat invizibil.

2. Apoi duplicați-l (Ctrl+J) trăgând stratul pe butonul „Creați un nou strat” din stânga coșului de gunoi.

3. Acum facem vizibil al doilea strat și începem să-l schimbăm.

Astfel, prin duplicarea stratului anterior, creezi noi cadre și le schimbi, și nu același.

5. Ne așezăm și desenăm rame 10 -15 ...

6. Și să vedem ce s-a întâmplat.

S-a dovedit a fi un iepure care alergă.

Mai mult, nici o singură parte a acestuia nu este copiată: fiecare cadru este desenat din nou.

Convinge-te singur:

Când creați o animație, ar trebui să vă amintiți că este destul de dificil să comutați între sute de straturi și, prin urmare, nu ar trebui să amânați pictarea sau schimbarea nimic decât mai târziu. Fă-o imediat.

Aproape sfârșitul

Mai sus am făcut o rezervare despre instrument ().
Merită să-l folosiți atunci când, de exemplu, doriți să măriți camera, să o apropiați, să o rotiți etc. (Dacă trebuie doar să mutați fundalul, folosiți editori video, vă va fi mai ușor). Nu utilizați distorsiunea, înclinarea sau alte instrumente de transformare în mod inutil.

Și, după ce ne-am salvat gif-animatie ca format de fisier video .avi, de exemplu, puteți merge în siguranță la Windows Live Film Studio.
De acolo, fă tot ce-ți dorește inima cu clipul tău.

Și apoi vă puteți încărca clipul pe youtube.com și vă puteți bucura de munca pe care ați făcut-o.

VA MULTUMESC MULT pentru atentie, Lero-art a fost alaturi de voi. Scuzați-mă pentru limbă, prezentarea ciudată și alte defecte ale lecției, dacă există. Toate se datorează faptului că gândurile sunt confuze, iar cuvintele nu se formează în propoziții...

Dar sper că ai învățat ceva nou și interesant pentru tine!

Începând cu versiunea CS3 Extended, este disponibil lucrul cu animație. GIF-urile sunt create dintr-un set de cadre sau direct din videoclipuri. Deci, veți crea o imagine dinamică pentru un site web, un avatar sau o prezentare? felicitare. Grafice similare pot fi folosite în alte proiecte sau în timpul editării. Aflați cum să faceți animație în Photoshop, astfel încât să puteți lucra liber cu acest tip de imagine.

Adobe Photoshop are multe caracteristici, inclusiv crearea de animații

Nu trebuie să fii artist sau designer pentru a face asta. Toate funcțiile sunt clare chiar și pentru un începător. Tot ce aveți nevoie este un set inițial de cadre din care va fi creat un fișier gif.

Animație din video

Cel mai simplu mod este de a converti videoclipurile în animație. Nu trebuie să configurați nimic. Trebuie doar să deschideți videoclipul în Photoshop. Utilitarul acceptă formatele avi, mov, mp4, mpg, mpeg, m4v. Pentru a le rula corect, aveți nevoie de instalarea QuickTime. Fișierul media adăugat în acest fel nu poate fi editat sau tăiat. Doar convertiți-l în grafică.

Dar există o altă metodă. Iată cum să faci un gif dintr-un film în Photoshop:

1. Accesați Fișier - Import.
2. Faceți clic pe Fotografii video în straturi.
3. Se va deschide un meniu cu unele setări. Va fi un mini-player în dreapta pentru o previzualizare.
4. În caseta Interval, selectați una dintre opțiuni: Start to End sau Selected Only. În al doilea caz, va fi inserată partea din videoclip pe care ați selectat-o. Pentru a tăia fragmentul dorit, mutați marcajele negre sub jucător. Piesa care se află între ele va fi adăugată proiectului.
5. În Photoshop pot fi încărcate maximum 500 de cadre. Dacă materialul de lucru este mai mare decât această valoare, va trebui să fie tăiat sau adăugat în părți la diferite documente.
6. Bifați caseta de selectare „Creați o animație cadru cu cadru”. Acest lucru va aplica automat toate setările necesare pentru videoclip. Fără aceasta, dinamica va trebui setată manual.
7. Opțiunea „Păstrați fiecare [număr]” vă va permite să importați nu toate diapozitivele, ci, să zicem, fiecare treime. GIF-ul rezultat va fi agitat.
8. Confirmați acțiunea și așteptați până când utilitarul procesează videoclipul.
9. Accesați „Fereastră - Spațiu de lucru” și selectați „Mișcare”. Acest set de setări este cel mai potrivit pentru crearea de imagini animate.
10. Mai jos va fi un fel de player media. Indică rata de cadre. Există un buton „Redare”, derulare înapoi și mărire a pistei video. Toate imaginile sunt afișate una câte una.
11. Ele vor fi, de asemenea, distribuite în straturi, a căror listă se află în partea dreaptă jos a ferestrei Photoshop. Faceți clic pe una dintre ele pentru a lucra cu un diapozitiv separat.
12. Puteți șterge unele cadre sau le puteți edita.
13. Toate pozele vor fi într-o singură zonă. Acest lucru nu este foarte convenabil. Pentru a dezactiva vizibilitatea unui strat, faceți clic pe pictograma ochi de lângă acesta. Slide-ul va rămâne în document și, dacă este necesar, va apărea în animația GIF. Pentru a-l face să apară din nou, faceți clic pe locul unde a fost „ochiul”.
14. Dacă doriți să încercați un alt tip de vizualizare (acuarele, creioane, lumini neon), faceți clic pe „Filtre” în bara de meniu.
15. Pentru a adăuga efecte Photoshop (strălucire, umbră, gradient, model), faceți clic dreapta pe strat și selectați Opțiuni de amestecare.
16. Pentru a schimba diapozitivele, trageți-le cu cursorul.
17. Pentru a selecta timpul de afișare (sau întârzierea) unui cadru, faceți clic pe micul triunghi negru de sub acesta.

Animație din imagini

Iată cum să creați o animație în Photoshop folosind imagini:

1. Introduceți imaginile necesare. Adăugați fiecare dintre ele la propriul strat (ștergeți stratul numit „Background”).
2. De obicei, desenele se deschid în ferestre sau file (în funcție de setările interfeței Photoshop). Pentru a le combina într-o singură zonă de lucru, copiați-le acolo sau mutați-le. Acestea vor fi trimise automat la noi straturi.
3. Accesați Fereastră - Spații de lucru - Mișcare. Panoul de animație cu playerul este activat.
4. Selectați stratul pe care doriți să fie primul cadru din GIF-ul dvs.
5. Faceți invizibile foile rămase făcând clic pe pictograma ochi de lângă ele.
6. Pe panoul playerului, faceți clic pe butonul „Convertire în animație” din dreapta jos. Arată ca un dreptunghi împărțit în trei părți.
7. Va exista un cadru cu stratul pe care l-ați selectat. Duplicați-l. Pentru a face acest lucru, faceți clic pe butonul mic „Creați o copie”.
8. Faceți numărul de diapozitive de care aveți nevoie.
9. Rezultatul a fost o animație gif dintr-o singură imagine. Pentru a remedia acest lucru, faceți clic pe al doilea cadru și faceți vizibil al doilea strat, eliminând „ochiul” din primul. Va fi afișat obiectul dorit.
10. Așadar, completați diapozitivele unul câte unul.

Dacă creați un aspect mare, această metodă va dura mult timp. În acest caz, puteți face următoarele:

1. Instrumentul Animație are un buton în colțul din dreapta sus (în panoul în sine, nu în fereastra Photoshop) care arată ca o listă cu o săgeată. Apasa pe el.
2. În meniul care apare, selectați „Creați cadre din straturi”.

Aceleași acțiuni sunt disponibile cu imagini ca și cu diapozitivele video.

Se salvează animația GIF

De asemenea, este important să vă dați seama cum să salvați animația în Photoshop. Dacă îl formatați ca fișier PSD sau imagine „statică” cu extensie jpg, bmp, png, nu va avea sens. În loc de mișcare, transformare sau pâlpâire, obțineți un cadru înghețat. Pentru a realiza un set de imagini în schimbare, trebuie să convertiți documentul în format GIF.

1. Când ați terminat de lucrat în Photoshop, nu vă grăbiți să îl închideți și să îl transformați într-un proiect PSD.
2. Accesați Fișier - Salvați ca. Sau apăsați Shift+Ctrl+S.
3. Dați un nume creației și specificați folderul în care doriți să o plasați.
4. Din lista derulantă Tip, selectați CompuServe GIF.
5. Confirmați acțiunea.

Este suficient să înțelegeți aplicația Photoshop și cum să faceți animație. Chiar dacă nu ești un web designer profesionist, poți crea o imagine ca aceasta. Veți avea o piesă de artă unică, asamblată cu propriile mâini.

Te-ai întrebat vreodată cum sunt create GIF-urile animate? Autorul lecției te invită să stăpânești câteva secrete de animație într-o singură noapte cu ajutorul acestei lecții. Veți învăța, de asemenea, cum să utilizați Timeline, care este disponibil în Photoshop CS6. Acum să începem!

Rezultatul lecției.

Pasul 1

Creați un document nou ( Ctrl + N) cu dimensiunile fișierului de 800 x 500 pixeli. Umpleți fundalul cu orice culoare doriți. Acum să mergem la meniu Straturi- Stilstrat- Acoperiregradient(Strat > Stiluri de straturi > Suprapunere gradient). Aplicați următoarele setări: Stil Radial(Radial), culori de la negru (#000000) la albastru (#54799b), care vor fi folosite în centru.

Pasul 2

Creați un nou strat și denumiți-l Stratul de zgomot. Selectați un instrument Completati(Paint Bucket Tool) și umpleți stratul creat cu o culoare închisă (#231f20). Lăsați stratul activ Stratul de zgomotși mergi la meniu Filtru - Zgomot - Adăugați zgomot(Filtru>Zgomot>Adăugați zgomot). În caseta de dialog cu setările filtrului, setați următoarele valori: Efect(Suma) 3%, distributie Uniformă(Uniform) și faceți clic pe OK.

Pasul 3

Apăsați combinația de taste (Ctrl +U) iar în caseta de dialog setări de corecție care apare, introduceți valorile Saturare(Saturație) 100%: Schimbați modul de amestecare al acestui strat la Lumina slaba(Lumina slaba).

Nota traducatorului: Pentru a obține aceeași culoare ca și autorul din captura de ecran, atunci când ajustați Nuanța/Saturația, puteți seta valoarea Nuanței la - 140.

Pasul 4

Adăugați orice text doriți. Aici vom folosi textul siglei site-ului 123RF. În stilurile de straturi folosiți Accident vascular cerebral(Accident vascular cerebral). Selectați valorile mărimii cursei în funcție de preferințele dvs.

Nota traducatorului: Pe captura de ecran a autorului există deja text rasterizat împreună cu stilul Stroke. Pentru a obține același rezultat, după aplicarea cursei, îndepărtați umplerea (Completati) din stratul de text 0%, convertiți acest strat într-un obiect inteligent și apoi rasterizați-l.

Pasul 5

În acest pas vom crea un efect strălucitor pentru text folosind stiluri de straturi. Faceți dublu clic pe strat pentru a afișa fereastra Opțiuni stil. Pentru a personaliza stilurile de straturi, utilizați capturile de ecran de mai jos.

embosare(Teșire și relief)

Umbra interioara(Umbra interioara)

Stralucire interioara(Stralucire interioara)

Suprapunere de culoare(Suprapunere de culoare)

Strălucire externă(Strălucire exterioară)

Umbră(Umbra)

Pasul 6

După ce ați terminat de creat efecte de lumină folosind stiluri de straturi, accesați paleta Straturi și reduceți valoarea acestui strat Umple(Umpleți) cu 0%.

Pasul 7

Duplicați stratul creat la pasul 5 și dezactivați toate stilurile de straturi de pe această copie. Acum setați stilurile astfel:

Umbra interioara(Umbra interioara)

Stralucire interioara(Stralucire interioara)

Pasul 8

Mai jos este rezultatul după ce ați aplicat stilurile de strat.

Pasul 9

Acum vom crea puncte de lumină în mișcare. Creați 5 straturi peste cele existente și redenumiți-le ca 1,2,3, R și F. Dacă aveți propriul text, creați straturi conform literelor dvs. Grupați aceste straturi într-un folder și dați-i un nume Pete Luminoaseși schimbați modul de amestecare la Luminarea bazei(Color Dodge).

Activați instrumentul Perie(Instrument perie), selectați o perie moale, setați Opacitate(Opacitate) la 95% și desenați pete deasupra textului cu culoare albă. Pentru fiecare literă există un punct de lumină separat pe propriul strat. Mai jos, în captură de ecran, puteți vedea cum arată straturile autorului în paleta de straturi.

Pasul 10

Acum să mergem la meniu Fereastra - Cronologie(Fereastră > Cronologie). Veți observa că straturile dvs. sunt deja construite în această paletă din partea stângă a acesteia. Selectați fiecare dintre cele cinci straturi de evidențiere care se află în grup. Pete Luminoaseși asigurați-vă că indicatorul de timp curent (glisor albastru) este la cadru zero. Acum, pe fiecare strat din grup, când este activ, faceți clic pe opțiune Poziţie(Poziție) pentru a crea un cadru cheie.

Nota traducatorului: Pentru a activa scala de timp, faceți clic pe butonul Creați o cronologie pentru un videoclip(Creează cronologia video) și toate straturile tale se vor încărca în cronologie. Va fi selectat același strat sau grup ca și în paleta de straturi.

Pasul 11

Setați indicatorul de timp curent (glisor albastru) la 01:00 Fși mutați straturile cu puncte luminoase de-a lungul traiectoriei mișcării lor în raport cu conturul literei.

Pasul 12

Așa va arăta poziția inițială a punctului luminos de pe litere. Mutați indicatorul de timp curent de-a lungul scalei și mutați straturi cu puncte luminoase, creând cadre cheie. Continuați să le mutați până când ați terminat de mutat pata pe întreaga literă a fiecărui strat de text. Pentru instrucțiuni, vedeți mai jos câteva capturi de ecran.