Fișier GIF în Photoshop. Cum să faci un GIF în Photoshop din imagini și videoclipuri

Fișierele GIF animate pot fi create destul de ușor și rapid folosind Photoshop. 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:

importa imagini în gif-uri;
Setări de animație GIF în Adobe Photoshop;
exportați/salvați în format GIF sau video.

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.

Procesul a durat literalmente 5-10 minute. Lucrul important aici este 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

Primul pas 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 dreapta colțul de sus Fereastra 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.

Elementele pot fi specificate timpuri diferite sau setați 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 ultimele versiuni Adobe Photoshop CC se află într-o locație nouă de meniu (Fișier - Export). Din fericire tastă rapidă 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 rezultat, 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.

SALVAREA ANIMAȚIEI
ÎN PHOTOSHOP

Cum să salvezi în Photoshop? - este mai ușor decât vă puteți imagina, există mai multe tipuri de fișiere de salvare pe care le creați sau editați în Photoshop. În cazul nostru, suntem obișnuiți să apelăm fișierele pe care le creăm imagini.

Deseori mi se pune întrebarea: „Cum salvez animația în Photoshop?” - această întrebare este una dintre cele mai importante în salvarea imaginilor în Photoshop. Răspunsul la această întrebare este foarte simplu, pentru a salva animația în Photoshop trebuie să faceți următoarele: faceți clic pe panoul superior Fișier - Salvare pentru dispozitive Web - există și mai multe varianta rapida folosind taste rapide, deși pentru mine nu este mai ușor, folosesc mouse-ul, dar dacă cineva vrea să încerce, iată comanda în sine: Alt + Shift + Ctrl + S

După ce parcurgeți acești pași, în fața dvs. se va deschide o nouă fereastră în care puteți seta setările pentru imaginea dvs. și anume puteți seta calitatea imaginii salvate, acest lucru este necesar pentru ca dacă decideți să încărcați acest fișier pentru site-ul dvs., acest fișier nu a cântărit prea mult, dar, în același timp, puteți alege dimensiunea optimă a imaginii pentru dvs. cu o pierdere optimă de calitate.

În secțiunea „Setări”, puteți seta formatul imaginii și apoi puteți face setări pentru acest format. Pentru a salva animația, va trebui să selectați calitatea.GIF - și apoi să salvați fișierul pe computer.

Sper că înțelegeți cum să salvați imaginea de care aveți nevoie în Photoshop. Metoda pe care am descris-o poate fi folosită în principal atunci când trebuie să salvați o animație (asta este singura modalitate de a salva animația în Photoshop, încă nu a fost inventată alta) sau o imagine statică pentru un site web.

Dar nu aș fi răspuns temeinic la întrebarea „cum să salvez în Photoshop” dacă nu m-aș fi luat în considerare o altă modalitate de a salva imagini în Photoshop. Puteți da clic pe File – Save (versiunea în limba engleză sună așa: File – Save), după care în fața noastră va apărea o fereastră în care putem selecta formatul, precum și calea către locul unde exact dorim să facem. salvați imaginea.

Și o altă modalitate de salvare arată astfel: Fișier - Salvare ca... (Versiunea în limba engleză sună așa: Fișier - Salvare ca...) în această opțiune, la fel ca în opțiunea anterioară, va apărea o fereastră în fața dvs. în care selectați formatul și calea de care aveți nevoie către locația în care doriți să salvați fișierul (imagine)

Dar repet, ultimele două opțiuni nu sunt potrivite pentru salvarea animației GIF, puteți selecta formatul .gif în ele, dar imaginea nu va rămâne animată, ci va avea doar un fragment dintr-unul dintre cadre (Puteți încerca asta opțiune și vezi ce se întâmplă)

De asemenea, este de remarcat faptul că în prima opțiune nu veți putea salva fișierul în rezoluție .psd - acest format este citit de Photoshop, adică dacă salvați fișierul în acest format, îl puteți deschide oricând folosind Photoshop și continuă să lucrezi deasupra imaginii, păstrând în același timp succesiunea de straturi, într-un cuvânt, te vei întoarce la locul din care ai închis Photoshop.

Cum arată în acțiune, vezi capturi de ecran
pasul 1

pasul 2

GIF-urile sunt peste tot. Imaginile animate cândva umile sunt acum limba neoficială a internetului. Animația GIF este cea mai bună cale rapidă exprimăm emoții pe Twitter și putem petrece ore întregi urmărindu-l, derulând prin fluxul de știri de pe VK, Facebook sau Odnoklassniki.

