Fara introduceri inutile, as dori sa intru direct in problema. O etapa importanta in crearea unui site web este "decuparea" design-ului/layout-ului grafic pentru a putea fi implementat in html/xhtml. In ciuda unor solutii oferite de altii ca fiind cele mai bune, eu recomand cu putere folosirea Slice Tool-ului (acest articol se refera strict la soft-ul Adobe Photoshop, si pot aparea mici neconcordante in functie de versiune).

Avantaje utilizarii Slice Tool-ului:

• slice-urile (decupajele) raman la locul lor dupa ce se salveaza documentul .psd, resalveaza unui slice fiind foarte la indemana
• se pot salva mai multe slice-uri intr-o singura operatie
• se poate denumi fiecare slice cu numele ce urmeaza sa il ia fisierul, nemafiind necesara redenumirea fiecarui fisier salvat in parte
• se poate controla foarte precis lungimea, latimea si pozitia unui slice
• o data ce un slice a fost salvat ca si .jpg de calitate 75, spre exemplu, la o noua deschidere a fisierului .psd se vor tine minte toate setarile cu care s-a salvat slice-ul respectiv, nemaifiind nevoie resetarea parametrilor
• slice-urile se pot suprapune, se pot "scoate in fata" sau "trimite in spate"

CREAREA UNUI DECUPAJ

Un decupaj (slice) se creaza selectand Slice Tool (shortcut K) si facand un chenar (drag-drop). Tinand apasata tasta CTRL, cursorul se va schimba , iar daca se face dublu-click pe un slice, se va deschide fereastra de proprietati a slice-ului selectat.

• este recomandat setarea unui nume pentru a ne scuti de redenumirea decupajelor dupa salvare
• pentru o precizie mai mare, se pot seta coordonatele de pozitionare a slice-ului si anume distantele in pixeli pe orizontala (X) si verticala (Y) fata de punctul din stanga sus al documentului
• deasemenea, se pot seta dimensiunile in pixeli a slice-ului (W-latimea si H-inaltimea)
• se poate seta si o anumita culoare de fundal, daca cea existenta nu este potrivita

SALVAREA DECUPAJELOR

Pentru salvarea unui decupaj, se selecteaza optiunea File->Save for web (shortcut Alt+Shift+Ctrl+S ... necesita putina dexteritate pentru executie cu o singura mana). Se va deschide o fereastra noua in care, tinand apasata tasta Shift, se selecteaza decupajele care dorim sa le salvam. In partea stanga avem diferite optiuni de care ne putem folosi: selectia tipului de fisier in care se vor salva decupajele, calitatea, etc.


In functie de tipul compresiei selectate (gif, jpeg, png) se vor afisa optiuni diferite:


In cazul GIF, se poate alege numarul de culori continute (Colors). In ultimele versiuni ale softului Adobe Photoshop, chiar daca selectam un numar mai mare de culori decat cele efectiv continute, marimea fisierului nu va fi mai mare, asadar putem tine tot timpul acest camp pe valoarea 256 pentru calitate maxima.




In cazul in care avem imagini cu margini semi-transparente, GIF-ul nu va putea reda aceasta semi-transparenta, iar acesti pixelii vor fi salvati ca si culoare mata (implicit alb). Daca imaginea aceasta dorim sa o afisam in site pe un fundal de alta culoare (albastru, spre exemplu), va trebui sa setam campul Matte cu o culoare identica fundalului din site.




Pentru JPEG, cea mai importanta setare este calitatea. Este de preferat ca valorile calitatii sa fie intre 60 si 80. Ochiul uman nu percepe pierderea calitatii peste valoarea 50. Insa intre valoarea 90 si 100, diferenta de calitate este total insesizabila, dar diferenta de marime efectiva a fisierelor este semnificativa (vom exemplifica mai jos).

COLOR TABLE (valabil doar pentru GIF)

In chenarul din stanga jos (Color Table) se pot manipula nuantele continute. Dupa selectia unei nuante, ea se poate seta ca si transparenta (toti pixelii de nuanta respectiva vor fi setati ca si transparenti), poate fi blocata (nu se pot face modificari asupra ei) sau se pot sterge efectiv pixelii de nuanta respectiva.

IMAGE SIZE (valabil pentru orice tip de compresie)

Fereastra Image size ne permite salvarea unui decupaj la alte dimensiuni decat cea reala, direct la export. Se pot introduce noile dimensiuni fie in pixeli, fie in procent din actualele dimensiuni, se poate bifa daca sa se pastreze sau nu proportiile si se poate selecta metoda de redimensionare.

ALEGEREA FORMATUL DE COMPRESIE POTRIVIT

A doua mare problema este formatul cel mai potrivit in care se vor salva decupajele (slice-urile). Unii sunt de parere ca cel mai bun format este JPEG, altii sustin ca GIF-ul este mai potrivit pentru web. Adevarul este bineinteles la mijloc, ca intotdeauna. Exista situatii cand trebuie folosit GIF-ul si alte situatii in care JPEG-ul se preteaza mai bine ... si acest aspect il vom dezbate in continuare.



