WEB dizajn

III nedelja
Boja!

 Web je iv medij
Privlai panju, boje reflektuju naa oseanja.
Znaaj usaglaavanja boja Web prezentacije sa

oseanjima koje treba da proizve.

Boje reflektuju sam cilj Web prezentacije.
Balans boja i raspored strane sa ostalim
elementima radi kreiranje jedistvenog izgleda.

Svetlost
Elektromagnetni spektar predstavlja kolekciju svih

energija organizovanih u razliite kategorije zasnovane

na duini talasa za svaki tip energije.
Svaka forma elektromagnetnog talasa kree se od
jednog mesta ka drugom kao talas.
Elektromagnetni talasi definisani su sa mnogo osobina,
meu koji je i duina talasa.
Frekvencija. Broj talasnih duina koji prou kroz neku
taku u prostoru u toku jedne sekunde naziva se
frekvencija a jedinica je Herz (Hz).

 Razliite frekvencije vidljive svetlosti mi uoavamo

kao boje. Vidljiva svetlost se kree od 430 triliona

Hz, koju vidimo kao crvenu do 750 triliona Hz koju
vidimo kao ljubiastu. Ovaj opseg nazivamo spektar
boja.

Boja
Vidljiva svetlost je svetlost koje ljudsko oko

uoava.
Bela svetlost nije svetlost jedne boje ili
frekvenicje, ve je sastvljena od mnogih
frekvencija boja.
Kominacijom bilo kojih boja u vidljivom spektru
proizvodi svetlost koja je obojena ili bela.

 Crvena, Plava i uta se nazivaju osnovnim bojama

zato to zajedno proizvode belu svetlost. Ovaj model

formiranja boja u fizici se naziva aditivan model
Bela i crna nisu boje .

RGB model

 Standardna rezolucija kod dananih korisnika

Interneta je oko 800x600 pixela.

Piksel, najmanji grafiki element slike,
specifian za bitmap

Vektorska grafika vs Rasterska grafika!

Vektorska Grafika
Vektorska grafika ili geometijsko oblikovanje (eng.

Vector graphics, geometric modeling) je nain

prikazivanja slike pomou geomterijskih oblika kao to
su take, linije krive, a koji su temeljeni na
matematikim jednainama

Prednosti:
Lake se pamte od rasterske,
2D vekotrski prikazi su osnova svakog 3D prikaza
Mogunost pribliavanja (zoom) bez gubitka na kvaliteti
Vektorska grafika je savrena za jednostavne ili sloene crtee koji

ne trebaju biti fotorealistini

PDF, PostScript jezik vektorskog grafikog modela

Rasterska Grafika

Rasterska grafika ili bitmap je

podatak u obliku pravougaone
mree pixela ili obojenih
taaka, na nekom izlaznom
ureaju!
Svaka boja pojedinog piksela je
posebno definisana tako da
RGB slike sadre tri bajta po
svakom pikselu, svaki bajt
sadri jednu posebno
definisanu boju.

Kvalitet jedne rasterske slike odreuje ukupan broj piksela rezolucija

kao i broj vrednosti za svaki pojedinani piksel (dubina boje)

 Rasterska slika se ne moe poveati na veu

rezoluciju bez gubitka kvalitete,

Rasterska grafika je vie praktinija nego
vektorska grafika za fotografe i obine korisnike.

Dubina Boje
Dubina
boje

Verodostojni
Vie nijansi
prikaz

Zahtevniji
memorjski
resusrsi

 Broj moguih nijansi definisan je "dubinom

boje". Standardni stepeni dubine boje su:

16 boja
256 boja
16 bitna boja
24 bitna boja

Rasteski programski paketi

Ability Photopaint , ACD Canvas, Adobe Photoshop,
Alias Sketchbook
CodedColor, Corel Painter, Corel PaintShop Pro,
Corel Photo-Paint
Elgorithms MagicTracer, GraphicConverter,
Macromedia Fireworks
Microsoft Paint, Microsoft Photo Editor, NeoPaint,
NewTek Aura
Project Dogwaffle, PD Pro Digital Painter,
OpenCanvas, Pixel image editor
QFX, Ultimate Paint, WinImages

Tehnike kompresije- saimanja

Bitmap bmp je nesaeta datoteka koja ne koristi

nijednu vrstu saimanja, slike u ovom formatu su

veoma velike,
Jpeg (jpg) format saima sliku i uva njen kvalitet.
blizu stvarnosti.
Slike, da bi se pretvorile u digitalni oblik,
predstavljaju se kao niz bitova, ili bajtova prevode
se u vie manjih delova odreene boje pixel
Broj pixel-a u pojedinoj slici (izmeu ostalog)
odreuje kvalitetu slike, ali direktno utie i na
veliinu datoteke na disku, a i na stvarne dimenzije
(irina i visina slike).

 Prediktivna
Transformirajua
Vektorska
Podpojasna (sub-band)
Wavelet
Segmentirajua
Odsecanje bloka
Fraktalna
Quadtree
Neuronski pristup
3D-DCT
Adaptivna blok kompresija
Varijabilno rezolucijska

 U zavisnosti od grafikog adaptera u raunaru i

mogunosti monitora odreuje se broj boja koje

mogu biti prikazene.
Broj boja u SVGA modu iznosi 16,777,216 boja ili
16.8 miliona boja. Zato to se svaki piksel moe
predstaviti sa 24 bita.

 Broj boja zavisi od broja bita kojom se predstavlja

boja ukoliko je to 24-bitna paleta tzv. true color,

zato to proizvodi 10,000,000 boja koje ljudsko
oko moe da uoi a kod koga se svaka od
primarnih boja crvena, zelena i plava predstavlja sa
8 bita.

24 bitna paleta boja

