Turva-alueet ja ruudun reunat: työkalut grafiikan sijoitteluun

Kun aloitamme uuden harjoituksen, avaamme ensin tyhjän ruudun ja kytkemme päälle turva-alueiden apuviivat. Niitä on yleensä kaksi: toiminnan turva-alue, jonka sisällä tärkeän kuvasisällön pitäisi pysyä, ja otsikoiden turva-alue, joka on vielä hieman sisempänä. Moni aloittelija jättää viivat pois, koska ne tuntuvat rajoittavilta. Kokemus kuitenkin osoittaa, että juuri ne estävät yleisimmän virheen: nimen tai tittelin, joka jää ruudun reunaan puoliksi leikatuksi.

Pidän apuviivoja hyvänä muistilistana, en ehdottomana lakina. Joskus grafiikka tuntuu parhaalta aavistuksen viivan ulkopuolella, ja silloin kysymme, mitä oikeasti tapahtuu eri katselulaitteilla. Tärkeintä on, että poikkeama on tietoinen valinta eikä sattuma. Siksi jokaisessa harjoituksessa opiskelija kirjaa lyhyesti, miksi grafiikka on juuri siinä kohdassa.

Aloitamme aina samasta pohjasta, jotta eri harjoitukset ovat vertailukelpoisia keskenään.

• Toiminnan turva-alue ja otsikoiden turva-alue erikseen näkyviin
• Keskiviiva ja kolmannesjako apuna asettelussa
• Sama pohja jokaiseen harjoitukseen

Sijoittelua ei kannata arvioida vain tyhjää taustaa vasten. Käytämme harjoituksissa kolmenlaisia testikuvia: vaaleaa ja yksivärisen tasaista kuvaa, kirjavaa ja liikkuvaa kuvaa sekä tummaa kuvaa, jossa on kirkkaita valoja. Jokaisessa niistä sama alalaitateksti käyttäytyy eri tavalla. Vaalealla pohjalla valkoinen teksti katoaa, kirjavalla pohjalla ohut kirjasin hajoaa ja tummassa kuvassa kirkas valo voi syödä nimen kirjaimia.

Tällainen kolmen kuvan kierros vie kymmenen minuuttia, mutta paljastaa asioita, jotka muuten huomataan vasta julkaisun jälkeen. Harjoituksissa käytämme keksittyjä esiintyjiä, kuten Aino Virtanen tai Eero Lehtonen, jotta huomio pysyy asettelussa eikä henkilöissä. Opiskelijat huomaavat nopeasti, että sama taustalaatikko tai varjo ei sovi jokaiseen kuvaan, ja oppivat valitsemaan keinon kuvan mukaan.

• Vaalea tasainen kuva
• Kirjava ja liikkuva kuva
• Tumma kuva kirkkain valoin

Toinen käytännön väline on kysymys, jonka esitämme jokaisen grafiikan kohdalla: mitä tämän alla on? Puhujan kasvot, käsien liike, esillä oleva esine tai toisen grafiikan teksti ovat tyypillisiä asioita, joita ei haluta peittää. Alalaitateksti sijoitetaan usein alakolmannekseen, mutta jos haastateltava istuu matalalla tai kuvassa näytetään taulukko, paikka täytyy ratkaista uudelleen.

Käymme harjoituksissa läpi tilanteita, joissa grafiikka siirretään sivulle tai ylös ja sen kesto tai tulo- ja poistumistapa muutetaan sopivaksi. Sijoittelun johdonmukaisuus on silti yhtä tärkeää kuin yksittäinen ratkaisu. Jos ensimmäinen nimi on vasemmalla alhaalla, katsoja odottaa seuraavankin olevan siellä, ja poikkeus kannattaa tehdä vain perustellusta syystä.

Johdonmukaisuus säästää myös tarkistuksessa aikaa, koska poikkeamat erottuvat heti.

Turva-alueen sisällä on vielä oma kysymyksensä: kuinka kaukana tekstin tulee olla taustalaatikon reunasta ja ruudun reunasta? Käytämme kurssilla yksinkertaista sääntöä, jossa vakiomarginaali johdetaan tekstin korkeudesta. Näin sama asettelu skaalautuu eri kokoisiin grafiikoihin ilman, että ulkoasu muuttuu. Kun marginaali on suhteessa kirjaimen kokoon, laatikot näyttävät tasapainoisilta riippumatta rivin pituudesta.

Pidämme myös riviväliä ja nimen ja tittelin välistä etäisyyttä vakiona. Nimi ja titteli muodostavat yhden yksikön, ja niiden väliin jäävä rako ei saa olla niin suuri, että ne luetaan erillisiksi. Mikon ja Lauran ohjauksessa opiskelijat vertaavat kahta versiota rinnakkain ja huomaavat, kuinka pieni muutos tiiviyteen vaikuttaa siihen, näyttääkö grafiikka valmiilta.

• Marginaali johdetaan tekstin korkeudesta
• Nimen ja tittelin väli pidetään vakiona

Viimeinen työkalu on pieni näyttö. Kun grafiikka on valmis, katsomme sen puhelimen kokoisena ja tarkistamme, pysyykö teksti luettavana ja onko sijoittelu edelleen järkevä. Moni verkossa katsottu video näytetään toimintopalkkien ja kuvatekstien peitossa, jolloin ruudun alareuna ei olekaan käyttökelpoinen. Siksi esimerkiksi alalaitateksti voi olla syytä nostaa hieman ylemmäs kuin perinteisessä televisiolähetyksessä.

Tämä on kurssin kohta, jossa opiskelijat yllättyvät eniten. Grafiikka, joka näytti suurella monitorilla hyvältä, voi pienellä näytöllä olla vaikeasti luettava. Silloin korjaamme kokoa, kontrastia ja sijaintia ja testaamme uudelleen. Tästä aiheesta kirjoitan erikseen toisessa artikkelissa, joten tässä riittää todeta, että pienen näytön testi kuuluu aina sijoittelun loppuun.

Kokonaisuudessaan sijoittelun työnkulku on yksinkertainen. Aloitamme apuviivoista, asetamme grafiikan, tarkistamme sen kolmella testikuvalla, kysymme mitä alla on, katsomme marginaalit ja päätämme pienellä näytöllä. Jokainen vaihe on lyhyt, mutta yhdessä ne tekevät tuloksesta luotettavan.

Kurssilla emme tavoittele täydellistä asettelua kerralla, vaan tapaa, jolla virheet löytyvät ajoissa. Kun työnkulku on omaksuttu, sen voi siirtää mihin tahansa ohjelmistoon ja mihin tahansa tuotantoon. Harjoitusten palautteessa kirjoitamme auki, mikä ratkaisu toimi ja miksi, jotta oppiminen ei jää pelkäksi arvaukseksi.

• Apuviivat
• Testikuvat
• Kysymys alla olevasta kuvasta
• Marginaalit
• Pienen näytön testi