5.3. 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.:
Inkscape
BoxySVG
Vecteezy
Vectr
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ä.
BoxySVG – harjoitus vektorigrafiikalla
Tutustumme vektorigrafiikkaan ja sen piirtämiseen verkossa toimivalla ohjelmalla BoxySVG. 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:
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.

Ohjelmassa on keskellä piirrettävän dokumentti, jota kutsutaan usein canvakseksi tai kankaaksi. Vasemmalla puolella canvasta on työkalurivit, joista löytyy piirtämiseen tarvittavat työkalut. Oikealla puolella canvasta taas on työkalun asetukset ja ominaisuudet.

Piirtokynä – Pisteillä piirtäminen
Tutustutaan aluksi piirtokynään ja vektorigrafiikan piirtämiseen vektoripisteiden (ankkuripiste) avulla.
Piirtotyökalu eli Pen-työkalu on vektoroinnin tärkeimpiä työkaluja. Työkalu tarvitsee harjoitusta ja aloittelijalle
se saattaa olla omituinen käyttää, mutta kokeilemalla oppii parhaiten. Valitse piirtokynä työkaluvalikosta ja klikkaa yhden kerran canvaksen päällä. Tuloksena on vektoripiste. Klikkaa johonkin muualle canvaksella, jollooin pisteiden välille muodostuu polku pisteiden välille. Kun valmistetaan tarpeeksi polkuja, voidaan klikata pisteeseen josta aloitimme, jolloin muodostuu suljettu vektorikuvio.
Oheisessa kuvassa on yksinkertainen vektoripolku. Vasen valkoinen piste on lähtöpiste (1), keskellä yksi välipiste (2) ja oikealla taivutettu
polku. Loppupiste on viimeisin vektoripiste (3) ja siinä näkyy suuntakahva. Suuntakahvalla voidaan muokata taivutetun vektoripolun (2-3) kaarta tarttumalla kahvaan ja raahaamalla.
Vektoripisteitä on siis kahdenlaisia, yksinkertaisia pisteitä ja kaaripisteitä.

Valmiit geometriset muodot
Kaikki vektorigrafiikassa olevat objektit sisältävät vektoripisteitä, myös geometriset muodot. Jos piirretään esimerkiksi ympyrä ympyrätyökalulla, se sisältää neljä kaarivektoripistettä ja voidaan muokata ympyrästä muunlaisia muotoja.
Piirrä ympyrätyökalulla pyöreä ympyrä canvakselle. Kun piirrät työkalulla, pidä painike pohjaan painettuna ja ympyrästä tulee symmetrinen ympyrä. Kun olet luonut ympyrän klikkaa ylävalikosta toiminto Shape/Shape to Path, joka muuntaa ympyrän pistepoluksi. Valitse pisteiden valintatyökalu aktiiviseksi (toiseksi ylimmäinen) ja ota kiinni ympyrän ylimmästä pisteestä ja raahaa alaspäin. HUomaat, että voit tehdä helposti ympyrästä hymysuun.
Geometrisista muodoista voidaan siis helposti luoda erilaisia muokattuja muotoja tarpeen mukaan muokkaamalla muodon vektoripisteitä.

