1. ryhmän mediaseuranta

Ryhmän jäsenet: Anna-Lyydia, Inka, Raakel

Keskustelua

Tunnin sisällöstä

Aloitetaan Illustratoriin tutustuminen yhdessä, voi edetä omaan tahtiin ja suunnitella samalla omaa kurssityötä, jos oma tahti on nopeampi kuin tunnin eteneminen. 

Infograafisia kaavioita tehdessä huomioidaan mm. nämä 1. kerralla käsitellyt asiat:
selkeys, datan rajaaminen ja tiedon oikeellisuuden säilyminen (esim. x- tai y-akselilla ei mittakaavavirhettä), kiinnostavuus, luettavuus jne.

Vektorigrafiikkaohjelmat ja tallennusmuodot

Vektorigrafiikkaa voi tuottaa mm. ohjelmilla Inkscape, Corel Draw ja Adobe Illustrator. Vektorigrafiikan suurin etu on rajaton skaalattavuus.

Vektorigrafiikassa käytettyjä tiedostomuotoja ovat mm.:

• PDF (cmyk & rgb, huom: kirjapainojen suosima muoto)
• SVG (rgb, nettigrafiikka): tämän esimerkin tein käyttäen html- ja css-koodia. Tässä alkuperäinen svg-kuva. Voisi soveltaa esim. näin.
• EPS (cmyk & rgb)
• CDR (Corel Draw:n oma tiedostomuoto)
• AI (Adobe Illustrator:n oma tiedostomuoto)

Lähde sekä bittikarttakuvan ja vektorikuvan erosta: http://vektorigrafiikkalilope.blogspot.com/p/vektorigrafiikka.html

Ilmainen vektoriohjelma Inkscape
Linkki myös Libre Office Draw:in: https://www.ilmaisohjelmat.fi/vektorigrafiikka
Illustratorissa saatavissa ilmaiseksi nykyään vain 7 päivän trialiversio

Illustratoriin voi tuoda vektorigrafiikkaa muualta. Vastaavasti Illustratorissa tehtyjä kaavioita tuoda/avata tai jopa Copy -> Paste esim. muihin Adoben ohjelmiin: Photohopiin ja Indesigniin.

Illustrator-tiedoston tuonti Premiereen joko suoraan tai After Effectsin kautta (ks. esim. ohje tai ohje Illu -> After Effects sekä esimerkki After Effects:ssä ja sama tuotuna Premiereen).

Tarkemmat ohjeet graafeihin sekä selkeitä perusohjeita Illuun:
https://helpx.adobe.com/illustrator/using/graphs.html
https://www.slideshare.net/itstraining80/illustrator-cs5-p1handoutsum11v10

Illustrator-tiedoston luominen

Avaa Adobe Illustrator -ohjelma

Ylävalikko File -> New

Nettiin ja ruuduille -> RGB, useimmiten 72 dpi, mittayksikkö px
Esim. koko 1920 x 1080 px on kuvasuhde 16:9 = laajakuva

Painotuote -> CMYK, 300 dpi, mittayksikkö monesti mm
”Peruskoko” A4 = 210 (leveys) x 297 (korkeus) mm

Typografisista yksiköistä: https://jkorpela.fi/yksikot/6.1.html

Pikaohjeet Illustratoriin: Värit, Group/Ungroup, Clipping Mask, Vektorikynä, Graafit:
https://hennaraitala.com/tiema/Illustrator_perusohjeet_Tiema.pdf
Sama ohje kuvina alla:

Tehtävä 1: Valmiin aineiston muokkaus Illustratorissa

Illustrator aukaisee tai sinne voi kopioida monia vektorimuotoisia tiedostoja. Onko omalla alallasi tällaista dataa: karttoja, kaavioita tms:?

Kopioidaan copy-paste Piirakkadiagrammi.pptx PowerPointista Illustratoriin. Jos olet tehnyt vastaavaa aiemmin, voit etsiä netistä tms. data/graafiaineistoa ja edetä sen kanssa.

• Poistetaan ylimääräiset elementit (vrt. 1. kerran ”Less is more”)
• Puretaan Clip Groupit -> hiiren oikealla “Release Clipping Mask”, pikavalinta “control shift 7”
• Muokataan värejä (viivan ja sisällön väri) sekä viivan paksuus. Vai tarvitaanko kaikkia viivoja?
• Skaalataan shift pohjassa jotta mittasuhteet säilyvät.

Tehtävä 2:

Ohje Illustratorin kaaviotyökalun käyttöön: https://helpx.adobe.com/illustrator/using/graphs.html

Tuodaan Illustratoriin lukuja, esim. tästä (.doc) tai tästä (.xlsx). Voit käyttää myös omaa aineistoa.

Jos olet nopea, voit katsoa lisäohjeita kuvan tuontiin & rajaukseen ja Clipping mask:n tekoon.

TEHTÄVÄNKULKU

• Kopioi Excelissä tai Wordissä numerodata 
• Valitse Illustratorissa graafityökalu
• “Piirrä” (=vedä hiiri pohjassa) graafityökalulla haluamasi kokoinen alue, jonka kokoiseksi graafi tulee
• Liitä numerodata ikkunaan, joka aukeaa
• Vaihtoehtoisesti voit oikeanpuoleisen ikkunan auki ollessa valita napin ”Import Data” mutta tällöin kannattaa olla ”puhdasta” dataa.

