3 moduri de a face capturi de ecran animate GIF de design să funcționeze pentru portofoliul tău

După ce s-a terminat cel mai recent proiect de web design, este timpul să îl arătați și să îl adăugați în portofoliu. Vizitatorii site-ului dvs. (și potențialii clienți!) vor dori să vă vadă lucrarea minunată în acțiune. Imaginile grozave sunt esențiale, iar în spațiul digital, vor exista momente în care doriți să ilustrați funcționalitatea proiectului. Arătarea cu capturi de ecran animate poate fi soluția perfectă.

Sunt sigur că ați văzut capturile de ecran animate simple și interesante care ne arată cum funcționează aplicațiile sau site-urile web. GIF-urile de capturi de ecran oferă utilizatorului o idee mai bună despre cum sunt efectuate anumite sarcini, arătând, de asemenea, ce caracteristici sunt disponibile. Videoclipul este cu siguranță o opțiune și cu siguranță are un loc important pe web. Videoclipurile aprofundate ale produselor sau studiile de caz beneficiază cu siguranță de un format video. Cu toate acestea, o alegere mai simplă, mai conștientă de dimensiunea fișierului, cum ar fi o captură de ecran animată GIF, poate fi exact ceea ce căutați.

De ce sunt importante capturile de ecran animate pentru portofoliul dvs

Indiferent dacă îl pronunți „GIF” sau „JIF”, este important să reții că GIF-urile pot fi mai mult decât doar pisici amuzante și clipuri de film cu un slogan inteligent. GIF-urile animate ale proiectelor dvs. ar trebui să fie atrăgătoare și planificate cu atenție pentru a arăta funcționalitatea designului. Animarea elementelor de interfață este atât un scop funcțional, cât și estetic, așa că un fișier GIF arată acest lucru. Ce zici de a demonstra meniul și opțiunile pe care le prezintă lucrarea ta? Ce zici să arăți cum funcționează scroll? Afișarea funcționalității ajută utilizatorul să vadă în mod clar cum îl poate ajuta aplicația sau site-ul web.

Instrumente pentru crearea GIF-urilor

Nu există o modalitate mai bună de a-ți demonstra munca grea decât cu unul dintre următoarele instrumente pentru a crea GIF-uri. Exemplele de mai jos vor demonstra cum arată atunci când un utilizator atinge o opțiune, vede mai multe detalii și apoi derulează pentru a vedea mai mult conținut.

Notă : Nu vor exista instrucțiuni de design vizual în acest tutorial; aceste sfaturi presupun că site-ul web sau designul aplicației pentru proiectul dvs. de portofoliu este deja realizat.

Cum să creați capturi de ecran GIF animate în Adobe Photoshop

În opinia mea, Adobe Photoshop și Adobe After Effects sunt cele mai bune instrumente pentru această meserie. Ambele permit un control mare asupra produsului final. Personal îmi place Photoshop pentru realizarea de capturi de ecran GIF (și majoritatea designerilor sunt foarte familiarizați cu el), așa că așa va fi construit următorul exemplu. Să începem!

Se afișează funcționalitatea de defilare

Acest design a fost realizat în Adobe XD, dar apoi exportat în Photoshop cu straturi denumite corespunzător. Exemplul are un strat numit „Lista locații MinTour” pentru pagina cu listă, „Listing Sculpture Garden” pentru pagina de detalii, iar partea care iese din vizualizarea inițială de defilare se numește „Debordare listă Sculpture Garden”.

Prima parte

1. Configurare cronologie și lista de locații

Funcția Cronologie este ceea ce vom folosi pentru a crea diferitele ecrane pentru produsul final. Asigurați-vă că panoul Cronologie este deschis accesând Fereastră > Cronologie .

Aici este pagina de listare; utilizatorul începe aici, atinge o locație și va ajunge la pagina de detalii, unde poate derula pentru a vedea mai multe detalii.

Veți vedea că există deja un prim cadru cheie stabilit. Asigurați-vă că sunt afișate straturile corecte, astfel încât vizualizarea corectă să fie afișată în cadrul cheie.

Opțional: dacă doriți să afișați unde atinge utilizatorul, uneori acest lucru este afișat cu un punct. Pentru a face acest lucru, adăugați un cadru suplimentar cu zona de puncte.