Este destul număr mare site-uri unde puteți găsi gif-uri gata făcute pe o varietate de subiecte. Dar nimic nu se compară cu animația GIF care este realizată în interior cu propriile mele mâini. Crezi că acesta este un proces dificil? Te înșeli, e destul de simplu. Puteți crea rapid o animație GIF în editorul grafic Photoshop, conversia unui videoclip existent sau folosind o serie de imagini statice. Să aruncăm o privire mai atentă la cum se face acest lucru.

Nota:În toate exemplele din acest articol, folosesc Photoshop CC 2017.

Cum se creează animație GIF din videoclip

Mai întâi, trebuie să lansați Photoshop, să accesați „Fișier” > „Import” > „Cadre video în straturi” și să selectați înregistrarea video dorită.

În caseta de dialog care se deschide, puteți importa întreaga înregistrare video sau puteți selecta doar o anumită parte a acesteia. Dacă alegeți a doua opțiune, trageți mânerele de sub fereastra de previzualizare pentru a seta punctele de început și de sfârșit. Porțiunea videoclipului dintre aceste mânere va fi importată.

Nota: Rețineți că cu cât importați mai multe videoclipuri, cu atât GIF-ul dvs. va fi mai mare. De asemenea, dacă importați un videoclip care este prea lung, alegerea Păstrați fiecare 2 cadre (sau mai multe) este o modalitate ușoară de a reduce dimensiunea fără a afecta prea mult calitatea.

Asigurați-vă că caseta de selectare Creare animație cadru cu cadru este bifată, apoi faceți clic pe OK. Procesul de import video va începe. Acest lucru poate dura ceva timp, în funcție de dimensiunea clipului. Odată ce importul este complet, se va deschide zona de lucru, în care fiecare cadru video va fi plasat pe propriul strat.

În partea de jos a ecranului există o paletă de scară de timp. Afișează toate cadrele care vor alcătui animația GIF.

Puteți adăuga și elimina cadre după cum doriți sau puteți edita oricare dintre straturile existente așa cum ați edita straturi în orice altă imagine. Pentru a previzualiza animația GIF, faceți clic pe butonul Redare din partea de jos a cronologiei.

Rezultatul final ar trebui să fie cam așa:

Crearea de animație GIF dintr-o serie de imagini statice

Dacă nu aveți înregistrări video pe care să le folosiți ca bază pentru animația GIF, puteți crea una manual dintr-o serie de imagini statice. Este puțin mai complicat, mai ales dacă vrei să faci ceva cool, dar procesul de bază este simplu.

Vă creați GIF dintr-un singur fișier imagine care conține mai multe straturi. Fiecare strat este un cadru separat al viitoarei animații. Există două moduri de a începe:

Dacă ați creat deja imagini pentru animația dvs., importați-le alegând Fișier > Scripturi > Încărcare fișiere în stivă.... Faceți clic pe Răsfoire și selectați imaginile, apoi faceți clic pe OK. Fiecare imagine va fi plasată pe un strat separat în cadrul aceluiași fișier.
Dacă nu ați creat încă imagini, faceți-o acum. Amintiți-vă că fiecare imagine face parte dintr-o animație viitoare.

Acum sunteți gata să începeți să creați animație.

Animarea imaginilor statice

Iată cum funcționează. Când creați manual un cadru de animație, fiecare strat vizibil este inclus în acesta. Straturile care sunt dezactivate nu vor fi incluse în cadrul generat.

Pentru a crea primul cadru, faceți primul strat vizibil și dezactivați-le pe toate celelalte. Apoi, când creați al doilea cadru, faceți vizibil al doilea strat, apoi al treilea strat pe al treilea cadru și așa mai departe. Odată ce începi, totul va deveni mai clar.

Pentru a începe să creați o animație, deschideți cronologia dacă nu se deschide automat pentru dvs. Pentru a face acest lucru, faceți clic pe „Fereastră” în panoul de sus și selectați „Cronologie” în meniul care se deschide. În centrul panoului care se deschide, faceți clic pe „Creați animație cadru”. Această acțiune va crea primul cadru al animației dvs. În paleta Straturi, ascundeți straturile care nu doriți să fie parte din cadru.

