Kuvista ja väreistä Verkkomultimedia ICT1tn Elina Ulpovaara

Transkriptio

1 Kuvista ja väreistä Verkkomultimedia ICT1tn Elina Ulpovaara

2 Digitaalisen kuvan muodostus Kuvan muodostuksen perustana on valo. Sähkömagneettisen energiasäteilyn säteilylajit: gammasäteily ultraviolettisäteily valo radioaallot röntgensäteily infrapunasäteily 380 nm 780 nm Jotta ihminen voi astia ja nähdä värejä ja kohteita, tarvitaan ainakin kolme asiaa: valoa, valoa heijastava esine ja havainnoitsija. valonlähde + objekti + näköaisti = objektin näkeminen

3 Ihmisen verkkokalvolla on neljän tyyppisiä valoa aistivia soluja: kolmen tyyppisiä tappisoluja, joista punaiselle aallonpituudelle herkkiä on 64%, vihreälle 32 % ja siniselle n. 4%. sauvasoluja, jotka ovat erikoistuneet hämäränäkemiseen. Värit muodostuvat kolmen tappisolutyypin yhteissignaaleista -> värin havaitseminen on trikromaattista -> värin määrittely on kolmen komponentin avulla mahdollista. Siihen, minkä värisenä näemme kohteen, vaikuttaa Valaistusolosuhteet Kohteen pintarakenne Välittömästi kohteeseen rajautuva ympäristö Näkökentän alueelta välittyvä kokonaisuus

4 Värin kolme perusominaisuutta Värisävy (hue) Mikä väri? Värisävy on aallonpituuden ominaisuus. Kromaattiset värit, akromaattiset värit Valoisuus tai kirkkaus (brightness) Kuinka vaalea tai tumma väri on? Värikylläisyys eli saturaatio (saturation) Kuinka puhdas värin on?

5 Värikylläisyys, sinisen ja vihreän osuus pienenee Valoisuus, punaisen määrä vähenee Esimerkissä väriavaruutena RGB.

6 Kohteen väri määräytyy kohteen heijastaessa tiettyjä aallonpituuksia. Värin havainto syntyy aivoissa. -> Näkevätkö kaikki värit samanlaisena? Ihminen erottaa n. 2 miljoonaa eri väriä väriä näkyvän valon spektristä 450 kirkkaustasoa 20 värikylläisyystasoa Värisokeudet - 8% miehistä yleisin punavihersokeus Kreikkalainen Demokritos sanoi 2400 vuotta sitten: väri on vain ihmisen sielussa.

7 Väriavaruudet Digitaalisessa kuvassa bitit muodostavat informaation myös värit. Miten väri määritellään? Vaikuttaako ihmisen kyky havaita värit värin määrittämiseen? Mikä merkitys on toistolaitteella värin määrityksessä? Miten valitaan perusosat, joista muut värit sekoitetaan? RGB, CMYK, HSL, CIEXYZ, CIELUV, CIELAB

8 RGB laitteistosta riippuvainen värijärjestelmä Additiivinen eli lisäävä värijärjestelmä Värien esittäminen perustuu summaavaan eli additiiviseen värijärjestelmään. Värit määritellään kolmen päävärin (R-red, G-green ja B-blue) lukuarvolla. Värit määritellään 24-bitin avulla käyttäen jokaiselle päävärille kirkkausaste asteikkolla Jokaisesta kolmesta väristä on olemassa 256 sävyä, joten värisävyjä on yhteensä 16,7 miljoonaa. Harmaat sävyt syntyvät käyttämällä yhtä paljon punaista, vihreää ja sinistä. Yleisesti näytöllä käytetty värimalli.

9 CMYK - värijärjestelmä Subtraktiivinen eli vähentävä värijärjestelmä Värien esittäminen perustuu vähenevään eli subraktiiviseen värijärjestelmään. Värimalli perustuu painovärin valon absortio-ominaisuuksiin. Värit määritellään neljän värin (C-cyan, M-magenta, Y-yellow, K-black) avulla. Värit määritellään 32-bitin avulla. Painotuotteissa käytetty värimalli - neliväripainaminen

