În acest articol voi vorbi despre ce este animația în Photoshop. Vom vedea cum funcționează animația în Photoshop folosind exemplul creării unui banner de Anul Nou.

voi lucra in Adobe Photoshop CS6. Am o interfață rusă, pentru că scriu de la serviciu.

Am acasă o versiune în engleză și vă sfătuiesc să studiați versiune în limba engleză, de aceea:

• Puteți naviga cu ușurință prin program în orice limbă (după engleză în rusă, puteți găsi cu ușurință instrumente, deoarece aceasta este limba dvs. maternă, iar după rusă, pot apărea probleme de adaptare).
• Majoritate lecții bune sunt scrise în engleză.
• Localizările programului diferă adesea unele de altele, calitatea traducerii interfeței lasă uneori mult de dorit. Traducerea incorectă a instrumentelor poate deruta o persoană care începe să studieze programul.

Noțiuni introductive cu animația în Photoshop CS6

Să începem Photoshop.

Noi creăm document nou Fișier -Nou (Ctrl+N).

În fereastra care se deschide, setați dimensiunea bannerului: 600 x 120, să-i spunem „banner de Anul Nou” -> „OK”.

Creați un fundal

Selectez din timp materialele pe care le voi folosi în munca mea (fonduri, fonturi etc.).

Deschideți textura pregătită: Ctrl+O. Puteți descărca textura pe care o folosesc.

Deschideți paleta de straturi „Layers” - F7.

Selectați fereastra cu textura, trageți stratul din paleta de straturi pe stratul cu banner.

Dacă textura s-a dovedit a fi prea mică sau prea mare în comparație cu bannerul, ajustați dimensiunea acestuia folosind transformarea Ctrl+T.

Mici marcatori pătrați vor apărea în colțurile imaginii. Țineți apăsată Shift pentru a păstra raportul de aspect în timp ce redimensionați, trageți mânerul de colț în diagonală, micșorând sau mărind dimensiunea imaginii, până când întreaga suprafață a bannerului este umplută cu fundal.

După ajustarea texturii la dimensiunea bannerului, trecem la corectarea culorii acestuia.

Accesați meniul „Imagine” – „Ajustări” – „Nuanță / Saturație” (Imagine – Corecție – Nuanță / Saturație).

Am setat aceste setări pentru a obține o culoare strălucitoare, saturată:

Scriem textul

Noi creăm strat nou(Ctrl+Shift+N) sau faceți clic pe pictograma strat nou din paleta de straturi.

Selectați Instrumentul de tip orizontal (T).

Alege o pensulă cu orice stea, vopseaua va fi albă #ffffff. Pentru a selecta o culoare, faceți clic pe pătratul mic din partea de jos a panoului din stânga.

Pe un nou strat, desenați stele în locuri arbitrare. Pentru a face stelele mai strălucitoare, faceți clic de mai multe ori într-un singur loc. Iată ce mi s-a întâmplat:

Faceți un strat duplicat (Ctrl + J). Faceți clic pe pictograma ochi din paleta de straturi pentru a ascunde vizibilitatea stratului anterior.

Selectați stratul superior cu copia stelelor. Selectați Instrumentul Lasso (L) din panoul din stânga.

Selectați fiecare stea pe rând, apăsați „V” (Instrumentul de mutare) și mutați-o în orice alt loc, astfel încât vom avea stele în diferite locuri în cadre diferite, ceea ce va crea un efect de sclipire.

După ce mutați toate stelele într-un alt loc, creați o copie a stratului la care ați lucrat (Ctrl + J), ascundeți stratul anterior în paleta de straturi făcând clic pe ochi și repetați din nou operația pentru a muta stelele în nou. locuri, puteți termina de pictat mai multe stele noi.

Astfel, vom obține 3 straturi cu stele, în fiecare dintre ele stelele se vor afla în poziții diferite.

Totul este gata.

Noțiuni introductive cu animația în Photoshop

Deschiderea cronologiei. Accesați meniul „Fereastră” - „Cronologie” (Fereastră - Cronologie).

În panoul cronologie care apare, găsim butonul din mijloc „Creează cronologie video” (Creează o cronologie pentru video).

După aceea, cântarul își va schimba aspectul. Acum lovim în colțul din stânga jos al ferestrei pe pictograma cu trei pătrate pentru a crea o animație cadru cu cadru.

