Nettigrafiikan tekeminen on hauskaa!

Nettisivuja työstäessäni olen saanut ihmetellä nykyisten kuvankäsittelyohjelmien uskomattomia ominaisuuksia. Hyvistä kuvankäsittelyohjelmista (kuten Adobe Photoshop CS3) löytyy suuri valikoima tehoste-efektejä, joilla voi tehdä vaikkapa ottamansa valokuvan pohjalta oikeita taideteoksia. Laitan tälle sivulle muutamia onnistuneita Photoshopilla tekemiäni töitä näytille. Toivottavasti ne osaltaan innoittavat teitä sivustollani vierailijoita tekemään omille sivustoilleen näyttävän näköistä grafiikkaa.

Olennaisena osana nettigrafiikan hyödyntämisessä on vuorovaikutteisuuden lisääminen grafiikkaelementteihin. Itse tykkään työstää sivuja xhtml+css+javaScript+php -pohjalta, joten käytän aika paljon javaScriptiä dynaamisten elementtien tekemiseksi sivuilleni. Neljännestä esimerkistä eteenpäin esittelenkin erilaisten efektien lisäämistä kuviin javaScriptin avulla.

Tällä sivulla olevat kuvat on vapaasti kaikkien käytettävissä kaikkiin ei-kaupallisiin ja "hyvän maun mukaisiin" tarkoituksiin. Toivottavasti niistä on iloa mahdollisimman monelle.

Ensimmäisessä esimerkissä olen työstänyt vasemmalla näkyvästä kuvasta (tässä piennettynä) leikkaamalla ja Photoshop CS3:n valikon Filter->Stylize->Glowing edges avulla (parametreja säätämällä) alla näkyvän lopputuloksen.

Toisen esimerkin alkuperäisessä kuvassa poseeraa sisilisko. Olin aika tyytyväinen alkuperäisen kuvan värisävyihin, mutta halusin sisiliskosta hieman piirretymmän näköisen. Tämä onnistui Photoshopilla valikon Filter->Brush Strokes->Accented edgesin avulla.

Usein kannattaa yrittää parasta lopputulosta käyttämällä useita eri filttereitä peränjälkeen, kuten alla olevassa kuvassa.

Toivottavasti edelliset esimerkkini ovat vakuuttaneet siitä, että näyttävänkin näköisen grafiikan tuottaminen kunnon kuvankäsittelyohjelmalla ei ole kovinkaan vaikeaa. Nyt on aika lisätä hieman javaScriptiä elementin onmouseover-attribuuttiin, jotta saadaan elementti liikkumaan. Tein tätä esimerkkiä (ja muuta hyödyntämistä) varten tiedostoon move-element.js javaScript-funktiot moveComponent ja moveElement, joiden avulla annettua nokkosperhosta esittävää kuvaa voi liikuttaa kahdeksaan ilmansuuntaan siten, että perhonen väistää hiiren osoittimen alta pois. Kuvan liikuttelun olen saanut tässä esimerkissä aikaiseksi käyttämällä kahdeksaa (ilmansuuntia vastaavaa) div-komponenttia, jotka ovat suorakulmion mallisina varsinaisen kuvan päällä. Ylemmän hiirikuvan olen jälleen työstänyt Photoshopilla oikealla näkyvästä alkuperäiskuvasta. Tällä kertaa olen kuitenkin leikannut hiiren ääriviivojaan myöden ja tallentanut läpinäkyvänä gif-kuvana. Esimerkin vuoksi olen tehnyt kahdeksasta ohjauselementistä osittain läpinäkyviä, jotta niiden merkitys tulisi näkyviin. Hiiriesimerkki demonstroi hyvin kahdeksan ohjauselementin käyttöä, mutta käytännössä näyttävintä on toteuttaa ohjauselementit läpinäkyvinä, jolloin kuva saadaan vaikkapa liikkumaan suoraan sivun päällä määrätyllä rajatulla alueella, kuten olen alla rajannut nokkosperhosen liikkumaan katkoviivalla rajattuun boksiin.

Jo edellisen esimerkin liikuttelutoiminnon avulla voisi kehitellä jonkin yksinkertaisen javaScript-pelin. Usein kuitenkin peli-ideat vaativat hieman monimutkaisempia toimintoja, jotta toimiva peli saadaan tehdyksi. Tällöin joutuu usein tekemään ja suunnittelemaan javaScript-koodia huomattavasti enemmän. Onneksi työn määrää voi usein merkittävästi pienentää käyttämällä muiden tekemiä koodeja. Tällöin on tietysti kunnioitettava tekijän koodilleen antamia käyttöoikeuksia. Viimeisessä esimerkissä käytän apuna Tim Taylorin kehittämää javaScript-koodia komponenttien liikuttelemiseksi. Tämän koodin avulla on helppo toteuttaa vaikkapa seuraavanlainen pikkusovellus, joka näyttää perhoskuvan vasemman yläkulman koordinaatit ruudulla, jos perhoskuvan vasen yläkulma on rajatun laatikon alueella. Ratamoverkkoperhosen liikuttelu onnistuu hiirellä tunnetulla drag-and-drop -menetelmällä.