Transcript Color & Images in Web Design

Color & Images in Web Design
Ngjyrat dhe imazhet në Web
dizajnin
Qëllimet
Në fund të leksionit ju do…




Të kuptoni burimin e ndricimit
Të kuptoni dallimin mes modeleve të
mbledhjes dhe zbritjes së ngjyrave
Të kuptoni si punon”rrota e ngjyrave” (Color
Wheel)
Të kuptoni si paraqiten ngjyrat duke përdorur
konstantat numerike
Qëllimet (vazhdim)



Të kuptoni se si paraqiten imazhet në
kompjuter
Të bëni dallimin mes raster dhe vektor
grafikës
Të kuptoni GIF dhe JPEG skemat për
kompresim
Spektri elektromagnetik


Matja e fotoneve të cilat lëvizin me
shpejtësinë e dritës e që bartin një lloj
energjie
Maten me gjatësi valore dhe frekuencë
Imazhi është marë nga http://imagers.gsfc.nasa.gov/ems/ëaves3.html
Ndricimi që mund të shihet


Paraqitet në një pjesë të vogël të spektrit EM,
diku në mes
Gjatësitë valore janë nga 400nm deri 700nm
Imazhi është marë nga: http://imagers.gsfc.nasa.gov/ems/visible.html
Modeli i mbledhjes së ngjyrave



Përdoret nga
kompjuteri
Kur i shtohet energji
drite ngjyra bëhet
më e shndritshme
Ngjyrat e reja mund
të formohen me
kombinimin e
gjatësive valore
Imazhet nga Patt Ellison
Modeli i zbritjes së ngjyrave



Përdoret në mediumet
për printim
Sa më shumë ngjyrë
që shtohet, ngjyra
bëhet më e errët
Ngjyra (apo Ink)
mund të kuptohet si
një filtër i cili filtron të
gjitha ngjyrat përvec
asaj që perceptohet
dhe e cila reflektohet
Imazhi nga Patt Ellison
Ngjyrat primare




Teknikisht, ngjyrat e pastra primare janë
ngjyrat spketrale të cilat nuk mund të fitohen
me përzierjen e ngjyrave tjera
Një numër i vogël i ngjyrave munden me
kombinimin e tyre të prodhojnë ngjyra të reja
Modeli i mbledhjes së ngjyrave përdor të
kuqen,gjelbërten dhe të kaltërtën si shtesa
primare (Red, Green and Blue -RGB)
Modeli i zbritjes së ngjyrave përdor Cyan,
Magenta, Yellow dhe Black (CYMK) si primare
zbritëse
Modelet e ngjyrave primare
Imazhet e fPat Ellison
Disa terme për ngjyrat



Hue – Lokacioni specifik i spektrit që mund të
shihet
Saturation – Specifikon sasinë (intenzitetin)
e ngjyrës
Value (Brightness) – Specifikon
erësinë/dritën e ngjyrës. Duke shtuar TË
BARDHË një njgyre, prodhohet TINT
(tretje). Me shtimin e TË ZEZËS një ngjyre,
prodhohet SHADE (hija).
Rrota e ngjyrave




Mënyra e zakonshme për të bërë hartën e
ngjyrave është përdorimi i rrotës së ngjyrave
Të gjithë “hue” (lokacionet) pikturohen si një
kënd në rrotë (0° përfaqëson RED dhe 360°
përfaqëson VIOLET)
“Saturation”(intenziteti) dhe vlera
përfaqësohen me përqindje
RED, YELLOW dhe BLUE janë ngjyrat
primare të rrotës së ngjyrave
Prezentimi i ngjyrës
Imazhi nga Pat Ellison
Grupet e ngjyrave në rrotë



Ngjyrat primare – Ngjyrat që smund të
fitohen nga përzierja e ngjyrave tjera (Red,
Yellow, Blue)
Ngjyrat sekondare – Ngjyrat që fitohen me
përzierjen e vetëm dy ngjyrave primare
(Orange, Green, Violet)
Ngjyrat terciare – Ngjyra që fitohen me
përzierjen e ngjyrave sekondare me një
ngjyrë tjetër sekondare ose primare
Një shembull i rrotës së ngjyrave
Imazhi nga: http://www.sanford-artedventures.com/study/g_color_ëheel.html
Harmonia e ngjyrave



Nga rrota e ngjyrave mund të fillojmë të
zhvillojmë temën e ngjyrave të cilat janë
harmonike
Temat e ngjyrave bazohen në lokacionet e
ngjyrave të rrotës së ngjyrave
Disa relacione bazike të ngjyrave:



Ngjyra komplementare
Komplemente të ndara
Analoge
Relacionet e ngjyrave
Imazhet nga Pat Ellison
Relacionet e ngjyrave
Imazhet nga Pat Ellison
Ngjyrat si konstante numerike



