Infografiikka - liikettä ja toiminnallisuutta

Infografiikkaa ei kulje median maailmassa pelkkinä kuvina, vaan myös animaatioina, liikkuvina gif-kuvina ja niin edelleen. Tässä postauksessa on muutamia esimerkkejä tällaisista "elävistä" infografiikoista. Piirrosvideota vastaavia termejä englannissa ovat whiteboard video/animation, video scribing ja animated doodling.

> Brainy Discoveries: Four Fascinating Facts about Your Brain

> Verotus - kurjaa, tylsää ja byrokraattista?

> Demola Find Your Path

> Simplify your life With BiiSafe Buddy

> Tonttu Tussikäsi -- joulusatu kaikenikäisille

Infografiikka - visuaaliset muuttujat

Erilaisilla elementeillä luodaan vaihtelevuutta infografiikkaan, jolloin sillä pystytään viestimään tehokkaammin haluttuja asioita. Niitä kutsutaan kerronnan eri keinoiksi, ja ne voivat olla väreillä tai muodoilla aikaansaatuja.

1. Vastakohtaisuuden tai päinvastaisuuden kuvaaminen
- Todennäköisesti yleisin tapa kuvata ääripäitä tai keskenään hyvin erilaisia asioita, on käyttää väreissä sinistä ja punaista (kylmä vs. lämmin, hyvä vs. paha jne.)
- Myös vastavärit toimivat saman periaatteen mukaan
- Kulmikkaan ja pyöreän, sileän ja karhean jne. muodon yhdistäminen toisiinsa
- Tiheän asettelun rinnastaminen väljään asetteluun

Kuvissa nro. 1-3 nähdään samaa tapaa erotella käsiteltyä asiaa: rakenne on jaettu kahtia, ja värit ovat suuressa roolissa. Kuvassa nro 4 yhtälailla käytetään samoja tekniikoita varsinkin värien kanssa (sininen vs. lila), mutta sen lisäksi rinnastetut symbolit noudattavat toisiinsa verrattuna vastakohtaisia linjoja. Esimerkiksi ensimmäisessä kohdassa VR-symboli muodostaa kolmion kärki ylöspäin, AR/MR alaspäin. Seuraavassa AR/MR:n symboli on pystysuuntainen suorakaide, VR vaakasuuntainen ja niin edelleen. Kuvassa nro 5 hyödynnetään lähinnä värejä, mutta myös tekstisommittelun symmetriaa.

1.2.  3.

4.  5.

2. Kehittymisen eli etenemisen kuvaaminen
- Voi tarkoittaa mm seuraavia: ajallista etenemistä (aikajana, timeline) tai juurikin kehittymistä, huonosta hyväksi, laihasta lihaksikkaaksi ja niin edelleen. Joka tapauksissa jonkinlaista liikettä eteenpäin, oli se sitten kirjaimellista, henkistä tai fyysistä
- Voidaan kuvata suorin tai mutkittelevin linjoin tai viitoituksin, joka tapauksessa aiheen kulun tulee olla selvästi hahmotettavissa

Kuvissa 1 ja 2 näkyy klassinen aikajanamalli, jossa tapahtumat on asetettu selvään järjestykseen. Kuvan nro 3 kehittymiskulku on esitetty portaikkona, ja vastaavaa ideaa noudattaa myös 5, jossa portaikko on korvattu alaspäin menevän spiraalin muodossa (syynä se, että meidän kulttuurissamme luetaan ylhäältä alas eikä päinvastoin, vaikka spiraalimalli hieman periaatteellisena toimii näin huonommin, koska käytännössä näkyy laskevana kuviona, vaikka kyseessä tulisi olla nouseva, kehittyvä, positiivinen toiminto. Tekniikka tosin tämäkin). Kuvassa 4 ei kehityskulku näy yhtä erottuvasti kuin muissa esimerkeissä, mutta löytyy infografiikasta kyllä; asiat on esitetty järjestyksessä numeroituna, ylhäältä alas.

1.2. 3.4.

5.

3. Määrän kuvaaminen
- Diagrammit erilaisissa muodoissa, pylväänä tai pyramidina (kuten kuvissa 1 ja 5) ovat selkeitä ja tunnistettavia, niistä näkee heti mihin infografiikka pyrkii
- Myös erilaiset muunlaiset mittaamista kuvaavat symbolit (esim. kuvan 2 kaltaiset mittarit)
- Väreillä, kuten kylmästä lämpimään

