Cum să faci un gif animat în Photoshop. Cum să faci animație Gif în Photoshop. Acum trebuie să veniți cu un fundal, un concept de caracter și o mișcare

Doriți să creați o imagine animată, o carte poștală, un avatar, o fotografie sau un banner pentru site-ul dvs.? Pentru a face acest lucru, nu trebuie să fiți un specialist în tehnologii flash. Orice utilizator de computer cu Photoshop poate realiza o animație GIF.

ÎN versiuni anterioare Nu existau instrumente pentru Photoshop crearea de gif-uri-fișiere și a fost necesar să instalați suplimentar Adobe Image Ready. ÎN ultimele versiuni PS face un GIF mai ușor și mai rapid.

Să ne uităm la lucrul cu animația folosind Photoshop CS5 ca exemplu.

1.Creați un fișier nou în care primul strat va fi fundalul și copiați-l aici pozele necesareși inscripții (în consecință, fiecare va fi pe un strat separat).

2. Accesați meniul Fereastră – Animație.

3. În partea de jos a paginii apare o fereastră pentru lucrul cu animația. Până acum există un singur cadru pe care sunt afișate toate straturile vizibile.

4. Folosind butonul „Creați o copie a cadrelor selectate”, duplicați acest cadru de câte ori este necesar.

5. Animația noastră va consta din 3 cadre.

6. Pe primul cadru, lăsați fundalul și poza, îndepărtați inscripția. Pentru a face acest lucru, stăm pe primul cadru și nu strat vizibil cu o inscripție.

7. Pe ultimul cadru, trebuie să opriți imaginea în același mod.

8. Setați durata de afișare pentru fiecare cadru (de obicei este aceeași pentru toate).

9. Pentru a vă asigura că animația nu se oprește niciodată, setați „continuu” în meniul derulant, care indică de câte ori va fi derulată bucla.

10. Pentru a vizualiza rezultatul, faceți clic pe butonul „Începe redarea animației”.

11. Salvați animația rezultată în format gif: în meniul Fișier - Salvare pentru Web și dispozitive...

12. Setați formatul gif.

13. Salvăm fișierul nostru, setările standard nu trebuie modificate.

14. Bucurați-vă de rezultat.

Altele pot fi folosite programe specialeși servicii online pentru crearea unui fișier GIF, de exemplu, GIF Animator, UnFREEz etc. Știind cum să faci un fișier GIF, îți poți decora cu ușurință contul de rețea socială sau site-ul web cu orice imagini animate, fotografii sau bannere

Mai devreme, pe site, ne-am uitat la cele de la terți, dar majoritatea 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 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ă vă î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 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 deschizi meniul contextualîn 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.

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, se folosește un instrument familiar Salvează pentru Web, însă, recent 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, 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 în calculator 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.

Fă-l animat imagine gif Photoshop este destul de posibil chiar și pentru un începător. Photoshop vă permite să creați animație cadru cu cadru prin schimbarea cadrelor și apoi să salvați lucrarea ca imagine gif.

Aceasta înseamnă că Photoshop nu creează animația în sine, ci organizează doar o prezentare cadru cu cadru a imaginilor pregătite în prealabil și le trimite în formatul final. Numărul de cadre din animația gif finală poate fi oricare, dar cu cât numărul este mai mare, cu atât dimensiunea fișierului va fi mai mare. Prin urmare, ar trebui să vă străduiți întotdeauna să reduceți numărul de cadre la minimum. Cu toate acestea, cu cât se reflectă mai multe cadre într-o secundă de animație, cu atât va fi mai netedă. În general, nu este o idee bună să creșteți numărul de cadre pe secundă peste 30, deoarece ochiul uman nu poate distinge mai multe cadre pe secundă. Chiar și în filme și videoclipuri folosesc 24 de cadre pe secundă.

De asemenea, atunci când creați animație în Photoshop, ar trebui să țineți cont de acest lucru diverse dispozitive iar browserele pot la viteze diferite redați animație cu un număr mare de cadre pe secundă, în funcție de dvs capabilități tehnice. Aşa, telefon mobil, de exemplu, poate reda doar 10 cadre pe secundă. Aceasta înseamnă că o secundă de animație cu 30 de cadre va dura 3 secunde, prin urmare animația va încetini.

Atunci când alegeți numărul de cadre pe secundă ale unei animații, totul depinde de ceea ce va fi reprezentat în animație și de scopul acesteia.

Trebuie remarcat faptul că numărul de cadre pe secundă animație gif nu este constantă și se schimbă ușor la crearea animației. Mai simplu spus, este posibil să specificați timpul de afișare al fiecărui cadru individual. De exemplu, puteți seta primul cadru al unei animații să dureze o secundă, iar al doilea cadru să dureze cinci secunde.

Acest lucru este foarte util atunci când trebuie să întârziați mai mult un anumit cadru, de exemplu, cu text, fără a crește greutatea fișierului gif. De obicei, o simplă imagine animată poate avea până la 10 cadre în total, de obicei aproximativ 4-6.

