Kuvankäsittely ja WWW-sivun ulkoasu

• Mallivideot
• Kuvankäsittely
• Erilaisten kuvien käsittelyä
  • Kaaviokuvat
  • Läpinäkyvät kuvat
  • Mustavalkokuvat
  • Ruutukaappaukset
• Kuvan liittäminen WWW-sivulle
• WWW-sivun ulkoasun muotoilu
• Useiden kuvien muokkaus
• Kuvagalleria WWW-sivulle

Näissä demoissa tutustutaan kuvankäsittelyyn ja kuvaformaatteihin. Demon lopuksi sijoitetaan kuva myös WWW-sivulle ja opetellaan perusteita WWW-sivun ulkoasun muuttamisesta.

Kuvankäsittely

WWW:ssä käytettävässä grafiikassa on erityisesti otettava huomioon kuvan tiedostonkoko sillä isojen kuvien liikuttaminen verkon ylitse on hidasta. Kuvan kokoa pystytään pienentämään rajaamalla kuvaa, tarkkuutta pienentämällä ja pakkaustehoa lisäämällä. Tekstinkäsittelyohjelmissa voidaan yleensä käyttää tarkimpia ja suurimpia mahdollisia versioita kuvista jos levytilasta ei ole pulaa. Kotikoneisiin pitää asentaa tehtävissä käytetty Irfanview-ohjelma.

1. Tallenna mallikuva editoitavaksi C:-asemalle MyTemp-hakemistoon. Älä tallenna U:-asemalle, koska verkkolevyltä suurien kuvien editoiminen on hyvin hidasta.
2. Käynnistä Irfanview (Start|Programs|Irfanview|Irfanview 3.95).
3. Avaa äsken tallentamasi kuva Irfanviewilla.
4. Käännä kuva oikeaan asentoon

   Kokeile Image|Rotate Left ja Image|Rotate Right -komentojen toimintoja.

5. Kuvan kokoa voit muuttaa valinnalla Image|Resize/Resample.

   Kuvan kokoa muutettaessa vaikutetaan joko kuvan fyysiseen kokoon (kuvapisteiden määrään) jos kuvaa on tarkoitus käyttää esim. WWW:ssä tai kuvan tulostustarkkuuteen (montako pistettä tuumalle) jos kuvaa ollaan käyttämässä tulosteissa.

   Kokeillaan miten eri tavat muuttaa kuvan kokoa vaikuttavat lopputulokseen.

   • Varmista, että Preserve aspect ratio-kohta on valittuna, koska muuten kuvan suhteet voivat vääristyä.
   • Valitse yksiköiksi (units) senttimetrit (cm)
   • Valitse kuvan kooksi 15 x 11.25 cm
   • Valitse OK
   • Kopioi kuva leikepöydälle valinnalla Edit|Copy
   • Käynnistä Microsoft Word ja aloita uusi tyhjä dokumentti. Liitä kuva leikepöydältä dokumenttiin.
   • Palaa takaisin Irfanviewiin ja kumoa edellä tehty kuvakoon muutos Edit|Undo
   • Siirry uudelleen muuttamaan kuvan kokoa Image|Resize/Resample
   • Valitse jälleen yksiköiksi cm
   • Määrää jälleen kuvan kooksi 15 x 11.25 cm
   • Muuta kuvan tulostustarkkuudeksi (DPI, dots per inch, pistettä per tuuma) 300. Oletusarvona oleva 72 DPI on normaali näytön tarkkuus mutta tulostuksessa on syytä käyttää suurinta mahdollista. Jos kuvan uusi koko (new size) on tulossa suuremmaksi kuin alkuperäinen niin DPI on jo turhan suuri eikä laatu enää parane.
   • Valitse Ok
   • Kopioi kuva leikepöydälle ja liitä wordiin edellisen kuvan perään.
   • Voit nyt verrata kuvia. Molemmat ovat samaa kokoa mutta jälkimmäinen huomattavasti terävämpi ja tarkempi kuin ensimmäinen. Jos et huomaa eroa suoraan näytöltä niin kokeile tulostamista ja vertaa kuvia paperilta.

   Perussäännöt: Jos aiot käyttää kuvaa pelkästään WWW:ssä muuta kuvan kokoa normaalisti jolloin kuvan viemä levytila vähenee mutta tarkkuus riittää hyvin näytöltä katsottaessa. Jos taasen aiot tulostaa kuvan niin muuta kokoa DPI-arvoa säätämällä jolloin saat parhaimman lopputuloksen paperille.

   Pienennä kuva nyt vielä kokoon 800 x 600 pistettä jotta siitä saadaan WWW:hen sopivan kokoinen. DPI-arvolla ei ole WWW-käytössä merkitystä.

