Cum să faci un cinemagraph în Photoshop

Publicat: 2018-02-07

Cinemagraphs sunt una dintre tendințele mele preferate de design de câțiva ani. Sunt o combinație uimitoare între fotografie și video, rezultând o piesă de artă elegantă pentru site-ul dvs., care adaugă doar un indiciu de mister.

Există, de asemenea, un motiv practic cheie pentru care cinemagrafele sunt grozave: dimensiunea lor mică a fișierului. Este mult mai ușor să adăugați mici momente de mișcare pe site-ul dvs., spre deosebire de un întreg fișier video! Dar dincolo de logistică, există un ultim motiv pentru care cinemagrafele sunt atât de magice: sunt de fapt mult mai ușor de creat decât ai crede!

Notă: Acest tutorial face parte din cursul nostru 2019 Design Trends! Când vă înregistrați, veți obține acces exclusiv la un șablon Photoshop personalizat și un fișier video cu care să experimentați, plus un tutorial specific despre cum să utilizați fișierul! Faceți clic aici pentru a trece direct la înregistrare (sau obțineți acces la tutorial dacă v-ați alăturat deja!)

Ești gata să începi? Trageți-vă scaunul, deschideți Photoshop și urmați acești șapte pași simpli pentru a vă crea propriul cinemagraph!

1. Alegeți fișierul video

Pentru a realiza un cinemagraph, veți începe cu un fișier video de bază. În mod ideal, ați filma singur videoclipul, astfel încât să poată fi specific companiei dvs. și să se potrivească perfect cu marca dvs., dar dacă doar experimentați, descărcarea unui videoclip stoc va funcționa foarte bine!

Pentru acest tutorial, folosesc un videoclip pe care l-am filmat în interiorul unui tur Jenga pe un fundal albastru simplu. (Veți primi același fișier dacă vă înscrieți la cursul Design Trends!)

layout de flywheel cinemagraph photoshop cum să tutorial man shaking jenga tower

Când alegeți videoclipul perfect pentru cinemagraf, există câteva lucruri de care veți dori să rețineți:

  • Camera trebuie să stea nemișcată tot timpul. Dacă filmați singur videoclipul, scoateți vechiul trepied pentru a menține lucrurile cât mai stabile posibil. Dacă căutați opțiuni pe acțiuni, căutați cât mai puțină mișcare!
  • Mișcarea pe care doriți să o păstrați ar trebui să fie ușor de izolat. Dacă obiectele se încrucișează unul în fața celuilalt sau se mișcă pe tot ecranul, va fi mai greu să izolați mișcarea pe care o doriți cu adevărat, păstrând fundalul nemișcat.
  • Videoclipul ar trebui să fie difuzat în buclă . Pentru a păstra cinemagraph-ul atemporal, va trebui să facă buclă. În timp ce Photoshop poate ajuta cu siguranță la netezirea lucrurilor, este cel mai ușor să utilizați un videoclip care se poate bucla cu ușurință sau are un început și un sfârșit reversibile.

Odată ce aveți fișierul video, sunteți gata să îl încărcați în Photoshop.

2. Importați fișierul video

Cu Photoshop tras în sus, mergeți la Fișier > Deschidere . Selectați fișierul și apoi veți vedea videoclipul apărând ca strat. Dacă nu apare automat, asigurați-vă că puteți vedea și cronologia accesând Fereastra > Cronologie .

aspect de cinemagraph cu volantă cum se editează cronologia tutorialului

Veți observa că fișierul video este pus automat într-un grup, „Grupul video 1”. Puteți să-l lăsați acolo, dar dacă vă deranjează doar un singur strat într-un grup, nu ezitați să scoateți stratul video și să ștergeți grupul! Nu este necesar.

3. Curățați cronologia

Redați fișierul video de câteva ori - aveți nevoie de tot? Dacă există filmări suplimentare, fie înainte, fie după secțiunea pe care doriți să se concentreze cinemagraful dvs., continuați și decupați fișierul, astfel încât să nu vă îndepărteze. Puteți face acest lucru făcând clic pe marginea fișierului din Timeline și trăgându-l la marcajul de timp dorit.

Dacă fișierul dvs. video este lung și întâmpinați probleme la vizualizarea întregului lucru sau pentru a ajunge exact la locul dorit, puteți utiliza scara din partea de jos a ferestrei Cronologie pentru a mări și micșora.

Notă: partea din fișier pe care o tăiați va fi în continuare salvată, așa că nu vă faceți griji că pierdeți date aici! Puteți oricând să faceți clic și să trageți marginea înapoi în afară, dacă decideți că mai târziu aveți nevoie de o anumită parte.

aspect de cinemagraph cu volantă cum să curățați cronologia tutorialului

Fișierul meu video original s-a terminat cu turnul Jenga care s-a prăbușit, ceea ce nu ar fi ușor de făcut buclă. Așa că am tăiat acea parte și am tăiat și unele de la început, doar pentru a simplifica timpul cu care lucram!

Odată ce ați terminat de curățat cronologia, este timpul să ascundeți mișcarea pe care nu o doriți.

