Erottuvuus. ICT01D Visuaalisuus. Ulkoasun tehtävät: 1. Erottuvuus 2. Informaation välittäminen 3. Kiinnostuksen herättäminen 4. Toiminnan motivointi

Transkriptio

1 ICT01D Visuaalisuus Ulkoasun tehtävät: 1. Erottuvuus 2. Informaation välittäminen 3. Kiinnostuksen herättäminen 4. Toiminnan motivointi Erottuvuus Jotta viesti voidaan vastaanottaa eli aistia, niin sen on erotuttava. Yleensä kysymys on taustasta erottumisesta. Keinot: vastakohtien eli kontrastien käyttö valöörikontrasti värikontrasti muoto koko

2 Informaation välittäminen Kun käyttäjän huomio on saatu kiinnitettyä, seuraava tehtävä on viestin eli sanoman välittäminen. Katsojan pitää ymmärtää kohteen merkitys. Tekstin osalta informatiivisuus tarkoittaa luettavuutta. Kiinnostuksen herättäminen Nykyisessä informaatiotulvassa tämä tehtävä korostuu yhä enemmän. Viestin pitää olla poikkeava, jotta katsojat jaksavat kiinnostua siitä.

3 Toiminnan motivointi Jos toivotaan katsojan tekevän jotain, esim. Painavan painiketta, pitää kuvallisen informaation vihjata ja houkutella tekemään niin. Suunnittelun lähtökohdat Mikä on tuotteen tavoite ja käyttötarkoitus? Mikä on tuotteen kohderyhmä - eli ketkä ovat loppukäyttäjiä? Miten käyttäjän uteliaisuus synnytetään? Miten käyttäjän mielenkiinto ylläpidetään? Mitä halutaan tuotteella viestittää?

4 Tiimitehtävä kuvien käyttäminen www-sivulla (kuvan muokkaaminen, koko, tiedostomuoto, informaatio, kuvatekstit, sijoittelu...) värien käyttö www-sivulla (kontrasti, värien merkitys, kulttuurierot...) www-sivujen typografia (layout, fontit, otsikot, sisältö, luettavuus, sisältö...) www-sivuston sommittelu (yhtenäinen asettelu, kokonaisuuden hallinta, tyhjän tilan käyttö...) erilaisten mediaelementtien käyttö www-sivuilla (teksti, valokuva, grafiikka, animaatiot, ääni, video..) www-sivu eri selaimissa (selaimien erot, tuki css:lle...) Kuvista Digitaalisen kuvan muodostus Värin ominaisuudet Väriavaruudet Väri-info Photoshopissa Värin valinta Photoshopissa Perusvärejä Kuvan muodostus Kuvan rakenne Bittikarttagrafiikkakuva Vektorigrafiikkakuva

5 Kuvatyypit Kuvan pakkaus Kuvan koko Koot Photoshopissa Koon muutoksien seurauksia Tiedostomuodot TIFF - Tagged Image File Format GIF -Graphics Interchange Format JPG- Joint Photographic Experts Group PNG- Portable Network Graphics Kuvan käyttö Digitaalisen kuvan muodostus Kuvan muodostuksen perustana on valo. radioaallot mikroaallot näkyvä valo röntgensäteet gammasäteet 380 nm 780 nm valonlähde + objekti + näköaisti = objektin näkeminen

6 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. Visuaalinen havaitseminen voidaan jakaa neljälle eri tasolle: Ärsyke - silmään kohdistuva valo - silmän solujen toiminta Havaitseminen - ärsykkeen vastaanottaminen Tunnistaminen - aivojen ominaisuus käsitellä väriä/kohdetta suhteessa aiempiin havaintoihin. Estetiikka - tunteiden reagointi visuaalisiin ärsykkeisiin.

7 Värin ominaisuudet 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? Esimerkissä väriavaruutena RGB. Värikylläisyys, sinisen ja vihreän osuus pienenee Valoisuus, punaisen määrä vähenee 255 0

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

9 RGB laitteistosta riippuvainen 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. CMYK 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 absortioominaisuuksiin. 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 Väri-info: Photoshop & Elements - Window ->info - Kulje kohdistimella kuvassa, niin väriarvot näkyvät infopaletissa Värin valinta: Photoshop & Elements Värin valinta tehdään Tools-paletin avulla piirtoväri taustaväri

11 punainen 255,0,0 FF0000 vihreä 0,255,0 00FF00 sininen 0,0, FF musta 0,0, Keltainen 255,255,0, FFFF00 204,102,0 CC6600 Perusvärejä turkoosi 0,255,255 00FFFF 204,0,255 CC00FF 153,153, ,51, ,102,51 FF6633 harmaa 153,153, 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

