Lähdekoodi sivulle Käyttäjä:Nelg/Sandbox

Tervetuloa Piraattipuolueen graafiseen ohjeistukseen. Nämä eivät ole kiveen kirjoitettuja sääntöjä, vaan tarkoituksena on tarjota ohjeita kun aikomuksena on tuottaa Piraattipuolueelle visuaalista materiaalia.

= Virallinen logotyyppi =
Liila (tai valkoinen) purje on logomme, joka yhdessä tekstin kanssa on päälogomme. Purjetta voi käyttää yksin, jopa useissa eri virallisissa [[Graafinen ohjeistus#Värit|väreissämme]]. Oikealla on ns. serpentiinilogo joka yhdistää värimme ja symbolisoi liikettä ja joustavuutta. Eri versiot on ladattavissa osiosta [[Graafinen ohjeistus#Ladattavat logot|Ladattavat logot]].

=====Pystylogo=====
{| class="wikitable" style="background: #e0dede;" 
| [[File:Standard stående medsvarttext.svg|300px|frameless]]
| [[File:Standard_stående_medvittext.svg|300px|frameless]]
| [[File:Serpentin_stående_medsvarttext.svg|300px|frameless]]
|}

=====Vaakalogo=====
{| class="wikitable" style="background: #e0dede;"
| [[File:Standard_liggande_medsvarttext.svg|300px|frameless]]
| [[File:Standard_liggande_medvittext.svg|300px|frameless|style="background-color: #512483;"]]
| [[File:Serpentin_liggande_medsvarttext.svg|300px|frameless]]
|}

= Logotyypin rakenne =
Logotyyppiä voi käyttää ilman tekstiä, myöskin PP-väreissä.

=====Pystylogo=====
{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Rakenne1.jpg|500px|frameless]]
| 
* Logotyyppi &ndash; standardi liila, voi käyttää myös [[Graafinen ohjeistus#Värit|PP-väreissä]].
* Jaa alue 23 yhtä suureen osaan pystysuunnassa.
* Logo peittää 15 osaa pystysuunnassa.
* ''Piraattipuolue'' kirjoitetaan suuraakkosissa '''Penumbra Flare''' -fontilla, teksti peittää 3 ruutua pystysuunnassa (noin 31 vaakasuunnassa).
* Det horisontella höjdmåttet bestämmer bredden på vertikal ledd. '''''(en ymmärrä ._.)'''''
|}

=====Vaakalogo=====
{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Rakenne2.jpg|500px|frameless]]
|
* Logotyyppi &ndash; standardi liila, voi käyttää myös [[Graafinen ohjeistus#Värit|PP-väreissä]].
* Jaa alue 8 yhtä suureen osaan pystysuunnassa.
* Logo peittää 4 osaa pystysuunnassa.
* ''Piraattipuolue'' kirjoitetaan suuraakkosissa ja '''''(logofontti)''''', teksti peittää '''''(kuinka monta?)''''' ruutua pystysuunnassa.
* Det horisontella höjdmåttet bestämmer bredden på vertikal ledd.   
|}

= Logotyypin käyttö =
=====Alueet/piiriyhdistykset=====
{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Alueet.jpg|500px|frameless]]
|Aluelogossa ei tarvitse lukea ''Piraattipuolue'' jos asiayhteys puolueeseen on selkeä. Esimerkiksi: Facebook-sivu jonka nimi on jo "Hämeen Piraatit" ym.
|}