Ngjyra digjitale normalisht paraqitet si
konstantë numerike në formë treshi,
pra paraqet RGB vlerën
Në shumë programe grafike vlera RGB
përfaqësohet si përqindje (0%-100%)
ose si numër i plotë natyral (0-255)
Në web, treshet e ngjyrave paraqiten
me numra heksadecimal
Disa vlera Heksasdecimale
RGB
0
51
102
153
204
PËRQ
0%
20%
40%
60%
80% 100%
HEX
00
33
66
99
CC
255
FF
Disa vlera heksadecimale
RED
GREEN
BLUE
R
G
B
R
G
B
R
G
B
FF
00
00
00
FF
00
00
00
FF
CYAN
MAGENTA
YELLOW
R
G
B
R
G
B
R
G
B
00
FF
FF
FF
00
FF
FF
FF
00
WHITE
BLACK
GRAY
R
G
B
R
G
B
R
G
B
FF
FF
FF
00
00
00
80
80
80
Dridhja(Dithering) dhe monitorët me
ngjyra





Zakonisht monitorët modern mund të
paraqesin ngjyrat 24-bit (apo “True Color”)
Megjithatë ka monitorë tjerë të cilët nuk e
kanë mundësinë e paraqitjes së ngjyrave të
vërteta
Si rezultat i kësaj ngjyrat 24-bit që nuk njihen
nga monitorët më të dobët, do të përafrohen.
Përafrimi mund të paraqitet me dukje
pikëlore që quhet dridhje
Zgjidhja? “Web Palette”
Web Palette




216 ngjyra “Web safe”
Kryqëzim i paletës së ngjyrave të
Windows dhe Macintosh
Ngjyrat duken gati njëlloj për të gjithë
përdoruesit
AKA – “Netscape Colors” ose “Web Safe
Palette”
Gamma




Gamma mund të kuptohet si “shëndëritja”
(brightness) e monitorit
Windows & Unix i paraqesin ngjyrat më të errta
se Macintosh
Rezultati? Imazhet e formuara në Windows mund
të duken si të shpërlara në Mac; Imazhet e
formuara në Mac mund të duken më të errta në
makinën e Windows-it
Mësimi? Testoni imazhet tuaja në disa platforma
ose së paku rregulloni gamma-n duke përdorur
mjetet për rregulimin e gamma-s
Paraqitja e ngjyrave si imazh




Imazhet analoge janë paraqitja e ngjyrave në
formë të vazhdueshme
Kjo është pak problematike për kompjuterët
të cilët preferojnë matjen diskrete
Sinjali analog i cili përfaqëson një imazh të
vazhdueshëm mostrohet për të prodhuar
vlerë diskrete dhe e cila mund të ruhet në
kompjuter
Frekuenca e mostrave digjitale ndikon shumë
në kualitetin e imazhit digjital
Si duket mostrimi
Prezentimi origjinal
analog
Matjet janë bërë
për intervale të
barabarta
Mirren mostra
diskrete nga matjet
Informata nga The Computer In The Visual Arts (Spalter)
Pixel-i


Lokacioni mostër dhe vlera mostër
kombinohen për të formuar elementin e
pikturës ose pixel
3 mostra të ngjyrës për pixel:




1 mostër RED
1 mostër GREEN
1 mostër BLUE
Informata për pixelat ruhet në një sekuencë
këndrejtë dhe paraqitet në ekran sipas
rrjeshtave të quajtura raster-ë (nga Spalter)
Pixel-i (vazhdim)




Pixelët e monitorit aktualisht janë
paraqitja e dritës cirkulare të red, green
dhe blue phosphors
Dendësia e Pixel-ëve matet me Dots Per
Inch (DPI) (pikë për inc)
Madhësia e Pixel-it matet me Dot Pitch
DPI dhe Dot Pitch qnëdrojnë në relacion
inverz ( DPI = 1/ Dot Pitch)
Bit-Depth

Numri i biteve për të paraqitur ngjyrën në
pixel
Shprehja
21
Emri
2-bit
Ngjyra
2
24
26
28
4-bit
6-bit
8-bit
16
64
256
216
16-bit
65, 536
224
24-bit (True
Color)
About
16-million
Imazhi në Internet

Ekzistojnë dy kategori kryesore të
imazheve të cilat mund të hasen në
Internet


Raster Grafika (imazhet aka “bitmapped”)
– përkrahje nga browserët
Vector Grafika – zakonisht kërkojnë plug-in
ndërmjetësimin për të shiquar formatin
origjinal
Raster Grafika



Informata për ngjyrën
ruhet sipas lokacionit
dhe vlerës RGB
Merr shumë hapsirë në
disk
Tipet:



Graphic Interchange
Format (GIF)
Joint Photographic
Experts Group (JPG)
Portable Network Graphic
(PNG)
Vector Grafika



Informata për ngjyrën
ruhet si një seri e
kalkulimeve matematikore
Nuk nevoitet shumë
hapsirë në disk, por është
intensive për nga kërkesa
e procesimit
Shembuj:



Virtual Reality Modeling
Language (VRML)
Persistence of Vision
graphics (POV-RAY)
Scalable Vector Graphics
(SVG)
Imazhi nga http://www.povray.org/
Kompresimi i imazhit



Imazhin në formatin e tij sipas
rrjeshtave është vështirë ta kërkojmë
(downloade) në web
Prandaj imazhet zakonisht ruhen duke
përdorur ndonjërin nga algoritmat për
kompresim
Cilat algoritme janë të përshtatshëm?
Varësisht nga imazhi i cili ruhet
GIF formati





