Color & Images in Web Design

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 punon”rrota 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.gov/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/study/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

20. BLUE R G B RED GREEN 00 00 FF R G B R G B FF 00 00 00 FF 00 CYAN WHITE YELLOW MAGENTA BLACK GRAY R R G G B B R G B R R G G B B R G B 00 FF FF FF FF FF FF FF 00 FF 00 00 00 FF 00 80 80 80 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

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