GIF animat sau animatie bazata pe GIF in Photoshop CS3 sau CS4

3 comments - This post in english

Formatul Graphics Interchange Format (GIF) este utilizat pentru a stoca imagini digitale de tip matriceal (pixelii din imagine sunt memorati sub forma unei matrice). Inca de cand a fost introdus in 1987, acest format este foarte utilizat in World Wide Web pentru a permite paginilor Web sa contina si sa afiseze imagini. Este un format eficient deoarece:

  • poate stoca culori ce pot fi reprezentate prin valori de maxim 8-bits (calitatea este redusa dar si dimensiunea imaginii);
  • are o rata de compresie buna, reducand dimensiunea imaginii;
  • ofera un raport bun intre calitate si dimensiune fisier;
  • permite stocarea in imagini a zonelor de transparenta;
  • permite realizarea de animatii bazate pe imagini.

Incepand cu 1996, a fost definit un nou format, Portable Network Graphics (PNG) pentru a inlocui formatul GIF,deoarece:

  • exista probleme legale de utilizare a algoritmului de compresie Lempel-Ziv-Welch (LZW) — utilizat de standardul GIF; acest algoritm este patentat de Unisys;
  • asigura un nivel de calitate mai ridicat deoarece implementeaza un algoritm de compresie fara pierdere de informatie;
  • poate conduce la rate de compresie mai mari ca cele obtinute prin GIF
  • poate stoca culori ce pot fi reprezentate prin valori de maxim 24-bits si 48 bits.

Deoarece, formatul PNG nu suporta animatie (doar extensii neoficiale ale standardului PNG), GIF-ul ramane singura optiune cand vine vorba de a include intr-o pagina Web a unei forme simple de animatie (nu Flash sau video). Toate browser-ele moderne sunt capabile sa afiseze si sa interpreteze GIF-uri animate.
GIF-urile animate sunt fisiere cu extensia .gif ce contin mai multe imagini. Imaginile (frame-uri sau cadre) sunt afisate pentru o perioada scurta de timp intr-o secventa (repetitiva sau nu), generand astfel senzatia de animatie. GIF-urile animate reprezinta o alternativa la alte tipuri de animatie, bazata pe Flash, video, Silverlight sau Flex, si permite realizarea unor efecte interesante.

Pentru a raliza un GIF animat in Photoshop CS3 sau CS4:
1. Deschidem o noua imagine si stabilim dimensiunile ei (de exemplu 300 x 300 pixeli) si modul de reprezentare a culorii (pentru GIF-uri,RGB cu maxim 8 bit per culoare). Mai tarziu, dimensiunea GIF-ului poate fi modificata utilizand optiunea Image -> Image size din meniul aplicatiei Photoshop.

Image settings (300 x 300, 8 bit color)

Image settings (300 x 300, 8 bit color)

2. Pentru a gestiona secventa de cadre a animatiei GIF, se deschide editorul Photoshop Animation cu optiunea Window -> Animation. Pentru a realiza un GIF animat, modul de vizualizare a editorului trebuie setat pentru a vizualiza cadre (frame-uri) si nu secvente video (modul timeline) pentru ca dorim sa editam fiecare imagine din animatie; schimbarea modului de vizualizare se realizeaza prin butonul din dreapta-jos al editorului;

Photoshop animation editor

Photoshop animation editor

3. Se editeaza imaginea initiala din animatie utilizand instrumente Photoshop. Implicit, aceasta imagine reprezinta primul cadru. Pentru a separa componentele din imaginea finala se vor utiliza layer-e. Pentru a face un GIF animat de tip badge cu efecte de stralucire:

  • a. Inseram un nou layer (numit Badge) si vom desena o forma simpla utilizand Polygon Tool cu optiunile: se bifeaza Star, se stabileste indentul la 20% si sunt indicate 14 laturi; inainte de a se desena steaua, trebuie selectata culoarea pentru foreground;
Frame 1 - The badge

Frame 1 - The badge

  • b. Daca se doreste desenarea unei stele cu inaltime si latime egala, pe toata suprafata imaginii, se tine apasata tasta Shift, iar forma se deseneaza pornind din centrul imaginii;
  • c. Se insereaza un nou layer si se scrie textul Welcome to pe acesta;
  • d. Se insereaza un nou layer si se scrie textul it&c solutions pe acesta;
  • e. Pentru acest exemplu, vor fi create 4 layer-e (Background care este implicit, Badge si 2 layer-e cutext)