10 Kuvan muodostus 1. Samplaus, näytteenotto Mitataan kohteesta heijastuvan, taittuvan tai sen läpäisevän valon punainen, sininen ja vihreä arvo. 2. Kvantisointi Muutetaan näytteenotossa saadut luvut vastaamaan haluttua tarkkuutta eli bittisyvyyttä. Skannerit ja digitaaliset kamerat käyttävät CCD-kennoa tai vastaavan kuvasensoria. Mitatut tiedot muutetaan digitaaliseksi ja tallennetaan muistiin. RGB-arvojen kvantisointi 8- bittisiksi eli kaikkien näytteiden muuntaminen välille Lähde: Jussi Jokinen: Digikuva, IT Press, 2004

11 Kuvan rakenne Bittikarttagrafiikkakuva Bittikarttagrafiikkakuva muodostuu neliönmuotoisista kuvapisteistä eli pikseleistä. Jokaisesta pikselistä tallennetaan sekä sijainti x- ja y-koordinaattien mukaan että väriarvo. Kuvaa voi muokata vaikka yhden pikselin tarkkuudella. Kuvan koko on pikseleiden määrä (XxY) esim. 640x480= pikseliä.

12 Vektorigrafiikkakuva Vektorigrafiikkakuva muodostuu matemaattisista piirrustusalkioista: ympyröistä, janoista ja käyristä. Kuvasta ei tallenneta pikseleitä vaan kaava, jonka tulostin tai näyttö osaa tulkita. Esim. ympyrästä riittää tieto keskipisteestä, säteen pituudesta, täyttöväristä, kehän paksuudesta ja väristä. Vektorigrafiikka on itsestään erittäin tarkkaa, mutta tulostustarkkuus riippuu tulostuslaitteen tarkkuudesta.

13 Vektorikuvia voi skaalata vapaasti laadun kärsimättä. Vektorigrafiikka soveltuu teknisiin piirrustuksiin, kaavakuviin, karttoihin, logoihin jne. Monien ohjelmien fonttiteknologia perustuu vektorigrafiikkaan. Ohjelmia ovat mm. Illustrator, Freehand ja Corel Draw.

14 Kuvatyypit Viivakuva kuva-alkio on 1-bittinen, musta ja valkoinen sopii piirroksiin, tekstiin Harmaasävykuva kuva-alkio on 8-bittinen, 256 harmaasävyä (RGB: 0-musta, 255-valkoinen)

15 Värikuvat täysvärikuvat mm. RGB- ja CMYK-värijärjestelmät Indeksoitu värikuva Kuva-alkio esitetään 8-bittisenä eli kuvassa voi olla maksimissaan 256 väriä. Kuvaan liitetään indeksoituväripaletti. Exact: tarkka mahdollista käyttää vain, jos kuvassa on 256 tai vähemmän värejä System: käyttöjärjestelmän oletuspaletti, joka sisältää tasaisin välein RGBavaruudesta otettuja värejä

16 Web sisältää web-selainten tuntemat 216 väriä värit ovat yhteiset yleisimmille käyttöjärjestelmille Uniform: tasaisin välein RBG-paletista otetut värit Adaptive mukautettu muodostetaan kuvasta yleisimmin esiintyvistä väreistä Custom: räätälöity käyttäjä voi luoda itse paletin

17 Kuvan pakkaus Lähde: Jussi Jokinen: Digikuva, IT Press, 2004 Digikameralla otettu kuva sisältää n. 2200x1800 pikseliä. Jokainen pikseli määritellään 24 bitin avulla eli voi saada värisävyn 24- bittisen väriavaruuden n. 16,7 miljoonasta värisävystä. Kuvan koko on tavua eli 11Mt.

18 RLE - Run Length Encoding kuvan samankaltaisista pikseleistä ilmoitetaan vain lukumäärä LZW - Lempel Ziv Welsch GIF- ja TIFF-formaateissa käytetty sanakirjapakkaus JPEG - Joint Photographic Experts Group menestynein pakkausmenetelmä perustuu usean eri metodin summaan näyttöönotto -> diskreetti kosinimuunnos -> kvantisointi -> Huffman -koodaus

19 Kuvan koko Digitaalisen kuvan perusominaisuus on, ettei kuvalla ole fyysistä kokoa eli tarkkoja mittoja. Täytyy ymmärtää erilaisia mittaustapoja ja yksiköitä. Harvoin saadaan kuvaamalla tai skannaamalla täsmälleen sopivia kuvia suoraan käyttöön. Kuvaa suurentaessa/pienentäessä lisätään/poistetaan kuvasta pikseleitä olemassa olevan informaation perusteella. Kuinka suuria kuvia tarvitaan? Yleensä kuvan liian suuri koko ei ole ongelma vaan pienet kuvat tuottavat hankaluuksia. Pienentäminen onnistuu yleensä paremmin kuin suurentaminen. Vinkki: kuvaa tai skannaa käyttötarkoitusta suuremmalla resoluutiol

