Skip to content. | Skip to navigation

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

Kuva verkossa

by Tanja Tuulikki Välisalo last modified Nov 27, 2014 08:08 AM
Kuvankäsittelyn perusteet, kuvagallerian luominen

Kuvatiedostot

Kuvatiedostotyyppejä on olemassa kymmeniä. Niillä on toisistaan eroavia ominaisuuksia ja käyttötarkoituksia. Seuraavassa on esitelty yleisimmät verkossa käytettävät kuvatiedostotyypit ja niiden ominaisuudet.

JPEG

  • Hyvin yleinen kuvaformaatti, käytetään WWW-sivuilla valokuvien tiedostomuotona
  • Pakattu tiedostomuoto eli hävittää informaatiota tallennettaessa, pieni tallennuskoko
  • Ei tue läpinäkyvyyttä
  • Näyttää 16 miljoonaa väriä (24-bittinen)


GIF

  • Käytetään Internetissä vain vähän värisävyjä sisältävissä piirroksissa ja kaavioissa
  • Hyvä kuvaformaatti yksinkertaisten animaatioiden tekemiseen
  • Tukee läpinäkyvyyttä
  • Näyttää 256 väriä (8-bittinen)


PNG

  • Internet-käyttöön GIF-formaatin seuraajaksi kehitetty kuvatyyppi
  • Vanhimmat selainversiot eivät tue png-tiedostoja
  • Tukee läpinäkyvyyttä
  • Näyttää 248 väriä (48-bittinen)


Eri kuvankäsittelyohjelmilla on myös omia kuvaformaattejaan (esim. GIMP-ohjelman .xcf ja Adobe Photoshopin .psd). Niissä voidaan tallettaa kuvan eri tasot, jolloin kuvan eri osia ja ominaisuuksia voidaan muokata erikseen. Nämä tiedostomuodot sopivat erityisen hyvin kuvankäsittelyn eri vaiheiden tallentamiseen. Ne eivät kuitenkaan sovellu kuvien verkkojulkaisuun

Kuvan koko

Kuvan koolla voidaan viitata eri asioihin: kuvan fyysiseen kokoon (tulostuskokoon), kuvan kokoon näytöllä tai kuvan tiedostokokoon.

Kuvan fyysiseen kokoon vaikuttavat pikseleiden (kuvapisteiden) määrä ja kuvan resoluutio. Fyysistä kokoa mitataan yleensä joko metrijärjestelmän yksiköinä (cm, mm) tai tuumina.

Kuvan tiedostokoko riippuu sekä tiedostomuodosta että kuvan ominaisuuksista. Näitä ominaisuuksia ovat kuvan fyysinen koko, kuvan resoluutio ja kuvan värit. Mitä enemmän kuvassa on värisävyjä, sitä suurempi on kuvatiedoston koko.

Kuvan tarkkuutta eli resoluutiota mitataan pikselien (kuvapisteiden) tiheytenä. Mittayksikkönä on useimmiten dpi (dots per inch). Mitä suurempi resoluutio kuvassa on, sitä tarkempi kuva on kyseessä. Kuvan resoluutioksi tietokonenäytöllä riittää 72 dpi, kun taas laadukas painokuva vaatii resoluutiokseen 300 dpi. Verkossa on olennaista, että kuvatiedosto on mahdollisimman pieni, mutta silti laadukas. Näin se aukeaa nopeasti ja vie myös mahdollisimman vähän palvelintilaa.

Kun digitaalikuvia luodaan kuvaamalla tai skannaamalla, voidaan kuvan resoluutio määritellä ennen kuvan luomista. Kuvan resoluutiota voi jälkikäteen pienentää kuvankäsittelyohjelmalla. Näin esimerkiksi suuresta kuvasta saadaan verkkojulkaisuun sopiva. Kuvan resoluution lisääminen jälkikäteen ei kuitenkaan enää lisää sen tarkkuutta.

HUOM! Näyttölaitteista puhuttaessa resoluutiolla tarkoitetaan näytön kokoa pikseleillä mitattuna, esim. 1280 x 1024 pikseliä.

Kuvankäsittely

Kuvankäsittelyllä tarkoitetaan kuvan eri ominaisuuksien muokkaamista. Yleisimpiä toimenpiteitä ovat kuvan koon muuttaminen, kuvan rajaaminen, väritasapainon korjaus, valotuksen korjaus ja terävöittäminen. Kuvaan voidaan myös lisätä uusia elementtejä.