Am deschis panoul de animație cadru cu cadru. Acum există un singur cadru în el, în care sunt afișate toate straturile vizibile (conținutul cadrului selectat este afișat în fereastra principală de pe monitor).

Accesați paleta de straturi - F7. Trebuie să dezactivăm acum primele două straturi de stele (faceți clic pe ochi), lăsând doar unul vizibil. Acesta va fi primul cadru.

Accesați paleta de straturi. Opriți primul strat cu stele, porniți al doilea. Astfel, în al doilea cadru, stelele vor fi afișate în alte locuri.

Faceți clic din nou pe pictograma noului cadru. Opriți al doilea strat cu stele, porniți al treilea.

Acordați atenție timpului de sub fiecare cadru, aceasta este durata cadrului. 5 secunde, care sunt implicite, este mult pentru noi - animația va încetini, faceți clic pe săgeată și setați durata fiecărui cadru la 0,1 secunde.

Pentru ca cadrele să se schimbe fără probleme, trebuie să creăm cadre intermediare între cadrele cheie. Pentru a face acest lucru, fiind pe primul cadru, faceți clic pe pictograma cu mai multe cercuri din partea de jos a panoului temporar.

În fereastra care apare, specificați câte cadre intermediare dorim să creăm. Îl voi seta la 2. Pentru toate cadrele, cu excepția ultimului, setați „Cadru următor”.

Între primul și al doilea cadru cheie, aveți 2 intermediare.

Acum stăm pe al 2-lea cadru cheie (acum este al 4-lea la rând), facem din nou clic pe pictograma cu cercuri și creăm încă 2 cadre intermediare. Acum trebuie să închidem ultimul și primul cadru pentru a obține o animație lină.

Selectați ultimul cadru din cronologia. Faceți clic pe cercuri. În fereastra care apare, în linia „Rame intermediare” selectați „Primul cadru”, adăugați 2 cadre în același mod.

Acum, sub cadrele din stânga jos, indicăm numărul de repetări ale redării animației „Constant”.

Selectați primul cadru, apăsați triunghiul din dreapta „Play” pentru a vedea ce s-a întâmplat.

Selectăm formatul de fișier pentru salvarea GIF-ului, facem clic pe „Salvează...”, selectăm directorul în care vom salva, facem clic din nou pe „Salvează”.

Deci, în acest tutorial am văzut cum să facem animație în Photoshop CS6.

Sper că ați învățat ceva nou și util din acest tutorial.

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

Capturile de ecran de mai jos sunt din Photoshop CC, dar lucrul cu animația GIF în CS6 și alte versiuni ale programului este mai mult sau mai puțin la fel. Poate din punct de vedere vizual, instrumentele vor fi ușor diferite, dar, în general, principiul și algoritmul acțiunilor sunt similare. Ca exemplu, luați în considerare sarcină banală cum se creează animație gifîn Photoshop din fotografii care se înlocuiesc între ele. Recent, folosind acest ghid, am făcut un GIF despre aventurile mele pentru postarea finală pentru 2016 pe un blog personal.

Procesul a durat literalmente 5-10 minute. Este important să urmați cu atenție toți pașii. 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

În primul rând, trebuie să încărcați în editor grafic toate pozele/fotografiile care vor participa la animație. 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 de sus ca prim cadru.

Pe urmatorul pas selectați toate straturile din proiect (faceți clic pe ele în timp ce țineți apăsat Tasta Ctrl). După aceea deschis meniul contextual in dreapta colțul de sus Fereastra cronologie și alegeți „Creați cadre din straturi”.

Dintre toate cele vizibile și selectate Straturi 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.

