Ero sivun ”Graafinen ohjeisto” versioiden välillä

Kohteesta PiraattiWiki
Loikkaa: valikkoon, hakuun
(→‎Fontit)
p (→‎Värit)
Rivi 34: Rivi 34:
 
== Värit ==
 
== Värit ==
  
−
Puolueen värikartta on sama kuin Ruotsin piraateilla.
+
Tekstin värinä käytetään ensijaisesti joko mustaa tai valkoista, ja muita värejä taustaväreinä tai kuvituksessa. Mustalla pohjalla tekstin väri voi olla myös joku vaaleimmista violeteista ja otsikoissa voi käyttää tummimpia violetteja oman harkinnan mukaan.
  
−
Tunnusvärejä suositellaan käytettäväksi tehosteväreinä visuaalisessa suunnittelussa. Tunnusvärejä ei kannata käyttää tekstin värinä. Tekstin väri on ensisijaisesti musta vaalealla taustalla, ja valkoinen tummalla taustalla.
+
Värien käytössä tulee ottaa huomioon että kontrasti on tarpeeksi suuri ja teksti tai kuvat ja erottuvat selvästi taustaväristä.
−
 
 
−
Lisäksi käytössä on apuvärejä visuaalisen suunnittelun tueksi. Nämä värisävyt on valittu siksi, että ne ovat toimivassa harmoniassa tunnusvärien kanssa ja sopivat tunnelmaltaan piraattien visuaaliseen ilmeeseen.  
 
  
 
==== Värikoodit ====
 
==== Värikoodit ====
Rivi 49: Rivi 47:
 
|RGB Hex triplet for HTML/Web
 
|RGB Hex triplet for HTML/Web
 
|-
 
|-
−
|'''Lila,''' 1. tunnusväri
+
|Violetti, puolueen tunnusväri
 
|85, 100, 0, 0
 
|85, 100, 0, 0
 
|81, 36, 131
 
|81, 36, 131
Rivi 55: Rivi 53:
 
|style="width: 30%; background-color: #512483;"|
 
|style="width: 30%; background-color: #512483;"|
 
|-
 
|-
−
|'''Oranssi,''' 2. tunnusväri
+
|Violetti 02
−
|50, 10, 100, 0
+
|62, 81, 0, 0
−
|242, 137, 3
+
|121, 76, 171
−
|#f28903
+
|#794cab
−
|style="width: 30%; background-color: #f28903;"|
+
|style="width: 30%; background-color: #794cab;"|
−
|-
 
−
|Vihreä
 
−
|0, 55, 100, 0
 
−
|149, 180, 32
 
−
|#95b420
 
−
|style="width: 30%; background-color: #95b420;"|
 
−
|-
 
−
|Keltainen
 
−
|0, 20, 100, 10
 
−
|234, 189, 0
 
−
|#eabd00
 
−
|style="width: 30%; background-color: #eabd00;"|
 
−
|-
 
−
|Pinkki
 
−
|10, 90, 0, 0
 
−
|216, 46, 138
 
−
|#d82e8a
 
−
|style="width: 30%; background-color: #d82e8a;"|
 
 
|-
 
|-
−
|Punainen
+
|Violetti 03
−
|15, 95, 85, 0
+
|43, 60, 100, 0
−
|207, 36, 44
+
|161, 116, 211
−
|#cf242c
+
|#a174d3
−
|style="width: 30%; background-color: #cf242c;"|
+
|style="width: 30%; background-color: #a174d3;"|
 
|-
 
|-
−
|Sininen
+
|Violetti 04
−
|90, 0, 15, 0
+
|20, 34, 100, 10
−
|0, 166, 208
+
|205, 170, 238
−
|#00a6d0
+
|#cdaaee
−
|style="width: 30%; background-color: #00a6d0;"|
+
|style="width: 30%; background-color: #cdaaee;"|
 
|-
 
|-
−
|Tummansininen
+
|Violetti 05
−
|100, 60, 10, 0
+
|8, 16, 0, 0
−
|0, 92, 159
+
|230, 213, 246
−
|#005c9f
+
|#e6d5f6
−
|style="width: 30%; background-color: #005c9f;"|
+
|style="width: 30%; background-color: #e6d5f6;"|
 
|-
 
|-
−
|Turkoosi
 
−
|79, 12, 44, 0
 
−
|0, 160, 155
 
−
|#00a09b
 
