Kuvankäsittely ja WWW-sivun ulkoasu - Demo 7

• Mallivideot
• Vektorigrafiikka
• Kuvan linkitys
• Kuvankäsittely
• Kuvan koko
  • DPI
  • Fyysinen koko
• Terävöinti
• Rajaus
• Kuvaformaatit
• Erilaisten kuvien käsittelyä
  • Kaaviokuvat
  • Läpinäkyvät kuvat
  • Mustavalkokuvat
  • Ruutukaappaukset
• Kuvan liittäminen WWW-sivulle
• WWW-sivun ulkoasun muotoilu
• Lisätehtäviä
  • Useiden kuvien muokkaus
  • Kuvagalleria WWW-sivulle

Näissä demoissa tutustutaan kuvien kopioimiseen ja linkittämiseen ohjelmien välillä, kuvankäsittelyyn ja kuvaformaatteihin. Sijoitetaan kuva myös WWW-sivulle. Muokataan WWW-sivun ulkoasua CSS-tyylien avulla.

Vektorigrafiikka

• Avaa Demo 5:ssa tekemäsi powerpoint-esitys
• Käynnistä Microsoft Word ja aloita uusi tyhjä dokumentti
• Kopioi powerpoint-esitykseesi tekemäsi diagrammi leikepöydälle.
  • Valitse ensin koko diagrammi napauttamalla diagrammialueen reunalle.
  • Automaattisilla muodoilla tehdyissä kaavioissa täytyy kaavion osat maalata valinta-alueen sisälle.
• Liitä kuva valinnalla Edit|Paste Special

  

  Valitse kuvaa liittäessäsi tyypiksi Picture (Enhanced Metafile)
  • Ellei kopiointi toimi, niin valitse diagrammin jokaisen osa erikseen pitämällä SHIFT-painiketta pohjassa.
  • Ellei kaaviosta saa valittua viivoja niin valitse ensin Organization Chart-työkalupalkista pois päältä valinta Layout | Autolayout
  • Viivat ovat saattaneet tulla vaikka ne eivät näy jos ne ovat valkoisia
• Kuva on nyt liitetty Wordiin vektorimuodossa ja voit vapaasti muuttaa sen kokoa ilman pelkoa laadun heikkenemisestä. Voit kokeilla liittää saman kuvan myös Bitmap-muodossa ja kokeilla kuinka paljon huonommin bittikarttaversio kestää kuvan suurentamista.
• Kopioi powerpoint-esityksestä myös piirtämäsi kaavio. Kaavion voit liittää Wordiin MS Office Drawing Object-muodossa jos haluat muutella sitä Wordissä. Jos kaavio kelpaa sellaisenaan niin paras muoto on jo edellä käytetty Picture (Enhanced Metafile). Kokeile eri muotoja.

Kuvan linkitys

Leikepöydän kautta voi tietyistä ohjelmista linkittää kuvia ja muuta tietoa Word-dokumenttiin. Linkitys tarkoittaa, että esim. Excelistä Wordiin linkitetty kuva päivittyy automaattisesti Word-dokumentissa jos sitä mennään Excelissä muuttamaan.

• Käynnistä Microsoft Excel
• Kirjoita seuraavanlainen taulukko:

  

  Tommi	10
  Jukka	11
  Riitta	12
  Mikko	13
  Pekka	14

• Maalaa taulukon solut

  

• Valitse työkalupalkista Chart Wizard
• Valitse Chart Wizardista suoraan Finish. Excelin ominaisuuksiin perehdytään tarkemmin henkilökohtaisen tiedonhallinnan perusteet -kurssilla
• Exceliin ilmestyy kaaviokuva. Tallenna Excel-dokumenttisi demo6.xls-nimelle.
• Kopioi kaavio leikepöydälle.

  

• Siirry Wordiin. Valitse Edit|Paste Special
• Valitse Paste Link

  

• Tallenna word-asiakirja demo7.doc-nimellä.
• Siirry exceliin ja muuta taulukon tietoja. Esim. muuta Tommin kohdalle arvo 20. Kaavion pitäisi muuttua automaattisesti sekä Excelissä että Wordissä.
• Valitse taulukko ja kopioi se leikepöydälle

  

• Liitä taulukko linkkinä Word-dokumenttiisi. Valitse tyypiksi Microsoft Office Excel Worksheet Object.

  