Kuvassa 2 käytetään useita eri tapoja ilmaista ainesten määrää, sisältöä tai aikaa, sekä niiden korostuksena myös värejä.  Kuva 4 on hyvä esimerkki siitä, miten usein varsinkin maantieteellis-biologisissa julkaisuissa kuvataan ihmisten, eläinten ym. määrää väreillä. Juuri kyseisessä kuvassa väriasteikko etenee kylmästä lämpimään, pienestä suureen, väljästä tiheään.

1.2.3. 4. 

5.

Infografiikka - tyylilajit

Tehtävänantona tällä kertaa tutustuminen otsikon mukaiseen maailmaan eli erilaisiin infografiikan julkaisuihin. Työnä oli luoda taulu Pinterestiin, ja kerätä sinne esimerkkejä hyvännäköisistä, silmiä miellyttävistä ja keskenään erityyppisistä infografiikoista. Alla olevaa kuvaa klikkaamalla pääsee tutkimaan Pinterest-tauluani.

Pinterest-tutkimusmatkan jälkeen oli aika keskittyä jäsentämään nähtyjä tuotoksia erilaisiin ryhmiin ja analysoimaan niille tyypillisiä piirteitä. Infografiikasta on olemassa mm. seuraavanlaisia tyyppejä:

1. Prosessikaavio (flowchart)
- näyttää kuvin ja tekstein, miten vaihe vaiheelta voidaan saavuttaa jotakin
- esimerkiksi ihmisen henkistä/fyysistä itsensä kehittämistä ohjailevat infografiikat ovat usein tällaisia
- keskittyy opastamisen lisäksi avustamaan pohtimisessa ongelmien ratkaisemiseksi ja niiden löytämiseksi

Esimerkkikuvia: (lähde linkitetty kuvan numeroon)

1.2.3. 

4. 5.

2. Sarjakuva
- muistuttaa prosessikaaviota, mutta keskittyy enemmän kuvallisiin ohjeisiin, joita teksti pääasiassa tukee eikä päinvastoin
- keskittyy prosessikaaviota enemmän vain näyttämään miten asioita tehdään, eikä niinkään pyri analysointiin

1. 2.  3. 4. 5.

3. Selitetty taulukko
- kuvaa selvästi ryhmiteltynä asioita, ja kertoo niistä tekstein; toisin sanoen keskittyy infon jakamiseen lyhyesti ja ytimekkäästi
- nähtävästi yleisimpiä infografiikan tyyppejä, sillä on useimmiten yksinkertainen ja selkeä ja soveltuu useimpien asioiden kuvaamiseen

1. 2. 3.

 4. 5.

4. Kartta
- nimityksestään huolimatta ei aina tarkoita kirjaimellisesti esim. valtion tai kaupungin karttaa selityksineen, vaan myös jokin muu asia voidaan kuvata kartan muodossa: esim. tarinan kulku
- voi olla monimutkainen ja koristeellinen ja on siten varsin näyttävä infografiikan muoto

1. 2.

3.4. 5.

5. Aikakauslehti
- rakenteellisesti tehty aikakauslehtien taiton tavoin, eli sopii erityisesti julkaistavaksi nimensä mukaisesti aikakauslehdissä
- varsin usein valokuvin kuvitettu

1. 2.

3. 4. 

5.

Illustrator-tutoriaaleja

Uusi lukukausi visualistiopiskelijana on alkanut ja ensimmäinen harjoitus tehtiin itsenäisenä. Adoben Facebook-sivuilla on runsaasti opetusvideoita erilaisten kuvien, vektorien yms. tekemiseen Illustratorilla ja meidän YO-pohjaisten tuli valita niistä 2 ja tehdä kokeilutyöt niiden mukaan. Löysin sivuilta hauskan Game of Thrones-aiheisen tutoriaalin ja rupesin väkräämään sen kanssa, fani kun olen, mutta koska kyseinen ohje vaati (tai vähintäänkin suositteli samankaltaisen lopputuloksen aikaansaamiseksi) erilaisten osien latailua netistä ja netti käytännössä ei toiminut joinakin hetkinä ollenkaan, päätin siirtyä toiseen.

> Create your own Game of Thrones sigil

