Predstavljanje grafike

Kao što znamo, slika koju vidimo na monitoru sastoji se iz velikog broja tačaka (piksela). Što tačkica ima više, one su manje i slika izgleda prirodnije.

Na uvećanom detalju ove fotografije vidimo da se ona u stvari sastoji iz velikog broja tačkica, od kojih je jedna izdvojena za primer – njena boja dobijena je kao RGB kombinacija (149, 166, 167)

Svaka tačka ima svoju boju. Za prikaz na ekranu koristi se trobojni (RGB – Red-Green-Blue) kolorni sistem. To znači da se svaka boja formira kao kombinacija tri osnovne boje – crvene, zelene i plave. Ako su sve tri komponente na minimumu, u pitanju je crna boja, sve tri komponente na maksimumu daju belu boju, pojačane crvena i zelena daju žutu boju, itd.

RGB sistem boja

Pogledajte kako funkcioniše RGB sistem boja sledećem interaktivnom prikazu:

Svaka komponenta (crvena, zelena i plava) predstavljena je kao "osa" ovog našeg koordinatnog sistema. Tako smo definisali RGB prostor, predstavljen kao 3D model - što bi rekli, to je jedna "kocka". Bilo koje mesto u RGB prostoru (unutar velike šarene kocke) je u stvari zasebna boja! Evo kako možete da istražujete:

Vidimo da je trenutna "kombinacija" predstavljena markerom u obliku kockice, koja se nalazi u preseku tri linije, odnosno u uglu providne kocke (tačnije kvadra), čije dimenzije (stranice) zavise od toga koliki su nivoi crvene, zelene i plave komponente. Primećujete da što je ovaj oblik sličniji "kocki" tj. što su RGB komponente ujednačenije, boja je "sivlja".

Takođe, primećujete da ako je kocka "veća", odnosno ako je marker udaljeniji od centra koordinatnog sistema, boja je svetlija i obrnuto. Dakle, tamnije nijanse imaju niže nivoe RGB komponenti, dok svetlije imamju više nivoe. Ekstremi su naravno crna boja gde su sve tri komponente na nuli i bela boja, gde su sve tri komponente na maksimumu.

Sa desne strane vidite rezultat, odnosno kako izgleda dobijena boja, kao i njene kodove (u skraćenom i punom heksadekadnom obliku, kao RGB i RGBA kombinacije i kao HSL i HSLA kombinacije). Upravo ovakve kodove za boju koriste web dizajneri kada prave Internet sajtove.

RGB sistem za prikaz boja na ekranu je osmobitni, što podrazumeva da je za svaku od tri komponente odvojeno po 8 bitova, odnosno 1 bajt. Najmanja vrednost koja se može smestiti u jedan bajt je 0, a najveća 255 (odnosno FF heksadekadno), što znači da je za prikaz jedne tačkice potrebno izdvojiti 3 bajta. Na taj način se boja svakog piksela kodira u brojeve, pa se tako i slika na računaru jednostavno beleži kao niz bajtova. Inače, maksimalan broj različitih boja, odnosno kombinacija komponenti koji je moguć, iznosi 256 * 256 * 256, odnosno otprilike 16,7 miliona boja – takozvani true color.

Programi za grafiku obično nude izbor nekoliko različitih kolornih sistema (engl. colorspace) za kreiranje slike (RGBA, RGB-16, HSV, HSL, CMYK, LAB...), ali treba da znamo da se, bez obzira na to, slika za prikaz na ekranu uvek pretvara u RGB. Inače, ove druge sisteme boja koriste grafički profesionalci ili programeri za posebne namene (priprema za štampu, teksture za igre, optičko prepoznavanje i sl.)

HSL sistem boja

Većini ljudi koji danas koriste računare nije lako da se snađu u RGB sistemu boja i njegovim kombinacijama. Taj sistem boja je prilično "tehnički" i prilagođen je računaru, a ne ljudima. Zbog toga su stvoreni i neki drugi sistemi boja, namenjeni dizajnerima, umetnicima, fotografima... Ovi drugi sistemi su mnogo "intuitivniji", odnosno bliži našem načinu razmišljanja i načinu na koji shvatamo boje.

Jedan od njih je i HSL kolorni sistem. Ovaj sistem boja je mnogo lakše objasniti običnom čoveku koji ne želi da se petlja u razne RGB bajtove. U svakom (pa i ovom) sistemu, boja se dobija kao kombinacija komponenti, s tim što su to sada nijansa, zasićenost i svetlina (engl. Hue, Saturation, Lightness). Pogledajte primer:

Sa leve strane se nalazi "traka" sa svim mogućim bojama spektra. Ovo predstavlja Hue komponentu, odnosno nijansu boje. Kliknite na traku da biste podesili položaj markera i tako izabrali neku boju.

Odmah pored se nalazi površina gde se zadata boja "nijansira" po zasićenosti. Vidimo da počinje od sive, odnosno potpunog nedostatka boje sa leve strane. Kako se zasićenost pojačava, stižemo do "najdrečavije" nijanse sa desne strane. Znači po horizontali se menja tzv. Saturation komponenta.

Takođe možemo videti da "naviše" boja postaje sve svetlija (dodavanje bele), a naniže sve "tamnija" (dodavanje crne), dok je pri sredini boja "najčistija". Znači po vertikali se menja svetlina boje, odnosno Lightness komponenta.

I na ovoj površini možete bilo gde kliknuti mišem kako biste markerom obeležili željenu nijansu. Takođe, pomeranje točkića miša definiše poluprovidnost. Tako dolazimo do HSLA kolornog sistema koji osim pomenute tri komponente uključuje i tzv. alfa kanal (nivo transparencije).

Kao što vidite, mnogo nam je lakše da u glavi zamislimo boju ako kažemo da je u pitanju "žuto-zelena nijansa, zasićenosti od 90% i svetline 30%", nego npr. boju za koju kažemo da u njoj "crvena učestvuje sa 55%, zelena sa 65%, a plava sa 5%" (osim ako ste programer).

Ipak, ne zaboravite - kako god da se boje kroz razne softvere predstavljaju korisnicima, na kraju se svaka slika "preračunava" u RGB bajtove.

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.