Suntuubi-palvelussa käytetään evästeitä. Palvelua käyttämällä hyväksyt evästeiden käytön. Lue lisää. OK

Tässä kerron, kuinka saat piirrettyä ikioman WEB 2.0 -tyylisen navigaationäppäimen

© Pakopaikka * BluesPre * 2008


Jossain vaiheessa on pakko ryhtyä luomaan graafisia elementteja itse, jos haluaa omien nettisivujen ulkoasun pysyvän mahdollisimman omaperäisenä. Internetista löytyy valmiita ratkaisuja, mutta jokaisen aiheesta kiinnostuneen on silti hyvä tietää, kuinka tämä tehdään.

Paras kuvankäsittelyohjelma tähän tarkoitukseen olisi Adoben Photoshop, mutta tämä vaihtoehto edellyttää ison summan sijoittamista itse ohjelmistoon. Koska nyt puhutaan jokaisen aloittelijan ulottuvilla olevista työkaluista, Photoshop joudutaan (valitettavasti) jättämään pois laskuista. Onneksi on muitakin mahdollisuuksia. Tällä kertaa kokeillaan voimia ilmaisen paint.net -ohjelman avulla. Piirretään  yksinkertainen graafinen elementti, kuten navigointinäppäin.

Itse ohjelman saat imuroitua tästä: Get Paint.NET!



Asentamisen jälkeen voit joko avata valmiin tiedoston, jonka saat tästä, tai aloittaa puhtaalta pöydältä ja yrittää luoda kuvan kokonaan itse, ohjeideni avulla.

Luodaan uusi tiedosto valikon kautta File -> New, tai painamalla "New"-kuvaketta. Aukeaa ikkuna, jonka avulla määritellään kuvan koko. Esimerkkikuvan koko on 150*50 pikseliä. Kun teet näppäimen omaa sivustoa varten, ota huomioon navigointipalkin asetukset ja valitse koko sen mukaan.



Painaa "ok", uusi tyhjä kuva aukeaa. Jotta voit piirtää tarkasti, täytyy nostaa esille ruudukko (Grid) sekä mitta-asteikot. Tämä tehdään valikon avulla, View -> Grid ja View - > Rulers. Koska kuvaa ei ole zoomattu ja ruudukon koko on 1*1 pikseli, et huomaa mitään muutoksia. Näin pienessä tilassa työskentely ei ole mukavaa, joten suurennetaan kuvaa, samalla ruudukkokin tulee näkyviin. Suurennus on toteutettu Photoshopin tavoin näppäinyhdistelmällä Ctrl ja + (vastaavasti loitonnat kuvaa painamalla Ctrl ja - yhtäaikaisesti). Myös suurennuslasikuvakkeen avulla voit zoomailla, mutta näppäinten avulla se on huomattavasti vaivattomampaa. Zoomataan 600-prosenttiseksi.



Ennen kun piirretään, yksi huipputärkeä seikka: kaikki nykyaikaiset kuvankäsittelyohjelmat osaavat työskennellä tasojen kanssa, Paint.net ei ole tässä suhteessa poikkeus. Jos et ole perehtynyt tähän konseptiin, riittää, kun kuvittelet, että valkoisen paperin sijaan piirrät kaiken läpinäkyvien piirtoheitinkalvojen päälle. Kun asetat kalvot päällekkäin, saat aikaan kuvan, jonka kaikkia osia voit siirrellä ja muuttaa, tai poista kokonaan ilman, että muut osat kärsivät. Jos et tykkää jostain, ei tarvitse piirtää kokonaan alusta, vaan otat esille uuden kalvon yhtä kuvan osaa varten. Muista siis sijoittaa kaikki piirettävän kuvan osat omalle tasolle, eli Layerille. Voit lisätä effekteja ja sommitella uudestaan!

Okei, aloitetaan navinäppäimen piirtäminen. Valitse itsellesi sopiva pää- ja apuväri (primary ja secondary color). Itse valitsin toki punaisen.



Seuraavaksi luodaan uusi taso näppäintämme varten. Tämä siksi, että tarvittaessa voidaan täyttää valkoinen tausta millä tahansa värillä, jos sivujen ulkoasu sitä vaatii. Näppäin tulee koostumaan neljästä tasosta, jotka ovat tyhjä tausta, itse näppäimen "runko", pulleasta muodosta heijastuvaa valoa matkiva elementti, eli "heijastus", sekä teksti.

Uusi taso luodaan valikosta Layers -> New, taikka painamalla Layers ikkunan alareunassa olevaa Add New Layer -kuvaketta. Huomaat, että ikkunaan ilmestyy uusi läpinäkyvä taso, Layer 2. Poistamalla oikealla puolella näkyvän ruksin, kytket tason pois näkyviltä. Muista aktivoida klikkaamalla se taso, johon haluat muutosten kohdistuvan!



Valitse sen jälkeen Tools-ikkunasta Rounded rectangle tool -kuvake (toiseksi alimmassa rivissä, pillerin näköinen kuvake). Aina kun aktivoit jonkun työkalun, ikkunan yläreunaan ilmestyy joukko tämän työkalun säätöihin vaikuttavia aputyökaluja. Valitse pudotusvalikosta Draw filled shape. Muut vaihtoehdot ovat piirtää pelkkä peunaviiva, tai päävärillä täytetty muoto, jonka ympäröi apuvärillä toteutettu reunaviiva.





Aseta kursorin keskikohta kuvan vasempaan yläkulmaan niin. että ylä- ja alareunaan jää yksi pikseli tilaa, ja vedä alas ja oikealle, kunnes muoto on täyttänyt koko ruudun, jättäen kuitenkin yhden pikselin paksuisen reunan ympärilleen.