Elementele pot fi specificate timp diferit sau setați un parametru pentru mai multe dintre ele în același timp (selectare 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.

Acolo puteți specifica orice număr de repetări de care aveți nevoie. În apropiere se află butonul Redare, 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, se folosește un instrument familiar. Salvează pentru Web, însă ultimele versiuni 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, selectați formatul GIF și, de asemenea, asigurați-vă că setarea Opțiuni de buclă este setată la Pentru totdeauna. În colțul din dreapta jos al ferestrei, există o opțiune de previzualizare a GIF-ului animat creat în Photoshop.

Dacă totul funcționează așa cum ar trebui, faceți clic pe Salvare și salvați fișierul în calculator local. Pentru a verifica performanța unui GIF, trebuie să îl deschideți într-un browser, deoarece. vizualizator încorporat Animație Windows nu pierde.

Apropo, vă puteți exporta cu ușurință proiectul în format video. Procedura este aceeași ca și pentru salvați gif animație, dar în meniul Photoshop, selectați Fișier - Export - Redare video.

În fereastra care se deschide va setări diferite video, dar nu trebuie să schimbați nimic altceva, doar faceți clic pe butonul Redare. Ca rezultat, obțineți un fișier mp4 cu o prezentare de diapozitive foto/imagine.

În cele din urmă, vă sugerăm să vizionați un tutorial video în limba engleză despre creare GIF-uri animateîn Photoshop. Algoritmul de lucru acolo este același ca în articol, dar ți-ar putea fi mai ușor să percepi informațiile din videoclip.

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

Animația de pe Internet a încetat de mult să fie o simplă decorare a paginii și s-a transformat în unealtă folositoare pentru a îmbunătăți gradul de utilizare. Ajută utilizatorul să interacționeze cu interfața, atrage atenția asupra punctelor importante.

Animația este o afișare secvențială a cadrelor similare unul după altul. Fiecare cadru se schimbă ușor, așa că pare că imaginea se mișcă.

Pentru a anima interfața, a crea prototipuri interactive sau reclame, se folosesc programe speciale, de exemplu, Adobe Animate sau After Effects.

Pentru a crea un simplu banner web sau o prezentare, nu este necesar să înțelegeți programe speciale. Instrumentele Photoshop încorporate sunt, de asemenea, potrivite pentru aceasta.

Unde să încep

Primul pas este să decidem ce vom anima și ce rezultat intenționăm să obținem.

Pentru a crea animația, am luat unul dintre proiectele strălucitoare de la Behance și l-am redesenat în Photoshop. Aliniat la grila de conținut, a preluat dimensiunile și a plasat fiecare element strat separat. Drept urmare, am avut primul ecran al site-ului redat în format PSD, pe care l-am animat apoi.

scara de timp

Înainte de a crea o animație, trebuie să vă pregătiți instrumentele potrivite- activați afișarea „Timeline”, care ajută la gestionarea cadrelor din animație.

Pentru a face acest lucru, deschid fila „Fereastră” și bifez caseta de lângă linia „Cronologie”.

Ar trebui să apară o bară largă în partea de jos a ferestrei în Photoshop, cu care puteți controla cadrele din animație.

Pentru a crea primul cadru, fac clic pe pictograma Creare animație cadru de pe cronologie.

După ce a apărut primul cadru, puteți începe să creați mișcare.

Cadre intermediare

În Photoshop, un element poate fi animat în mai multe moduri:

• Desenați mai multe cadre modificând manual poziția și proprietățile elementelor. Dacă animația este suficient de lungă, desenarea fiecărui cadru durează mult.
• Introduceți rame intermediare. Trebuie doar să setați manual stările de aspect: la începutul și la sfârșitul animației. Cadrele necesare între aceste stări vor fi adăugate chiar de Photoshop. Această metodă este potrivită pentru a face obiectul să apară și să dispară treptat sau pentru a-și arăta mișcarea.

Mai întâi animez imaginea balalaika. Pentru un aspect neted al imaginii, folosesc instrumentul „Inserează cadre intermediare”. Pentru ca Photoshop să anime singur un element, trebuie să setați două stări pentru element - începeți cu primul cadru și se termină cu următorul.

Așa că voi adăuga un alt cadru la Timeline folosind butonul Duplicate Frames.

După ce am adăugat un nou cadru, trec la primul și elimin vizibilitatea stratului de balalaika. De asemenea, puteți seta opacitatea stratului la 0%.

Pe următorul cadru verific dacă stratul balalaika este vizibil.

După ce am lucrat cu imaginea balalaikei, am pus la punct aspectul șir de text. Pe primul cadru, selectez textul „Sufletul cântă” și îl mut în dreapta în afara aspectului. Eu fac același lucru cu textul „3 șiruri” - îl deplasez la stânga până când dispare.

În al doilea cadru returnez textul înapoi.

Excelent. Acum să inserăm cadre intermediare între cadrele cheie.

Pentru a face acest lucru, dau clic pe butonul „Creează cadre intermediare” din „Cronologie”.

În caseta de dialog care apare, specificați câte cadre să adăugați.

Cu cât mai multe cadre, cu atât animația este mai lungă și elementul se mișcă mai fin. Dacă sunt prea puține cadre, elementele se vor mișca brusc.

Prima parte a animației este gata. Acum poți să-l redai și să vezi ce se întâmplă.

Apăs pe butonul de redare de pe Timeline.

Inserarea cadrelor intermediare a ajutat la crearea rapidă a animației cu aspect neted și mișcarea elementelor.

Aspectul, dispariția și mișcarea pot fi combinate între ele pentru a obține efecte și mai interesante.

Animație cadru cu cadru manual

Pe lângă animația liniară, uneori trebuie să creați mișcare haotică sau să afișați interacțiune complexă a elementelor. De obicei, pentru aceasta, sunt create mai multe copii ale primului cadru, iar apoi fiecare copie este ușor modificată - animația este desenată cadru cu cadru.

Voi copia ultimul cadru de câteva ori pentru a crea mișcarea săgeții și textul „mergi la cumpărături”.

În cadrul următor, selectez stratul dorit cu textul și săgeata, îl mutăm puțin în sus, iar în ultimul cadru - în jos.

Acum puteți rula animația și puteți vedea rezultatul.

Deoarece cadrele se schimbă rapid, ochii nu au timp să se concentreze pe ultimul cadru și să stabilească poziția finală a obiectelor de pe ecran.

Prin urmare, am mărit durata ultimului cadru: trebuie să faceți clic pe săgeata de lângă inscripția „0 sec”. și alegeți altă dată din listă.

Pentru ultimul cadru, am setat durata la două secunde. Acum, redarea încetinește la sfârșit. Prin urmare, este confortabil să observați mișcarea elementelor.

Salvați și exportați

În fereastra de previzualizare, puteți vizualiza din nou animația și puteți modifica setările de salvare.

În mod implicit, animația se oprește după redare. Prin urmare, schimb modul de redare la „Repeat” și salvez.

Iată animația rezultată:

Concluzie

În Photoshop, este ușor să creați bannere și prezentări interactive scurte, animate elemente individuale. Este convenabil să experimentați cu rezultatul.

Te-ai întrebat vreodată cum sunt create GIF-urile animate? Autorul lecției vă oferă să stăpâniți câteva dintre secretele animației într-o singură noapte cu ajutorul acestei lecții. Veți învăța, de asemenea, cum să utilizați Cronologia, care este disponibilă în versiuni Photoshop CS6. Și acum să începem!

Rezultatul lecției.

Pasul 1

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

Pasul 2

Creați un nou strat și denumiți-l stratul de zgomot. Alegeți un instrument completati(Paint Bucket Tool) și umpleți stratul creat culoare inchisa(#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 dialogul de 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, puteți ajusta valoarea Nuanță / Saturație (Nuanță / Saturație) nuanta de culoare(Nuanță) îmbrăcat - 140.

Pasul 4

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

Nota traducatorului: Pe ecranul autorului, textul este deja rasterizat împreună cu stilul Stroke. Pentru a face la fel și pentru dvs., după aplicarea cursei, îndepărtați umplerea (Completati) a stratului de text la 0%, convertiți acest strat într-un obiect inteligent și apoi rasterizați-l.

Pasul 5

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

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

Odată ce ați terminat de creat efecte luminoase folosind stiluri de straturi, accesați paleta de straturi și reduceți valoarea acestui strat umple(Umplere) la 0%.

Pasul 7

Duplicați stratul creat la pasul 5 și dezactivați toate stilurile de straturi ale acestei copii. Acum configuraț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 Iluminarea bazei(Color Dodge).

Activați instrumentul Perie(Instrument perie), selectați o perie moale, setați Opacitate(Opacitate) la 95% și cu culoare albă, desenați pete peste text. Fiecare literă are un punct luminos 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ă trecem 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 puncte de lumină 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, cu acesta 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, apăsați butonul Creați cronologie video(Creează cronologie video) și toate straturile tale se vor încărca în cronologie. În el 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 pete luminoase de-a lungul traseului mișcării lor în raport cu conturul literei.

Pasul 12

Așa va arăta pozitia de pornire punct luminos pe litere. Mutați indicatorul de timp curent pe scară și mutați straturile cu puncte luminoase, creând cadre cheie. Continuați să le trageți până când ați terminat de mutat pata pe întreaga literă a fiecărui strat de text. Vedeți mai jos câteva capturi de ecran pentru instrucțiuni.

O sa inveti:

• Cum să deschideți și să închideți și să personalizați panoul de animație.
• Cum să adăugați, să eliminați și să editați cadre cheie și de animație.
• Pentru ce este butonul Tween?
• Cum se face animație simplă desen de stea.
• Cum să setați intervale de timp pentru fiecare cadru de animație.
• Cum să optimizați animația pentru reducerea dimensiunii fișier gif.
• Cum să importați fișiere GIF în program.
• Cum să comutați de la animația cadru la cronologie.

Lecția constă din următoarele secțiuni:

1. Video instructiv.
2. Ce este animația.
3. Partea 1. Animație cadru cu cadru.
4. Setarea intervalelor.
5. Setarea frecvenței repetărilor.

7. Optimizarea animației.
8. Salvarea animației.

10. Deschideți GIF-uri.
11. Butoane pentru unificarea straturilor de animație.
12. Închiderea panoului de animație.
13. Întrebări.
14. Tema pentru acasă.

Ce este animația

Animația este o schimbare secvențială a imaginilor, în urma căreia ni se pare că obiectul se mișcă, își schimbă forma, apare și dispare, iar cu el pot apărea și alte acțiuni dinamice.

Cu animație înăuntru Photoshop poți crea prezentări de diapozitive din fotografii sau imagini, poți face avatare, bannere, screensavere pentru pagini web, cărți poștale dinamice și diverse prezentări. Trebuie avut în vedere că Photoshop este încă un editor grafic și nu este conceput pentru procese complexe de animație. Există două moduri de a crea animație în program - animație cadru cu cadru și animație în modul cronologie. Vom lua în considerare pe rând ambele tipuri de animație. Vom dedica întreaga lecție 36 studiului animației cadru cu cadru. Și în lecția 37, ne vom ocupa de cronologia. niste sarcini simple este mai convenabil să o efectuați în modul de animație cadru cu cadru. Chiar dacă știi să lucrezi cu cronologia din alte programe, oricum, te sfătuiesc să încerci sarcinile din această lecție. Pe baza cunoștințelor acumulate, vei putea decide ce metodă vei folosi în fiecare caz.

Partea 1. Animație cadru cu cadru

Panou Rame a aparut cu mult timp in urma. Să luăm în considerare setările sale pe exemplul animației de desenare a unui asterisc.

Creați un document nou 800 x 800 pixeli, rezoluție 72, modul color RGB. Creați un nou strat făcând clic pe pictograma din partea de jos a paletei Straturi. Sau apăsați Shift+Ctrl+N.

Pe bara de instrumente, selectați instrumentul pensulă negru, 35 pixeli în diametru cu margini neclare. Desenați prima linie înclinată (puneți un punct, apăsați Shift și puneți următorul punct - linia va fi dreaptă).

Creați un al doilea strat. Desenați următoarea linie. Apoi al treilea strat
și o altă linie și așa mai departe. Ar trebui să aveți șase straturi, inclusiv stratul de fundal.

Pentru a deschide panoul Animație, faceți clic pe elementul Animație din meniul Fereastră. Sau din meniul Fereastră, setați Spațiu de lucru ( Mediu de lucru) pe Video și Film/Video. Asigurați-vă că panoul este în modul de animație cadru cu cadru.
LA in caz contrar faceți clic pe pictograma în partea dreaptă jos a panoului de animație.

Opriți vizibilitatea tuturor straturilor, cu excepția stratului de fundal din paleta Straturi (Straturi) făcând clic pe pictograma din stânga miniaturii stratului. Acesta va fi primul cadru al animației noastre.

Faceți clic pe pictograma din partea de jos a panoului Animație. Va apărea al doilea cadru (o copie a primului cadru). Pentru a-l schimba, activați vizibilitatea primului strat din paleta Straturi (Straturi). Faceți clic din nou pe pictogramă și activați vizibilitatea celui de-al doilea strat.

Continuați să creați cadre noi și activați vizibilitatea straturilor următoare până când întregul asterisc apare în ultimul cadru.

În partea de jos a panoului Animație sunt instrumente pentru adăugarea, eliminarea și vizualizarea animațiilor.

- conversie în animație pe cronologia.

- Tween(Crearea cadrelor intermediare).

- Duplicarea cadrului curent (crearea unei copii a cadrelor selectate).

- Butoane de redare (ca orice magnetofon).

Selectează primul cadru (Alegeprimulcadru); Selectează cadrul de previzualizare (Alegeanteriorcadru);

Joaca(porniți animația);

SelecteazăUrmătorulcadru(Selectați următorul cadru).

- Ștergeți cadrele selectate. Vă rugăm să rețineți că cheiaDelde pe tastatură nu șterge cadrul selectat, ci șterge stratul selectat din paleta Straturi (Straturi).

Setarea intervalelor.

Acum să setăm intervalele de timp în care cadrele de animație vor fi vizibile.

Sub fiecare cadru, în partea de jos este scris 0 s. și există o săgeată. Faceți clic pe săgeată și selectați rata de cadre. Alegeți o valoare de 0,5 pentru toate cadrele (însemnând că va avea loc o schimbare a cadrului după o jumătate de secundă).

Setarea frecvenței de repetare.

Următorul pas este să setați frecvența repetărilor animației. Faceți clic pe săgeata din partea de jos a panoului de animație. Apare meniul de selecție a periodicității.

Dacă selectați Pentru totdeauna (Pentru totdeauna / Permanent), atunci animația se va repeta iar și iar. Acest proces se numește looping.

Dacă selectați O dată, animația se va reda o dată și se va opri la ultimul cadru.

Dacă selectați Altele, puteți seta un număr diferit de repetări în interval (de la 1 la 999).

Acum haideți să redăm animația creată. Pentru a face acest lucru, faceți clic pe butonul Redare (Start animation). Dacă vă place totul, treceți la pasul următor, dacă nu, atunci ajustați animația după cum doriți.

Accesați Panoul de animație. Faceți clic pe pictograma Duplicați cadrul curent. Selectați toate straturile, cu excepția stratului de fundal.
Dezactivați vizibilitatea stratului de fundal. Apăsați Ctrl + Shift + Alt + E. Va apărea un nou strat pe care vor fi ștampilate toate straturile selectate.
Miniatura stratului va afișa o stea aprinsă fundal transparent. Numiți acest strat Steaua.

Faceți dublu clic pe strat pentru a accesa setările de stil. Setați umbra și suprapunerea de culoare. Alege culoarea la alegere.

Reveniți la primul cadru al animației
și eliminați vizibilitatea stratului cu steaua
în paleta Straturi (Layers).

Selectați ultimul cadru. În paleta Straturi, lăsați vizibile doar stratul Steaua și stratul Fundal.

Duplicați acest strat și modificați setările de stil: Schimbați culoarea, setați relieful sau contur. Accesați Panoul de animație. Faceți clic pe pictograma Duplicați cadrul curent. Reveniți la primul cadru din panoul Animație și deselectați acest strat din paletă.

Duplicați din nou stratul și schimbați stilul. Selectați instrumentul Mutare (Mutare) sau apăsați Ctrl + T pentru a accesa instrumentul Transformare gratuită. Schimbați scara. Accesați Panoul de animație. Faceți clic pe pictogramă. Reveniți la primul cadru și deselectați acest strat.

Duplicați din nou stratul și măriți puțin mai mult și schimbați stilul. Și adăugați un cadru de animație. Ar trebui să ajungeți cu un storyboard ca acesta:

Apăsați butonul Play (Start animation) și priviți rezultatul muncii efectuate.

Optimizarea animației.

Faceți clic pe pictograma din partea dreaptă sus a panoului de animație. Va apărea un meniu suplimentar.

După finalizarea lucrării, ar trebui să optimizați animația pentru a reduce dimensiunea fișierului Gif și descărcare mai bine browser web. Reducerea se produce datorită excluderii zonelor care nu se modifică în timpul tranziției de la cadru la cadru.

Selectați Optimizați animația... (Optimizați animația). Bifați ambele casete.
mărginirecutie(casetă de încadrare)- decupează cadre în funcție de zona modificată față de cadrul precedent.

Eliminarea pixelilor redundanți (Eliminarea pixelilor suplimentari). Dacă un pixel nu s-a schimbat față de cadrul precedent, acesta devine transparent.

Pentru ca PhotoShop să salveze cadre care includ transparență, selectați opțiunea "Automat". Pentru a face acest lucru, selectați unul sau mai multe cadre. Faceți clic dreapta pe miniatura cadrului. Alegeți dintre trei opțiuni:

Automat(Automat)— cadrul curent este eliminat dacă următorul cadru conține transparență a stratului.,

Donudispune(Nu aruncați)- Cadrul curent este vizibil prin zonele transparente ale cadrului următor.,

Dispune(Poziţie)- cadrul curent nu este vizibil prin zonele transparente ale cadrului următor.

Salvați animația.

Acum este timpul să salvați animația. Desigur, în procesul de lucru, a fost necesar să salvați fișierul în format PSD pentru a nu intra într-o situație cu oprire bruscă electricitate sau repornire neașteptată calculator. Dar acum mă refer la o altă salvare. Animația poate fi salvată ca GIF animat folosind comanda Salvare pentru Web.

Selectați Salvare pentru Web din meniul Fișier. Setați în setări format gif. Fiți atenți la dimensiunea fișierului viitor. Reduceți-i dimensiunea dacă este posibil. Cum să faceți acest lucru, am discutat în detaliu în lecția Image Size (Image size). Când optimizați, utilizați modelul de reducere a culorii adaptiv, perceptiv sau selectiv pentru a asigura consistența culorii în toate cadrele. Faceți clic pe Salvare, introduceți un nume, o cale și faceți clic pe Salvare din nou.

Anterior, pentru a înregistra animația, am mers la aplicația ImageReady.

Photoshop CS2 introduce panoul Animație. Dar pentru a salva fișierul animat, mai trebuia să comutați la ImageReady. Pentru tranziție, a fost servit butonul din partea de jos a barei de instrumente sau meniul Fișier (Fișier) - Editare în ImageReady (Accesați ImageReady).

Începând cu Photoshop CS3 și mai sus, nu sunt necesare animații pentru a înregistra animații. programe suplimentare. Pentru editare, se folosește acum panoul Animație, iar pentru înregistrare, elementul a fost adaptat în meniul Fișier (Fișier). SalvațipentruWeb(Salvați pentruWeb) .

Să luăm în considerare un alt mic exemplu de creare a unei animații cadru cu cadru, în care vom analiza pentru ce este butonul. Tween(Creează interpolare).

Creați un document nou de 500 x 250 pixeli. Selectați instrumentul Tip (Text), font Impact, dimensiune 150 pt. și scrie orice cuvânt. Setați opacitatea la 100%. Adăugați stiluri de straturi: umbră, gradient și relief. Poti alege un alt stil, nu trebuie sa il faci ca al meu. Deformarea textului poate fi, de asemenea, animată. În panoul de animație, setați intervalul la 0,2 secunde. Apăsați butonul pentru a copia primul cadru. Accesați paleta Straturi (Straturi) și reduceți opacitatea la 0. Schimbați stilul stratului (de exemplu, în loc de o suprapunere cu gradient, adăugați o suprapunere de culoare). Comutând între cadre, puteți urmări cum se schimbă imaginea.

Să adăugăm mișcare. Selectați instrumentul Mutare (Mutare) și mutați textul în jos, în afara foii. Accesați panoul de animație și faceți clic pe butonul

În fereastra care apare, puteți seta numărul de cadre adăugate. Cu cât sunt mai multe, cu atât tranziția va fi mai lină. În grafic TweenCu(inter-cadre) puteți alege din lista unde vor fi inserate cadrele:

Ultimul (Ultimul cadru); Selectie (Selectie); Previous Frame (Cadru precedent); Primul cadru (Primul cadru); Următorul cadru Lista se modifică în funcție de cadrul selectat.

Lăsați toate setările implicite. Faceți clic pe OK.

Faceți clic pe Redare (Start Animation). Dacă totul vi se potrivește, atunci continuați să salvați animația.

Deschiderea GIF-urilor.

În Photoshop CS3 și CS44, fișierele de animație video și GIF nu se deschid prin meniul Fișier (Fișier) – Deschidere (Deschidere). Când încerc să-l deschid, apare o fereastră:

Asigurați-vă că instalați QuickTime Pro 7.1 sau o versiune ulterioară.

Photoshop CS5 nu are această problemă. Fișierele sunt deschise cu ușurință în mod obișnuit.

Selectați din meniul Fișier (Fișier) –Import (Importare) - Cadre video în straturi (cadre video
în straturi...). Nu veți putea selecta fișiere GIF în câmpul tip fișier. Cu toate acestea, acest neajuns poate fi ocolit cu ușurință prin copierea mai întâi a numelui fișierului .gif și lipirea acestuia în câmpul pentru numele fișierului sau tastând manual numele în acest câmp. Sau introduceți * în câmpul Nume fișier și apoi faceți clic pe Încărcare
numele fișierului gif va deveni vizibil și poate fi deschis (vor deveni vizibile alte fișiere, chiar și cele care nu pot fi deschise în program).

Lăsați setările în fereastra care apare implicită. De la început până la sfârșit și Creați animație cadru ar trebui să fie bifate. Din păcate, fișierele deschise în acest fel nu vor conține un fundal transparent, ci va fi culoare alba. Când deschideți un astfel de fișier în CS5, fundalul transparent va fi păstrat.

Butoane pentru unificarea straturilor de animație.

Aruncă o privire atentă la modul în care s-a schimbat paleta Straturi(Straturi) când lucrați cu animație cadru cu cadru. Au apărut butoane care vă permit să aplicați modificări în cadrul curent tuturor celorlalte cadre. Bifați caseta de selectare Propagare cadru 1.

Să vedem cum funcționează... Deschideți fișierul de animație a desenului cu stea. Selectați orice cadru și dezactivați vizibilitatea stratului de fundal. Faceți clic pe Redare (Start Animation). Doar cadrul selectat a devenit transparent. Faceți clic pe butonul Unifică vizibilitatea stratului. Va apărea o fereastră: .

Clic Meci(Sincroniza)și rulați din nou animația. Desenul stelei va avea loc pe un fundal transparent pe tot parcursul animației. Transparența primului cadru este acum atribuită tuturor cadrelor de animație. În mod similar, puteți controla poziția și stilul stratului.

În paleta Straturi (Straturi) selectați elementul Opțiuni de animație (Opțiuni de animație). În mod implicit, butoanele de unificare a stratului apar automat când activați bara de animație cadru cu cadru. Puteți modifica această regulă selectând Afișați întotdeauna sau Ascundeți întotdeauna.

Închideți panoul de animație.

Există mai multe moduri de a închide panoul de animație:

Puteți minimiza sau închide panoul de animație și, de asemenea, puteți accesa Preferințe (Setări) făcând clic pe Preferințe interfață utilizator (Opțiuni interfețe).

Întrebări:

1. Ce se întâmplă dacă selectați un cadru într-o animație cadru cu cadru și apăsați Del de pe tastatură?

Cadrul selectat va fi șters.

Stratul selectat în paleta Straturi va fi eliminat din toate cadrele de animație.

Stratul selectat în paleta Straturi (Straturi) va fi șters numai pentru cadrul de animație selectat.

Stratul selectat în paleta Straturi va fi eliminat din toate cadrele de animație, cu excepția stratului de fundal.

1. Ai trei cadre. Animația va fi continuă. Ce trebuie făcut pentru a adăuga
   5 cadre intermediare între ultimul și primul cadre?

Selectați primul cadru. Apasa butonul
În setările din coloana Tween With (cadre intermediare) selectați Next Frame (Next frame).

Selectați ultimul cadru. Apasa butonul
În setările din coloana Tween With (cadre intermediare) selectați Previous Frame (Previous frame).

Selectați ultimul cadru. Faceți clic pe butonul Tween.
În setările din coloana Interpolare cu (cadre intermediare) selectați Primul cadru (Primul cadru).

1. Pentru ce este optimizarea animației?

Pentru a converti în animație cronologică.

Pentru a reduce dimensiunea unui fișier Gif excluzând zonele care nu se schimbă de la cadru la cadru.

Pentru a seta frecvența repetărilor animației.

Teme pentru acasă:

1) Efectuați o animație cadru cu cadru a desenului unei stele (conform lecției).

2) Efectuați o animație cadru cu cadru a textului.