VEKTORI | RASTERI

VEKTORI

Vektorigrafiikka on tietokonegrafiikkaa jossa käytetään pisteisiin ja käyriin perustuvaa piirtotekniikkaa. Vektoripiirrokset perustuvat pisteiden koordinaatteihin ja matemaattisiin funktioihin, jotka määrittelevät pisteiden väliset käyrät. Käyrien suuntaa ja jyrkkyyttä säädetään "ankkuripisteiden" avulla. Tämä mahdollistaa vektorigrafiikan skaalattavuuden ilman että laatu kärsii.

Vektorigrafiikka on täysi resoluutioriippumatonta ja sen voi skaalata postimerkinkokoiesesta kuvasta seinänkokoiseksi (tai suuremmaksi) kuvaksi. 

Vektorigrafiikkaa käytetään logosuunnittelussa, typografiassa, infografiikassa ja kuvituksissa (jotka ei ole realistisia kuvia).

RASTERI

Rasterimuodossa olevat tiedostot koostuvat pikseleistä. Se kuinka paljon pikseleitä kuvassa on määrittävät kuvan laadun. Mitä enemmän pikseleitä, sen parempilaatuinen kuvakin on.

Kummallakin vektorilla ja rasterilla on puolensa ja käyttötarkoituksensa. Vektorigrafiikalla on vaikea saada aikaan todellisuutta vastaavia kuvia koska se perustuu matematiikkaan.

Rasterimuotoiset kuvat ovat siis hyvä keino saada aikaan todellisuutta vastaavia kuvia.

Vektorigrafiikka on taas paras vaihtoehto kun tarvitaan tarkkaa grafiikkaa, silloinkin kun kuvaa pitää skaalata pienestä suureen tai päinvastoin.

Vektorigrafiikalla tehty kuva suurennettuna ja pienennettynä.

VisualTM KÄYNTIKORTTI JA NETTISIVUT

Olemme Tean kanssa opiskelujemme ohessa pitäneet pystyyn yrityksen jonka nimi on VisualTM.
Olemme jo muutaman asiakastyön saaneet tehdä yrityksemme kautta.

Nyt suunnittelimme yritykselle käyntikortit ja omat internetsivut.
Seuraavassa kerron vaiheittain niiden suunnittelusta aina toteutukseen asti.

KÄYNTIKORTTI

Suunnittelun aloitimme taas Pinterest taulusta johon kokosimme erilaisia malleja käyntikorteista.

Tämän jälkeen teimme erilaisia variaatioita Illustraattorilla.

Ensimmäinen oli itseotettu valokuva hiekasta, jonka päälle lisäsimme tekstin. Tämä oli huono... Tuli ehkä enemmän mieleen matkatoimisto kuin visualistien tarjoamat palvelut.

Seuraava variaatio oli tämä, taas itseotettu valokuva lokeista. Tämä oli huono, koska tässä tapahtuu liikaa kaikkea ja käyntikortti on kuitenkin niin pieni että sen pitää olla selkeä.

Tässä oli seuraava luonnos, mutta tähänkään emme olleet oikein tyytyväisiä, tämä oli vähän tylsä.

Näiden epäonniosten yritysten jälkeen päätimme aloittaa vielä kerran alusta asti. Nyt saimme opettajalta ihanan kirjan jossa oli hienoja väriyhdistelmiä, sieltä valitsimme värit ( tummansininen ja kupari ) niihin vielä yhdistimme tekstiin kullan värin.
Yrityksemme logo on käsinkirjoitettu yrityksemme nimi. Tämä yrityksen nimen halusimme käyntikorttiin, joten Tea kirjoitti noin viisikymmentäkertaa sen paperille ja niistä valitsimme parhaan.
Tästä parhaaksi valikoituneesta tekstistä otimme valokuvan ja siirsimme sen Illustraattoriin.
Siellä muunsimme sen vektorigrafiikaksi ( Object -  Image Trace - Make and Expand )
( Clipping Mask ).

Tässä kuvassa harjoituskappaleita tekstistä.

Teksti johon päädyimme.

Lopuksi vielä valmiit käyntikortit.

Käyntikortti edestä. Teksti on metallinhohtoinen.

Käyntikortti takaa.

Valmiit kortit laitoimme painotaloon tilaukseen ja saimme muutaman päivän päästä postitse Vistaprintiltä hienot uudet käyntikortit.

Kuva postista saapuneista korteista. Kyllä on hieno😁

NETTISIVUT

Nettisivujen osalta olemme vielä vähän alkuvaiheessa. Olemme kyllä jo ostaneet domainin.