4. Creați stratul de mascare

Acum veți crea aspectul „fotografie” al cinemagrafului. Întrerupeți videoclipul pe „imaginea” pe care doriți să o creați, apoi selectați întreaga zonă. Copiați și inserați acest lucru într-un nou Layer.

aspect de cinemagraph cu volantă cum se creează un strat de mascare

Dacă apăsați pe play, veți observa că acum nu puteți vedea niciun videoclip, deoarece încă mai târziu este pe partea de sus. Acum este timpul să adăugăm o mască, care ne va permite să alegem exact mișcarea pe care vrem să o arătăm!

Continuați și adăugați o mască de strat, fie din opțiunea din partea de jos a panoului Straturi, fie mergând la Strat> Mască de strat> Dezvăluie tot.

aspect de cinemagraph cu volantă cum să tutorial stratul de mascare

5. Izolați mișcarea

Asigurați-vă că ați selectat Masca de strat (în loc de stratul în sine) și apoi luați Instrumentul Pensule. La fel ca orice mască, perierea cu negru va ascunde masca (dezvăluirea conținutului din stratul de dedesubt), în timp ce peria cu alb va dezvălui masca (ascunderea conținutului din stratul de dedesubt).

Pentru acest exemplu, am vrut ca mișcarea turnului Jenga să se arate în timp ce mâinile rămân statice. Pentru a realiza asta, am vopsit masca în negru deasupra turnului și am lăsat restul alb.

aspect prin cinemagraf cu volantă cum să tutorial izolați mișcarea

Acest lucru vă permite să izolați mișcarea, dezvăluind doar mișcarea pe care doriți să o afișeze cinemagraph-ul dvs., păstrând restul înghețat nemișcat.

6. Exportați ca gif

Odată ce sunteți mulțumit de cinemagraf, este timpul să-l exportați! Pur și simplu accesați Fișier > Export > Salvare pentru web (moștenire) . Există o mulțime de opțiuni cu care puteți experimenta aici, dar cele mai importante două sunt:

  1. Salvați ca gif (situat în partea de sus a casetei de dialog)
  2. Setați opțiunile de buclă la Pentru totdeauna (situat în partea de jos a casetei de dialog)

Există întotdeauna un pic de echilibru între dimensiunea fișierului și calitate, așa că vă recomand cu siguranță să experimentați cu setările pentru a vă asigura că obțineți exact exportul de care aveți nevoie.

layout de flywheel cinemagraph cum să tutorial jenga tower wobbling gif

Si asta e! Tocmai ți-ai creat propriul cinemagraph pentru a-l împărtăși lumii. Cum a iesit? Ne-ar plăcea să știm în comentarii.

Bonus: șablon și video Photoshop gratuit!

Când vă înscrieți la cursul nostru gratuit Tendințe de design 2019, veți avea acces la fișierul video folosit în acest tutorial și un șablon Photoshop personalizat care demonstrează o metodă simplificată de a crea cinemagraphs!

[optin-monster-shortcode id=”gsslnts3izfmmakod6ib”]

Cum se utilizează fișierul Photoshop

Când deschideți acest fișier în Photoshop, veți vedea cinemagraful terminat. Ești binevenit să-l folosești dacă vrei sau poți să te joci pentru a vedea cum am configurat totul!

Începeți prin a demasca toate straturile, cu excepția „Filmare de bază”. Acesta este filmul original cu care am început. Dacă apeși play, vei putea vedea cât de mult se mișcă mâna pentru a agita placa Jenga!

Apoi am adăugat stratul de mascare pentru a izola mișcarea și permiteți-mi să vă spun – alegerea unei forme geometrice ca aceasta deasupra unui fundal solid a făcut procesul de mascare foarte simplu! În funcție de fișierul dvs. video, poate fi necesar să fiți puțin mai exact, dar vă vom lăsa la latitudinea dvs.

Apoi, ne-am hotărât să ne concentrăm doar pe un segment al videoclipului care s-a combinat bine, pentru a crea acel efect atemporal. Totuși, am lăsat tot fișierul acolo, astfel încât să puteți vedea totul!

În sfârșit, am modificat curbele pentru a corecta o parte din culoarea fișierului. Este posibil să fie necesar sau nu să faceți acest lucru, în funcție de videoclipul dvs., dar rețineți: puteți continua editarea odată ce filmul este realizat!

Si asta e! Aveți un cinemagraph care este gata să fie afișat pe site-ul dvs. Spune-ne în comentariile de mai jos: Ce vei crea cu acest trend?


Înscrieți-vă la cursul nostru gratuit de e-mail!

Un curs prin e-mail care include fișiere Photoshop, tutoriale și multă inspirație!

Explorăm cele mai recente și mai mari tendințe în designul site-urilor web cu un curs gratuit prin e-mail – și ești invitat! De la efecte grafice greșite până la aspectul cardurilor cu grilă CSS, ne aprofundăm în tendințele din 2019 pentru a vă împărtăși de ce funcționează și cum le puteți implementa pe propriul site.