Pieni johdatus kuvan läpinäkyvyyteen

Peruskäsitteet

Mitä tarkoittaa käsite ”kuvan läpinäkyvyys”? Ja miksi se on tärkeä asia nimenomaan WWW-julkaisujen parissa, vaikka sille toki löytyy muutakin käyttöä?

Tähän saakka olemme käsitelleet vain ja ainoastaan läpinäkymättömiä kuvia. Ne ovat suorakulmion muotoisia. Jos joku osa kuvasta leikataan pois, jäljelle jää valkoinen pohja. Tällainen kuva ei ole läpinäkyvä, vaan läpinäkymätön. Läpinäkyvä kuva sen sijaan on sellainen, että jos joku osa kuvasta leikataan pois, niin siihen ei jää yhtään mitään, ei edes valkoista pohjaa. Jos kuva on esimerkiksi WWW-sivuilla, niin taustalta näkyy pelkkä WWW-sivun pohjaväri, ei mitään muuta. Läpinäkyvään kuvaan ei kelpaa mikä tahansa formaatti, ei etenkään JPG-formaatti, joka on yleisin ja lähes standardi formaatti netissä julkaistuissa valokuvissa. Ainoastaan .gif- ja .png-formaatit käyvät läpinäkyvien kuvien tekemiseen. Jos oikein tarkkoja ollaan, niin .png-formaatti tukee myös läpikuultavuutta- sen pikseleitä voidaan alfakanavan avulla saada myös osittain läpinäkyviksi. Tässä kappaleessa keskitymme yksinkertaisiin läpinäkyviin kuviin, joissa jokainen pikseli joko näkyy tai ei näy, sen peitto-arvo on siis 0% tai 100%. Reunat ovat jyrkät ja selkeät. Läpikuultavien kuvien käsittely käydään läpi myöhemmin. 

Nykyään kaikki yleisimmät selaimet tukevat png-kuvien läpinäkyvyyttä. Kuitenkin harvinaisempien selaimien suhteen läpinäkyvyys ei ehkä ole tuettu. Sanottakoon kuitenkin, että vaikka kuvan läpikuultavuus onkin teknisesti erittäin ansiokas saavutus, läpikuultavat kuvat ovat www:ssä melko harvinaisia, joten ei kannata menettää yöuniaan jos käyttää jotain marginaaliselainta.

Mitä hyötyä on läpinäkyvyydestä?

Esimerkiksi

- Erikoisen muotoiset (esimerkiksi reunoistaan pyöristetyt) signaturet, logot tai WWW-painikkeet joita voi käyttää www-sivuilla, foorumeilla, Messenger-tunnuksina...

- Logojen yhdistäminen toisiin kuviin kopioimalla ja liittämällä ilman pohjavärin värisiä suorakulmioita niiden ympärillä. Esimerkiksi bändin CD-levyn kansi.  

- Joihinkin kuviin saa tämän avulla mm. 3D-tuntumaa.

Miten läpinäkyvän kuvan saa aikaiseksi GIMP:issä?

Kuvat GIMP:issä ovat oletusarvoisesti läpinäkymättömiä. Ota ”Tiedosto”=>”Uusi kuva”.

Kuva 1. Uuden kuvan luonti

Läpinäkyvyyden voit määrätä ”Kehittyneet asetukset”-kohdassa. Paina plussamerkintää ja se aukeaa:

Kuva 2. Kuvan kehittyneet asetukset. Paina OK.

Näistä asetuksista nimenomaan ”Täyttö”-kohta on tärkein. Luodaan ensin kuva oletusarvon ”Taustaväri” kanssa ja piirretään siihen jotain:

Kuva 3. Jotain töherrystä

Mitä erikoista on tässä kuvassa? Vastaus: ei tietenkään yhtään mitään. Se näkyy tallennettuna ja www-sivulla julkaistuna seuraavanlaisena:

Kuva 4. Talletettu ja julkaistu kuva

Seuraavaksi teemme uuden kuvan, ainoa ero on että kuvan 2 asetuksissa laitamme kehittyneissä asetuksissa asetuksen ”Täyttö: Läpinäkyvyys”.

Kuva 5. Läpinäkyvä kuva

Mitä tämä harmaa ruudukko ilmaisee? Se ilmaisee sen, että kuvassa ei ole siinä kohdassa mitään, se siis ”paistaa läpi”. Piirrelläänpä siihen jotakin:

Kuva 6. Jotain töherrystä

Sitten talletamme kuvan. On erittäin tärkeää, että tämän tekee esimerkiksi .gif-muodossa, koska esimerkiksi .jpg-formaatti ei tue läpinäkyvyyttä, eikä tämä esimerkki siis toimi!

Huomio! Muista, että samalla tapaa kuin piirtämällä saamme kuvaa siltä osin läpinäkyväksi kuin haluamme, pyyhekumilla pyyhkiessä sen pyyhkimä osuus muuttuu taas läpinäkymättömäksi. Suhtaudu siis tuohon läpinäkyvyyteen, harmaaseen ruudukkoon, ihan samalla tavalla kuin taustaväriin. 

Kuva 7. Muista .gif-pääte. Ja muista myös vanha kunnon ääkkösten ja erikoismerkkien kieltosääntö, ne tuovat vain harmia ennemmin tai myöhemmin.

Kuva 8. Vielä eräs ikkuna, joka voidaan ohittaa oletusasetuksin. ”Muunna indeksoiduiksi” tarkoittaa sitä, että jos kuvassa on enemmän kuin 256 väriä (.gif-kuvan maksimivärimäärä) niin värimäärä vähennetään tuohon lukuun. Valitse ”Vie”

Kuva 9. Ja sitten vain ”OK”.

Kuva 10. Läpinäkyvä kuva näyttää www-julkaisuna tältä. Läpinäkyvä kuva on siis kuin "tippaleipä", siinä voi olla aukkoja keskelläkin kuvaa. 

Läpinäkyvyyden idea on nyt korostetusti esillä keltaista sivupohjaa vasten. Jos sivupohja olisi valkoinen, niin käytännössä kuva ei näyttäisi erilaiselta.  Kuvan taustalla näkyvä sivupohja on siis tätä www-sivun pohjaa, ei mitään taustaväriä. Jos kuvassa olisi esimerkiksi linkki, niin sitä pääsisi klikkaamaan ainoastaan mustan osion päällä, ei keltaisen päällä, jossa ei ole mitään. 

Lopputehtävä: luo itse jokin logo tai signature, jossa käytät läpinäkyvyyttä hyväksesi. Mitä mielikuvituksellisempi, sitä parempi. Ohjelmistotilanteen, oppilaiden kykyjen ja opettajan harkinnan mukaan kuva voidaan esittää esim. NVU:lla tai vastaavalla HTML-editorilla tehdyllä värillisellä www-sivupohjalla aidolla www-sivulla tai sitten vain GIMP:in kuvaikkunasta.