Aloitimme suunnittelun WordPress:llä, mutta vaihdoimme sen Wix alustaan, koska se tuntuikin helpommalta alustalta tehdä sivut, mutta valmiin sivun ulkoasussa ei ilmeisestikkään juuri ole eroa.

Sivut ovat luonnosvaiheessa, tekstit melkein valmiina, mutta kaikki valokuvat puuttuvat vielä (haluamme käydä itse kuvaamassa valokuvat joita käytämme sivuilla...)

Laitan linkin sivuillemme kunhan saamme ne julkaisu valmiiksi.

No niin nyt on viimein nettisivut julkaistu, tässä linkki sivuillemme VisualTM.fi
Olikin aika iso projekti saada nettisivut valmiiksi, monta pientä ongelmaa kohtasimme ja ehkä haastavin kuitenkin oli se että emme olleet tyytyväisiä kuviin joita olimme ensin ajatelleet laittaa ja monenmonta kertaa meni koko ilme uusiksi😩. Mutta nyt olen lopputulokseen ihan tyytyväinen ja kyllähän se ajanmyötä vielä muuttuu moneen kertaan kun päivitetään juttuja joita tehdään ja varmaan jossain vaiheessa lisätään vähän referenssikuviakin sivuille.

Näyttökuva nettisivujemme aloitussivulta.

- Milla

VEKTORIGRAFIIKKA | CMYK, RGB JA HEX VÄRIAVARUUS | GRAAFINEN OHJEISTO

Kerron tässä julkaisussa vektorigrafiikasta, väriavaruuksista ja käyn läpi mitä tarkoittaa graafinen ohjeisto ja mitä siihen kuuluu.

VEKTORIGRAFIIKKA

Vektorigrafiikka on tietokonegrafiikkaa. 

Vektorigraafisille kuvioille on tunnusomaista se, että ne voidaan määrittää matemaattisten vektoreiden avulla.

Vektorigrafiikalla on bittikarttagrafiikkaan verrattuna seuraavia etuja:

• Skaalattavuus: vektorigrafiikka säilyttää laatunsa, suurennettiinpa sitä kuinka paljon tahansa
• Tarkkuus: vektorigrafiikkaa piirrettäessä on helppoa määrittää piirrosten tarkka koko (esimerkiksi pöydän leveydeksi tasan 130 cm x 80 cm)
• Pieni tallennuskoko: vektorigrafiikka ei yleensä vie paljoa tallennustilaa.

Vektorigrafiikkaa voidaan tuottaa useilla eri ohjelmilla ja tallentaa useisiin eri tiedostomuotoihin. Varsin usein vektorigrafiikan tallennuksessa käytettävä tiedostomuoto määräytyy kuitenkin käytetyn ohjelman mukaan. ( Me käytämme adope illustratoria, jolloin tallennusmuoto on .ai )

Eri vektorigrafiikkaohjelmat osaavat yleensä muuntaa toisella ohjelmalla tuotetun vektorigrafiikan omaan tiedostomuotoonsa. Toisinaan em. muunnos ei kuitenkaan onnistu täydellisesti, joten sinun kannattaa olla tarkkana muuttaessasi vektorigrafiikkaa tiedostomuodosta toiseen.

Vektorigrafiikassa on enemmän vektoreita, jolloin kuva on tarkempi  ja se on loputtomasti suurennettavissa.

CMYK JA RGB VÄRIAVARUUDET

Väritila (Color Mode, Color Model) on kuvassa käytetty menetelmä, jolla halutunlainen väri muodostetaan päävärien tai muiden määreiden avulla. Erilaisia väritiloja käytetään kuvan käyttökohteesta riippuen.

Yleisimmät väritilat ovat:

• RGB
  RGB-väritilaa käytetään näytöissä. Jokaiselle värille on käytettävissä 8 bittiä, joten jokainen kuvan piste tarvitsee 24 bittiä tilaa. Päävärejä on kolme, joista RGBlyhennekin muodostuu:
  
  • Red (Punainen)
  • Green (Vihreä)
  • Blue (Sininen)
  Jokainen esitettävä piste muodostuu kolmen erivärisen pisteen ryhmästä. Valo tulee väripisteiden takaa, ja haluttu väri muodostuu säätelemällä yksittäisten väripisteiden takaa tulevaa valon määrää. Lukuarvot jokaisella värillä ovat välillä 0–255. Ihmissilmä hahmottaa pienet ja lähekkäiset pisteet yhdeksi kokonaisuudeksi.

• CMYK