6. Rajaa kuvasta haluamasi alue.
   • Rajaa hiirellä kuvasta haluamasi alue
   • Tee kuvan lopullinen rajaus Edit|Crop to selection -valinnalla.
7. Terävöitä kuvaa tarvittaessa.

   Terävöinti tapahtuu valinnalla Image|Sharpen

8. Tallenna kuvan muokattu versio PNG-muodossa. PNG-formaatti on häviötön ja kuvaa voidaan edelleen muokata ilman laadun katoamista. Älä tallenna alkuperäisen kuvan päälle vaan tallenna uudella nimellä! Alkuperäisen kuvan päälle ei koskaan kannata tallentaa kuvaa muutosten jälkeen.
9. Tallenna kuva uudelleen WWW-käyttöä varten JPG-muodossa.

   Valokuvia käytetään WWW:ssä aina JPG-muodossa. JPG-muodossa tallennettua kuvaa ei kannata enää muokata vaan myöhemmin tarvittavat muutokset pitää tehdä PNG-muotoiseen kuvaan ja tallentaa aina tarvittaessa uusi WWW-versio JPG-muodossa.

   • Valitse oikea formaatti Save as type -kohdasta.
   • Formaatin valinnan jälkeen pääset muokkaamaan kuvan asetuksia options-dialogista. Tallentaessasi jpg-muodossa muista säätää tallennuslaatu (save quality) mahdollisimman pieneksi ilman, että kuvan laadussa on silminhavaittavaa heikentymistä. Pakkaustehon vaikutuksen kuvaan voit varmistaa avaamalla kuvan (jpg-version) uudelleen Irfanviewiin.

     Kokeile tallentaa pari eri versiota kuvasta. Valitse ensin tallennuslaaduksi 10 ja tallenna kuva nimellä hertta_ja_sulo1.jpg

     Tee tallennus uudelleen mutta valitse nyt tallennuslaaduksi 70 ja tallenna kuva nimellä hertta_ja_sulo2.jpg samaan kansioon XHTML-dokumenttisi kanssa.

   

10. Voit nyt avata irfanviewiin hertta_ja_sulo1.jpg-kuvan ja viereen www-selaimella hertta_ja_sulo2.jpg-kuvan ja verrata niiden laatua. Valitettavasti Irfanviewiin voi avata vain yhden kuvan kerrallaan.

11. Tallenna lopuksi tiedosto samaan hakemistoon XHTML-dokumenttisi kanssa nimellä hertta_sulo.jpg

12. Käy kokeilemassa JPG-pakkauksen toimintaa JPG-optimizer -palvelulla, jonka avulla voit optimoida JPG-kuvan mahdollisimman pieneksi. JPG-optimizer näyttää pakkaustehon numerona ja kuvan kyseisellä pakkausteholla pakattuna.
    • Anna ohjelmalle käsiteltävän kuvan osoitteeksi esimerkiksi http://appro.mit.jyu.fi/2003/syksy/tyovaline/demot/demo6/malli.jpg

Erilaisten kuvien käsittelyä

Eri tyyppiset kuvat tarvitsevat erilaista kuvankäsittelyä mikäli haluamme hyvännäköistä jälkeä WWW-sivulle. Seuraavassa tyypillisimpiä tapauksia.

Kaaviokuvat

1. Tallenna seuraava kaaviokuva C:\MyTemp-kansioon.
   • Esimerkkikaavio
2. Jos kyseessä on jokin muu kuin valokuva eli esimerkiksi piirros- tai kaavio-tyyppinen kuva niin kannattaa pudottaa kuvassa käytettävien värien määrä minimiin.
   • Tiettyyn värimäärään muuttaminen onnistuu valinnalla Image|Decrease Color Depth
   • Colors-kohtaan valitse haluamasi värimäärä. Valitse kokeilemalla mahdollisimman vähäinen määrä värejä joilla kuva vielä näyttää hyvältä. Kerran poistettuja värejä ei voi palauttaa kuin undo-toiminnolla tai avaamalla kuva uudelleen.
   