Formatul GIF (Graphics Interchange Format) este un format tip bitmap pe 8 biti/pixel, foloseste doar 256 culori distincte din intreaga paleta de culori pe 24biti. Din acest motiv el este cel mai bine utilizat la elemente grafice simple, fara multe nuante si tonuri intermediare: logo-uri, iconite, texte, linii, puncte, fundaluri-uri care se extind, etc. Acest format utilizeaza compresia LZW fara pierdere de calitate.



Formatul JPEG (Joint Photographic Experts Group) inglobeaza o metoda de compresie cu pierdere de calitate, indiferent de numarul de nuante si tonuri intermediare continute in imagine. Se preteaza la imagini cu multe tonuri de culoare cum ar fi fotografiile. Pierderea in calitate, intre anumite limite, nu deranjeaza, deoarece ochiul nu percepe lipsa detaliilor pierdute in timpul compresiei.





Sa luam cateva exemple pentru a exemplifica cele spune mai sus. In imagine avem un text cu anti-aliere din 2 culori (plus nuante/tonuri intermediare).

GIF, 256 culori 469 bytes
JPEG, calitate 10 920 bytes
JPEG, calitate 60 1.551 bytes
JPEG, calitate 100 2.664 bytes

Concluzia este evidenta, si anume ... in cazul salvarii unor imagini care contin texte (sau orice alte imagini cu putine nuante/tonuri intermediare cum ar fi iconite, logo-uri, etc), chiar si cu anti-aliere, este de preferat sa se foloseasca formatul GIF, deoarece calitatea este net superioara, iar dimensiunea fisierelor este semnificativ mai mica. Se observa la formatul JPEG de calitate inferioara introducerea unor artefacte datorita compresiei ... ceea ce duce la "inventarea" unor pixeli de nuante diferite fata de cele reale, si care deranjeaza puternic.

Formatul JPEG, incepand cu valoarea 50 la calitatea compresiei, devide suficient de calitativ pentru a nu se observa cu ochiul liber artefactele introduse, insa nu merita sa folosim acest format din cauza dimensiunii mai mari a fisierelor.





Sa luam in continuare cazul unor imagini cu multe nuante/tonuri intermediare, si anume o fotografie:

		GIF, 256 culori 54.713 bytes
		JPEG, calitate 60 19.553 bytes
		JPEG, calitate 100 73.398 bytes
Detalii ale imaginilor de mai sus:

Asa cum era de asteptat, JPEG este formatul preferat in acest caz. Se observa la formatul GIF (in varianta marita) lipsa unor tonuri/nuante datorate limitarii formatului la doar 256 tonuri/nuante, insa la marime 100% nu se observa diferenta intre cele 3 exemple. Formatul JPEG contine vizibil mai multe detalii de culoare. La compresia de calitate 60, in varianta marita, se observa aparitia unor artefacte datorate compresiei, insa ele nu sunt vizibile la scara 1:1. Ca si regula generala la formatul JPEG, de la compresie 90 la 100 diferenta de calitate este foarte mica, insa marimea fisierelor creste considerabil, asadar in nici un caz nu este recomandat pentru web utilizarea unor compresii cu valoare de calitate peste 90. Valorile optime sunt intre 50 si 75, si se alege in asa fel incat sa nu fie vizibile anumite artefacte datorate compresiei cu ochiul liber (in format 1:1, nu marit).

PNG vs. GIF Transparent

Daca trebuie afisata o imagine peste un fundal mat, solutia este GIF, din mai multe motive:

• ocupa mai putin spatiu
• este mai usor interpretata de browser
• orice browser stie sa afiseze formatul GIF
• pentru PNG sunt necesare anumite metode mai "exotice" pentru a convinge Internet Explorer 6 sa le afiseze, metode care ingreuneaza si mai mult parcurgerea si afisarea paginii

Pentru fundaluri cu diferite texturi, depinde foarte mult de imaginea care se suprapune, si de tipul fundalului. Daca diferentele de nuante/tonuri nu sunt foarte mari, si daca se alege o culoare corespunzatoare pentru campul Matte se poate folosi fara probleme formatul GIF. Este de preferat ca pentru Matte sa se ia luminozitatea ce mai scazuta, in sensul ca daca este vorba de un degrade pe fundal, cel mai bine este sa se aleaga un ton mai inchis la culoare, deoarece un contur inchis pe un fundal mai deschis este mai putin evident si se confunda mai bine cu fundalul.



In cazul in care este vorba de imagini cu umbre semi-transparente, care ocupa mult mai mult decat un contur (sau pixeli rezultati din anti-aliere) folosirea formatului GIF este inutila, si trebuie apelat la formatul PNG.