Tulipahan ainakin vähän testailtua Librarya ja vektoreiden etsintää.

Seuraava tutorial oli yksinkertainen ja se näytti tosi hyödylliseltä oppia, siinä nimittäin näytettiin miten pala palalta pystyisi luomaan mm. kasvien lehtiä ja niihin tekstuurit pelkillä viivoilla. Sain kuin sainkin oikean näköistä jälkeä mutta jostain syystä oma Illustratorini teki omituisen valkoisen alueen terälehteen, enkä keksinyt syytä miksi se teki niin, vaikka käytin aikaa ongelman selvittämiseen. Lopulta siirryin jälleen seuraavaan, sillä tajusin kuitenkin perusidean miten kyseisiä kuvia tehdään. Treenaa tätä kunnolla sitten joskus toiste.

> Make a linocut look

Sain tehtyä videon mukaista jälkeä, mutta tuollainen valkoinen alue oli ja pysyi enkä saanut sitä pois.

Sitten kolmannen kokeilun vuoro.

> Animal silhouette moonlight vector illustration

Hankalaa oli, ja mac kuumeni aivan tuhottomasti tekemisen aikana niin että pelkäsin sen käytännössä posahtavan ja rupesin ihmettelemään miksi se niin kovin tekemisistäni suuttuu aivan koko ajan, mutta sitten tajusin miten käytin millimetrejä työssäni pikselien suhteen... Liian suuret mitat käytössä siis, joten mikä ihme se on jos kone ylikuormittuu. Ottaa päähän, kun tajusin asian vasta niin myöhään. Yritin jatkaa työtä, mutta joka kerta kun tein mitään muutosta mihinkään, se alkoi toistaa yhtä komentoa jatkumona (en tiedä korruptoin varmaan tiedoston tai jotain) ja joka jumitti koko ohjelman, ja no... Päätin ottaa taas uuden haasteen ja kokeilla sitten sitä. Tosin seuraavana päivänä yön yli nukuttuani päätin yrittää tätä kuu-tutoriaalia uudestaan. Haluan oppia tekemään jotain noin kaunista. Pakko vielä erikseen mainita, miten hyviä kyseisen tekijän tutoriaalit olivat, sillä hän puhui todella selkeää englantia tarpeeksi hitaasti että pysyy mukana, ja selitti aivan joka ikisen liikkeensä Illustratorin kanssa. Erinomainen video, toisin sanoen. :)

Tässä hiukan ensimmäisestä yrityksestä kuvia.

Tässä vaiheessa lopetin, ja päätin aloittaa seuraavana päivänä alusta. Alla siis kuvia yrityksestä numero 2, josta tuli jopa halutunlainen. Eläin, joka kuunvalossa seisoo, sai valita itse. Käytin yksisarvista, jonka latasin osoitteesta Pixabay.com/en

Ja valmis kuva tässä vielä erikseen ilman Illustratorin työkaluja reunaa koristamasta.

Seuraava alla oleva tutoriaali oli yksinkertaisempi, mutta se sisälsi samankaltaisia temppuja Illustratorin kanssa kuin kuu-tutoriaali.

> Draw a cute glowing jellyfish

Parasta tässä tutoriaalissa oli, miten tässä käytettiin yhtä samaa tekniikkaa kuin tuossa aiemmassa kuu-aiheisessa työssä jota työstin pienen ikuisuuden ja opin nyt meduusaa tehdessä miten se toimii. . Ei oma meduusani samalta näytä kuin ohjeistuksessa, itselläni on vähän tämmöinen rumempi halpatuotantoversio alkuperäiseen verrattuna, mutta ainakin tärkeimmät jutut sain tehtyä kuvan mukaan ja opin uutta. Huvittaa vain tuo kohta "estimated completition time 20 minutes", sillä siinä ajassa ehkä tekee täysiverinen ammattilainen, itselläni kyllä meni enemmän aikaa kun haki ohjeissa kerrottuja asioita ja testaili niitä. :D 

Alla jokunen kuva tekemisistäni tämän tuton kanssa.

Tässä vielä lopullinen tulos. Tutoriaalissa ei kerrottu ohjeita kuin itse meduusan tekemiseen, joten taustan sävelsin itsenäisesti tekemällä mm. omia brusheja ja läpinäkyvyyttä (opacity) muuntelemalla.