20 Tiedostokoko ilmoittaa kuvan sisältämän informaatio määrän tavuina. Resoluutio Resoluutio eli pistetiheys on yksi bittikarttakuvan keskeisimpiä käsitteitä. Resoluutio on luku, joka ilmoittaa pikseleiden suhdetta johonkin mittaan esim. tuumaa kohti (dpi = dots per inch). Kuvan resoluutio valitaan esittettävän laitteen mukaan. Yleensä näytön resoluutio on dpi.

21 Pistetiheyttä voidaan muuttaa kuvankäsittelyohjelmilla jälkikäteen. Kun kuvan resoluutio muuttuu (esim. kuvaa skaalataan) joudutaan interpoloimaan eli järjestetään kuvan pikselit uudelleen. Käytettävä algoritmi tutkii ympäröiviä pikseleitä ja antaa uusille pikseleille arvot. Näytölle eteenkin selaimen avulla katsottaviin kuviin tarvitsee kiinnittää huomiota vain kuvan pikselikokoon. Kuva tulostuu pikseli pikselille oli kuvan resoluutio mikä hyvänsä. Tulostuskoko ilmoitetaan yleensä senttimetreinä tai millimetreinä esim. 10x15cm. Tulostustarkkuudet vaihtelevat yleensä dpi:n välillä riippuen lopputuotteen käyttötarkoituksesta. Vektorikuvat Vektorikuvien tiedostokoko pysyy käyttökoosta riippumatta samana.

22 450x kt 4500x ,4 Mt 225x kt

23 x10 x0,5 Kymmenkertainen vektorigrafiikka suurennus

24 Tiedostomuodot Minkä tiedostomuodon työ vaatii? Mitkä ovat eri tiedostomuotojen ominaisuudet? Mitkä tiedostomuodot ovat luotettavia? - yleinen siis useissa sovelluksissa toimiva - tietyn sovelluksen tiedostomuoto - bittikartta- vai vektori-tiedostomuoto - häviöllinen vai häviötön

25 Tiedostomuodot: TIFF - Tagged Image File Format Hyvin suosittu, erittäin yhteensopiva bittikarttagrafiikka tiedostomuoto. Tallentaa kuvaan useilla eri bittisyvyyksillä Käytössä on useita eri väriavaruuksia. Periaatteessa pakkaamaton formaatti. JPG, LZW

26 Tiedostomuodot: GIF - Graphics Interchange Format Jo vuodesta GIF87a Nykyisin käytetään GIF89a-standardia LZW-pakkaus eli laajat väripinnat pieneen tilaan voidaan tallentaa useita kuvia samaan tiedostoon -> animaatiot Käytössä on maksimissaan 256-väriä. Tiedostomuoto vaatii väripaletin eli tekniikan, miten valitaan maks. 256 väriä. Osa kuvasta voidaan määrittää läpinäkyväksi, jolloin verkkoselaimet käsittelevät kyseiset värit läpinäkyvinä. Ei ole periaatteessa häviöllinen tiedostomuoto. Sopii grafiikkaan, teksteihin ja kuviin, joissa on suuria samanvärisiä pintoja Yksi väri voidaan tallentaa läpinäkyväksi

27 Photoshopissa/Elementsissä tallennus gif-muotoon onnistuu helpoiten valitsemalla File -> Save for web - paletin valinta - Ditherointi, rasterointi - miten korvataan häviävät ylimääräiset värit eli tekniikka, miten kahden värin rajapinta sekoitetaan

28

29 JPEG, JPG on yleisin kuvaformaatti. Tiedotostomuodot: JPG- Jiont Photographic Experts Group Vahvuutena on kyky pakata valokuvamaista eli monisävyistä materiaalia pieneen tilaan. Käytössä oleva värimäärä 16,7 milj. JPEG on aina häviöllinen. Vinkki: älä käytä välivaiheen tallennusmuotona vaan vasta julkaisumuotona. Pakatessa annetaan pakkauksen laatu. Etsi paras laatu/koko-suhde. Verkossa valokuvalle riittää hyvin 40-50%

30 Tiedostomuodot: PNG- Portable Network Graphics GIF-formaatin haltia esitti vaatimuksia GIF:n käytön lisensoinnista -> PNG syntyi vuonna 1995 Monipuolinen häviötön tiedosto muoto mm. verkkokäyttöön. Harmaasävy Palettikuva 48-bittinen true color Läpinäkyvyyden tueksi alfa-kanava Kaikki uusimmat selaimet tukevat.