CMYK-väritilaa käytetään tulostuksessa ja sitä kutsutaan neliväriprosessiksi. CMYK-kuvan jokainen kanava käyttää jokaiselle pisteelle 8 bittiä, joten jokainen piste tarvitsee siten 32 bittiä tilaa.

Päävärejä on neljä, joista CMYK-lyhennekin muodostuu:

• Cyan (Syaani)
• Magenta (Magenta)
• Yellow (Keltainen)
• blacK (Musta)

Jokainen esitettävä piste voidaan muodostaa käyttämällä neljää eriväristä pistettä. Tulostusohjain määrittää pisteen paikkoja ja kokoja muodostaakseen sävyjä. Värin määrä on vakio jokaiselle tulostuspisteelle. Valo heijastuu silmään useiden lähekkäisten väripisteiden kautta ja väri hahmotetaan siten useiden pisteiden yhteisvaikutuksella.
CMYK-määrityksessä käytettävät lukuarvot jokaisella värillä ovat välillä 0–100.

• HEX

HEX-arvolla väri ilmoitetaan kuudella heksadesimaaliluvulla. Luvut kertovat punaisen, vihreän ja sinisen värin arvot. Jokaisen värin arvo määritellään kahdella luvulla. Arvo voi sisältää numeroita ja kirjaimia. 

HEX-arvon eteen laitetaan #-merkki. Värit liitetään peräkkäin RGB-järjestyksessä: ensin punainen, sitten vihreä ja kolmanneksi sininen. Esim. #ffffff tarkoittaisi sitä, että kaikkia värejä on maksimimäärä, jolloin tuloksena on täysin valkoinen väri. Toisaalta #ffff00 tarkoittaa, että punaista ja vihreää olisi maksimimäärä ja sinistä ei ollenkaan – tällöin tuloksena on kirkasta keltaista.

Käytä HEX -värejä esimerkiksi nettisivujesi fontin värejä suunnitellessasi tai vaikka blogissa, ilmoittamaan blogisi värimaailman.

Yleisimmin käytettyjä formaatteja ( tai tallennusmuotoja ) ovat valokuvien tapauksessa .jpg, .bmp ja .png. Kaaviokuvat tehdään yleensä .gif-formaatissa. 

( .png:ssä tausta on " läpinäkyvä " )

RGB ( internet ) ja CMYK väriavaruudet ( painotuotteet )

GRAAFINEN OHJEISTO

Graafinen ilme on yritykselle tai yhteisölle luotu visuaalinen ilme. 

Graafisen ilmeen tarkoituksena on korostaa yrityksen ja sen toiminnan persoonallisuutta ja symbolisoida yrityksen tärkeinä pitämiä arvoja, toimintaperiaatteita ja tavoitteita.

Graafista ilmettä käytetään niin yrityksen ulkoisessa kuin sisäisessäkin viestinnässä.

Graafisen ilmeen tärkeimmät osat ovat logo, liikemerkki, värit, typografia ja kuvat. Yritys käyttää näitä graafisen ilmeensä mukaisia elementtejä kaikenlaisissa painotuotteissaan, ilmoituksissaan, www-sivullaan tuotekuvastoissaan ja esitteissään.

Logon fontti valitaan osin visuaalisin perustein, osin yrityksen toimialaan ja arvoihin sopivuuden mukaan. Hyvän logon ominaisuuksiin voidaan lukea omaleimaisuus, pelkistys ja helppolukuisuus. Liikemerkeissä voidaan käyttää symboliikkaa, mutta selkeys on yksi hyvän liikemerkin kriteeri. Liikemerkit ovat usein pitkäikäisiä tunnistettavuuden saavuttamiseksi, mutta joskus vanhentunut liikemerkki uusitaan, jotta se viestisi paremmin yrityksen nykytilasta.

Yrityksen päävärinä toimii liikemerkin väri. Yrityksen tunnusväri voi muodostua sen tärkeäksi tunnisteeksi, kuten Coca-Colan punainen ja Fazerin sininen. Värin valinnassa otetaan usein huomioon värien symboliikka ja kulttuurinen merkitys.

Yrityksen typografiaan kuuluu etenkin kirjasintyyppi eli talofontti, jota yrityksen asiateksteissä käytetään. Kirjasintyyppi noudattaa usein logossa käytetyn fontin tyyliä, ja sen tulee olla selkeälukuinen.

Esimerkkinä VÄESTÖLIITON graafinen ohjeisto: pääset katsomaan sen tästä linkistä.

Kuva Fazerin logon graafisesta ohjeistosta.