=====Web-osoite, jne.=====
{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Web-osoite.jpg|500px|frameless]]
|Mieluiten aina [[Graafinen ohjeistus#Pystylogo|pystylogo]] ja '''''(logofontti)''''' pienaakkosilla.
|}

= Värit =
Värejä voi käyttää myös prosenttiarvoilla.
{| class="wikitable"
!colspan="13"|Värikoodit
|-
|
|Web 
|Paino (CMYK) 
|-
|
|-
|Liila – ensisijainen väri 
|#512483 
|85-100-0-0 
| style="width: 30%; background-color: #512483;"|
|-
|
|-
|Oranssi – toissijainen väri 
|#f28903 
|50-10-100-0 
| style="width: 30%; background-color: #f28903;"|
|-
|
|-
|Keltainen 
|#eabd00 
|0-20-100-10 
| style="width: 30%; background-color: #eabd00;"|
|-
|
|-
|Vihreä 
|#95b420 
|0-55-100-0 
| style="width: 30%; background-color: #95b420;"|
|-
|
|-
|Vaaleanpunainen 
|#d82e8a 
|10-90-0-0 
| style="width: 30%; background-color: #d82e8a;"|
|-
|
|-
|Punainen 
|#cf242c 
|15-95-85-0 
| style="width: 30%; background-color: #cf242c;"|
|-
|
|-
|Sininen 
|#00a6d0 
|90-0-15-0 
| style="width: 30%; background-color: #00a6d0;"|
|-
|
|-
|Tummansininen 
|#005c9f 
|100-60-10-0 
| style="width: 30%; background-color: #005c9f;"|
|-
|
|-
|Turkoosi 
|#00a09b 
|79-12-44-0 
| style="width: 30%; background-color: #00a09b;"|
|-
|}

= Logotyyppi väreissä =
{| class="wikitable" style="background: #e0dede;"
| [[File:Liila_purje.svg|170px|frameless]]
| [[File:Oranssi_purje.svg|170px|frameless]]
| [[File:Keltainen_purje.svg|170px|frameless]]
| [[File:Vihreä_purje.svg|170px|frameless]]
| [[File:Pinkki_purje.svg|170px|frameless]]
|-
| [[File:Punainen_purje.svg|170px|frameless]]
| [[File:Vaaleansininen_purje.svg|170px|frameless]]
| [[File:Sininen_purje.svg|170px|frameless]]
| [[File:Turkoosi_purje.svg|170px|frameless]]
| [[File:Valkoinen_purje.svg|170px|frameless]]
|}

<div style="border:1px solid black; background:#FFE0D0; width:100%; margin:5px">

= Kirjasintyyppi =
{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Lato.jpg|500px|frameless]]
| 
* Vi använder primärt fonten LATO i fyra skärningar (inom parentes Google Fonts): Light/Light Italic (300), Regular/Italic (400), Bold/Bold Italic (700) och Black/Black Italic (900). Gärna i kombination med varandra (se avsnitt Formgivning). 
* Det finns fler skärningar av fonten – exempelvis LATO HAIRLINE. Den kan användas för trycksaker, men fungerar inte bra för skärmbilder online osv.
* Ladda ner till dator från [http://www.latofonts.com www.latofonts.com]
* [http://www.google.com/fonts/specimen/Lato Google fonts], för webb.
|}



= Muotoilu =

{| class="wikitable" style="background: #e0dede; width: 900px;"
|-
| [[File:Liggande.jpg|300px|frameless]]
| 
* Dela in sidan i en grid: 14 rutor på bredden och 20 på höjden.
* Den liggande loggan placeras alltid i vänsterkant, vid lite mer konventionella layouter, ska den ta 1 ruta på höjden. 
* Den stående loggan kan placeras i alla hörn, vid lite mer konventionella layouter ska den ta 2 rutor på höjden.
| [[File:Stående.jpg|300px|frameless]]
|-
| [[File:Form1.jpg|300px|frameless|]]
| 
* På affischer, flyers osv, kan den stående loggan placeras fritt inom marginalerna. 
* Båda loggovarianterna kan ändras till den storlek som passar till bild och layout. 
* 1 rutas marginal runt om. 
* Ska materialet skrivas ut på skrivare, lägg en halv rutas vit kant runt om.
* Tänk på att bild och text ska kunna kombineras. Bilder med många detaljer = kort text. Längre texter kräver fria ytor på fotografiet.
| [[File:Form2.jpg|300px|frameless|]]
|-
|}

</div>

= Ikonit ja kuvitukset =

{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Raketti.jpg|300px|frameless]]
|Välillä voi olla tarve käyttää ikoneja tai kuvituksia. Tähän tarkoitukseen suositellaan fonttia [http://fortawesome.github.io/Font-Awesome Font Awesome], jota käytetään pääasiassa oman kirjasintyypimme ja väriemme kanssa.
|}

<div style="border:1px solid black; background:#FFE0D0; width:100%; margin:5px">

= Remix av logotyp =

=====Exempel på partianknuten avsändare – mix av gammalt och nytt=====
{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Remix1.jpg|500px|frameless]]
| Remixa (gärna) logotypen och gör roliga saker med den. Använd dock typsnitt och färger som angivet i manualen när det handlar om officiella budskap från partiet eller föreningen. Originalutseendet på loggan får även användas och kombineras fritt.
|}

=====Exempel på helt fri remix=====
{| class="wikitable" style="background: #e0dede; width: 900px;"
|[[File:Remix2.jpg|500px|frameless]]
| Loggan får remixas helt fritt, göras om och användas exempelvis i satiriskt syfte.
|}

===== Den gamla loggan - liggande =====

Den här loggan får användas för remix och utveckling. 