Prin setarea timpului diferitelor cadre, o animație cu 4 cadre poate dura oriunde de la o fracțiune de secundă la un minut sau mai mult. Dar trebuie avut în vedere că trebuie evitate și animațiile prea lungi - animația nu este un clip video, unele browsere nu așteaptă sfârșitul animației și încep să o redea de la început, cu imaginea gif pierdută instantaneu din ecran.

De asemenea, trebuie să acordați atenție faptului că calitatea și redarea culorii unui desen în formatul de animație gif este de obicei vizibil mai scăzută decât în ​​formatul jpg sau similar, acest lucru
particularitate.

De asemenea, animația nu ar trebui să fie făcută la rezoluție înaltă, acest lucru va cauza încărcare suplimentară pe browsere sau telefoane și, cel mai probabil, va încetini pur și simplu viteza de redare. În funcție de scopul animației, rezoluția recomandată poate fi de până la 100 - 150 de pixeli în lățime sau înălțime. Mai mult, cu cât înălțimea animației este mai mică, cu atât lățimea acesteia poate fi mai mare și invers. De exemplu, o rezoluție de cadru de 400X50 pixeli este o rezoluție acceptabilă, dar 400X150 este deja prea mult și este potrivit doar pentru scopuri speciale.

Dar, totuși, cel mai important lucru la care trebuie să acordați atenție atunci când creați animație gif este greutatea acesteia. Pentru uz general pe paginile de Internet sau pe dispozitive, dimensiunea animației nu trebuie să depășească 400KB. Acesta este maximul.

Recomandări generale în parametrii animației gif în scopuri generale (avatare, userbars, semnături etc.)

Greutate- nu mai mult de 400 KB, mai bine de 150 KB - 200 KB.
Permisiune— în total nu mai mult de 30.000 de pixeli (cantitatea este înălțimea înmulțită cu lățimea, de exemplu, 400X50 = 20.000).
Timp de redare complet- nu mai mult de 15 secunde.
Numărul de cadre poate fi orice, atâta timp cât greutatea fișierului gif sau timpul de animație nu depășește recomandările de mai sus, de obicei cu cât este mai mic, cu atât mai bine.
Numărul de cadre pe secundă- nu mai mult de 30, in functie de necesitate.

Creați animație Photoshop.

Photoshop poate crea animații numai începând cu versiunea CS3. Pentru a crea un fișier animat, trebuie fie să pregătiți imaginile necesare în avans, fie să creați imagini direct folosind Photoshop.

În exemplul nostru, folosim toate opțiunile simultan. Vom face o animație pentru semnătura „Avatar”.

Opțiune gata:

Creare:

Mai întâi, să găsim imaginile sursă pentru crearea animației:

Acum să creăm un fișier nou în Photoshop. Specificăm lățimea ca 400, înălțimea ca 50. Modul de culoare – 8 biți.

Acum să activăm fereastra „Animation”. Fereastra > Animație. O zonă specială pentru lucrul cu animația va apărea în partea de jos.

Afișează toate cadrele care sunt în animație în secvență. Până acum există un singur cadru, durata 0 secunde, dar putem adăuga oricând altele noi. Cadrele pot fi oricând rearanjate până când imaginea este salvată în format gif.

Fiecare cadru afișează straturile vizibile pentru el. În modul animație, pentru fiecare cadru sunt stabilite condiții separate pentru vizibilitatea stratului sau a celorlalte caracteristici ale acestuia, transparență, contur, culoare etc.

Vă rugăm să rețineți că caracteristicile stratului pentru primul cadru se aplică tuturor cadrelor de animație. Aceasta înseamnă că, de exemplu, dacă schimbați culoarea textului pentru cel de-al zecelea cadru al animației, aceasta se va schimba numai pe al zecelea cadru, iar dacă este pe primul, atunci pe toate cadrele animației simultan.

Umpleți pânza cu culoare. Selectați Instrumentul de umplere (implicit, litera G) și culoarea #3a55a4 și umpleți pânza.

Să adăugăm imaginile originale pe pânză (Fișier > Locați sau pur și simplu le puteți trage din dosar) și le modificați dimensiunea.

Când adăugați imagini noi pe pânză, acestea formează un nou strat. Aceste straturi le vom lucra în procesul de creare a animației.

Nu uitați să vă salvați periodic munca pentru a nu pierde modificările pe care le-ați făcut. Puteți salva fișierul de lucru Photoshop în format PSD. (implicit).

Mai întâi trebuie să creați aspectul imaginii și primul cadru. Este important de reținut că browserele sau dispozitivele care nu vor putea reda animația o vor face
arată doar primul său cadru. Prin urmare, primul cadru al animației ar trebui să reflecte întreaga sa esență.

Afișați și mutați stratul animatsiya1 la marginea stângă a pânzei. Pentru a face acest lucru, selectați stratul dorit (animatsiya1), apoi: Editare > transformare > răsturnare orizontală. Apoi vom muta doar stratul.

Pe primul cadru, nu avem nevoie de stratul animatsiya2, așa că trebuie să-l ascundem. Dacă ascundeți un strat, acesta nu va apărea în cadrul selectat. Să adăugăm ceva text (litera T). De asemenea, trebuie să schimbați culoarea textului, de exemplu, în alb, altfel se va îmbina complet cu fundalul.