−
|style="width: 30%; background-color: #00a09b;"|
 
 
|}
 
|}
−
Nettisivun linkkien perusvärinä ei tule käyttää tunnusväri-lilaa, koska se ei mustasta tekstistä juurikaan erotu. Linkkien perusväriksi sopii alla oleva kirkkaan lila, ja hover-värinä, joka näkyy kun vie kursorin linkin päälle, voi käyttää oranssia.
+
Violettien lisäksi tehosteena voi käyttää vihreän sävyjä tai perinteistä oranssia.
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
 
|Väri
 
|Väri
 +
|CMYK [0-100]
 
|RGB [0-255]
 
|RGB [0-255]
 
|RGB Hex triplet for HTML/Web
 
|RGB Hex triplet for HTML/Web
 
|-
 
|-
−
|Kirkkaan lila, linkkien perusväri
+
|Vihreä
−
|130, 36, 227
+
|73, 13, 37, 0
−
|#8224e3
+
|59, 168, 168
−
|style="width: 30%; background-color: #8224e3;"|
+
|#3ba8a8
 +
|style="width: 30%; background-color: #3ba8a8;"|
 +
|-
 +
|Vaaleampi vihreä
 +
|27, 0, 11, 0
 +
|181, 224, 226
 +
|#b5e0e2
 +
|style="width: 30%; background-color: #b5e0e2;"|
 
|-
 
|-
−
|Oranssi, linkkien hover-väri
+
|Oranssi
 +
|2, 56, 100, 0
 
|242, 137, 3
 
|242, 137, 3
 
|#f28903
 
|#f28903

Versio 23. helmikuuta 2019 kello 10.45

Materiaaleja muualla tämän wikisivun lisäksi

Graafinen ohjeisto ja materiaalipankki puolueen arkistossa, josta löytyy muun muassa:

Logot

Purjelogo, musta logo -- PNG valkoisella pohjalla -- PNG läpinäkyvällä pohjalla -- SVG, EPS?

Purjelogo, valkoinen logo -- PNG mustalla pohjalla -- PNG läpinäkyvällä pohjalla -- SVG, EPS?

Purjelogo ja teksti, musta logo -- PNG valkoisella pohjalla -- PNG läpinäkyvällä pohjalla -- SVG, EPS?

Purjelogo ja teksti, valkoinen logo -- PNG mustalla pohjalla -- PNG läpinäkyvällä pohjalla -- SVG, EPS?

Piraattinuorten oranssi purjelogo -- PNG valkoiselal taustalla -- PNG läpinäkyvällä taustalla -- SVG, EPS?

Värit

Tekstin värinä käytetään ensijaisesti joko mustaa tai valkoista, ja muita värejä taustaväreinä tai kuvituksessa. Mustalla pohjalla tekstin väri voi olla myös joku vaaleimmista violeteista ja otsikoissa voi käyttää tummimpia violetteja oman harkinnan mukaan.

Värien käytössä tulee ottaa huomioon että kontrasti on tarpeeksi suuri ja teksti tai kuvat ja erottuvat selvästi taustaväristä.

Värikoodit

Väri CMYK [0-100] RGB [0-255] RGB Hex triplet for HTML/Web
Violetti, puolueen tunnusväri 85, 100, 0, 0 81, 36, 131 #512483
Violetti 02 62, 81, 0, 0 121, 76, 171 #794cab
Violetti 03 43, 60, 100, 0 161, 116, 211 #a174d3
Violetti 04 20, 34, 100, 10 205, 170, 238 #cdaaee
Violetti 05 8, 16, 0, 0 230, 213, 246 #e6d5f6

Violettien lisäksi tehosteena voi käyttää vihreän sävyjä tai perinteistä oranssia.

Väri CMYK [0-100] RGB [0-255] RGB Hex triplet for HTML/Web
Vihreä 73, 13, 37, 0 59, 168, 168 #3ba8a8
Vaaleampi vihreä 27, 0, 11, 0 181, 224, 226 #b5e0e2
Oranssi 2, 56, 100, 0 242, 137, 3 #f28903

Maalien värikoodi

Lila = L342 Tikkurilan värikartan mukaan. Klubin lattia ja ovet maalattu tämän mukaan keväällä 2018

Fontit