{| class="wikitable" 
!Bild 
!Syfte 
!|Filer
|-
|| [[File:logga_text.enfärg_svart.preview.PNG|enfärg_svart.preview.PNG]] ||En färg för vit/ljus bakgrund ||[[Media:logga_text.enfärg_svart.svg|SVG]] [[Media:logga_text.enfärg_svart.pdf|PDF]] [[Media:logga_text.enfärg_svart.png|PNG]] [[Media:logga_text.enfärg_svart.jpg|JPEG]]
|-
|| [[File:logga_text.tvåfärg_svart.preview.png|tvåfärg_svart.preview.png]] ||Två färger för ljus bakgrund ||[[Media:logga_text.tvåfärg_svart.svg|SVG]] [[Media:logga_text.tvåfärg_svart.pdf|PDF]] [[Media:logga_text.tvåfärg_svart.png|PNG]] [[Media:logga_text.tvåfärg_svart.jpg|JPEG]]
|}

===== Den gamla loggan stående =====

{| class="wikitable" 
!Bild 
!Syfte 
!|Filer
|-
|| [[File:under_enfärg_svart.preview.png|enfärg_svart.preview.png]] ||En färg för vit/ljus bakgrund ||[[Media:under_enfärg_svart.svg|SVG]] [[Media:under_enfärg_svart.pdf|PDF]] [[Media:under_enfärg_svart.png|PNG]] [[Media:under_enfärg_svart.jpg|JPEG]]
|-
|| [[File:under_tvåfärg_svart.preview.png|tvåfärg_svart.preview.png]] ||Två färger för ljus bakgrund ||[[Media:under_tvåfärg_svart.svg|SVG]] [[Media:under_tvåfärg_svart.pdf|PDF]] [[Media:under_tvåfärg_svart.png|PNG]] [[Media:under_tvåfärg_svart.jpg|JPEG]]
|}

= Länkresurser =
=====Manual för utskrift=====
* [http://opassande.se/wp-content/uploads/2015/10/grafisk_manual_enkelsidig.pdf PDF] - A4, enkelsidig
* [http://opassande.se/wp-content/uploads/2015/10/grafisk_manual_uppslag.pdf PDF] - A4, uppslag

=====Typsnitt=====
* [http://www.latofonts.com%20www.latofonts.com Lato] – vårt officiella typsnitt
* [http://www.google.com/fonts/specimen/Lato Google fonts] Lato på webbsidor
* [http://fortawesome.github.io/Font-Awesome Font Awsome] – fri ikonfont för webb och illustrationer

=====Ladattavat logot=====
* [http://opassande.se/wp-content/uploads/2015/10/eps.zip Loggor] – samtliga loggor i ett paket, eps 4-färg för tryck.
* [http://opassande.se/wp-content/uploads/2015/10/svg.zip Loggor] - samtliga loggor i ett paket, svg RGB för webb o.dyl.
* [http://opassande.se/wp-content/uploads/2015/10/standard.zip Loggor] – den primära loggan (stående och liggande), eps 4-färg för tryck.
* [http://opassande.se/wp-content/uploads/2015/10/loggomall.idml_.zip Loggomall] indesign-dokument, inklusive cmyk och rgb-färginställningar.

=====Fria bilder=====
* [http://stocksnap.io stocksnap.io] Snygga högupplösta bilder som får användas fritt
* [http://www.freepik.com/popular-vectors www.freepik.com/popular-vectors] Fria vectorbaserade illustrationer
* [http://compfight.com Flickr] (för att hitta CC-bilder på Flickr)
* [http://www.flickr.com/search/advance www.flickr.com/search/advance] (ställ in CC när du söker)
* [http://bildbank.piratpartiet.se/main.php bildbank.piratpartiet.se/main.php] (PPs bildbank)
* [http://commons.wikimedia.org commons.wikimedia.org] (såklart)
* [http://search.creativecommons.org search.creativecommons.org] (portal för CC-bildsidor)
* [http://www.google.com www.google.com] bildsök – ställ in användarrättigheter för att hitta fria bilder

=====Tips=====
* [http://www.skills2tech.com/2015/01/social-media-images-size-guide-2015.html Guider för format i sociala medier]
* [http://freepsdfiles.net Fria psd-filer]
* [https://creativecommons.org/music-communities/ Fri musik], för exempelvis film
* [http://www.easypdfcloud.com Kombinera och konvertera pdf-filer]
* [http://freesound.org Fria ljudeffekter]

=====Inspiration=====
* Filmer gjorda med Piratpartiets grafiska form: [https://youtu.be/TeBk3DZJOr4 Infofilm], film om [https://youtu.be/tVazj_HCdWU migration].
* Fristående hemsida med nedslag i Piratpartiets politik, [http://framtidspolitik.nu/ framtidspolitik.nu]
* Confederación Pirata ([https://confederacionpirata.org/wiki/creativos:start%20 posters, memes, ads, logos]) 
* Pirate Party UK ([https://pirateparty.org.uk/campaigns/activists/all-materials posters, flyers, images etc.])

</div>

{{partiet}}