Graphic Interchange Format (GIF)
“Lossless” kompresim
I zhvilluar nga CompuServe
Ju mund të redukoni madhësinë e fajlit duke
redukuar ngjyrat dhe duke ndrruar thellësinë e biteve
Përdorën LZW (Lempel-Zev-Welch) kompresimin




Efikas për kondenzimin e informatës së ngjyrave për
rrjeshta pixeli të ngjyrave identike
Përdorë vetinë e fushave të mëdha të ngjyrave “të
rrafshta”
I mirë për vizatime të linjave, illustrimeve, llogove dhe
animacioneve
I patentuar për LZW në pronësi të Unisys
GIF formati

Dy tipe

GIF87a



GIF89a





Mund të përkrahën deri 8-bit ngjyra (256 ngjyra)
Përkrahën gërshetimin (interlacing)
Përkrahën cdogjë që përkrahën edhe GIF87a
Gjithashtu përkrahën transparëncë
Përkrah edhe animacionet
Të dy tipet kanë përkrahje univerzale nga
browserët
Të dy tipet ruhen me prapashtesën .GIF
GIF formati - Interlacing




GIFi normal shfaqet në formë të plotë kur të
jetë kompletuar kërkimi i imazhit
Megjithatë gërshetimi mundëson që imazhi të
paraqitet si i “venitur” (zbehur)
Rezulton me rritjen e madhësisë së fajlit
Si ndodh kjo gjë?


Rrjeshti i pixelave shfaqet pasi të jetë lexuar
vetëm 12.5% e përmbajtjes së tij
Pasojnë 3 faza të njëpasnjëshme me paraqitjen e
25%, 50% dhe në fund 100% të imazhit
GIF formati - Transparency


Transparenca ju mundëson dizajnerëve të paraqesin
imazhet pa kufijtë e tyre katërkëndësh
Si ndodh kjo?


Prapavija e një imazhi shëndrohet në ngjyrë për të
cilën dizajnuesi vendos të jetë e “padukshme” (kjo
ngjyrë mëtej definohet si ngjyrë e padukshme)
Kështu prapavija e imazhit zhduket dhe zëvendësohet
me prapavijën e web faqes
JPEG formati



Joint Photographic Experts Group (JPEG)
Përkrahën 24-bit “True Color”
Kompresimi:




Bazohet në hapsirën e frekuencës
E mirë për imazhet me gradacion të lartë të
ngjyrave
Mostron informatën e imazhit në një fushë prej 8
x 8 pixelash
“Lossy” kompresim – informata për imazhin
humbet gjatë procesit të kompresimit; Mësimi?
Ndryshimet bëni në kopjen e origjinalit të imazhit!
JPEG formati

Mund të zgjidhen raporte të ndryshme të
kompresimit


Përfaqëson ndrrimin: File Size vs. Image Quality
Përcaktohet sipas vlerës së “Q” (0-100):



Regullimi në vlerë më të vogël paraqet përpjestimin
agresiv që rezulton me zvoglimin e madhësisë së fajlit
por zvoglon edhe kualitetin e imazhit
Rregullimi në vlerë më të lartë është më pak agresiv dhe
rezulton me rritjen e kualitetit të imazhit, por rrit edhe
madhësinë e fajlit
Duhet të dekompresohet para se të paraqitet
në browser
JPEG-u progresiv





Paraqitet në seri të kalimeve (ngjajshëm me
gërshetimin e GIF-it)
Numri i kalimeve përcaktohet pasi të jetë
ruajtur imazhi
Madhësi më e vogël e fajlit sesa JPEG-u i
zakonshëm
Kërkon fuqi më të madhe të procesimit se
JPEG-u i zakonshëm
Nuk përkrahet nga të gjithë browserat
Kur duhet të përdoret JPEGu



Fotografitë
Vizatimet artistike
Imazhet me
gradacion të lartë të
ngjyrave
Menaxhimi i grafikës




Provoni të dizajnoni grafikë të re duke
përdorur ngjyrat që janë Web-safe
Mbani dimenzionet të vogla për grafikën
(grafika më e vogël rezulton me fajl më të
vogël)
Mos provoni të redukoni informatën e ngjyrës
vetë (që do të rezultojë me dridhje)-browserët janë të aftë vetë të përafrojnë në
ngjyrën më të afërt
Përdorni skemat e përshtatshme të
kompresimit për imazhin tuaj!
Resurset







The Electromagnetic Spectrum -
http://imagine.gsfc.nasa.gov/docs/science/knoë_l2/emspectrum.html
Color and Design Overvieë by Pat Ellison –
http://www.cs.iupui.edu/~pellison/colorlab/
The Computer in the Visual Arts by Anne Morgan Spalter
A Lifetime of Color –
http://www.sanford-artedventures.com/study/g_color_ëheel.html
POV-RAY Hall of Fame –
http://www.povray.org/
Designing Web Graphics 3 by Lynda Weinman
Web Design in a Nutshell by Jennifer Niederst