• Kokeile kuinka taulukon tiedot päivittyvät Wordissä automaattisesti jos muutat niitä Excelissä. Jos tiedot eivät päivity niin varmista, että sekä excel- että word-dokumentti on tallennettu.
• Tallenna Excel- ja Word-dokumenttisi

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.

• Tallenna mallikuva editoitavaksi U:-asemalle tyovaline/demo6-kansioon.
• Käynnistä Irfanview (Start | Programs | Irfanview | Irfanview 4.00).
• Avaa äsken tallentamasi kuva Irfanviewilla.
• Käännä kuva oikeaan asentoon

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

Kuvan koko

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.

DPI

• Kopioi kuva leikepöydälle ja liitä se Word-dokumenttiin.
• Palaa takaisin Irfanviewiin ja muuta kuvan kokoa valinnalla Image|Resize/Resample.
• 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.

  

  DPI-määritys ei vaikuta kuvan esittämiseen näytöllä.
• Kopioi kuva leikepöydälle ja liitä Wordiin edellisen kuvan perään. Voit nyt suoraan verrata kuvia keskenään ja arvioida mitä DPI:n muuttaminen vaikutti kuvan kokoon tulostuskäytössä.

Fyysinen koko

Kuvan fyysistä kokoa (kuvapisteiden määrää) pitää monesti vähentää jotta kuvasta saadaan sopivan kokoinen WWW-käyttöä varten.

• Palaa takaisin Irfanviewiin ja muuta jälleen kuvan kokoa valinnalla Image|Resize/Resample.
• Varmista, että Preserve aspect ratio-kohta on valittuna, koska muuten kuvan suhteet voivat vääristyä.
• Valitse käytettäväksi metodiksi (Size method) Resample ja Lanczos filter niin kuvan laatu säilyy parhaiten
• Valitse yksiköiksi (units) pikselit (pixels)
• Valitse kuvan kooksi maksimissaan 640 x 480 pikseliä. Riippuen kuvasi suhteista saat määrättyä vain joko kuvan leveyden tai koon. Määritä koko siten että leveys ja korkeus ovat kumpikin annettujen arvojen rajoissa.

  

• Valitse OK

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 vain DPI-arvoa säätämällä jolloin saat parhaimman lopputuloksen paperille. DPI:n säätämistä vastaa kuvan venyttäminen suoraan Wordissä mutta muista viedä kuva Wordiin mahdollisimman suurena (paljon kuvapisteitä, pikseleitä).

Terävöinti

Aina bittikarttakuvan pienentämisen jälkeen pitää kuvaa terävöittää.

Terävöinti tapahtuu valinnalla Image|Sharpen. Kokeile

Jos käyttämässä kuvankäsittelyohjelmassa on Unsharp Mask -toiminto niin tee aina terävöinti sillä. Irfanviewissä ei ole Unsharp Mask -toimintoa ole.

Rajaus

• Rajaa hiirellä kuvasta haluamasi alue
• Tee kuvan lopullinen rajaus Edit|Crop to selection -valinnalla.

Kuvaformaatit

• 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.
• 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ä.
  • Käy kokeilemassa JPG-pakkauksen toimintaa JPG-optimizer -palvelulla, jonka avulla voit optimoida JPG-kuvan mahdollisimman pieneksi. JPG-optimizer (Avaa uuteen ikkunaan) näyttää pakkaustehon numerona ja kuvan kyseisellä pakkausteholla pakattuna.
    • Anna JPG-optimizerille käsiteltävän kuvan osoitteeksi esimerkiksi http://appro.mit.jyu.fi/2003/syksy/tyovaline/demot/demo6/malli.jpg
  • Pakkaustehon vaikutuksen kuvaan voit varmistaa avaamalla edellä tallentamasi 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.

  

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

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. Kopioi powerpoint-esityksessäsi oleva kaavio leikepöydän kautta Irfanviewiin.
2. Jos kuva on liian suuri (yli 800x600 pikseliä) niin pienennä sitä Powerpointissa ja kopioi uudelleen.

   Pienentäminen kannattaa tehdä powerpointissa koska siellä kuva on vielä vektorimuodossa. Irfanview osaa käsitellä kuvaa vain bittikarttamuodossa eikä bittikarttojen pienentäminen (eikä varsinkaan suurentaminen) toimi koskaan niin hyvin kuin vektorikuvien.

   Kuvan koon voi tarkistaa valinnalla Image|Information

