Share
Scopul funcției Save for Web din Adobe Illustrator este de a optimiza graficul pentru a fi utilizat pe un site web sau pe alt ecran, cum ar fi un telefon de tabletă. Cuvântul "optimizare" se referă la echilibrul optim între dimensiunea fișierului și calitatea acestuia. Vrem dimensiuni reduse ale fișierelor, astfel încât acestea să se încarce rapid pe o pagină Web, dar nu vrem să le sacrificăm aspectul. Salvare pentru Web vă permite să previzualizați modul în care va apărea o grafică vectorială optimizată, astfel încât să puteți alege cel mai bun compromis.
În acest articol, voi trece peste formatele de fișiere disponibile în Save for Web și vă vom arăta care sunt cele mai potrivite formate pentru diferite tipuri de lucrări de artă.
Accesați Salvați pentru Web dialog în cadrul Fişier meniul. Salvarea pentru Web este aproape o aplicație în sine și fereastra de dialog ocupă cea mai mare parte a ecranului.
Puteți alege să previzualizați operele dvs. de artă în una din cele trei moduri. Puteți să arătați pur și simplu originalul singur. Acest lucru pare mai degrabă inutil, totuși, pentru că probabil veți dori să vedeți cum va arăta graficul odată optimizat. Puteți să vizualizați singur previzualizarea optimizată sau puteți alege 2-Up, care vă va oferi previzualizări side-by-side. Puteți să faceți clic pe oricare din panou pentru a ajusta setările. În imaginea de mai jos, originalul este în partea stângă, iar versiunea optimizată (în acest caz, ca GIF) este în partea dreaptă.
Puteți ajusta mărimea previzualizării în meniul drop-down din stânga jos și puteți utiliza, de asemenea, comenzi rapide de la tastatură precum Comandă / control-0 pentru a se potrivi cu lucrarea din fereastră sau Comandă / control-plus sau minus pentru a mări sau micșora mărirea.
Dând clic pe previzualizare butonul va deschide graficul optimizat în browserul dvs. implicit. Dacă doriți să vedeți cum arată în celelalte browsere, puteți adăuga mai multe făcând clic pe pictograma globului mic de lângă butonul Previzualizare.
Una dintre cele mai importante secțiuni ale interfeței Salvare pentru Web este dimensiunea fișierului. Sub fiecare previzualizare este tipul de fișier și mărimea respectivă. Deci, în imaginea de mai jos, EPS-ul original este pe partea stângă, cu o dimensiune a fișierului de 2.44M. GIF optimizat este în partea dreaptă, cu o dimensiune mult mai mică a fișierului de aproximativ 39K. Din moment ce scopul Save for Web este de a găsi echilibrul ideal între dimensiune și calitate, veți fi uitat la aceste numere de multe ori.
GIF este unul dintre cele mai vechi și mai utilizate formate de pe Web. Este ideal pentru imagini cu zone de culoare plată, ca în acest exemplu. Spațiul de culoare GIF este indexat. Acest lucru vă permite să specificați un număr exact de culori în tabelul de culori, astfel încât să puteți utiliza doar cele de care aveți nevoie, reducând astfel dimensiunea totală a fișierului.
Dialogul Salvare pentru Web are mai multe presetări GIF. Alegeți diferite setări și păstrați-vă o privire asupra imaginii și dimensiunii fișierului rezultat. În imaginea de mai jos, am folosit o presetare care are 128 de culori. După cum puteți vedea, imaginea arată bine și dimensiunea fișierului este de 37.72K.
În următorul exemplu, am ales doar 8 culori. Puteți vedea dimensiunea fișierului acum 23,3K. Este o economie semnificativă, dar imaginea începe să piardă calitatea. Marginile sunt dure, deoarece nu există destule culori pentru a umple tranzițiile dintre fiecare formă. Chiar dacă în ilustrație există doar cinci culori - trei nuanțe de albastru, galben și alb - Illustrator folosește mai multe culori în procesul anti-aliasing, astfel încât marginile și curbele să pară netede.
Culorile GIF pot fi limitate la cele care sunt considerate "Web safe". Aceasta nu este o preocupare în aceste zile, acum că monitoarele pot afișa milioane de culori, dar a existat o vreme în care designerii au fost sfătuiți să utilizeze numai cele 216 de culori care au fost partajate de sistemele Windows și Macintosh. Deci, dacă doriți să vă asigurați că grafica dvs. ar arăta la fel pe fiecare platformă, ați limita culorile acesteia în acea paletă. În exemplul de mai jos, am folosit Paleta Web presetat și puteți vedea cum culoarea albastru deschis a trecut la un albastru verzui.
Un GIF poate fi alb-negru și utilizează ceva numit dithering pentru a simula un ton continuu. Puteți alege diferite metode de dithering, dar toți au o privință decisivă din 1980 față de ei.
GIF-urile acceptă un nivel de transparență. Acest lucru înseamnă că fiecare pixel este fie solid, fie complet transparent - nu ați folosi un GIF pentru o imagine cu o umbră moale sau un gradient transparent.
Lângă caseta de bifare Transparency puteți alege o culoare mată. Acest lucru va adăuga o ușoară contur în jurul imaginii în acea culoare. Deci, dacă plasați GIF pe un fundal colorat, puteți selecta aceeași culoare ca culoarea mată. În acest fel, tranziția dintre grafic și fundal va apărea netedă.
Puteți alege să clipiți imaginea în tabloul de bord, ceea ce va face ca dimensiunile pixelilor ale graficului salvat să fie la fel ca placa grafică Illustrator. Sau puteți alege să lăsați această casetă neschimbată, ceea ce va bloca imaginea la limitele graficului vectorial. Aceasta este setarea pe care o veți folosi probabil de cele mai multe ori, deoarece nu este nevoie de transparență suplimentară în jurul imaginii. Dimensiunea fișierului rezultat va fi și mai mică.
În secțiunea Dimensiune imagine puteți alege să reduceți sau să măriți graficul optimizat. Nomenclatura este un pic ambiguă aici. Nu se referă la mărimea fișierului imaginii în kilobyte, dar dimensiunile pixelilor, exprimate ca lățime și înălțime.
Acesta este locul în care Illustrator are un avantaj față de o aplicație raster sau pixel, cum ar fi Photoshop. Dacă măriți imaginea pentru o ieșire optimizată, Illustrator folosește informațiile vectoriale din fișier pentru extindere, iar graficul rezultat este ascuțit și neted. Dacă utilizați funcția Salvați pentru Web în Photoshop și încercați să măriți o imagine raster, opera de artă extinsă ar părea fuzzy.
Sub câmpurile Dimensiune imagine este un meniu derulant în care puteți selecta metoda de optimizare. Dacă grafica dvs. este greu de text, puteți alege Tip optimizat. În exemplele de mai jos, puteți vedea diferența dintre imaginea optimizată și cea optimizată.
Tabelul de culori conține mărimi pentru fiecare culoare care vor fi incluse în graficul optimizat. Puteți să faceți dublu clic pe un specimen și să schimbați culoarea. Aici am schimbat galbenul la roz. Puteți vedea că modelul este acum pe jumătate galben și jumătate roz în tabelul de culori și când treceți peste el, vârful instrumentului vă oferă defalcarea RGB pentru culoarea originală și cea nouă. Acest lucru ar putea fi util dacă salvați o serie de aceeași imagine și doriți ca un element să fie o culoare diferită în fiecare versiune. Înlocuind culoarea din Salvare pentru Web, nu trebuie să modificați vectorul original.
Sub Tabelul de culori este o serie de pictograme care vă permit să ajustați în continuare culoarea. Când selectați un specimen, puteți să-l faceți transparent, să-l limitați la o culoare sigură pentru Web, să îl blocați sau să îl ștergeți. Un diamant din interiorul unui eșantion de culoare indică o culoare Web sigură și când treceți peste ea, se afișează codul hexazecimal.
Există câteva setări și practici pe care le puteți utiliza cu GIF-urile. De exemplu, puteți alege să intercalați GIF-ul, care va încărca imaginea în mai multe parole într-un browser. Această metodă a fost dezvoltată în zilele în care cei mai mulți oameni aveau conexiuni lente. Un grafic intercalat pare să se încarce mai repede decât de fapt. Nu există prea multe motive să o folosiți astăzi, mai ales cu un fișier relativ mic ca un GIF. Celelalte opțiuni din setările GIF sunt fie foarte specializate, fie oarecum depășite, așa că nu voi mai petrece mai mult timp pe acestea. Să trecem la celelalte formate!
PNG-ul (unii spun "P-N-G" și alții spun "ping") este adesea o alternativă mai bună la GIF. PNG-8 este similar cu GIF prin aceea că folosește 256 de culori, acceptă transparență pe un bit și poate folosi dithering. "8" înseamnă că aceasta este o imagine pe 8 biți. Diferența principală dintre cele două este modul în care comprimă informațiile despre imagine. GIF folosește o metodă "lossy", ceea ce înseamnă că unele date sunt eliminate (sau "pierdute") pentru a obține o dimensiune a fișierului mai mică. Metoda PNG este fără pierderi, dar datorită algoritmului său de comprimare, dimensiunea fișierelor rezultate este adesea semnificativ mai mică decât un GIF. Deci, de ce ați folosi chiar și un GIF, dacă PNG este mai bun? Ei bine, nu toate browserele suportă formatul PNG (mă uit la tine, Internet Explorer 6!). Dar, pe măsură ce mai mulți oameni fac upgrade la browsere mai noi, aceasta nu este o problemă. Deci, mergeți mai departe și încercați PNG-8 pe imagini care în mod normal ar chema un GIF. Majoritatea opțiunilor pentru PNG-8 sunt aceleași ca și cele pentru GIF din secțiunea anterioară.
JPEG a fost inițial dezvoltată pentru a comprima fotografii și, prin urmare, este cea mai potrivită pentru vectorii cu tonuri continue. JPEG-urile sunt de 24 de biți și astfel suportă peste 16 milioane de culori. Compresia JPEG este pierdută și imaginea se va degrada dacă încercați să o comprimați prea mult. În imaginea de mai jos, puteți începe să vedeți "artefacte JPEG blocate", care sunt nedorite. Alegeți o setare de calitate superioară până când obțineți o imagine mai bună cu o dimensiune acceptabilă a fișierului.
Puteți alege să încărcați imaginea în mai multe treceri selectând Progressive (Progresiv) și puteți bloca imaginea pentru a atenua anumite artefacte. Nici una dintre aceste metode nu este ideală și nici necesară. Acestea sunt backbacks la zile de conexiuni dial-up și mașini mai lente.
Ca și în cazul imaginilor GIF și PNG-8, puteți să specificați o dimensiune a pixelilor în câmpul Dimensiune imagine, să selectați metoda de optimizare și să alegeți dacă să clipiți imaginea în tabloul de bord. Nu există o tabelă de culori, deoarece JPEG-urile sunt în modul RGB, nu sunt indexate.
JPEG este potrivit pentru imagini cu ton continuu, dar nu este atât de mare la grafica cu suprafețe mai mari de culoare plată. În exemplul de mai jos, JPEG este în partea dreaptă. Chiar și la cea mai înaltă calitate setare, arată mai rău decât GIF-ul și arată unele artefacte.
PNG-24 este, după cum sugerează și numele, o imagine pe 24 de biți. În unele moduri, acesta combină cele mai bune din ambele lumi ale GIF și JPEG și este un format superior. Ca și JPEG, poate suporta milioane de culori. PNG-24 poate de asemenea să conțină transparență alfa, astfel încât să poată fi utilizat pentru grafica care are margini neclară și umbre transparente. Toate aceste culori și transparență vin cu un preț, totuși, într-o dimensiune mai mare a fișierului. În exemplul de mai jos, puteți vedea că un JPEG salvat pe setarea de înaltă este de aproape 22K, în timp ce PNG este de aproximativ 95K. Dar transparența vă permite să plasați grafica PNG-24 pe un fundal modelat sau texturat. Deci, dacă aveți nevoie de această flexibilitate, PNG-24 este calea de urmat.
Sper că aveți o mai bună înțelegere a formatelor de fișiere din caracteristica Salvare pentru Web a Illustratorului. Fiecare format are avantajele și dezavantajele sale, dar cu unele teste atent, puteți găsi cele mai bune setări pentru opera de artă. Acesta este un instrument puternic și poate face munca dvs. Web mult mai ușor și mai rapid. După ce stabiliți setările ideale pentru imaginile dvs., le puteți salva ca presetări personalizate. Apoi, puteți procesa în întregime dosare întregi pline de imagini similare în cel mai scurt timp.
Grafica grafică în acest articol a fost achiziționată de la GraphicRiver: vectorul Janitor, vectorul de dovleac.
Accentsconagua