2. Detalii individuale ale locației

Capacitatea de a organiza cu straturi este un avantaj imens și vă va ajuta să păstrați totul corect în timp ce vă creați GIF-ul de captură de ecran. Accesați opțiunile din panoul Cronologie și alegeți „Cadru nou”. Același lucru aici – asigurați-vă că straturile corecte sunt ascunse/afișate. Pentru aceasta, aveam nevoie ca lista individuală să fie afișată, astfel încât stratul listei de locații este ascuns.

3. Detaliile individuale ale locației derulează conținut

Pagina individuală de listare pentru Sculpture Garden are mai mult conținut, așa că zona de defilare ar trebui să fie afișată utilizatorului. Acesta a fost pe un strat separat, așa că am creat un nou cadru pentru a afișa acest conținut de overflow.

4. Alegeți durate

Acest lucru poate necesita ceva experimentare, dar alegerea duratei pentru fiecare cadru este importantă. Vrei ca utilizatorul să aibă suficient timp pentru a vedea fiecare cadru, dar, de asemenea, nu ar trebui să aștepte prea mult înainte de a-l vedea pe următorul.

Am introdus valori pentru fiecare cadru, însumând cinci secunde pentru întreaga animație.

5. Previzualizare

Este bine să aruncăm o privire la ce se întâmplă până acum. Există un buton de redare în rândul de jos al panoului Cronologie. Încercați lucrurile și vedeți dacă există ceva care poate fi îmbunătățit.

(Opțional) control de interpolare

Lucrurile sunt ordonate corect, dar par puțin năucitoare. Animațiile capturii de ecran pot fi ajustate pentru a face lucrurile să pară puțin mai fluide. Din opțiunile de cronologie, există o opțiune „Tween”. Pentru a realiza automat o animație lină între cadrul curent și cel anterior, pot fi inserate automat mai multe cadre.

De la listare până la depășirea listei, Tween a fost adăugat pentru a face să pară mai mult o acțiune de defilare. Aceste cadre noi au fost setate să aibă o durată foarte scurtă de 0,05 secunde (defilarea într-o aplicație are loc relativ rapid).

Dacă doriți ca aceasta să continue bucla în Photoshop, asigurați-vă că este selectat „Forever”. Dacă există un număr stabilit de bucle, acea valoare poate fi introdusă.

6. Salvarea GIF-ului de captură de ecran (numai fluxul de ecran)

Dacă doriți să includeți acest lucru doar ca un flux de ecran animat, salvarea va fi ultimul pas. În acest moment, este creată animația capturii de ecran, trebuie doar să fie salvată în formatul GIF corect. Este posibil să fiți obișnuit să salvați o imagine statică, dar salvarea unei secvențe de imagini este diferită. Accesați Fișier > Salvare pentru Web pentru a salva acest fișier GIF.

Aici vei vedea toate setările de care ai nevoie pentru GIF-ul tău. Nu uitați, sunteți limitat la numărul de culori, așa că vom face lucrurile să arate cel mai bine înainte de a le exporta. 256 este cel mai probabil cea mai bună opțiune, deoarece site-urile web și aplicațiile tind să aibă o gamă largă de culori, dar dacă designul dvs. permite acest lucru, puteți simplifica (ceea ce reduce dimensiunea fișierului).

Există, de asemenea, câteva setări „Animation” în colțul din dreapta jos; puteți alege Buclă dacă doriți ca aceasta să fie în buclă pe termen nelimitat. Puteți, de asemenea, bucla de un anumit număr de ori dacă doriți. Salvați-l în locația dorită și este gata de plecare!

Partea a doua: Ecrane stratificate prezentate pe un dispozitiv

Dacă ați decis să continuați, sunt necesari câțiva pași suplimentari pentru a-l suprapune astfel încât să pară mai realist pe telefon. Din panoul Cronologie, alegeți „Aplatizați cadrele în straturi”. Fiecare cadru va fi convertit într-un strat plat, care ajunge să fie 26 de cadre (deci sunt 26 de straturi).

Odată salvată, imaginea telefonului va trebui adăugată la fișier. Pentru a face acest lucru, va trebui făcută o redimensionare a dimensiunii imaginii.

1. Reglați dimensiunea pânzei pentru captura de ecran animată