Acum faceți clic pe butonul „New Frame”, care va duplica cadrul anterior. Încă o dată, ascundeți straturile suplimentare și faceți vizibile cele care ar trebui incluse în cadru.

Repetați acest proces până când ați adăugat toate cadrele necesare pentru animație.

Finalizare

În cele din urmă, setați timpul de afișare pentru fiecare cadru. Selectați primul cadru, apoi faceți Shift-clic pe ultimul pentru a le selecta pe toate. Acum faceți clic pe săgeata în jos de sub unul dintre cadre și selectați o întârziere. Nicio întârziere înseamnă că animația va rula rapid, în timp ce numărul de secunde setat va face ca cadrele să rămână pe ecran pentru o perioadă de timp stabilită.

În cele din urmă, setați opțiunile de buclă, pe care le veți găsi în partea de jos a panoului Cronologie. Acest parametru controlează de câte ori va fi redată animația dvs. În cele mai multe cazuri, veți selecta opțiunea „Întotdeauna”.

Acum faceți clic pe butonul Redare din partea de jos a ecranului pentru a vizualiza animația rezultată. Ar trebui să vezi așa ceva:

Puteți edita cadrele pur și simplu selectându-le și modificând vizibilitatea straturilor (puteți modifica și opacitatea sau efectuați alte setări mai complexe). Adăugați straturi suplimentare dacă aveți nevoie de ele sau faceți clic pe pictograma coș de gunoi pentru a le șterge.

Când sunteți mulțumit de rezultat, puteți trece la secțiunea „Salvarea animației” sau puteți citi mai departe pentru a îmbunătăți animația rezultată.

Îmbunătățirea animației prin adăugarea de cadre intermediare

Photoshop acceptă o funcție puternică de interpolare de animație. Acest lucru vă permite să creați animații mai fluide prin generarea automată a cadrelor de tranziție între două cadre existente. În acest exemplu, voi trece prin toate cadrele pentru a da cerului înstelat un efect de sclipire.

Pentru a începe, selectați primul cadru și faceți clic pe butonul Create Tweaks din bara de instrumente din partea de jos a cronologiei.

În caseta de dialog care se deschide, setați elementul „Cadre intermediare” la valoarea „Cadru următor”, iar pentru elementul „Adăugați cadre”, specificați valoarea la discreția dvs. Mai mult valoare mareînseamnă o tranziție mai lină, dar mai lentă. Faceți clic pe „OK” pentru a crea cadrele intermediare.

Acum repetați acest proces pentru celelalte cadre sursă pe care le-ați adăugat. Când ajungeți la ultimul, setați „Între cadre” la „Primul cadru”. Acest lucru va ajuta la crearea unei tranziții ușoare la începutul buclei de animație.

Faceți clic pe butonul de redare pentru a previzualiza efectul.

Salvarea animației

Când ați terminat, mai întâi salvați fișierul ca fișier „.PSD”. Acest lucru va salva toate informațiile despre strat și animație, astfel încât să puteți edita animația mai târziu, dacă este necesar. După aceasta, puteți trece direct la salvare.

Pentru a salva animația creată, accesați Fișier > Export > Salvare pentru Web ( versiunea veche)...". În fereastra care se deschide, selectați formatul GIF și introduceți 256 în câmpul „Culori” Pentru a reduce dimensiunea totală a fișierului, reduceți dimensiunea în câmpul „Dimensiunea imaginii”.

Puteți vedea dimensiunea animației în colțul din stânga jos al ferestrei de previzualizare. Dacă este prea mare, trageți glisorul Waste la dreapta. Acest lucru va afecta calitatea, dar va reduce semnificativ dimensiunea fișierului.

După ce am făcut animația în Photoshop, apare întrebarea - cum să păstrăm această frumusețe?

Dacă lucrați în PhotoshopCS3 1. Accesați Fișier - Salvare pentru web și dispozitive... (sau Ctrl+Shift+Alt+S)

2. În fereastra care apare, setați numărul necesar de culori folosite în imagine (cel mult 256), aici setăm și formatul imaginii Gif. În aceeași fereastră vă puteți vizualiza din nou animația (asigurați-vă că totul funcționează bine).

