3.2 Vektorigrafiikka
Vektorigrafiikka
Vektorigrafiikalla voidaan luoda erilaisia häviöttömästi skaalautuvia piirroksia. Tekniikka on paljon käytetty esimerkiksi logoissa, ikoneissa ja kuvakkeissa. Toisin kuin pikseligrafiikka vektorigrafiikka perustuu matemaattiseen laskentaan, joten se ei pikselöidy suurennettaessa.
Toisin kuin pikseligrafiikka vektorigrafiikan laatu ei muutu kuvaa suurennettaessa. Pikselikuvat (jpg, png…) koostuvat neliönmuotoisista pikseleistä ja suurennettaessa erilliset pikselit alkavat erottua kuvasta ja se ”pikselöityy”. Vinoviivasta tylee sahalaitainen pikselien neliömuodon ansiosta. Vektorigrafiikassa sen sijaan kuva muodostuu matemaattisista muodoista ja perustuu matemaattiseen laskentaan kahden pisteen välillä. Kuvaa suurennettaessa muoto ei muutu ja kuvan laatu pysyy veitsenterävänä loputtomasti.
Vektorigrafiikan piirtämisohjelmista ylivoimainen ykkönen on Adobe Illustrator. Ohjelmisto on kuukausimaksullinen ja melko kallis vaihtoehto peruskäyttäjälle ja siksi kannattaa valita jokin tarjolla olevista ilmaisohjelmistoista, joita löytyy verkko-ohjelmina. Sivuille joutuu usein kirjautumaan esimerkiksi Googlen tilin avulla. Käyttökelpoisia sivustoja ovat mm.:
Vaihtoehtona Inkscape tai Krita
Käytän vektorikuvien kanssa työskentelyssä Adobe Illustrator -ohjelmistoa. Jos ei aio hankkia Adobe ohjelmistoja ja kaipaa vastaavia mahdollisuuksia luoda vektorigrafiikkaa, suosittelen Inkscape-ohjelmaa, joka asennetaan koneelle. Inkscape ohjelmasta löytyy kaikki tarpeelliset toiminnot peruskäyttöön.
Jos olet kiinnostunut syvällisemmin piirtämisestä vektori- tai pikseligrafiikalla suosittelen Inkscapen vaihtoehtona omalle koneelle asennettavaa ilmaista ohjelmistoa Krita. Ohjelmisto on toiminnoiltaan monipuolinen ja tarkoitettu ensisijaisesti pikseligrafiikkaan mutta myös vektorigrafiikka onnistuu hyvin. Kritaa voi käyttää tämän lisäksi myös kevyeen kuvankäsittelyyn.
Vektorigrafiikan tekniikat
Vektoripiirtämisessä voidaan luoda valmiita muotoja, kuten neliöitä, ympyröitä, kolmioita yms. mutta voidaan piirtää myös suoraan kynä (pencil) työkalulla, joka löytyy tavallisimmista vektoripiirto-ohjelmista. Harjoituksen kuvan ympyrät on luotu valmiilla muodoilla ja tekstistä ”Your” Y-kirjaimesta lähtevä viiva on luotu kynätyökalulla (Pen tool).
Myös tekstiä voi luonnollisesti luoda ja edistyksellisemmissä ohjelmissa (esim. Inkscape) myös tekstin kirjainten muotoa voidaan muokata, sillä myös kirjaimet koostuvat vektoripisteistä.
Vecteezy – harjoitus vektorigrafiikalla
Tutustumme vektorigrafiikkaan ja sen piirtämiseen verkossa toimivalla ohjelmalla Vecteezy. Valitsin ohjelman esimerkiksi, jotta jokainen pääsee ohjelmaan käsiksi. Jos haluat myöhemmin tallentaa tuotoksesi, joudut luomaan käyttäjätilin tai kirjautumaan esimerkiksi Googlen tilillä palveluun.
Teemme harjoitukseksi logon ohjelmalla.
Avaa ohjelma osoittesta:
Klikkaa aluksi auki Background-välilehti ikkunan vasemmassa laidassa olevasta valikosta. aseta dokumentin kooksi esimerkiksi 1600x800px. Ohjelmassa vasemman puoleinen numero vaikuttaa korkeuteen ja oikeanpuoleinen leveyteen. Voit asettaa arvot joko tuplaklikkaamalla laatikkoa tai raahaamalla, jolloin arvo muuttuu.
Kun olet asettanut arvon siirry alimmaiseen Elements toimintoon.
Ohjelmassa on automaattisia muotoja, joilla voi aloittaa tekemisen.Valitse listasta ympyrän ja siirrä se työtilaan klikkaamalla muotoa. Ympyrä ilmestyy työtilaan. Voit muotoilla sen sopivan kokoiseksi kahvoista. Kun olet tyytyväinen asetamme ympyrälle sopivamman täyttövärin.
Klikkaa auki työkaluvalikon ylin valinta-työkalu ja klikkaa luotu ympyrä aktiiviseksi. Valitse täytölle väriksi vaikka vihreä #00ff00. Aseta objektille läpinäkyvyys 50%.
Tee vielä seuraavat kaksi ympyrää lisää valitsemalla muoto ja kopioi kaksi ympyrää lisää ylävalikossa olevan Duplicate-toiminnon avulla. Muotoile ympyrät sopiviksi mallin mukaan ja asettele ne mallin mukaisesti kolmion muotoon.
Lisää teksti ”color” tekstityökalun avulla ja aseta tekstin kooksi 120 ja väriksi jokin vihreän sävy. Voit käyttää myös värivalitsimen pipettityökalua, jos haluat saman värin, kuin vihreässä ympyrässä. Fontti voi olla oletus Open Sans tai voit valita paremman pudotusvalikosta Fonttivalinnassa. Aseta myös kirjasimen vahvuus paksuksi Ultra-bold.
Kopioi teksti Duplicate-toiminnolla ja siirrä se oikealle color-sanan viereen ja muokkaa teksti oikeaksi tekstivalinnalla. Kopioi teksti vielä yhden kerran ja muotoile se muotoon WORLD.
Siirry Pentool-työkalun pariin. Piirretään pentoolin avulla y-kirjaimesta vihreään ympyrään yhdistyvä viiva. Aloita esimerkiksi y-kirjaimen alasakarasta ja klikkaile pisteitä, kunnes saat muodon valmiiksi. Pisteitä luodessa, jos pidät hiiren ykköspainiketta pohjassa ja raahaat, pisteeseen ilmestyy vetokahva, jonka avulla pisteiden välillä oleva viiva kaareutuu. Jos taas vain klikkaat muodostuu kahvaton piste.
Kun olet tehnyt luomuksesi voit tallentaa työn.
Tiedostojen nimeäminen
Kun tallennat kuvaa tai muita tiedostoja verkkosivuilla käytettäväksi, tulee muistaa nimeämiskäytäntö. Tiedoston nimissä ei saa käyttää ääkkösiä, erikoismerkkejä eikä välilyöntejä. Sääntö koskee siis luonnollisesti myös kuvatiedostoja. Tiedoston nimissä on siis suositeltavaa käyttää aakkosia a-z ja/tai numeroita. Jos nimeksi halutaan kaksiosainen nimi, välilyönnin sijasta voidaan käyttää alaviivaa (_) tai väliviivaa (-).
Jos verkkosivuilla on paljon kuvia, olen itse käyttänyt löydettävyyden takia nimenä jotain aihealueeseen kuuluvaa sanaa. Esimerkiksi tämän sivun kuvat on nimetty muotoon kuvat-1, kuvat-2, kuvat-3 jne. Jos yhteen aiheeseen liittyviä kuvia on yli sata noudatan numeroinnissa kolmea numeroa: kuvat-001 jne.
Kuvan kokoa voidaan käyttää kuvan nimeämisessä kuvan nimen perässä tyyliin: kuvat_1920x1080, jolloin kuvan kokoa ei tarvitse etsiä kuvan metatiedoista, joskin WordPressiä käytettäessä mediakirjastossa kuvien metatiedot ovat melko vaivattomasti saatavilla.