Imaginea de fundal este de 1300 X 920, așa că dimensiunea pânzei trebuie ajustată pentru a se potrivi exact. Accesați Imagine > Dimensiunea pânzei și introduceți dimensiunile corecte.

2. Pregătește straturile pentru a fi plasate pe ecranul telefonului

Apoi, creați un nou strat pentru imaginea de fundal, astfel încât animația să poată fi stratificată deasupra. Iată unde vor fi utile straturile de cadru „Select All”.

3. Verificați cadrele

Acesta este un moment bun pentru a vă asigura că ramele sunt încă așa cum ați planificat. Dacă redați animația din panoul Cronologie, veți vedea secvența animată.

4. Înclinați ecranele

Este important ca toate straturile ecranului să fie selectate, astfel încât să poată fi deformate simultan pentru a rămâne uniforme. Editare> Transformare> Skew este locul unde se face acest lucru.

Va fi nevoie de puțină experimentare, dar ajustați colțurile astfel încât să se alinieze cu limitele ecranului, dându-i iluzia că ecranul este iluminat cu animația.

5. Ajustări de imagine și salvare a capturii de ecran GIF

Acum este momentul să faceți orice ajustări. Culoarea, contrastul sau orice alte atingeri finale trebuie făcute înainte de salvare. Salvarea animației este aceeași cu ceea ce sa făcut în partea întâi, pasul 6.

În acest exemplu, fundalul a fost desaturat și contrastul a fost crescut pentru a face animația să iasă cu adevărat în evidență. Acum pare să fie pe un dispozitiv real!

Giphy

Dacă Photoshop nu este instrumentul dvs. preferat, există un instrument gratuit și ușor numit Giphy. (Pe lângă utilizarea profesională, puteți face și o mulțime de GIF-uri amuzante!)

Dacă alegeți „Slideshow”, aceasta este o opțiune bună pentru a crea o captură de ecran animată. Pentru a utiliza acest lucru, va trebui să aveți fișiere individuale ale ecranelor salvate. Apoi veți trage și plasa imagini statice și procesul va începe.

Odată ce fișierele sunt încărcate, selectați „Creare Slideshow”. Când s-a terminat de adunat imaginile, puteți descărca fișierul. Este la fel de simplu!

Inregistrează-l

Această aplicație este destul de simplă; înregistrează acțiunea care are loc pe ecranul computerului și încarcă înregistrarea pe site-ul web Recordit.io și creează un link care poate fi partajat, cu opțiunea de a descărca GIF-ul.

Când Recordit a fost instalat pe computer, o pictogramă apare în bara de activități. Când este selectat, puteți trage și selecta zona ecranului pe care doriți să o înregistrați. Acest lucru a fost perfect când am trecut în modul de previzualizare în Adobe XD și am putut folosi un prototip pentru demonstrație.

După ce selectați zona care va fi inclusă, apare un buton de înregistrare. Când apăsați „Înregistrare”, Recordit înregistrează apoi tot ce se întâmplă pe ecran, în limitele pe care le-ați creat. Când ați terminat de înregistrat, alegeți pur și simplu „Oprire”.

Va dura câteva secunde, dar după ce înregistrarea este oprită, va apărea o fereastră pop-up cu un link care vă duce la înregistrare, care este găzduită pe site-ul Recordit.io.

GIF-urile animate ale capturilor de ecran sunt o modalitate excelentă de a arăta fluxul utilizatorilor și modul în care funcționează proiectele dvs. de design. Video-ul are și el locul lui, dar GIF-urile pot fi create foarte rapid și sunt ușor de adăugat în portofoliul tău online.

Fișă de lucru gratuită: publicul țintă și personalitatea clientului

Căutați un ghid care să acționeze care să vă ajute să vă păstrați conținutul accesibil și captivant? Acest PDF interactiv de trei pagini vă va ajuta să vă găsiți publicul, să vă auditați conținutul și să vă creați un plan de joc pentru a vă dezvolta afacerea.

Dacă ți-a plăcut acest articol, s-ar putea să-ți placă și acestea:

• Cum se creează animații SVG cu CSS
• Cum să creezi o galerie video WordPress
• Cum să utilizați link-urile de ignorare pentru a face site-ul dvs. WordPress mai accesibil