Cum se creează un GIF animat sau un clip de film

Urmând linia săptămânilor precedente, în care, pe de o parte, v-am spus că browserele nu mai acceptă fișiere Flash și, pe de altă parte, v-am învățat cum să creați animații în HTML5 ca alternativă. Astăzi vreau să vă explic o altă posibilitate pe care o puteți accesa dacă doriți pregătește bannere sau orice îndemn la acțiune al site-ului tău în mișcare.

Este vorba despre GIF-uri animate. Am făcut deja referire la ele în articolul în care vorbeam despre cum să optimizezi imaginile de pe site-ul tău, dar această postare va fi mult mai exhaustivă, nu o să-ți spun doar ce sunt și ce avantaje au, dar deasemenea ce instrumente puteți utiliza pentru a le crea și cum.

Index de conținut

Ce este un GIF animat?

Ca întotdeauna, vă las definiția pe care ne-o dă Wikipedia: „este un format grafic utilizat pe scară largă pe World Wide Web, atât pentru imagini, cât și pentru animații”. În propriile mele cuvinte, vă voi spune că este un tip de fișier care vă permite din mai multe imagini creați o singură imagine în mișcare.

Pentru ce pot folosi un GIF animat?

• Pentru a atrage mai ușor atenția utilizatorilor/clienților mei
• Pentru a explica modul în care funcționează un produs
• Pentru a crea îndemnuri
• Pentru campaniile promoționale (de exemplu, evidențierea unei reduceri)
• Pentru a crea tutoriale
• Pentru a arăta diferitele culori ale aceluiași produs
• Pentru campaniile de marketing prin e-mail (de exemplu, notificarea unui eveniment viitor)
• Pentru a vă conecta cu comunitatea dvs. pe social media
• Și un lung etc.

Spune-mi, pentru ce l-ai folosit?

Nu uita că ...

• Nu trebuie să le abuzați, deoarece acestea se pot satura
• Trebuie să fiți atenți la greutatea sa, dacă este excesiv, vă va încetini site-ul
• Trebuie să fii atent cu viteza (nici prea rapidă, nici prea lentă)
• Nu ar trebui să fie excesiv de lungi

Cum creez un GIF animat în Photoshop?

În continuare vă voi explica pas cu pas cum să creați clipul dvs. de film din Photoshop (Eu folosesc versiunea CS4, dar instrucțiunile sunt aceleași dacă utilizați CS5 sau CC). Împreună cu instrucțiunile veți găsi un infografic pe care vă recomand să îl examinați, deoarece vă va ușura înțelegerea.

Dacă nu sunteți utilizator Photoshop, nu vă faceți griji, dacă mergeți la următoarea secțiune veți vedea că listez alte instrumente din care vă puteți pregăti și GIF-ul animat.

1. Mai întâi trebuie creați un fișier nou, pentru aceasta trebuie să intrați în Photoshop, faceți clic pe Fișier în meniul superior și apoi pe Nou.

2. Apoi, va apărea un ecran în care trebuie să completați următoarele câmpuri:

• Nume: Cel care vă identifică documentul
• Latime inaltime: Introduceți dimensiunea fișierului (aveți grijă cu unitatea de măsură, cel mai bine este să utilizați pixeli)
• Rezoluţie: 72 pixeli/inch
• Modul color: RGB (Rețineți că CMYK este pentru documentele tipărite)
• Conținut de fundal: Transparent (Veți avea timp să colorați fundalul mai târziu din straturi)

3. Odată ce documentul dvs. este creat, primul lucru pe care trebuie să-l faceți (dacă nu îl aveți deja activat) este să accesați meniul superior, faceți clic pe Window și activați panoul Animație (trebuie să vezi o bifă în stânga ta).

4. Veți vedea că în partea de jos a mesei de lucru a cronologie. În partea din dreapta jos veți vedea un simbol dreptunghiular, iar dacă stați pe el veți vedea „Convertiți în animație cadru”, Faceți clic pe el și veți vedea cum se schimbă afișajul, pătratele ca un cadru în loc de linii orizontale.

5. Amintiți-vă! Salvați fișierul ca .psd. În acest fel, veți avea întotdeauna fișierul modificabil, în cazul în care există modificări viitoare.

Ei bine, odată salvat, vine partea creativă. Va trebui să creați diferite straturi (Puteți deschide acest panou din meniul Window → Layers) și includeți în fiecare dintre ele elementele pe care doriți să le faceți parte din animația dvs. (de exemplu, în cazul meu sunt un fundal turcoaz deschis și o pictogramă GIF).

---