www.romver.ru / Полный список статей / Секреты web-графики.

Odnako pri podgotovke izobrajeniy na komp'utere ispol'zuetsa i protivopolojniy sposob sme6ivania — vi4itania (subtractive color). Pri etom proisxodit udalenie iz belogo, sootvetstvenno, negativov vi6enazvannix cvetov — golubogo (Cyan), purpurnogo (Magenta), jeltogo (Yellow) i, dla polu4enia lu46ego kontrasta, negativa belogo — 4ernogo (blaK). V angliyskoy abbreviature — CMYK. Danniy sposob ispol'zuetsa, prejde vsego, dla podgotovki izobrajenia k pe4ati na bumage i v Web prakti4eski ne primenaetsa. Nas je on interesuet postol'ku, poskol'ku on voob6e su6estvuet.

Pri sozdanii izobrajenia na komp'utere ne stol'ko vajno znat', kak polu4aetsa tot ili inoy cvet, skol'ko — kak im upravlat'. Pri vsem mnogoobrazii formatov grafi4eskix faylov, a sootvetstvenno, i cvetovix rejimov, dla podgotovki grafiki v Web ispol'zuutsa ot sili tri-4etire. No prejde 4em rassmatrivat' eti rejimi, neobxodimo opredelit'sa s terminologiey.

Palitra cvetov — srazu voznikaut associacii s masterskoy xudojnika, s mol'bertami i do6e4kami dla sme6ivania cvetov. V nekotorom rode tak ono i est', tol'ko i kisti, i mol'bert, i kraski, i samu masterskuu zamenaet komp'uter. V komp'uternoy grafike palitra (tablica) — pere4en' cvetov, ispol'zuemix v dannom rejime pri rabote s izobrajeniem. Koli4estvo ix v palitre zavisit ot glubini.

Glubina cveta opredelaetsa koli4estvom ispol'zuemix bitov na piksel' (edini4niy element, mojno skazat', "atom" izobrajenia). V principe, glubina cveta, a sootvetstvenno, i koli4estvo cvetov v palitre, mojet bit' skol' ugodno bol'6im. No ne stoit zabivat', 4to "vse xoro6o v meru!". 4elove4eskiy glaz xot' i unikal'niy instrument dla raboti s cvetovoy gammoy, no imeet kone4nuu razre6au6uu sposobnost' (vozmojnost' razli4at') po cvetam. Krome togo, neobxodimo u4itivat' i skorost' obs4eta bol'6ogo ob&ema izobrajenia (a ne govoru o bol'6ix razmerax faylov — ob etom nemnogo pozje) komp'uterom, i vozmojnosti monitora pri bol'6oy glubine cveta. Otsuda prixodim k maksimumu — 24 bita na piksel' (8 bit na kajdiy cvet v RGB) ili 224=16,8 mln. cvetov v palitre. Odnako ne vsegda celesoobrazno ispol'zovat' "polnuu" palitru (true color) pri podgotovke izobrajenia dla Web.

V poslednee vrema bol'6uu popularnost' priobrel daje ne sam retro, skol'ko stilizacia pod retro i kak odno iz napravleniy — ispol'zovanie 4erno-belix izobrajeniy. V nix net neobxodimosti derjat' informaciu obo vsex cvetax, xranitsa li6' informacia ob ottenkax odnogo cveta. Imenno etot princip ispol'zuet rejim gradacii serogo (grayscale), ispol'zuu6iy do 256 ottenkov serogo cveta.

Kak uje otme4alos', ne vsegda celesoobrazno, ispol'zovat' bol'6oe koli4estvo cvetov v izobrajenii. V rejime indeksirovannix cvetov (index color) cveta formiruutsa ne tradicionnim sme6ivaniem trex "4istix" — kajdomu pikselu izobrajenia prisvaivaetsa indeks (otsuda i nazvanie) cveta v palitre. Pri4em koli4estvo ix mojet bit' raznim, no ne bolee 256. Estestvenno, 4em men'6e cvetov v palitre, tem men'6e i ob&em fayla izobrajenia.

Odnako dla polnocvetnix izobrajeniy s plavnimi gradientnimi perexodami neobxodim rejim RGB, dau6iy dostup k upravleniu vsemi cvetami putem zadania odnogo iz 256 ottenkov kajdogo iz trex cvetov. Eto naibolee 4asto ispol'zuemiy rejim raboti podgotovki izobrajeniy.

