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)

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

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

• 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

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

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

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

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

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

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

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