Kaupallisia kuvankäsittelyohjelmia ovat mm. Adobe Photoshop, Corel Paint Shop Pro ja Corel Photo-paint. Verkossa kotikoneelle ladattavia ilmaisohjelmia on myös runsaasti:mm. IrfanView (http://www.irfanview.com/), GIMP (http://www.gimp.org/) ja Paint.NET (http://www.getpaint.net/index.html).

Osa edellä mainituista ohjelmista tarjoaa pelkästään työkaluja kuvien käsittelyyn (IrfanView), kun taas toisissa on myös laajat mahdollisuudet grafiikan luomiseen (Photoshop, GIMP).

Tehtävä: Kuvan koon muuttaminen

  • Mene osoitteeseen http://users.jyu.fi/~tatjana/htkp315/. Tallenna sieltä oleva kuvatiedosto hurtta.jpg kurssilla luomaasi kuvat-kansioon.
  • Käynnistä GIMP - se on asennettu kaikkiin yliopiston verkossa oleviin koneisiin.

Ohjelman avauduttua huomaat, että GIMP rakentuu kelluvista ikkunoista. Ikkunoita voi liikutella työpöydällä raahaamalla niitä yläpalkistaan. Niitä voi myös avata ja sulkea tarpeen mukaan. Huomaa kuitenkin, että sulkemalla ohjelman pääikkunan sulkeutuu koko ohjelma. Ikkunoiden avaaminen tapahtuu valikkokomennolla Windows | Dockable Dialogs ja valitsemalla sieltä haluttu ikkuna.

Työkalulaatikko (Toolbox) -ikkunasta, löytyvät myös työkalujen pikakuvakkeet ja työkalukohtaiset asetukset. Kuhunkin työkaluun liittyviä säätömahdollisuuksia on näkyvissä työkaluikkunan alaosassa Työkaluasetukset-ikkunassa. Jos tämä osa ei ole näkyvissä, saa sen esille valikkokomennolla File | Dialogs | Tool Options.

HUOM! Myös GIMPissä toimii Ctrl+Z pikakomento, jolla voit perua viimeksi tekemäsi toiminnon.

  • Avaa äsken tallentamasi kuvatiedosto toiminnolla Tiedosto | Avaa (File | Open).

Kuvaa voi tarkastella haluamassaan koossa. Suurentaminen onnistuu joko Suurennoskerroin (Zoom) -työkalun avulla, Näytä (View) -valikon kautta tai kuvaikkunan alalaidan pudotusvalikosta. Suurennetusta kuvasta näet, miten kuva muodostuu väripisteistä.

  • Tarkastele avautuvaa kuvaa suurentamalla sen koko näytössä 400 %.
  • Pienennä kuvaa jälleen niin, että näet sen kokonaan. Suurennoskerroin (Zoom) -työkalun zoomaus muuttuu pienentäväksi, kun pidät Ctrl-näppäintä alaspainettuna työkalua käyttäessäsi.

Muutetaan kuvan kokoa.

  • Valitse kuvaikkunasta Image | Scale Image. Muuta kuvan resoluutioksi 72 dpi ja fyysiseksi kooksi 300 x 400 pikseliä. Saat säilytettyä kuvan mittasuhteet, kun varmistat, että kokoarvojen vieressä olevien ketjukuvakkeiden ketjut ovat yhtenäisiä. Huomaa, että voit pudotusvalikoiden kautta valita yksikön, jolla haluat määritellä kuvan kokoa ja resoluutiota.
  • Tallenna kuva uudella nimellä hurtta2 valitsemalla File | Save as. Valitse kohdasta Select file type tallennusmuodoksi jpg. Kun valitset Save, ohjelma kysyy jpg-kuvan tallennuslaatua. Valintasi vaikuttaa kuvan laatuun ja tiedostokokoon; mitä pienempi lukuarvo sitä heikompilaatuinen kuva ja pienempi tiedostokoko. Voit hyväksyä ehdotetun laadun.

Kuvankäsittelyssä on aina hyvä tallentaa välivaiheita käsiteltävästä kuvasta. Tehtyjä muutoksia voi kumota Ctrl+Z -toiminnolla vain rajoitetusti.

HUOM! Älä käytä skandinaavisia kirjaimia verkkosivuille tulevien kuvatiedostojen nimissä.

Tehtävä: Kuvan rajaaminen

  • Valitse valikosta Image | Transform ja sieltä sopiva kiertotyökalu (Rotate). Klikkaa kuvaa ja kierrä sitä 90 astetta vastapäivään joko hiiren avulla rahaamalla tai kirjoittamalla avautuvaan ikkunaan kiertokulmaksi -90. Hyväksy valinta.
  • Rajaa kuvaa pienemmäksi Crop-työkalulla. Rajauksen voi tehdä hiirellä vetämällä. Hyväksy tekemäsi rajaus klikkaamalla valinta-alueen keskeltä. Muista tallentaa!

Tehtävä: Harmaasävykuva

  • Muuta kuva mustavalkoiseksi komennolla Image | Mode | Grayscale.
  • Tallenna kuva jälleen jpg-muodossa, nyt nimellä hurtta_mv.
  • Avaa resurssienhallinta tai Oma tietokone (My Computer). Sinulla pitäisi nyt olla tallennettua kolme kuvatiedostoa: hurtta.jpg, hurtta2.jpg ja hurtta_mv.jpg. Tutki, miten kuviin tekemäsi muutokset vaikuttavat tallentamiesi kuvien tiedostokokoihin.
  • Voit halutessasi lisätä nämä testikuvat vaikkapa index-sivulle.

Sovelletaan näitä taitoja nyt demoissa työstetylle sivustolle.

Kuvagalleria

Seuraavaksi tehdään kuvagalleria HTML-koodia käyttäen. Tässä kuvagalleriassa pikkukuvaa (thumbnail-kuvaa) klikkaamalla avautuu suurempi kuva suoraan selainikkunaan.

Tehtävä: Thumbnail-kuvien luominen

  • Avaa tiedosto virusinfo.html html-editorissa.
  • Tallenna virusinfo.html-tiedosto uudella nimellä galleria.html.
  • Muokkaa sivun otsikkoa (title) ja metatietoja sivulle sopivaksi.
  • Poista sivun tekstit, mutta älä div-elementtejä, ja vaihda ensimmäiseksi otsikoksi esim. Kuvagalleria.
  • Muokkaa sivun navigaatio kuvagalleria-sivulle sopivaksi.

Ennen kuin jatkamme tiedoston muokkaamista, haemme galleriaan tarvittavan kuvamateriaalin. 

  • Luo HTKP315-kansioon kansio nimeltään galleria.
  • Mene osoitteeseen http://users.jyu.fi/~tatjana/htkp315/ ja lataa sieltä zip-tiedosto galleria.
  • Pura zip-tiedostosta kuvat galleria-kansioon. Purkaminen onnistuu siihen tarkoitetulla ohjelmalla, esim. IZArc.
  • Käynnistä GIMP-kuvankäsittelyohjelma.
  • Avaa äsken tallentamistasi kuvatiedostoista kuva1.jpg ja tallenna se uudelleen nimellä thumb_kuva1.jpg käyttäen File | Save as -komentoa.
  • Voit käyttää makusi mukaan jotakin seuraavista kolmesta tavasta. Voit halutessasi myös kokeilla kaikkia kolmea.


Kuvan pienentäminen niin, että mittasuhteet vääristyvät

Koska alkuperäinen kuva ei ole neliö, tulee sen pakottaminen neliön mittoihin vääristämään kuvaa.

  • Valitse Image | Scale Image tai sama työkalu työkaluikkunasta (Toolbox).
  • Avautuvassa ikkunassa on syöttökentät kuvan leveydelle ja korkeudelle. Klikkaa ne yhdistävää ketjupainiketta niin, että ketjun osat irtoavat toisistaan. Näin otetaan kuvan mittasuhteiden säilyttäminen pois päältä.
  • Syötä kuvan leveydeksi 100 pikseliä ja korkeudeksi 100 pikseliä. Hyväksy Scale-painikkeella.

Pienemmän kuvan rajaaminen alkuperäisestä

Usein kuvista käytetään vain pientä osaa thumbnail-kuvakkeessa. Voit tehdä sen joko suoraan alkuperäisen kokoisesta kuvasta tai ensin hiukan pienentää sitä.
•    Valitse työkaluikkunasta Crop Tool -työkalu. Rajaa sillä kuvasta neliönmuotoinen alue ”maalaamalla” kulmasta kulmaan.
•    Valitse rajattavan alueen kooksi Työkaluasetukset (Tool options) -ikkunassa 100 x 100 pikseliä  Työkaluasetukset ovat näkyvillä työkaluikkunan (Toolbox) alalaidassa tai saat ne esille valikkokomennolla Windows | Dockable dialogs | Tool options.
•    Voit vielä liikutella valinta-aluetta kuvassa tarttumalla alueen keskeltä ja raahaamalla sitä hiirellä. Kun olet tyytyväinen valintaan, hyväksy se klikkaamalla valinta-alueen keskellä.

Kuvan pienentäminen niin, että osa kuvasta leikkautuu pois

Jos halutaan välttyä kuvan vääristymiseltä, voidaan osa kuvasta yksinkertaisesti leikata pois.

  • Valitse Kuva | Skaalaa (Image | Scale).
  • Varmista, että tällä kertaa mittasuhteet säilyvät, eli ketjukuvake on yhtenäinen.
  • Anna lyhyemmän sivun (kuvasta riippuen korkeus tai leveys) arvoksi 100 pikseliä.
  • Leikkaa pidemmältä sivulta ylimenevä osa pois valitsemalla Image | Canvas size. Ota nyt ketjukuvake pois päältä ja anna pidemmän sivunkin kooksi 100px. Ikkunan alaosassa olevasta valikosta voit määrittää, mistä kohtaa ylimääräinen osa leikataan pois.

Seuraavaksi tehdään sama toimenpide kaikille galleria-kansion kuville.

  • Tallenna jokainen galleria-tiedoston kuva uudelleen thumb-etuliitteellä varustettuna 100 pikselin levyisenä ja korkuisena.

Tehtävä: Gallerian valikon luominen verkkosivulle

Jatkamme kuvagallerian muokkaamista. Annetaan tiedostolle ensin muutamia perustietoja.

  • Palaa HTML-Kit-ohjelmaan ja tiedoston galleria.html-muokkaukseen.
  • Lisää sisältödiviin ensimmäinen edellä luoduista thumbnail-kuvista img-elementillä. Muista pakolliset attribuutit alt ja src. Voit käyttää myös kuvan ohjattua kuvan luomista Objects-välilehdeltä.

Jotta kävijä tunnistaisi thumbnail-kuvan hyperlinkiksi, voidaan kuvaan lisätä myös avusteteksti, joka ilmestyy, kun hiiren osoitin viedään kuvan päälle. Tämä on mahdollista title-attribuutin avulla.

  • Lisää img-elementtiin attribuutti title ja anna sen arvoksi tieto kuvan toiminnasta, esim. klikkaa suuremmaksi.
  • Testaa title-attribuutin toimintaa selainnäkymässä viemällä hiiri kuvan päälle. Avustetekstin pitäisi nyt tulla esille.

Lisätään vielä itse hyperlinkki.

  • Tee kuvasta hyperlinkki a-elementin avulla. Hyperlinkin kohteena on nyt alkuperäinen kuva eli thumbnail_kuva1.jpg-tiedostosta vie hyperlinkki kuva1.jpg-tiedostoon.
  • Tallenna ja kokeile kuvalinkin toimintaa selaimessa.


Kuva voidaan määrittää avautumaan myös uudessa ikkunassa.

  • Lisää normaalin href-attribuutin lisäksi hyperlinkkiin uusi attribuutti target ja sen arvoksi _blank. Samaa attribuuttia voi käyttää myös muiden hyperlinkkien kanssa.
  • Lisää myös loput kuvaelementit samaan tapaan.

Muotoillaan vielä kuvia.

  • Jotta thumbnail-kuvia olisi helppo muotoilla, sulje ne vielä oman div-elementtinsä sisään, joka sijaitsee sisalto-divin sisällä. Anna elementille id-attribuutti ja sille yksilöllinen arvo, esim. galleria.
  • Luo CSS-tiedostossa uusi tyyli #galleria img, jolla muokkaat tässä divissä olevia kuvia. Poista sen avulla kuvista reunukset ja tarkastele esikatselussa.
  • Tallenna ja esikatsele. Nyt siniset reunukset ovat hävinneet kuvista.
  • Lisää halutessasi tyylille vielä ominaisuus float:left, jotta kuvat asettuvat aivan rinnakkain. Tästä aiheutuvan taustaväriongelman voit korjata lisäämällä vielä #sisalto-tyylille ominaisuuden overflow:hidden.
  • Muokkaa ulkoasua vielä mielesi mukaan, esim. reunuksia, marginaaleja, täytettä.

 

Lisää GIMP-ohjeita

GIMPin viralliset sivut http://www.gimp.org/tutorials/

GIMP Suomi -yhteisön sivut osoitteessa http://www.gimp-suomi.org/ ovat vielä alkutekijöissään, mutta sinnekin ollaan keräämässä erilaisia oppaita ja neuvoja.

Materiaalin on laatinut Tanja Välisalo.