OIKEANPUOLEISEN KUVAN PAINIKKEET VASEMMALTA:

• Import Data
• Transpose Row/Column
• Switch X/Y
• Cell Style (kuinka monta desimaalia)
• Revert (peru, myös undo:ta voi käyttää)
• Apply (muutokset näkyvät taulukossa)

Sulje em. Ikkuna. Klikkaa taulukon ollessa valittuna hiiren oikealla kohtia Type… tai Data… 

• Type = määritellään graafin tyyppi: piirakka, viiva, pylväs jne. sekä paljon muita ominaisuuksia.

• Data = Aukaisee uudestaan edellä esitellyn data-ikkunan, jossa dataa voi muokata, poistaa, kääntää, lisätä, määritellä kuinka monta desimaalia näkyy jne.

Graafin data on muokattavissa niin kauan kuin et ”ungrouppaa” eli pura graafin ryhmittelyä (ylävalikosta Object > Ungroup tai control shift G). Jos/kun haluat muokata graafia niin, että yhteys dataan katkeaa, ota aina itsellesi kopio ennen ungrouppausta siltä varalta, että data muuttuukin. 

Jos teet kaaviot Illustratorissa mutta taitat laajemman julkaisun Indesignissa -> copy–paste kaaviot .indd:iin: voi olla että haluat liittää tekstit kaavioihin vasta siellä, jotta ilme on lopuksi mahdollisimman yhdenmukainen. Tämä on aina tapauskohtaista.

Lisätehtävä:

Lataa kartta https://hennaraitala.com/tiema/finland-881128.svg
(alkuperäinen https://pixabay.com/vectors/finland-map-flag-europe-country-881128/)

Poista kartasta lippuelementti ja vaihda sen tilalle kuva. Vai onko väri sittenkin parempi? Onko kartta osittain tai kokonaan kuvan päällä? Esimerkkejä kartan käytöstä täällä ja täällä.

Voit esimerkiksi sijoittaa kartalle 2–3 kaupunkia ja niihin liittyvää tietoa. Osaatko luoda symmetrisen ympyrän, neliön, kolmion, tähden ja skaalata nämä sopivaan kokoon?

Suunnittele kartta ja sen yhteydessä olevat elementit niin, että ne toimivat pystymallisella mobiiliruudulla, esimerkkikoko 360 x 640 px.

Tallenna grafiikka pdf-muodossa säilyttäen Illustratorin editointiominaisuudet. Säilytä myös alkuperäinen .ai-tiedosto sekä mahdollinen linkitetty kuva/kuvat.

Muista

Tiedon visualisoinnista pähkinänkuoressa:
http://reaktor.com/blog/information-visualisation-101-what-you-need-to-get-started/

Kotitehtävä

Netissä on paljon erilaisia työkaluja, joilla dataa voi muuttaa infografiikaksi ja kaavioiksi. Alla olevat esimerkit on tehty datawrapper.de-sivustolla (vaatii rekisteröinnin). Linkki myös Guardianin artikkeliin aiheesta, tosin vuodelta 2014. Myös Googlella työkalu: https://datastudio.google.com. Datastudioon voi tuoda myös kuvia/ikoneita, tuetut tiedostomuodot ainakin svg, png ja jpg. Data kannattaa aina muotoilla sen mukaan, mitä visualisointivälinettä tulee käyttämään. Ja riippumatta välineestä, tärkeintä on kuitenkin, mitä halutaan sanoa!

• Lue/silmäile Guardianin artikkeli.
• Tutustu vähintään yhteen avointa dataa tarjoavaan lähteeseen. Aika n. 0,5 h.
• Rajaa haluamastasi data-aineistosta osa. Jos meinaat jäädä jumiin, voit myös tässä vaiheessa luoda itse aineiston, (ks. esimerkit alla). Aika n. 0,5 h.
• Tutustu ainakin yhteen netissä olevaan datatyökaluun. Voit valita alta olevasta listasta tai käyttää jotain muuta. Monet näistä vaativat rekisteröitymisen, mutta sen jälkeen luodut kaaviot säilyvät tilillä. Aika n. 1–2 h.
• Kopioi linkki valmiiseen kaavioon/kaavioihisi Moodlen kohdaan ”Kotitehtävä: netin datatyökalut”. Lisää muutama rivi tekstiä, jossa voit tuoda esiin prosessin kannalta tärkeitä asioita/huomioita. Aika n. 0,25 h. Käydään nämä läpi tunnilla keskustellen.

Yllä esitetyt ajat ovat viitteellisiä ja voit tietysti käyttää niin paljon aikaa kuin haluat. Jos tekemistä on muuten paljon, voit kuitenkin ajatella että yllä ehdotetut ajat riittävät.

Maksullisia, ilmainen kokeilu:
https://powerbi.microsoft.com/fi-fi/
https://www.tableau.com/
https://carto.com/
Ilmaisia:
https://app.datawrapper.de/
https://rawgraphs.io/
https://public.tableau.com/s/
https://www.arcgis.com/home/index.html