Politics Head
Lato
  • Web-käyttöön ja vastaaviin materiaaleihin vapaa fontti. Ensisijaisesti leipäteksteihin mutta sopii myös esim. väliotsikoihin Politics Headin sijaan. Puolueen materiaaleissa on käytetty tästä fontista usein leikkauksia light ja heavy. http://www.latofonts.com/lato-free-fonts/
Muita piraattien käyttämiä fontteja

Valokuvat

Henkilökuvat, esim. ehdokaskuvat

Ehdokasjulisteen kuvat

Teiden varsille tuleviin telineisiin suunniteltavia julisteita käytetään kaikissa Suomen vaaleissa. Yhteen julisteeseen laitetaan ehdokkaat joko vaalipiireittäin tai maakunnittain, riippuen tilanteesta.

Julisteet ovat yleensä kokoa A0, joten julistetta varten toimitettavan valokuvan on oltava erittäin laadukas, jotta se näyttäisi painotuotteessa hyvältä. Tämä koskee toki yleisestikin painettavia materiaaleja.

Sopiva ehdokaskuva julistetta varten saadaan, kun otetaan henkilöstä hyvällä kameralla laajahkolla rajauksella rintakuva. Taustan on hyvä olla vaalea. Rajaus voi olla laajempi kuin rintakuvarajaus, graafikko saa tällöin enemmän säätövaraa taittotilanteessa.

Valokuvista voi toimittaa joko hyvin editoidut versiot, tai alkuperäiset kuvat. Suositeltavaa on, että kuva on vähintään 1500 pikseliä leveä, mutta mieluiten mahdollisimman suuri. Käytetty tiedostoformaatti on yleensä PNG, JPG tai TIFF.

Suositeltavaa olisi, että jokainen ehdokas kuvattaisiin mahdollisimman samanlaisissa olosuhteissa, tai vähintäänkin jokaisen piirin kuvat olisivat keskenään samankaltaisia.


Ehdokaskuvat eri medioihin

--

Seuraavia voi täydentää

  • Yleisluontoinen muotokuva
  • Flyerit ja muut henkilökohtaiset printattavat mainokset
  • Ehdokaslistat tienvarsilla
  • Sivuston profiilikuvat 270x270 koolla, Philantropy teeman mukaan.

Yleiskuvat, esim. tapahtumakuvat

Grafiikka ja valokuva sosiaalisessa mediassa

Sosiaalinen media on visuaalisessa mielessä todella laaja käsite joten kohdennetaan tässä ohjeessa vain yleisempiin kohtiin.

Facebook (cover, preview, profile)

Facebookin cover-kuva näkyy profiilissivulla ylhäällä, ikäänkuin takana. Suosituksina ovat

Facebook (preview image)

Preview-kuvalla tarkoitetaan sitä kuvaa, joka ilmestyy facebook-postaukseen, kun postauksessa on linkki. Postauksien näkyvyyden kannalta feedeissä on hyvin tärkeää, että niihin on liitetty mukaan kuvaava ja mielenkiintoinen kuva.

  • Facebook suosittelee preview-kuvien kooksi 1200 x 630 pikseliä ja minimi on 600 x 315.

Twitter (header, profile)

  • Header photo eli taustakuvan suosituskoko on 1500 x 500 pikseliä. Kuvia ei uudelleen muokata (resize) jos niiden koko on 1263 x 421 pikseliä.
  • Profile photo eli profiilikuvan koko on 400 x 400 pikseliä

Twitter (banner)

Piraattipuolue käytti kokoja 600 x 600 ja 800 x 800 pikseliä kannattajakorttikeräyksen aikana 2015-2016 ja toimivat kohtuullisesti eri kokoisilla päätelaitteilla.

  • 1024 x 576 pikseliä on yleisesti käytetty koko tässä yhteydessä

Twitter (ads)

Twitteriltä voi ostaa mainoskampanjoita. Niissä oleville kuville suositellaan 1200 x 628 pikselin kokoa ja minimi on 600 x 335 pikseliä.

Twitter (tweet preview)

Preview-kuva generoidaan esimerkiksi siinä tapauksessa, että tweetissä on linkki blogipostukseen. Kuva ja siihen liittyvät ominaisuudet voidaan määritellä Twitter Cardsien perusteella itse blogipostauksessa. https://dev.twitter.com/cards/types/summary

Muiden piraattipuolueiden ohjeistuksia

Noudettu kohteesta https://wiki.piraattipuolue.fi/index.php?title=Graafinen_ohjeisto&oldid=76124