Color

1
Color Images in Web Design

• Ngjyrat dhe imazhet në Web dizajnin

2
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 punonrrota e ngjyrave (Color
  Wheel)
• Të kuptoni si paraqiten ngjyrat duke përdorur
  konstantat numerike

3
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

4
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
5
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.go
v/ems/visible.html
6
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
7
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
8
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

9
Modelet e ngjyrave primare
Imazhet e fPat Ellison
10
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).

11
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

12
Prezentimi i ngjyrës
Imazhi nga Pat Ellison
13
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

14
Një shembull i rrotës së ngjyrave
Imazhi nga http//www.sanford-artedventures.com/s
tudy/g_color_ëheel.html
15
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

16
Relacionet e ngjyrave
Imazhet nga Pat Ellison
17
Relacionet e ngjyrave
Imazhet nga Pat Ellison
18
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

19
Disa vlera Heksasdecimale
RGB 0 51 102 153 204 255
PËRQ 0 20 40 60 80 100
HEX 00 33 66 99 CC FF
20
Disa vlera heksadecimale
21
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

22
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

23
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

24
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

25
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)
26
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)

27
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)

28
Bit-Depth

• Numri i biteve për të paraqitur ngjyrën në pixel

Shprehja Emri Ngjyra
21 2-bit 2
24 4-bit 16
26 6-bit 64
28 8-bit 256
216 16-bit 65, 536
224 24-bit (True Color) About 16-million
29
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

30
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)

31
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/
32
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

33
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

34
GIF formati

• Dy tipe
• GIF87a
• Mund të përkrahën deri 8-bit ngjyra (256 ngjyra)
• Përkrahën gërshetimin (interlacing)
• GIF89a
• 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

35
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

36
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

37
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!

38
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

39
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

40
Kur duhet të përdoret JPEGu

• Fotografitë
• Vizatimet artistike
• Imazhet me gradacion të lartë të ngjyrave

41
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!

42
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-artedven
  tures.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