Some ja video

Ohjeita ja suosituksia sosiaaliseen mediaan sekä videoihin.

Sosiaalisen median kuvat ovat vaaka-, neliö- pysty- tai bannerikuvia (matala vaakakuva). Tarkista oikeat kuvakoot ja kuvien suoja-alueet kanavien omista ohjeista. Tekstit tasataan pääsääntöisesti vasemmalle. Jos teksti tasataan keskelle, myös logo on keskellä. Neliökuvassa logo sijoitetaan pääsääntöisesti oikeaan alakulmaan.

Tarkista, että teksti on saavutettavaa (siinä on riittävä kontrasti). Pääsääntöisesti kuva täyttää koko alueen ja teksti tulee sen päälle (valkoisella). Otsikot ovat isoilla kirjaimilla, alaotsikko pienillä kirjaimilla. Huom. muista fonttiohjeet (katso kohta Videon tekstityyli).

Jos kanavan profiilikuvassa lukee esimerkiksi hankkeen nimi, niin yliopiston liekkilogon voi laittaa osaksi kansikuvaa.

Sosiaaliseen mediaan tuotetuissa videoissa ei käytetä alkuplanssia.
Tällä sivulla

Otsikot tasataan kuva-alan vasempaan yläkulmaan 75 px etäisyydelle kuva-alan reunoista. Alaotsikkojen koko kannattaa olla suunnilleen 50 % otsikon koosta.

Otsikot: Gotham narrow bold, isot kirjaimet

  • Koko: esimerkki 140 px (koko voi vaihdella tekstin pituuden mukaan)
  • Riviväli: 80 % pistekoosta (skandinaaviset merkit ja vastaavat, riviväli: 90 % pistekoosta)
  • Kirjainvälistys: -55 (optical)
  • Kappaleväli: ylle ja alle 30 px

Alaotsikot: Gotham narrow bold, isot kirjaimet

  • Koko: 70 px
  • Riviväli: 80 % pistekoosta (skandinaaviset merkit ja vastaavat, riviväli: 90 % pistekoosta)
  • Kirjainvälistys: -55 (optical)
  • Kappaleväli: alle 25 px
  • Mahdollisuus käyttää sinistä tekstiä

Elementtien varjo (drop shadow)

  • Väri: musta RGB=0,0,0 (multiply)
  • Opasiteetti: 20 %
  • X ja Y offset: 0 ja 0 px
  • Varjon koko: 5 px

Valkoinen, läpikuultava vesileima ilmestyy fade-in kuva-alan oikeaan yläkulmaan kun videon pääotsikko on poistunut näkyvistä. Vesileima on paikallaan aina videon loppuplanssiin saakka. Vesileimaa käytetään sekä laadukkaissa 16:9 kuvasuhteen videoissa että somevideoissa. 

Vesileima (liekkimerkki)

  • Leveys: 160 px
  • Korkeus: 150 px
  • Etäisyys oikeasta yläkulmasta: x=35 px, Y=35 px
  • Opasiteetti: 25 %

Somevideoissa ja videoissa, jotka alkavat suoraan ilman alkuplanssia vesileima on näkyvissä heti videon alusta.

Kun tuotat videota, niin pyydä myös versio ilman vesileimaa, grafiikoita ja musiikkia, jotta mahdollinen editointi eri kanaviin on helpompaa.

Otsikot tasataan vasemmalle hieman kuva-alan keskilinjan yläpuolelle tai vasempaan yläkulmaan 75 px etäisyydelle kuva-alan reunoista.

Otsikot

  • Gotham narrow bold, isot kirjaimet
  • Koko: Esimerkki 175 px (koko voi vaihdella tekstin pituuden mukaan)
  • Riviväli: 85 % pistekoosta (skandinaaviset merkit ja vastaavat 90 % pistekoosta)
  • Kirjainvälistys: -55 (optical)

Pitemmät otsikkotekstit

  • Gotham narrow bold, isot kirjaimet
  • Koko: Esimerkki 120 px (koko voi vaihdella tekstin pituuden mukaan)
  • Riviväli: 85 % pistekoosta (skandinaaviset merkit ja vastaavat 90 % pistekoosta)
  • Kirjainvälistys: -55 (optical)

Alaotsikot

  • Gotham narrow bold, isot kirjaimet
  • Koko: noin 50 % pääotsikon koosta
  • Riviväli: 85 % pistekoosta 
  • Kirjainvälistys: -55 (optical)
  • Mahdollisuus käyttää sinistä tekstiä

Elementtien Varjo (drop shadow)

  • Väri: musta RGB=0,0,0 (multiply)
  • Opasiteetti: 20 %
  • X ja Y offset: 0 ja 0 px
  • Varjon koko: 5 px

Haastateltavien henkilöiden nimet ja tittelit sijoitetaan 75 px etäisyydelle kuva-alan vasemmasta yläkulmasta. Etunimi ja sukunimi asemoidaan eri riveille.

Nimi

  • Gotham narrow bold, isot kirjaimet
  • Koko: 120 px
  • Riviväli: 85 % pistekoosta (skandinaaviset merkit ja vastaavat, riviväli: 90 % pistekoosta)
  • Kirjainvälistys: -55 (optical)
  • Kappaleväli: alle 30 px

Titteli

  • Gotham narrow medium, pienet kirjaimet
  • Koko: 60 px
  • Riviväli: 85 % pistekoosta (skandinaaviset merkit ja vastaavat, riviväli: 90 % pistekoosta)
  • Kirjainvälistys -55 (optical)

Elementtien varjo (drop shadow)

  • Väri: musta RGB=0,0,0 (multiply)
  • Opasiteetti: 20 %
  • X ja Y offset: 0 ja 0 px
  • Varjon koko: 5 px

Saavutettavuussyistä pitää olla kaikissa videoissa teksti. Jos tuotat videota, niin pyydä a) videosta versiot ilman tekstiä + srt-tekstitiedosto ja b) versio, jossa teksti on poltettu kiinni videoon. Jos somekanavassa on mahdollisuus käyttää erillistä srt-tekstitiedostoa, niin käytä sitä (esimerkiksi Youtube). Tällöin on mahdollista tehdä tekstitykset usealla eri kielellä ja käyttäjä valitsee haluamansa kielen. Mustat palkit tekstien taakse saavutettavuuden takia.

Tekstitykset sijoitetaan keskitetysti 80 px etäisyydelle kuva-alan alareunasta. 

Tekstitykset

  • Gotham narrow bold
  • Koko: 60 px
  • Riviväli: 110 % pistekoosta
  • Kirjainvälistys: 0 (optical)

Tekstityksen varjo (drop shadow)

  • Väri: musta RGB=0,0,0 (multiply)
  • Opasiteetti: 20 %
  • X ja Y offset: 0 ja 0 px
  • Varjon koko: 5 px

Muista valita edustava thumbnail videolle. Kuva näkyy esim. jos jakaa YouTubessa olevasta videosta linkin. Kuva näkyy myös YouTube-kanavalla.

Jos videotuotannon käytössä ei ole Helsingin yliopiston brändifontti Gotham Narrow -leikkauksia, käytetään korvaavana fonttina ilmaisen Arial -perheen leikkauksia. Arial -leikkauksiin käytetään samoja kirjainvälistys-, riviväli- ja kappalevälimäärittelyitä kuin Gotham Narrow -fontteihin.