3. 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. Kuvassa voi olla näkyvissä vain muutama väri mutta sisäisesti kuvassa voi silti olla vaikka 16 miljoonaa väriä.
   • 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.
   
4. 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 | Content | Fonts&Colors) jokin muu kuin valkoinen. Värin vaihtaminen onnistuu Colours-napin kautta.

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 kuvaruutukaappauskuvan 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ä Amaya-editori ja avaa edellisissä demoissa tekemäsi XHTML-dokumentti.
2. Lisää uusi tekstikappale (p) haluamaasi kohtaan painamalla enteriä edellisen kappaleen lopussa.
3. Lisää tekstikappaleen kuva napauttamalla -painiketta.
   
   • Valitse kuvaksi hertta_ja_sulo2.jpg. Valittavan kuvan on syytä olla samassa hakemistossa XHTML-dokumentin kanssa.
   • Alternative Text-kohtaan on keksittävä vaihtoehtoteksti niille, jotka eivät pysty kuvaa näkemään.
4. Napauta kuvaa hiirellä tai vie kohdistin kuvan eteen. Lisää ruksi työkalupalkin Attributes-valinnan alta kohtaan title ja kirjoita tekstikenttään arvoksi Hertta ja Sulo. Napauta lopuksi hyväksymispainiketta.
   
5. Avaa dokumentti selaimessa (kuten edellisissä demoissa). Testaa, että kuva näkyy. Vie hiiren osoitin kuvan päälle ja odottele hetkisen. Title-ominaisuuteen kirjoittamasi tekstin pitäisi näkyä opasteena.
6. Valitse Amayassa Views | Show alternate. Onko alt-ominaisuuteen kirjoittamasi teksti riittävän kattava kertomaan mitä kuvassa on? alt-ominaisuuteen kirjoitettua tekstiä voi vaihtaa työkalupalkin Attributes-valinnan alta.
7. 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ä edellisissä demoissa tekemäsi XHTML-dokumenttisi on.
2. Valitse Amayassa Style | Link. Kirjoita tyylitiedostoviitteeksi tyyli1.css.
   
   Dokumentin ulkoasun pitäisi muuttua heti Amayan selainnäkymässä.
3. Valitse Views | Show structure. Minkä elementin äskeinen toiminto lisäsi ja millaisin ominaisuuksin?
4. Tallenna XHTML-dokumenttisi. Kokeile myös selaimessa miltä XHTML-dokumenttisi näyttää.
5. Avaa tyylitiedosto Amayaan muokattavaksi valinnalla File | Open document. Valitse avattavan tiedoston tyypiksi (Files of type) CSS files (*.css). Tyylitiedosto avautuu tekstinmuokkaustilaan.
6. Muuta koko sivun taustaväri valkoiseksi ja teksti mustaksi
   
   • Poista body-lohkon sisällä olevat rivit, joissa on ominaisuudet color ja background-color.
   • Katso, että kursori on body-lohkon sisällä. Valitse vasemman laidan työkalupalkista Colors-kohta. Valitse tekstin väriksi musta ja pohjan väriksi valkoinen. Napauta hyväksymispainiketta niin Amaya lisää tarvittavat CSS-merkinnät.
7. Tallenna CSS-tyylitiedosto ja valitse välilehti, jossa on XHTML-dokumenttisi. Värimuutoksien pitäisi näkyä.
8. Mene takaisin muokkaamaan CSS-tiedostoa ja poista body-lohkosta kirjaisinperheen (font-family) määritys ja lisää Characters-valikon avulla kirjaisinperheeksi päätteetön sans-serif.
   
9. Muuta normaalin tekstikappaleen (p-elementti) tekstin tasaus (text-align) molempiin reunoihin (justify).
   
   • Tee uusi rivi p-lohkon sisälle.
   • Avaa työkalupalkista Format-valikko.
   • Napauta Indent-kohdasta ruksia, ettei sisennystä tule. pt-yksikköä on syytä välttää, koska se on tulostuskokoon viittaava yksikkö.
   • Valitse neljäs sisennystapa ja napauta sen vierestä hyväksymispainiketta.
10. Määritä toisen tason otsikoille marginaalia 2em:n verran. Helpoiten tämä onnistuu muokkaamalla suoraan h2-elementin margin-ominaisuutta.

Lisätehtäviä

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.