4. Pentru a realiza animatia GIF dorita vom duplica primul cadru din editorul animatiei. Pentru acest exemplu vom avea nevoie de inca 3 cadre.

Photoshop Animation Editor

Photoshop Animation Editor

5. Pentru a modifica fiecare cadru si pentru a genera imagini diferite, putem utiliza nivelul de vizibilitate al layer-ului (se vede sau nu) si putem aplica layer-e de stil sau efect. Trebuie evitate modificarile asupra continutului unui layer deoarece acestea afecteaza toate cadrele din animatie.

Photoshop Layer Visibility

Photoshop Layer Visibility

6. Primul cadru din animatie are urmatoarele setari si efecte:
a. Layer-ul Badge este vizibil
b. Layer-ul cu textul Welcome to NU este vizibil
c. Layer-ul cu textul it&c solutions NU este vizibil

Frame 1 - The badge

Frame 1 - The badge

7. Al doilea cadru din animatie are urmatoarele setari si efecte:
a. Layer-ul Badge layer este vizibil
b. Layer-ul cu textul Welcome to este vizibil
c. Layer-ul cu textul it&c solutions NU este vizibil
d. Layer-ul numit Badge are aplicat un efect de tip Stroke cu setarile size:1px si culoare: rosu

Frame 2

Frame 2

Stroke Effect in Photoshop

Stroke Effect in Photoshop

8. Al treilea cadru din animatie are urmatoarele setari si efecte:
a. Layer-ul Badge layer este vizibil
b. Layer-ul cu textul Welcome to NU este vizibil
c. Layer-ul cu textul it&c solutions este vizibil
d. Layer-ul numit Badge are aplicat un efect de tip Stroke cu setarile size:3px si culoare: rosu

Frame 3

Frame 3

9. Al patrulea cadru din animatie are urmatoarele setari si efecte:
a. Layer-ul Badge layer este vizibil
b. Layer-ul cu textul Welcome to NU este vizibil
c. Layer-ul cu textul it&c solutions este vizibil
d. Layer-ul numit Badge are aplicat un efect de tip Stroke cu setarile size:5px si culoare: rosu
e. Layer-ul cu textul it&c solutions are aplicat un efect de tip Stroke cu setarile size:3px si culoare: rosu

Frame 4

Frame 4

10. In fereastra de editare a animatiei se fac setarile:

  • Animatia este pusa sa ruleze fara oprire (loop forever)
  • Fiecare cadru este afisat pentru 0.2 sau 0.3 secunde
Photoshop Animation Editor

Photoshop Animation Editor

11. Pentru a genera un background transparent (GIF-ul animat se va integra mai bine in pagina Web) vom sterge layer-ul numit Background;

12. Pentru a salva acest proiect sub forma unui GIF animat,se foloseste optiunea File -> Save for Web and Devices din meniul aplicatiei Photoshop.

13. Animatia GIF din fisierul cu extensia .gif este vizualizata cu un browser (drag & drop la fisier intr-un browser) sau este inclusa intr-o pagina HTML.

Animated Gif

Animated Gif

,


  1. #1 by online on December 18th, 2009

    mul?umiri foarte interesant,

  2. #2 by Mihai on December 22nd, 2010

    Foarte neclare aceste instructiuni, in primul rand atunci cand ati scris ca s-au aplicat efecte de tip stroke nu ati precizat de unde le-ati luat ceea ce pentru un incepator este foarte greu sa le gaseasca. In al doilea rand, in poza unde se precizeaza cati biti trebuie sa contina imaginea, sunt selectati 32 de biti ceea ce va face imposibila salvarea in format gif, si desi este scris ar fi bine sa apara si in poza la fel.

    • #3 by catalin.boja on December 22nd, 2010

      Salut,

      Multumesc pentru observatii. Am tinut cont de ele si am actualizat post-ul astfel incat imaginea cu setarile pentru Bitmap sa indice un Bit depth de 8 biti. La aplicarea efectului de tip Stroke am adaugat o poza care sa indice de unde se acceseaza efectele pentru layer.

(will not be published)

  1. No trackbacks yet.