3. După ce toți parametrii sunt setați, faceți clic pe butonul Salvare. Vom avea o altă fereastră „Salvează optimizat ca”. În linia Folder indicăm calea către locul în care ne vom salva animația. În linia Nume fișier, atribuiți numele animației în mod corespunzător. În linia Tip fișier, selectați „Numai imagini (*.gif)” dacă aveți nevoie doar de o imagine animată și „HTML și imagini (*.html)” - dacă aveți nevoie nu doar de o imagine, ci și de cod HTML (pentru de exemplu, pentru inserții pe site).

Dacă salvați animația prin Image Ready

1. După ce ați creat animația în Photoshop, faceți clic pe butonul „Go to Image Ready”, care se află în partea de jos a barei de instrumente. Se va deschide programul Image Ready.

2. În partea dreaptă a ferestrei de lucru se află o paletă de optimizare, în această paletă setăm numărul necesar de culori folosite în imagine (cel mult 256), aici setăm și formatul imaginii Gif. Am versiunea în limba engleză, așa că pozele vor avea inscripții în limba engleză, dar cred că tot va fi clar.

3. După setarea parametrilor necesari în paleta Optimizare, accesați meniul Fișier - Salvare optimizat ca... (sau Ctrl+Shift+Alt+S).

4. Va apărea fereastra „Save Optimized As” cu același nume. În linia Folder indicăm calea către locul în care ne vom salva animația. În linia Nume fișier, atribuiți numele animației în mod corespunzător. În linia Tip fișier, selectați „Numai imagini (*.gif)” dacă aveți nevoie doar de o imagine animată și „HTML și imagini (*.html)” - dacă aveți nevoie nu doar de o imagine, ci și de cod HTML (pentru de exemplu, pentru inserții pe site).

Bun venit la următoarea lecție, datorită căreia veți învăța cum să salvați corect animația GIF în Photoshop. Pentru ca după salvare să arate așa cum l-ai făcut, fără dungi inutile, margini ascuțite și alte lucruri mărunte pe care le întâlnesc mulți oameni.

Cum să salvezi ca GIF

Nota: Formatul gif este disponibil numai dacă imaginile au 8 biți/canal. (gif-ul acceptă exclusiv 8 biți/canal, țineți cont de acest lucru).

Pentru a converti o imagine pe 8 biți/canal, accesați fila Imagine -> Mod -> 8 biți/canal.

Pentru a salva animația, selectați Fișier -> Salvare pentru Web -> Format de fișier optimizat (GIF).

Asigurați-vă că bifați caseta de lângă Convertiți în sRGB, aceasta va salva exact culorile pe care le-ați folosit pentru afișare în browser.

Notă: în majoritatea cazurilor (90%) este setat la „permanent”.

Avem o casetă de dialog mare în fața noastră. Să ne uităm la unii dintre parametrii mai detaliat.

Culori

Acordați atenție acestui parametru ( cantitate maxima flori in diagrama de culori, în mod implicit este setat la 64. Acest număr este considerat mediu (cum ar fi mijloc de aur) valoare și este excelent pentru aproape orice.

De exemplu, pentru animația alb-negru, cred că valoarea 64 este prea mare. Pentru animația b/n am setat valoarea la 16, ceea ce mi se pare ideal. Iar pentru animația, de exemplu, a oricăror elemente web (butoane, bannere, avatare etc.), valoarea medie este prea mică, ceea ce duce la divorțuri neplăcute. hai sa ne uitam la un exemplu:

| Ai văzut chiar și cea mai mică diferență?

Singurul lucru pe care vreau să-l remarc este că pentru animațiile mari dimensiunea fișierului sursă variază.

Și acum următorul exemplu, pe un buton web

Gif salvat cu valoarea culorii 64 (dimensiune 18,9 kb)

Gif salvat cu valoarea culorii 256 (dimensiune 37,9 kb)

Chiar poți simți diferența? atat ca calitate cat si ca dimensiune. Mereu trebuie să sacrifici ceva, în cazul meu dau prioritate „Calitate” cei 19 kb în plus nu mă sperie atât de mult, spre deosebire de calitate.

întrețesut

Acest parametru nu este mai puțin important decât toți ceilalți. Dacă salvați animația cu caseta de selectare Interlace activă, animația din browser va merge împreună cu încărcarea imaginii. Și dacă salvați fără a utiliza acest parametru, animația va fi afișată numai după ce imaginea este complet încărcată. Utilizarea acestei opțiuni reduce timpul de descărcare, dar afectează semnificativ dimensiunea fișierului sursă.

De regulă, interlace este activ în mod implicit, decideți dacă îl utilizați sau nu.