ETUSIVULLEVERKKOLUOTSI - TOTEUTUS
SYNOPSISPEDAGOGINEN KÄSIKIRJOITUSRAKENNE JA SISÄLLÖLLINEN KÄSIKIRJOITUSTEKNINEN KÄSIKIRJOITUSTOTEUTUSTESTAUSARVIOINTI

TEKSTIT
KUVAT
AUDIO- JA VIDEOMATERIAALI
TUNNUKSET
KOOSTAMINEN
VIIMEISTELY
Etusivulle


KUVAT

Kuvien lisäämisellä verkkokurssiin voit elävöittää ja havainnollistaa opetusmateriaalia. Kuvien avulla voit toisaalta tehdä kurssista myös hyvin hankalasti luettavan ja hitaasti latautuvan.

Millainen on hyvä kuva webissä ?

Hyvä verkkokurssin kuvitus on suunniteltu ottaen huomioon niin kuvien fyysinen koko, sijoittelu kuin tiedostokokokin. Verkkokurssin kuvien koko tulisi pitää mahdollisimman pienenä. Mitä isompia kuvat ovat, sitä hitaammin sivut latautuvat. WWW-sivun koon kuvineen tulisi olla enintään noin 50 kilotavua. Kuvan tiedostokokoon vaikuttavat resoluutio, kuvan fyysiset mitat, värien määrä ja käytettävä kuvaformaatti. Käytä verkkokurssissa vain GIF-, JPG- tai PNG-formaattiin tallennettuja kuvia.

GIF on yleisin kuvaformaatti www:ssä. GIF-kuvassa on korkeintaan 256 väriä ja se soveltuukin käytettäväksi kuvissa joissa on paljon tasaisia väripintoja, eli esimerkiksi logot, piirrokset ja kaavakuvat. Älä käytä GIF-kuvaa valokuvien ja voimakkaasti varjostettujen kuvien tallennusformaattina.

JPG kuvamuoto on myös yleisesti www:ssä käytetty. JPG-kuva pakkautuu todella tehokkaasti, mutta samalla kuvasta poistetaan pieniä yksityiskohtia. JPG-kuvan pakkaustehon voi määritellä itse, kuvaa tallennettaessa. Liian iso pakkaussuhde johtaa siihen, että yksityiskohtia katoaa kuvasta liikaa. JPG-kuvia käyttäessäsi joudutkin aina tekemään kompromissin kuvan koon ja katseltavuuden suhteen. JPG-kuva soveltuu valokuvien ja muiden realististen kuvien tallennusmuodoksi.

PNG on kehitetty korvaamaan GIF-formaatti www-ympäristössä. Erona GIF-formaattiin PNG pystyy käsittelemään miljoonia värejä. PNG-formaatin huonona puolena voidaan pitää sen toimimattomuutta vanhemmilla selaimilla.

Jos haluat muuttaa kuvan fyysistä kokoa, tee se kuvankäsittelyohjelmassa. Kuvakoon muuttaminen HTML-koodin avulla ei ole tarkoituksen mukaista. Jos muutat koodissa kuvan leveyttä tai korkeutta kuvan laatu kärsii. Lisäksi kuvan tiedostokoko säilyy edelleen saman kokoisena, kuin isossa kuvassa.

vinkki

Jos joudut laittamaan www-sivulle suuria kuvia kannattaa näistä usein esittää ensin pienempi ns. postimerkkikuva, jota klikkaamalla opiskelija voi halutessaan aukaista suuremman kuvan. Pienen kuvan yhteyteen on hyvän tavan mukaista laittaa ilmoitus ison kuvan tiedostokoosta.

Animaatio

WWW-sivuilla käytettävä animaatio on itseasiassa joukko yksittäisiä tavallisia kuvia, joita selataan nopeasti peräkkäin. Animaatioita löytyy helposti netistä, mutta animaatioiden tekeminen ominkaan voimin ei ole vaikeaa. Ennen kuin alat toteuttaa animaatiota, sinun kannattaa tehdä käsikirjoitus. Käsikirjoituksesta tulisi selvitä mitkä ovat ne tärkeät yksityiskohdat, jotka haluat animaatiossa tulevan esiin, ja missä järjestyksessä ne esiintyvät. Tämän jälkeen voit aloittaa animaatiossa toistettavien kuvien luomisen. Kuvat voit tuottaa kuten mitkä tahansa normaalit kuvat.

Animaatioiden koostaminen kannattaa kuvien luomisen jälkeen tehdä tarkoitukseen soveltuvalla ohjelmalla (esimerkiksi Paint Shop Pron mukana tulevalla Animation Shop:lla), joka liittää kuvat ajallisesti peräkkäin. Animaatio-ohjelmissa voit yleensä määritellä kuvien vaihtumisvälin ja sen näytetäänkö animaatio kerran, määrätyn määrän kertoja vai toistetaanko sitä ehkä ikuisesti.

Animaatiot tallennetaan GIF-formaattiin ja sen jälkeen ne voidaan liittää verkkokurssiin tavallisen kuvan tavoin. Animaatiota ei voi tallennuksen jälkeen muokata tavallisella kuvankäsittelyohjelmalla.

Kuvankäsittely

Peruskuvankäsittelyyn kuuluvat esimerkiksi seuraavanlaiset työvaiheet

  1. Kuvaa digitaalikameralla tai skannaa kuva
    Mikäli et ole varma, minkä kokoisen kuvan tarvitset, skannaa kuva suurikokoisena (esim. resoluutio 150 px/inch, fyysiset mitat 200%:na). Kuvan pienentäminen onnistuu hyvin - sen sijaan kuvan suurentaminen jälkikäteen heikentää huomattavasti kuvan laatua.
  2. Avaa kuva kuvankäsittelyohjelmassa
    Älä muokkaa alkuperäistä kuvaa, vaan tee kuvasta kopio ja muokkaa sitä.
  3. Muuta kuva oikeankokoiseksi
    Rajaa kuvasta turhat reunat pois, muuta resoluutio (72 px/inch) ja valitse kuvalle sopivat fyysiset mitat.
  4. Muokkaa kuvaa
    Vaalenna/tummenna kuvaa tarvittaessa. Verkkokurssikuva saa olla mieluummin liian vaalea kuin tumma. Lopuksi tarkenna kuvaa.
  5. Tallenna kuva
    Valokuvat jpg-muotoon. Usein valokuville riittää medium-pakkaussuhde (testaa eri vaihtoehtoja). Piirretyt logot, painikkeet yms. gif-muotoon.

vinkki

Ohjeita kuvankäsittelyyn ja animaatioiden tekemiseen:
Armi Hölttö : kuvat & www (viitattu 9.10.2003)
Internetix: skannaus ja kuvankäsittely (viitattu 9.10.2003)
Jukka Korpela: Kuvien käytöstä (viitattu 9.10.2003)
Suomen animaationtekijät ry: Animaatioklinikka (viitattu 9.10.2003)

 

 
 
    Etusivu | Synopsis | Pedagoginen käsikirjoitus | Rakenne ja sisällöllinen käsikirjoitus
Tekninen käsikirjoitus | Toteutus | Testaus | Arviointi
Sivun
alkuun


© Chydenius-Instituutti