Pri vsem raznoobrazii izobrajenia v komp'uternoy grafike mojno podelit' na dva bol'6ix klassa: rastrovie i vektornie. Kajdiy iz nix imeet svoi preimu6estva i nedostatki.

Princip postroenia rastrovix izobrajeniy osnovan na kone4nosti razre6au6ey sposobnosti glaza, kogda pri sblijenii dvux to4ek, glaz perestaet ix razli4at'. Vspomnite risunki, sozdavaemie na zare komp'uternix texnologiy s pomo6'u ASCII-simvolov, kotorie mojno bilo rassmotret' tol'ko s nekotorogo rasstoania. Rastrovoe izobrajenie mojno predstavit' kak massiv pikseley, kajdiy iz kotorix imeet svoy cvet. Sootvetstvenno, rastr — predstavlenie izobrajenia (komp'uter peredaet tak lubuu informaciu), virajaas' azikom matematiki, metodom differencirovania (delenia neprerivnosti na elementarnie otrezki). Imenno iz principa predstavlenia rastrovogo izobrajenia i proistekaut ego nedostatki. Tak, dla izobrajenia 300?200 pikseley pri trex baytax na piksel' dla RGB razmer fayla budet 300?200?3=180 Kbayt. Soglasites', ne kajdiy zaxo4et jdat' zagruzki takogo izobrajenia, tem bolee esli ono ne odno. Krome togo, lubaa elementarnaa edinica, bud' to atom v ponimanii drevnix grekov ili piksel' v na6em ponimanii, v principe, nedelima. Otsuda nevozmojnost' mas6tabirovania rastrovogo izobrajenia. Poprobovav uveli4it' takuu kartinku raz etak v 10, edinstvennoe, 4to mojno budet uvidet', — nagromojdenie cvetnix kvadratikov v stile rannego avangarda, ponat' smisl kotorogo mojno budet tol'ko 6agov s pati (vspomnite primer s ASCII-simvolami) i to, esli pozvolit ekran monitora.

Dostoinstva rastra — eto pramoe prodoljenie ego nedostatkov. Tol'ko v nem mojno polu4it' polniy dostup k kajdomu pikselu izobrajenia, izmenit' ego arkost', ton ili nasi6ennost', pomenat' beloe na 4ernoe. Imenno na etom osnovani mnogo4islennie grafi4eskie fil'tri, pozvolau6ie sdelat' izobrajenie razmitim ili, naoborot, bolee rezkim, bolee ili menee kontrastnim, tonirovat'. Rastrovie formati ispol'zuutsa pri skanirovanii i zaxvate izobrajenia s ekrana. Rastrovie grafi4eskie redaktori gorazdo 4a6e ispol'zuutsa dla redaktirovania izobrajeniy, 4em dla ix sozdania, poetomu dovol'no mirno ujivautsa Corel Draw i PhotoShop. E6e kak nemalovajnuu osobennost' nado otmetit', 4to prakti4eski vse grafi4eskie brouzeri ponimaut rastrovie izobrajenia bez podklu4aemix moduley (plug-in). Krome togo, prakti4eski luboy vektorniy risunok bistro i bez iskajeniy mojno perevesti v rastr. Obratnoy je sili etot zakon ne imeet.

Kak integral v matematike avlaetsa obratnoy funkciey differencirovaniu, tak i "vektor", mojno skazat', avlaetsa protivopolojnost'u rastru. Lubuu krivuu, v tom 4isle i zamknutuu, mojno opisat' nekotorim naborom matemati4eskix formul i predstavit' v vide programmnogo koda. Luboe izobrajenie mojno predstavit' kak sovokupnost' figur (zamknutix liniy), okra6ennix v tot ili inoy cvet. Imenno tak mi sozdaem izobrajenia s pomo6'u karanda6ey i kisto4ek, imenno na etom principe postroeni vektornie formati. Eti principi i opredelaut osnovnie dostoinstva "vektora". Otsutstvie neobxodimosti opisivat' kajdiy piksel' pozvolaet zna4itel'no umen'6it' ob&em faylov daje pri dovol'no bol'6ix razmerax izobrajenia. Krome togo, iz matematiki izvestno, 4to pri umnojenii funkcii na postoannoe 4islo (konstantu) forma opisivaemoy eu krivoy ne izmenaetsa. Otsuda mi polu4aem vektornoe izobrajenie kak ideal'niy ob&ekt dla mas6tabirovania. Izobrajenie, uveli4ennoe v desat' raz, budet vigladet' ne xuje originala.

Odnako, polu4iv vozmojnost' upravlat' razmerami, mi teraem gibkost' raboti s cvetom, svoystvennuu rastrovim izobrajeniam. Poetomu vektornie grafi4eskie redaktori ispol'zuutsa dla sozdania izobrajeniy s posleduu6ey ix dovodkoy i nuansirovkoy, pridania im nekotoroy realisti4nosti v rastrovix redaktorax i razme6enia v Internete. Osoboe mesto sredi programm dla raboti s vektornoy grafikoy zanimaut 6riftovie redaktori. V poslednee vrema eto stalo ves'ma aktual'nim v svazi s razvitiem tablic stiley (CSS) i poaviv6eysa vozmojnost'u podgrujat' 6rifti na pol'zovatel'skie ma6ini.

Odnoy iz raznovidnostey vektornoy avlaetsa trexmernaa (3D) grafika. V etix faylax prosto vvoditsa e6e odna koordinata, no pri etom polu4aetsa ne izobrajenie, a celaa scena s bol'6im koli4estvom nuansov, i, sootvetstvenno, bol'6im ob&emom vi4isleniy.

No pri vsem mnogoobrazii grafi4eskix formatov dla predstavlenia izobrajeniy v Web ispol'zuetsa maloe ix koli4estvo. Osnovnim ograni4itelem zdes' vistupaet razmer fayla. A potomu vibor formata pri podgotovke izobrajenia dla Web opredelaetsa optimal'nim sootno6eniem dvux vzaimoisklu4au6ix parametrov: razmerov izobrajenia i ob&ema fayla. Odnako iz teorii veroatnosti izvestno, 4to bol'6instvo sxem predstavlenia informacii obladaut toy ili inoy stepen'u izbito4nosti. K primeru, sostavlaa konspekt na lekciax, mi pol'zuemsa nekoy sistemoy sokra6eniy slov i fraz, ne teraa pri etom smisla soderjania. Etot princip polojen v osnovu bol'6instva sistem sjatia informacii, v tom 4isle i formatov grafi4eskix faylov, ispol'zuemix v Web. Odnako pri odinakovom principe algoritmi ego realizacii razrabativautsa raznimi lud'mi, a potomu imeut ves'ma su6estvennie razli4ia mejdu soboy. Bolee togo, ne stoit zabivat', 4to kajdiy format imeet i drugie osobennosti, poetomu pri ego vibore sleduet u4itivat' prejde vsego ispolnenie risunka.

GIF (Graphics Interchange Format, format vzaimoobmena grafikoy) razrabotan CompuServe Incorporated, poslednaa versia GIF-89a. Pervona4al'no, kak mojno ponat' iz nazvania, etot format razrabativalsa dla pereda4i grafi4eskoy informacii v potoke dannix, a potomu, v otli4ie ot ostal'nix, predstavlaet soboy posledovatel'nuu organizaciu, a ne proizvol'nuu, 4to pozvolaet ispol'zovat' minimum resursov processora pri ego raspakovke. Dla kompressii faylov GIF ispol'zuet LZW-algoritm sjatia, ili, kak ego e6e nazivaut, sjatie bez poter', pri etom on naibolee effektiven pri bol'6ix odnotonnix oblastax s 4etkimi granicami. A tak kak skanirovanie izobrajenia proisxodit po gorizontali, to i sjatie budet bolee effektivno pri bol'6ix gorizontalax takix oblastey. Odnako GIF ne sposoben xranit' neindeksirovannie izobrajenia, to est' mojet otobrajat' ne bolee 256 cvetov. Eta ograni4ennost' formata ne pozvolaet dobit'sa plavnogo perexoda ot odnogo cveta k drugomu, 4to osobenno zametno pri ispol'zovanii gradientov i razmivok. Mojno, kone4no, ispol'zovat' priem "diffuzia", no effekt "zernistosti", polu4aemiy pri etom, vigladit, skoree, kak stilizacia, a potomu ne vsegda opravdan v ob6em kontekste sayta. Krome togo, pri ispol'zovanii diffuzii uveli4ivaetsa neodnorodnost' izobrajenia, 4to vedet k snijeniu effektivnosti kompressii. Obratnoy storonoy ograni4ennosti palitri v GIF mojet slujit' ee gibkost'. Izmenaa razmer tablici, a, sledovatel'no, i koli4estvo cvetov v ney, web-dizayner polu4aet v svoi ruki prekrasniy instrument dla regulirovki sootno6enia ka4estvo izobrajenia / razmer fayla. Tak, umen'6aa v izobrajenii razmerom 100?100 pikseley koli4estvo cvetov s 256 (8 bit na piksel') do 128 (7 bit na piksel'), polu4aem 100?100?8 — 100?100?7 = 10 000 bit ekonomii. E6e odnoy osobennost'u, vvedennoy v poslednuu versiu formata, avlaetsa sozdanie prozra4nix oblastey v izobrajeniax, otkrivau6ee interesnie vozmojnosti v web-dizayne. "Potokovaa" priroda GIF, otnositel'no malie razmeri ego faylov, vozmojnost' kompressii za s4et ispol'zovania prozra4nix oblastey v kadrax sdelali ego prekrasnim instrumentom dla sozdania animacii v Web. Ispol'zovanie GIF celesoobrazno, prejde vsego, dla tak nazivaemix ploskocvetnix izobrajeniy s 4etko obozna4ennimi granicami perexodov mejdu cvetami, a takje malorazmernix izobrajeniy tipa knopok, prev'u6nix kartinok i t. p.

JPEG (Joint Photographic Experts Group). Razrabotan gruppoy ekspertov po fotografii (4to vidno iz nazvania) pod egidoy ISO (Mejdunarodnaa organizacia po standartam). Voob6e etot format dovol'no unikalen tem, 4to ispol'zuet algoritm sjatia, otli4au6iysa ot primenaemix vo vsex ostal'nix grafi4eskix formatax, — sjatie s poterami. Etot algoritm ranee ispol'zovalsa na televidenii v sxeme televizionnoy translacii S6A (NTSC). Osnovan on na vse toy je ograni4ennosti 4elove4eskogo zrenia, nesposobnosti glaza ne zame4at' nekotorie iskajenia v vosstanovlennom izobrajenii. Na segodna etot algoritm avlaetsa odnim iz samix effektivnix (koefficient sjatia dostigaet 1:100), odnako on ne o4en' xoro6o obrabativaet izobrajenia s malim koli4estvom cvetov i rezkimi granicami. Voob6e JPEG mojno nazvat' protivopolojnost'u GIF. On pozvolaet otobrajat' 24-bitnuu palitru, t. e. vse 16,8 mln. cvetov, 4to daet vozmojnost' otobrajat' gradienti s fotografi4eskoy to4nost'u, no pri etom ne mojet imet' prozra4nix oblastey. Odnako etot format tait v sebe odnu osobennost', kotoruu nel'za ne u4itivat'. Pri povtornom soxranenii izobrajenia v JPEG on povtorno zapuskaet algoritm sjatia, estestvenno, s uxud6eniem ka4estva. Poetomu soxranat' izobrajenie v nem sleduet tol'ko posle okon4atel'noy obrabotki.

Oba rastrovix formata, i GIF, i JPEG, podderjivautsa vsemi grafi4eskimi brouzerami "po umol4aniu" i mogut bit' obrabotani v bol'6instve grafi4eskix redaktorov. Vibor mejdu formatami opredelaetsa prejde vsego osobennostami konkretnoy kartinki, i sdelat' ego inogda bivaet vozmojno tol'ko putem eksperimenta.

Odnako i vektornie formati vse 4a6e obra6aut na seba vnimanie web-dizaynerov. V poslednee vrema ves'ma popularnim stal format Shockwave Flash, razrabotanniy firmoy Macromedia. Obladaa takimi preimu6estvami vektornix formatov, kak mas6tabiruemost' i otnositel'no nebol'6oy ob&em fayla, on vse-taki ne avlaetsa 4isto grafi4eskim. Instrumentariy dla risovania v programme Macromedia Flash Direct blije k rastrovim redaktoram, nejeli k vektornim, a sposobnost' sozdavat' animacii, ozvu4ivat' ix, zastavlat' reagirovat' na pereme6enie mi6i i sposobnost' rabotat' s giperssilkami delaut Flash poxojim na mul'timediyniy format. V ka4estve otdel'nix elementov sayta Flash-zastavki ispol'zuutsa v osnovnom kak interaktivnie banneri v nekotorix reklamnix setax. Takogo vida banneram proro4at bol'6oe budu6ee iz-za ix bol'6ey vozmojnosti vliat' na pol'zovateley Seti, nejeli klassi4eskix, vipolnennix v GIF. Odnako gorazdo 4a6e etot format naxodit primenenie dla sozdania celoy stranici ili bol'6ey ee 4asti (klassi4eskim primerom, na moy vzglad, avlaetsa "Disneevskiy" sayt {http://www.disney.com/}).

Kamnem pretknovenia dla Flash avlaetsa nali4ie dopolnitel'nogo modula dla ego prosmotra, kotoriy xot' i rasprostranaetsa besplatno, no pri vese 0,24 M i neobxodimosti zagruzki 4erez Set' mojet otbit' jelanie prosmatrivat' Flash-zastavki. No poavlenie vstroennogo modula uje v 4.5 versii "Kommunikatora" i obe6ania Microsoft sdelat' analogi4noe i v IE 5.0+ mojet vpolne vidvinut' Flash v lideri sredi grafi4eskix formatov dla Internet i neskol'ko izmenit' samo predstavlenie o web-dizayne.

Ne ostalis' zabitimi i trexmernie ob&ekti. Dla ix sozdania v Internete v noabre 1994 goda sostoalas' prezentacia VRML 1.0 (Virtual Reality Modeling Language — azik modelirovania virtual'noy real'nosti). Poslednaa versia VRML 2.0 pozvolaet sozdavat' slojnie virtual'nie miri so zvukovimi effektami. Dla napisania faylov etogo formata mojet bit' dostato4no prostogo tekstovogo redaktora (podobno HTML, oni ne trebuut dal'ney6ey kompilacii), no su6estvuut takje special'nie programmi, pomogau6ie etot process vizualizirovat' i avtomatizirovat'. Krome togo, nekotorie 3D-paketi podderjivaut format VRML 2.0. Dla prosmotra virtual'nix mirov neobxodimi dopolnitel'nie moduli, vklu4ennie v sostav poslednix versiy NC i IE. No pri vsey svoey privlekatel'nosti 3D-miri poka e6e ne na6li 6irokogo primenenia. Osnovnimi nedostatkami avlautsa nevozmojnost' vstraivania takix mirov v HTML-stranicu i, sootvetstvenno, "perepletenie" s ob6im dizaynom sayta, v otli4ie, naprimer, ot Flash. Drugoy nepriatnoy osobennost'u avlaetsa dovol'no bol'6oe koli4estvo vi4islitel'nix resursov komp'utera dla ka4estvennogo renderinga (vizualizacii) trexmernoy sceni.

Govora o grafike v Web, obi4no ne upominaut o 6riftax kak grafi4eskix ob&ektax. Svazano eto prejde vsego s tem, 4to do nedavnego vremeni v HTML-stranicax predpolagalas' ves'ma ograni4ennaa vozmojnost' upravlenia parametrami 6riftov. No uje v specifikacii CSS level2 vvoditsa ponatie vstraivania 6riftov, otkrivau6ee vozmojnost' ispol'zovat' ne tol'ko standartnie. Su6estvuu6ie programmi pozvolaut sozdavat' daje simvol'nie 6rifti, polu4aa vmesto bukv monoxromnie mas6tabiruemie izobrajenia. No i etu ideu ne obo6la "voyna brouzerov". Raznaa realizacia "podgrujaemix" 6riftov v NC i IE, k sojaleniu, ne pozvolaet ispol'zovat' eti vozmojnosti v polnoy mere.

Kone4no, privedennie zdes' rassujdenia ne mogut oxvatit' ves' okean pod nazvaniem "web-grafika". No na4inaa stroit' dom, neobxodimo znat' koe-4to i o kirpi4ax. I a dumau, 4to moy perviy kirpi4 ne budet li6nim pri stroitel'stve va6ego sayta.

web-live.ru/content/5.html