Kuvista ja väreistä Verkkomultimedia ICT1tn004 20.8.2009 Elina Ulpovaara
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
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
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?
Värikylläisyys, sinisen ja vihreän osuus pienenee 255 0 Valoisuus, punaisen määrä vähenee 255 0 Esimerkissä väriavaruutena RGB.
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ä 150-200 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.
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
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 0-255. 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.
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
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 0-255. Lähde: Jussi Jokinen: Digikuva, IT Press, 2004
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=307200 pikseliä.
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.
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.
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)
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ä
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
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 11 880 000 tavua eli 11Mt.
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
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
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 72-90 dpi.
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ä 100-600dpi:n välillä riippuen lopputuotteen käyttötarkoituksesta. Vektorikuvat Vektorikuvien tiedostokoko pysyy käyttökoosta riippumatta samana.
450x586 773 kt 4500x5860 75,4 Mt 225x293 193 kt
x10 x0,5 Kymmenkertainen vektorigrafiikka suurennus
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
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
Tiedostomuodot: GIF - Graphics Interchange Format Jo vuodesta 1987 - 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
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
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%
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.
Kuvista talteen 1. Alkuperäinen kuva - paperi, skannattu, valokuvattu 2. Kuvankäsittelyohjelman kuvaformaatti - kaikki käsittelyn osavaiheet mukana 3. Julkaisuformaatti
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.
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
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
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ä.
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.
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.
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.
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.
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
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
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
Värilinkkejä http://www.coloria.net Suomen Heraldinen seura http://www.heraldica.fi/etusivut/suomi.htm sisältää mm. vaakunoiden värin käyttösäännöt Seppo Rihlama: RA-värijärjestelmä http://www.rihlama.com/sec04/lang1/page01.html Patrick J. Lynsc, Sarah Horton: Web Style Guide Web-sivujen suunnittelua käsittelevä kirjan 2. laitos nyt kokonaan verkossa http://www.webstyleguide.com Volantis Oy, Juha kaukoniemi: Värin havaitseminen http://www.volantis.fi/sivut/color-frame.html
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