3. Tallenna kuva PNG-muodossa. PNG pakkaa hyvin kaaviot ja piirrokset eikä kadota niistä informaatiota.

Läpinäkyvät kuvat

Usein halutaan että sivun taustaväri näkyy läpi kuvan taustavärin kohdalta jolloin kuvaa voi käyttää helposti melkein minkävärisellä sivulla tahansa. PNG- tai GIF-tiedostomuodot tukevat myös läpinäkyvyyttä.

1. Tallenna kuva PNG-muodossa Irfanview-ohjelmassa
2. Varmista, että options-dialogissa on valittuna kohta Save Transparent Color
3. Save-painikkeen painamisen jälkeen hiirellä voi valita mikä väri kuvassa on läpinäkyvä.
4. Kokeile kuvaa Firefoxissa. Avaa kuva jompaan selaimeen (File|Open). Vaihda selaimen asetuksista sivun taustaväriksi (Tools|Options|). jokin muu kuin valkoinen.

Mustavalkokuvat

Mustavalkokuvat tulevat monesti aivan vahingossa tallennettua turhan monen värin paletilla ja vievät siten turhaan tilaa.

1. Tallenna mustavalkoinen kuva Mytemp-hakemistoon kuvankäsittelyä varten.
2. Vähennä värimäärä kahteen.
3. Tallenna kuva PNG-muodossa U-asemalle tyovaline-hakemistoon.

Ruutukaappaukset

Erilaisia ohjeita varten saatat tarvita kuvaruutukaappaus tietokoneen työpöydästäsi. Voit kaapata minkä tahansa näytöllä olevan ikkunan sisällön tai koko työpöydän sisällön kuvana leikepöydälle seuraavilla ohjeilla:

1. Aktivoi haluamasi ohjelman ikkuna.
2. Paina Alt + Print Scrn
3. Aktivoi Irfanview ja liitä (CTRL-V) leikepöydältä edellä kaappaamasi kuva muokattavaksi.
4. Pudota kuvan värimäärä pienemmäksi.
5. Tallenna kuva PNG-muodossa.
6. Kokeile vielä kaapata koko työpöytä painamalla pelkästään Print Scrn -näppäintä ja viedä kuva Irfanview-ohjelmaan.

Kuvan liittäminen WWW-sivulle

Lisätään hertta_ja_sulo2.jpg-kuva WWW-sivulle.

1. Käynnistä XetorJEdit ja avaa edellisissä demoissa tekemäsi xhtml-dokumentti.
2. Lisää XHTML-dokumenttiisi yksi uusi tekstikappale (p) haluamaasi kohtaan.
3. Lisää tekstikappaleen sisään img-elementti, jolla liität äsken muokkaamasi kuvan mukaan dokumenttiin. Valitse elementtipuusta img-elementti, napauta sitä oikealla hiiren napilla ja valitse Edit. img-elementti tarvitsee seuraavat ominaisuudet:
   • src-ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistorakenteessa dokumentin kanssa.
   • alt-ominaisuus kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia.
   • title-ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle.

   

4. Kirjoita dokumenttiin liittämällesi kuvalle järkevät title- ja alt-tekstit.

   Kokeile selaimella näkyykö kuva dokumentissasi.

   Jos kuvaa ei näy niin varmista, että kuva on tallennettuna samaan kansioon kuin xhtml-dokumenttisi. Tarkista myös, että kuvan nimi on tismalleen sama mitä kirjoitat src-ominaisuuden arvoksi.

5. Tallenna dokumenttisi

WWW-sivun ulkoasun muotoilu

WWW-sivun ulkoasu saadaan helposti muotoiltua kerralla käyttäen valmista tyylitiedostoa. Kokeillaan muokata myös muutamia ominaisuuksia.

1. Tallenna tyyli1.css-tiedosto samaan kansioon missä XHTML-dokumenttisi on.
2. Lisää XHTML-dokumenttisi head-osan sisään (valinta Inside...) link-elementti elementtipuun kautta
3. Valitse elementtipuusta edellä lisäämäsi link-elementti ja paina sen kohdalla hiiren oikeaa painiketta ja valitse ponnahdusvalikosta Edit
4. Muuta link-elementin attribuuteille seuraavat arvot:

   Ominaisuus	Arvo	Selitys
   href	tyyli1.css	Kertoo mitä tyylitiedostoa dokumentissa käytettän
   rel	stylesheet	Kertoo mikä suhde linkitetyllä tiedostolla on tähän dokumenttiin (tyylitiedosto)
   type	text/css	Kertoo käytetyn tiedoston tyypin

   