31 Kuvista talteen 1. Alkuperäinen kuva - paperi, skannattu, valokuvattu 2. Kuvankäsittelyohjelman kuvaformaatti - kaikki käsittelyn osavaiheet mukana 3. Julkaisuformaatti

32 Kuvan käyttötarkoitus korvaamaton kuva sanallista esitystä tukeva kuva julkaisun kokonaisilmeen jäsentäminen kuva katseenvangitsijana, mielenkiinnon herättäjänä kuva tekstin tylsyyden katkaisijana kuva koristeena tunnuskuva kuva kiinnekohtana kuva tunnelman luojana Vanha sanonta yksi kuva kertoo enemmän kuin tuhat sanaa saa jatkoa mutta voi johtaa enemmän harhaan kuin tuhat sanaa.

33 Kuvan tehtävät Välittömät havainnot Luoda mielikuvia Jäsentää kokonaisuutta Parantaa muistettavuutta Sisällölliset tehtävät, välittää informaatiota Dokumentointi, auttaa ymmärtämään tekstin merkitystä Orientointi, kasvattaa käsitystämme asiasta Symboloi, kuvalla voi sanoa sellaista, mitä tekstillä ei voi

34 Kuvan toteuttaminen 1. Kuvan tarkoitus Miksi kuva tarvitaan? 2. Kuvan valinta Sisällön rinnalla myös kuvan tekotapa viestittää asioita. Taidevalokuva, reportaasikuva, piirroskuva, grafiikka. 3. Kuvan väritys Kun kuva on valittu, tarkista, että kuvan värimaailma aiheeseen sopiva. Värikuvat, mustavalkoiset kuvat, duotone-kuvat 4. Kuvan rajaus ja muoto Muista tekijänoikeudet! Mieti rajaus ja muoto sisällön, tyylin ja kuvan liikesuuntien mukaan. Yhtä tärkeää on miettiä, mitä rajataan pois kuin se, mitä jätetään jäljelle. Lähde: Pekka Loiri, Elise Juholin: Huom! Visuaalisen viestinnän käsikirja, Inforviestintä Oy, 1998

35 Väri havaintona Värivaikutelmia Ihmisen näköjärjestelmä käsittelee kokonaisuuksia. Värit koetaan eri tavoin riippuen värien ympäristöstä, käyttöyhteydestä ja toki myös havaitsijasta eli kokijasta. Värikontrasti Suunnittele tarpeeksi vahva kontrasti väreille. Vierekkäisten värien kontrastia voi muuttaa kaikilla kolmella värin ominaisuudella: muuttamalla värisävyä, kylläisyyttä tai kirkkautta. Muista: aina suurin kontrasti ei ole paras. Voimakkain sävykontrasti ilmenee vasta- eli komplementtivärien yhdistelmissä.

36 Simultaaninen kontrasti Havaitun värin muuttuminen vierekkäisen tai läheisen värin vaikutuksesta. Valkoinen ympäristö aiheuttaa kohdevärien tummumista. Musta ympäristö voimistaa värien valoisuutta. Värillisen pinnan lähin ympäristö värittyy aina sen komplementtisävyn suuntaan. Esim. punaisessa ympäristössä värit menettävät punaisuutta ja syaaninsininen korostuu. Tällöin sinistä ja vihreää valoa aistivien tapposolujen aktiivisuus lisääntyy.

37 Sameat värit puhtaiden värien kanssa Puhdas väri saa samean värin näyttämään entistä likaisemmalta. Sameiden värien ympäröimä puhdas väri loistaa. Lähisävyt heikentävät toisensa havaittavuutta rinnakkain asetettuna. Vaalea kuvio näyttää aina tummaa suuremmalta. Tiheä tasaraitainen kuvio saa aikaa jatkuvan näköaistimuksessa liikkeen.

38 Rajakontrasti-ilmiö TEKSTIÄ TEKSTIÄ TEKSTIÄ TEKSTIÄ Molemmissa teksteissä on samat tummuusarvot väreissä. Ihmisen silmässä on sinisiä sävyjä aistivia tappisoluja n.2 % ja vihreitä sävyjä n. 34 %. sinistä sinistä Älä sijoita sinisiä kohteita mustalle taustalla tai päinvastoin -> näkyvät epätarkkoina. Ylemmässä on sinistä taitettu harmaalla -> teksti näkyy selvemmin.