CMYK model
Meanjem cijana sa utom proizvodi plavu itd.

Poveanjem koliine svake komponente kreemo se

u pravcu crne, dok odsustvo svih komponenata
stvara belu.

 CMYK model koristi se kod tampanje. Meanjem tri

primarne boje cijan, magenta i uta ne proizvodi se puna

crna boja pa je ovom modelu dodata i crna kao etvrta boja.
Npr. da bi dobili ljubiastu uneete 5% cijana, 56%
magente, 0% ute, i 39% crne boje.
Zbog tehnikih razlika u ureajima za predstavljanje boje,
postoje razliito definsani tzv. gamut, tj. opseg boja koje
mogu da se proizvedu na tim ureajima sa obinim
izvoromsvetlosti.
Kod RGB boja gamut iznosi oko 70% svih boja. Kod
CMYK modela gamut je mnogo manji oko 20%.

HSV model
Hue, Saturation, i Value
Munsell Color System
U HSV sistemu svaka boja rastavlja se po tri ose

 Hue - nijansa se moe opisati kao predstavljanje

pozicije boje u toku boja, u kome su osnovne ,

sekundarne boje i njihove kombinacije. To su boje
iz spektra boja kao to su crvena, plava, zelena,
uta itd. - ista dugina boja sa toka boja.
Heksadecimalna vrednost boje na HSV toku boja
predstavlja istu boju u heksadecimalnom formatu
za RGB sistem boja.
Saturation - predstavlja intezitet boje, tj. odnosi se
na dominaciju nijanse u boji takorei zasienost odnos iste boje i bezbojne sive
Value - govori nam koliko e boja biti tamna ili
svetla tj. intezitet osvetljenja tj. ukupna svetlost
boje.

Tople boje - to su boje koje se kreu

od crvno-ljubiaste do ute boje. Ove
boje proizvode odlian kontrast.
Hladne boje - boje od ljubiaste do
zeleno-ute. Ove boje predstavljaju
pravi izbor za naznaivanje teksta.
Komplementarne boje - boje koje su u
direktnoj suprotnosti na toku boja.
Koristiti ih oprezno, poto su u direktnoj
opoziciji, a obezbeuju odlian kontrast.

TOAK BOJA

primer crvena boja je komplement zelenoj na toku boja, itd.

Kada se koriste komplementarne boje i to jedna do druge
ostvaruju se vibracije koje kreiraju odlino oseanje i jako
privlae panju.

 Analogne boje - bilo koja tri uzastopna kolorna

segmenta na toku boja. Ove boje proizvode dovoljno

diferenciranje elemenata a da ne odstupate od unije
elemenata.
Monohromatske boje - Sve varijacije kolornih
segmenata na toku boja. Ove boje moete koristiti bez
ikakvog straha, jer predstavlaju varijaciju jedne boje ali
kontrast je zato slab. One obezbeuju harmoniju zato
to svi elementi imaju neto zajedniko.

 Tradicionalne boje - Bilo koje tri boje koje se

nalaze pod uglom od 120 stepeni, jedna u odnosu

na drugu (Ako je kolorni toak kao sat plava boja
bi bila na 12 sati, zelena bi na 4 i crvena na 8 sati).
Ovakva eme sajtu daju dobar balans boja.

 Drimo se

jedne nijanse boje i koristimo

razliite intezitete boje i osvetljenja, ili,
Koristimo kontrastnu emu, ali pazimo, mnogo
boja stvara konfuziju prilikom itanja.

Psihologija Boja
Uticaj na ljude
Ljudska psiha kroz ljudsku aktivnost
Svetle boje emocije
oko registruje oko 7 miliona boja. Kada se nae

oi kreu od jedne boje do druge, one se

adaptiraju prema promeni boja - vizualni efekat.
Ljudsko oko reaguje na svetlu boju- stimulativno
deluje na oko
Oko registruje prvo utu boju!

 Veliki kontrast izmeu boja zaslepljuje ljudsko

oko -kontraste je teko gledati!!!!!!

Boja stvar Kulture geografska tumaenja
Uzrast
Pol

WEB i boje
HTML elemenati (body,font,hr,table,td,..) sadre

atribut koji se odnosi na boju prikaza elementa

ili pozadine.
Mnogi grafiki programi za obradu slika koriste
RGB paletu boja a veina browsera koristi WEB
paletu od 216 boja tzv. WEB SAFE COLORS.
Sigurna paleta boja kod Web, su boje koje
veina web browsera a i monitora moe da
prikae.

 Boje u HTML se unose kao heksadecimalne

vrednosti kojima prethodi znak #. Prva dva

heksadecimlna broja se odnose na crvenu, druga
dva na zelenu i zadnja dva na plavu (npr. Crvena
boja je #FF0000 ).

Boja Teksta
Crn tekst na beloj pozadini je najbolji izbor.
itljivost teksta.
Naslovi treba da budu kratki i boldovani, italic

tekst izbegavajte to vie moete jer umanjuje

itljivost ak do 40%.
Boja teksta se najee menja kod linkova, kako
bi ih usaglasili sa dizajnom Web prezentacije, ali
se ipak preporuuje korienje standardnog
obleavanja linkova.

Najbolja itljivost za tekst

crni tekst na beloj pozadini
tamno zelen tekst na beloj pozadini
tamno plav tekst na beloj pozadini
bron tekst na beloj pozadini

Najgora itljivost
zelen tekst na crvenoj pozadini
zelen tekst na plavoj pozadini
beli tekst na crnoj pozadini
crven tekst na zelenoj pozadini

Najbolja preglednost
omoguuje atraktivnu panju, ali nikako za
velike delove teksta.
crna na narandastoj
crvena na beloj
tamno plava na utoj
belo na ljubiastoj