5. Tallenna XHTML-dokumenttisi.
6. Kokeile selaimella miltä XHTML-dokumenttisi näyttää.
7. Muuta Xetorilla tyylitiedoston määrityksiä valitsemalla Plugins|XML|Show CSS Dialog
8. Muuta koko sivun taustaväri valkoiseksi
   • Valitse body-elementti ikkunan vasemmasta laidasta.
   • Valitse background-color-ominaisuuden vieressä oikealla olevasta alasvetovalikosta arvoksi (Value) valkoinen (white).
   • Napauta alalaidasta Update file-painiketta niin muutokset tallentuvat.
9. Tee vielä seuraavat muutokset:
   • Määritä koko sivuston peruskirjasimeksi Verdana. Valintaa ei löydy alasvetovalikosta, joten joudut kirjoittamaan sen näppäimistöltä Value-sarakkeen soluun. Älä paina lopuksi enteriä vaan paina Update file-painiketta!
   • Muuta ensimmäisen tason otsikoille kirjaisimen kooksi 2.5em (h1-elementin font-size-ominaisuus). font-size-ominaisuuden saat näkyviin, kun valitset sen Property-sarakkeen tyhjän solun alasvetovalikosta.
   • Määritä toisen tason otsikoille marginaalia 2em:n verran (h2-elementin margin-ominaisuus)
   • Muuta normaalin tekstikappaleen (p-elementti) tekstin tasaus (text-align) molempiin reunoihin (justify).

Useiden kuvien muokkaus

Tehdään kuvagalleria nettiin. Tätä varten on hyvä ensin hieman pienentää kameralla otettuja isohkoja kuvia ja tehdä kuvista napautettavat postimerkkiversiot.

1. Tallenna seuraava digitaalisella kameralla otettuja kuvia sisältävä zip-paketti C:\Mytemp-hakemistoon.
2. Pura zip-paketti Mytemp-hakemiston alihakemistoon Tommin_digikuvia.
3. Muunnetaan Irfanview-ohjelmalla kaikki kuvat kerralla puoleen kokoon. Valitse File | Batch Conversion.
4. Valitse oikeassa yläkulmassa olevasta tiedostodialogista C:\Mytemp\Tommin_digikuvia ja paina Add all-painiketta.
5. Luo uusi alihakemisto nettikuvia ja tuplanapauta hakemistoa niin että pääset hakemiston sisälle.
6. Napauta painiketta Use this directory as output.
7. Valitse alareunasta Use advanced options ja napauta Set advanced options. Valitse Resize ja Set new size as percentage of original. Laita kohtiin Width ja Height luku 50. Napauta OK:ta.
8. Paina Start-näppäintä vasemmalta ylhäältä. Nyt pienennetyt kuvat tulevat nettikuvia-hakemistoon.

Kuvagalleria WWW-sivulle

1. Valitse Irfanviewin valikosta File | Thumbnails.
2. Etsi hakemistopuusta Tommin_digikuvia-hakemisto.
3. Valitse ensin kaikki kuvat (SHIFT-näppäimen avulla) ja sitten Thumbnails-ikkunan valikosta File | Save selected thumbs as HTML file.
4. Vaihda HTML-tiedoston nimeksi index.html ja kohdehakemistoksi C:\Mytemp\Tommin_digikuvia\nettikuvia.
5. Vaihda Page Titleen teksti Luontokuvia Suomesta
6. poista ruksi kohdasta copy original images to destination folder (recommended)
7. Laita ruksi kohtaan Create one HTML file for each thumbnail (HTML browsing)
8. Valitse Export.
9. Kokeile selaimella miten kuvagalleria toimii avaamalla edellä luotu index.html-tiedosto.

Huomaa, että Irfanview ei tee puhdasta XHTML:ää vaan vanhan muotoista HTML:ää. Sivu toimii kuitenkin hyvin nykyisillä (graafisilla) selaimilla.