Painikkeiden tekeminen

Kunnolliset kotisivut tarvitsevat itselleen koristukseksi painikkeita. Painikkeiden tekemisessä rajana on vain mielikuvitus: yksinkertaisimmillaan painikkeet ovat pelkkää tekstiä, mutta toisaalta ne voivat olla vaikkapa animoituja kuvia. Yleensä painikkeiden tarkoituksena on kiinnittää ihmisten huomio ja olla selkeästi klikattavan näköisiä. Ne myös voivat olla todellisesta maailmasta tuttuja asioita ja mielikuvia: esimerkiksi kirjekuoren klikkaaminen siirtyy postin lähettämisen puolelle.

Tässä esimerkissä tyydymme tekemään painikkeita yksinkertaisista perusmuodoista ja näytämme, miten niiden ulkonäköä voi tämän jälkeen ehostaa.

Avaa Paint Shop Pron File-valikosta New ja anna kuvan kooksi esimerkiksi 100x100 pikseliä ja valitse taustaväriksi valkoinen.

Poimi ruudun vasemmasta laidasta vektorityökalu ja valitse sen valmismuodoista Rounded Rectangle. Piirrä äsken avaamasi kuvan puolelle mieleisesi muotoinen neliö, tämä tulee toimimaan painikkeen pohjana. Valitse äsken tekemäsi kuvio taikasauvalla aktiiviseksi.

Siirry seuraavaksi Image-valikon Effectsiin ja poimi sieltä Drop Shadow. Näin saamme kuvaan taas tutun taustavarjon.

Varjo tekee painikkeesta jo tyylikkäämmän, mutta itse painikkeen pohja on vielä kovin tylsän näköinen. Avaa jälleen Images/Effects-valikko ja pinnoita painike Texture-toiminnolla. Mieleisesi tekstuurin valittuasi siirry pois valikosta.

Painike tarvitsee vielä loppusilauksena hieman kolmiulotteisuutta. Avaa Images/Effects-valikosta Inner Bevel ja valitse painikkeeseesi sopiva paksunnostyyli. Esimerkkipainikkeessamme se oli mallia Round.

Tallenna painikepohja haluamallasi nimellä talteen tässä vaiheessa.

Nyt on aika lisätä nappulaan tekstit. Aktivoi työkaluvalikosta tekstityökalu ja valitse sopiva fontti & väri (esimerkissämme hieman painikkeen pohjaa tummempi väri teksti + 18 pisteen Verdana-fontti). Sijoittele teksti painikkeeseen suunnilleen sopivalle kohdalle ja valitse tämän jälkeen Layers-valikosta "Convert to Raster".

Poimi työkaluvalikosta taikasauva (Magic Wand) ja heiluttele sillä teksti valituksi niksuttelemalla Shift-näppäin pohjassa sen kirjaimet läpi.

Tekstin valittuasi nappaa Image/Effects-valikosta Sculpture ja valitse sille sopiva materiaali (esimerkissämme Gold). Näin teksti sopii painikkeeseen paljon paremmin eikä näytä niin päälle liimatulta.

Jos painike miellyttää silmää, tallenna se ja tee muutkin tarvittavat painikkeet sivuille.