12 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ä. 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. 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)

14 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 RGB-avaruudesta 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

15 Kuvatyypit Phoshop &Elements Kuvan pakkaus 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.

16 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 perusluonteeseen kuuluu, 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. Tarvitaan kuvien skaalaamista. Kuinka suuria kuvia tarvitaan? Yleensä kuvan liian suuri koko ei ole ongelma vaan pienet kuvat tuottavat hankaluuksia.

17 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. 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ä.

18 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. Koot Photoshopissa Elements: Image -> Resize -> ImageSize - pikselikoot - tulostus näytölle - toinen koko muuttuu samassa suhteessa, kun toista muutetaan - oletus poistetaan kohdasta Constrain Proportions - resoluutio - tiedoston koko - tulostuskoko paperille - algoritmi, jolla koon muutoksesta aiheutuneet pikseleiden poistot tai lisäykset lasketan

19 Koon muutoksien seurauksia Bittikarttagrafiikka kuva on riippuvainen alkuperäisestä näyttöönottotaajuudesta. Kuvaa suurentaessa/pienentäessä lisätään/poistetaan kuvasta pikseleitä olemassa olevan informaation perusteella. interpolointi Pienentäminen onnistuu yleensä paremmin kuin suurentaminen. Vinkki: kuvaa tai skannaa käyttötarkoitusta suuremmalla resoluutiolla Vektorigrafiikka voi skaalata periaatteessa rajattomasta. Huomioitava tulostustekniikan rajoitukset 450x kt 4500x ,4 Mt 225x kt

20 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

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

22 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

23 Tiedotostomuodot: JPG- Jiont Photographic Experts Group JPEG, JPG on yleisin kuvaformaatti. 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 Nykyisin kuitenkin vielä suhteellisen vähän käytetty, mutta sen odotetaan korvaavan GIF:in lähiaikoina. Kaikki uusimmat selaimet tukevat.

24 PNG:n ominaisuus liukuläpinäkyvyys gif png

25 IE 6.0 gif png Tiedostomuodot: ohjelmien omat tiedostomuodot Psd - Photoshop AI - Adobe Illustratot Fhx - Macromedia Freehand

26 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

27 Kuvan tehtävät Välittömät havainnot - helpotus muistille Sisällölliset tehtävät dokumentointi, auttaa ymmärtämään tekstin merkitystä orientointi, kasvattaa käsitystämme asiasta symboloi, kuvalla voi sanoa sellaista, mitä tekstillä ei voi Verbaalinen merkitys Visuaalinen merkitys symbolinen orientoiva dokumentoiva Kuvan toteuttaminen 1. Kuvan tarkoitus 2. Kuvan valinta 3. Kuvan väritys 4. Kuvan rajaus ja muoto

28 Vinkkejä värien käytöstä Näyttöarvot vai käyttöarvot? Älä sijoita sinisiä kohteita mustalle taustalla tai päinvastoin - > näkyvät epätarkkoina. sinistä sinistä Väriin vaikuttaa koko ja muoto.

29 Väriin vaikuttaa taustaväri. harmaata harmaata 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 Luettavuus taustoilta: Faber Birr musta keltaisella vihreä valkoisella punainen valkoisella valkoinen sinisellä musta valkoisella valkoinen mustalla Mieti värin tarkoitus sovelluksessa. Väri voi toimia eri kohteita yhdistävänä tekijänä. Väri kertoo aina kohteestaan jotain. Värien kokeminen on yksilöllistä. Tunnista käyttäjän käytössä olevat värit. Värit voivat vaihdella laitteelta ja käyttöjärjestelmältä toiselle. Mieti värien merkitystä käyttäjälle (kohderyhmä). Muista värien yhdenmukaisuus luonnon värien kanssa - tuttavallisuus ja turvallisuus.

30 Harkitse tarkoin taustavärin käyttö. Muista myös taustavärin kokoava-ominaisuus. Vaaleat, kirkkaat ja lämpimät värit valtaavat tilaa. Väri voi olla itsessään jo viesti. Esim. punainen - varoitus Kirkkaat värit sopivat vaarasignaaleihin, huomionherättäjiin ja muistuttajiin. Älä luota pelkkää väriin suunnittelussa, vaan suunnittele myös mustavalkoisena. Sininen, keltainen, vihreä ja punainen muistetaan paremmin kuin muut värit. Väriin liittyy syvyysvaikutus: puhdas, lämmin, tummaväri on lähellä. Vältä liiallista värien käyttöä.