39 Värit viestinnässä Väri ilmaisuna Värissä itsessään on viesti mukana. esteettisyys, symbolisuus punainen -> vaara Värillä voidaan ilmaista erilaisia tunnelmia. Väri kertoo aina kohteestaan jotain. Yksi värien tärkeistä tehtävistä on tehdä kohteiden erottuminen ja tunnistaminen helpoksi taustasta. Www-sivuilla ei kannata vaihtaa kesken kaiken taustaa, koska käyttäjän silmä tottuu nopeasti tiettyyn kirkkausasteeseen. Ihmisen suhde väreihin: Primäärinen: - oma pigmentti - luonne - ikä - sukupuoli Sekundäärinen: - kulttuuri - ympäristö - opitut väritavat - muoti Väri tunnuksena Viestinnässä on kysy merkityksien luomisesta. Jotkut värit tunnistetaan nopeasti ja liitetään johonkin tiettyyn sisältöön esim. tuttujen maiden liput, liikennemerkit jne.

40 Värit auttavat erottamaan tai yhdistämään samankaltaisia kohteita. Värin käyttö ryhmittelyssä ja muistin tukena Hahmolait samanlaisuus: kaksi visuaalista ärsykettä, joilla on jokin yhteinen ominaisuus, mielletään yhteenkuuluviksi Tunnistevärien pitäisi erottua toisistaan ja taustasta. teoria teoria tehtävä teoria teoria tehtävä samanlaisuus, erilaisuus, huomioitavaa kotitehtävä Lähde: Anja Hatva (toim): Verkkografiikka, IT Press, 2003

41 Huomioitavia asioita värisuunnitteluun Värien valinta lähteen aina kohderyhmästä ja tuotteen käyttötarkoituksesta. Huomioi värien valinnoissa aina käyttäjien yhteinen kokemustausta, värien tuttuus ja yleisen mielikuvat väreistä. Muista kuitenkin, että värien kokeminen on yksilöllistä. Muista värien muuntuminen näköaistimuksessa ympäröivien värien mukaan. Väriperspektiivi Tumma on lähempänä kuin vaalea. Lämmin sävy on lähempänä kuin kylmä sävy. Puhdas väri on lähempänä kuin likainen Tutkimuksia väreistä: Näkyvyys: 1) punainen, 2) vihreä, 3) keltainen, 4) valkoinen 5) sininen, 6) purppura Muistettavuus: 1) punainen, 2) oranssi, 3) keltainen, 4) purppura, 5) vihreä, 6) valkoinen

42 Vaaleat ja kirkkaat värit valtaavat tilaa Tunnista käyttäjän käytössä olevat värit. Värit voivat vaihdella laitteelta ja käyttöjärjestelmältä toiselle. Kirkkaat värit sopivat vaarasignaaleihin, huomionherättäjiin ja muistuttajiin. Älä luota pelkkään väriin suunnittelussa, vaan suunnittele myös mustavalkoisena. Vältä liiallista värien käyttöä. Luettavuus taustoilta Faber Birrin mukaan: musta keltaisella vihreä valkoisella punainen valkoisella valkoinen sinisellä musta valkoisella valkoinen mustalla

43 Värilinkkejä Suomen Heraldinen seura sisältää mm. vaakunoiden värin käyttösäännöt Seppo Rihlama: RA-värijärjestelmä Patrick J. Lynsc, Sarah Horton: Web Style Guide Web-sivujen suunnittelua käsittelevä kirjan 2. laitos nyt kokonaan verkossa Volantis Oy, Juha kaukoniemi: Värin havaitseminen

44 Lähteet Iiro Pohjanoksa, Eevi Kuokkanen, Timo Raaska: Digitaalisen viestinnän käsikirja: Viesti verkossa, Infor, 2007 Tapani Huovila: look Visuaalista viestisi, Inforviestintä Oy, 2006 Pekka Loiri, Elise Juholin: Huom! Visuaalisen viestinnän käsikirja, Inforviestintä Oy, 1998 Harald Arnkil: Värit havaintojen maailmassa, Gummerus Kirjapaino oy, 2007 Martti Huttunen: Värit pintaa syvemmältä, WSOY, 2005 Seppo Rihlama: Värioppi, Rakennustieto, 1997 Jussi Jokinen: Digikuva, IT Press, 2004 Anja Hatva (toim): Verkkografiikka, IT Press, 2003