Textul este, de asemenea, un strat separat. Primul cadru al animației este gata. Să creăm un al doilea cadru. Mai precis, să creăm o copie a primului cadru. Pentru a face acest lucru, faceți clic pe semnul frunzei din zona de animație.

Al doilea cadru este selectat automat, dar putem selecta orice cadru cu care dorim să lucrăm.

Pentru al doilea cadru, vom ascunde primul strat animatsiya1 și vom face vizibil stratul animatsiya2. De asemenea, aplicați un efect stratului de text și revopsiți-l într-o culoare diferită. Faceți dublu clic pe stratul „AVATAR”, Stiluri > Suprapunere culori și faceți clic pe caseta mică cu culoarea. Să setăm culoarea #8fbeff.

Drept urmare, așa arată acum al doilea cadru.

Deși Photoshop nu creează animație în sine, poate crea cadre intermediare. Să adăugăm 5 cadre intermediare între cele două ale noastre. Pentru a face acest lucru, trebuie să selectați „Creați cadre intermediare”, în partea stângă a butonului „Duplicare cadru” din zona de animație. Dar mai întâi trebuie să selectați două cadre, între care vor fi create cadre intermediare. Puteți selecta mai multe cadre simultan ținând apăsată tasta Shift.

Să adăugăm 5 cadre.

Acum, panglica de cadre de animație este formată din 7 cadre. Cadrele intermediare oferă tranziție lină de la un cadru la altul.

Trebuie să setați timpul de afișare a cadrului. Acum toate cadrele nu au timp de afișare - 0 secunde.

Timpul de afișare a cadrelor poate fi setat în bloc - atunci când selectați mai multe cadre, sau separat pentru fiecare. Să setăm timpul de afișare de la cadrele de la 1 la 6 la 0,1 secunde și de la cadrele de la 7 la 1 secundă. Pentru a face acest lucru, faceți clic pe săgeata de lângă timpul de afișare a cadrului.

Gata! Panglica de cadre de animație este gata. Poate fi vizualizat direct în Photoshop făcând clic pe săgeata Redare din zona de animație.

Formatul trebuie setat la Gif. Toate celelalte setări afectează calitatea animației gif și greutatea sa inițială. Dacă animația se dovedește a fi prea grea, puteți reduce numărul de culori la 128, de exemplu, sau puteți optimiza imediat animația pentru dimensiunea dorită a fișierului. Pentru a face acest lucru, faceți clic pe pictograma cu trei bare din dreapta sus, selectați „optimizare după dimensiunea fișierului” și introduceți greutatea inițială. Animația în sine este optimizată pentru greutatea necesară cu o pierdere minimă posibilă de calitate.

Desigur, acesta este un exemplu foarte simplu de creare a unei animații gif în Photoshop, dar arată elementele de bază ale modului în care este creată animația. Prin experimentare, puteți realiza animații mai bune, mai detaliate și frumoase, dar principiul creării lor este același.

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 document nou (Ctrl + N) cu dimensiunile fișierului de 800 x 500 pixeli. Umpleți fundalul cu orice culoare doriți. Acum să trecem la meniu Straturi- Stilstrat- Suprapuneregradient(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 Umple(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 Saturaţie(Saturație) 100%: Schimbați modul de amestecare al acestui strat la lumină moale(Lumina moale).

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 (Umple) 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 interioară)

Strălucire interioară(Strălucire interioară)

Suprapunere de culoare(Suprapunere de culoare)

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

Umbră(Umbră)

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 interioară)

Strălucire interioară(Strălucire interioară)

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ă cronologie 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 pete luminoase de-a lungul traiectoriei mișcării lor față de conturul literei.

Pasul 12

Asa va arata pozitia de pornire punct luminos 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.

Pentru a face animație, nu trebuie să aveți cunoștințe fenomenale, trebuie doar să obțineți instrumentul potrivit și să îl utilizați corect. Există destul de multe astfel de soluții, dar cea mai cunoscută dintre ele este Adobe Photoshop. Acest articol vă va arăta cum puteți crea rapid animație în el.

Dacă Photoshop nu este pe computer, descărcați-l din linkul de mai sus, apoi instalați-l urmând instrucțiunile din acest articol și lansați-l.

Etapa 1: Pregătirea pânzei și a straturilor

Acum puteți desena pe ele ceea ce va fi afișat în animație. În nostru exemplu simplu acesta va fi un pătrat în mișcare. Pe fiecare strat se mișcă câțiva pixeli spre dreapta.

Pasul 2: Lucrul cu cronologia

Toate! Animația este gata. Puteți vizualiza rezultatul făcând clic pe butonul „Începe redarea animației”. Și după aceea îl puteți salva în format GIF.

În acest mod simplu, dar dovedit, am reușit să facem o animație GIF în Photoshop. Desigur, poate fi îmbunătățit semnificativ prin reducerea timpului de cadre, adăugând mai multe cadre și, bineînțeles, în loc de a crea un pătrat negru, creând ceva mai original și mai bun calitativ. Dar depinde de preferințele, dorințele și aptitudinile tale.