Nyt ota Tools-valikosta Magic wand (taikasauva) -työkalun, joka näyttää tikulta, jonka päässä on pieni oranssi hehkuva pallo. Klikkaa punaista näppäintä. Taikasauva aktivoi punaisen alueen. Seuraavaksi se peitetään liukuvärillä, eli Gradientilla. Muuta valkoinen väri vaaleanpunaiseksi Colors-ikkunan avulla. Ota Tools-valikosta Gradient-työkalun (kerrosta alempana, kun Taikasauva). Sitten klikkaa punaisen muodon yläreunaa ja vedä alas,  painamalla samalla Vaihto (Shift) -näppäintä, jotta muutos tapahtuu tarkasti pystysuunnassa. Näet, kuinka muoto peittyy gradientilla, luomalla illuusion kolmeuloitteisesta muodosta.



Tehostaakseemme tulevan näppäimen kolmiulotteisuutta, lisäämme siihen "heijastuksen". Sen avulla näppäin saa lisää syvyyttä sekä kiiltoa. Luodaan uusi taso painamalla Add New Layer -kuvaketta Layers-ikkunassa (kaikki ikkunat saa päälle/pois valikosta Window). Mikäli uusi taso (Layer 3) ei ole valittu, aktivoidaan se klikkaamalla kerran sen päälle. Yleensäkin kannattaa nimetä kaikki tasot uudelleen, jotta näkisi heti, millä tasolla on mikäkin osa kuvaa. Tämä tehdään klikkaamalla tasoa kahdesti ja kirjoittamalla haluttu nimi kenttään.

Valitse Rounded rectangular tool, jolla näppäin piirettiin. Valitse pääväriksi valkoinen. Varmista, että Rounded rectangular tool -valikossa on Draw Filled Shape valittuna. Aseta kurssori piirretyn muodon vasempaan yläkulmaan, punaisen ja vaalean taustan rajalle ja vedä oikealle ja alas niin, että saat aikaiseksi valkoisen "pillerin", joka ulottuu korkeussuunnassa punaisen näppäimen (noin) puoleenväliin. Klikkaa aktiivista tasoa kahdesti ja aseta "Opacity" -säädintä arvolle 160. Huomaat, kuinka "heijastuksesta tulee läpinäkyvä.



Seuraavana lisätään näppäimeen teksti. Luo uusi taso (katso yllä, jos et vielä muista, miten) ja aktivoi se. Klikka Tools-ikkunasta Text -työkalu aktiiviseksi (se on kuvake, jossa näkyy iso A-kirjain). Valitse mieleisesi kirjasinlaji, ja väri. Aseta fontin kooksi 12 pt. Klikkaa kuvan päälle, jotta kursori tulee näkyviin. Kirjoita haluamasi teksti. Voit katsoa, kuinka muutokset, jotka teet ylärivin valikoista, vaikuttavat tekstiin.

Kun alussa vertasin kuvatasoja piirtoheitinkalvoihin, en maininnut, että kuvankäsittelyohjelmassa tasojen järjestyksellä on vaikutus siihen, mikä taso on minkäkin alla. Koska yritämme saada aikaan kolmiulotteiselta vaikuttavan kuvan, muutamme tasojen järjestystä niin, että heijastus on päällimmäisenä, sen alla on teksti, joka on ikän kuin kiiltävän pinnan alla, sitten on itse näppäin ja viimeisenä tausta. Tämä tehdään Layers ikkunan alareunassa näkyvien nuolikuvakkeiden avulla. Valitse tekstin sisältävä taso ja klikkaa alaspäin osoittavaa nuolta. Huomaat, että heijastus peittää nyt osittain tekstin.

Kytke nyt ruudukko pois päältä ja zoomaa kuva 100% :iin. Ihaile työsi jälkeä :)

Voit myös liittää tasoihin erilaisia effekteja.

Zoomaa taas 300 prosenttiin, mutta älä kytke ruudukkoa päälle. Valitse heijastuksen sisältävä taso ja valitse valikosta Effects -> Blurs -> Gaussian blur. Aseta arvoksi 3 tai 4 pikseliä.  Valitse tekstitaso ja kokeile Effects -> Photo -> Glow, (radius=5, brightness=65, contrast=100). Voit toistaa myös saman toimeenpiteen kerran painamalla "Repeat glow" Effects-valikossa.

Lopuksi tallennetaan kuva. Jos haluat käyttää tätä jatkossa (esim. jos sinulla on useampi eri tekstit sisältävä näppäin), voit lisätä loputtomasti tasoja, joihin tulee tekstit (muista kytkeä ylimääräiset tekstitasot pois näkyviltä). Jotta nämä tiedot säilyvät, tulee kuva tallentaa muotoon "tiedosto.pdn". Kun tallennat esim. JPEG -muotoon, kuva pakataan ja nämä tiedot häviävät. Tämän takia kannattaa aina ensin tallentaa alkuperäisvedos pakkaamattomana, ja vasta sitten JPEG tai GIF tai PNG -muotoon ennen palvelimelle tallennusta. Valitse File -> Save as... -> JPEG. Voit säätää pakkaustasoa sopivaksi (laatu/koko suhde) ja tallentaa. Jos haluat tallentaa useampaa versiota (monta eri tekstitasoa, kun ensimmäinen JPEG on seivattu, paina Ctrl+Z, tai valitse Edit -> Undo, kytke päälle / pois tarvittavat tasot ja tallenna taas eri nimellä.

Tässä kaikki. Enjoy!





Made with Paint.NET


©2017 Pakopaikkani - suntuubi.com