Difference between revisions of "Grafisk manual"
(104 intermediate revisions by 6 users not shown) | |||
Line 1: | Line 1: | ||
Välkommen till Piratpartiets grafiska manual. Detta är ej stenhårda regler utan är tänkt som ett stöd för när man gör saker med Piratpartiet som avsändare. | Välkommen till Piratpartiets grafiska manual. Detta är ej stenhårda regler utan är tänkt som ett stöd för när man gör saker med Piratpartiet som avsändare. | ||
+ | |||
+ | This manual has also been translated to [[Graphical_manual| English]] and [[Manual_grafica| Spanish]]. | ||
+ | |||
+ | För partiets gamla grafiska profil, se [[Grafisk profil innan 2015|här]]. | ||
= Officiell logotyp = | = Officiell logotyp = | ||
+ | Det lila (eller vita) seglet är vår logotyp, som tillsammans med namnet används som vår primära logga. Seglet får användas ensamt, och även läggas i nån av våra officiella [[Grafisk_manual#F.C3.A4rger|färger]]. Till höger kan du se den s.k. serpentin-versionen av loggan som kombinerar våra färger och symboliserar rörelse och flexibilitet. Olika versioner finns nedladdningsbara [[Grafisk_manual#Logotyper_f.C3.B6r_nedladdning|här]]. | ||
=====Stående logga===== | =====Stående logga===== | ||
− | + | {| 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]] | ||
+ | |} | ||
=====Liggande logga===== | =====Liggande logga===== | ||
− | + | {| 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]] | ||
+ | |} | ||
= Logotypens uppbyggnad = | = Logotypens uppbyggnad = | ||
Line 12: | Line 25: | ||
=====Stående logga===== | =====Stående logga===== | ||
− | * | + | {| class="wikitable" style="background: #e0dede; width: 900px;" |
+ | |[[File:Uppbyggnad1.jpg|500px|frameless]] | ||
+ | | | ||
+ | * Logotyp – standardfärg lila, men får även användas i de andra [[Grafisk_manual#F.C3.A4rger|PP-färgerna]]. | ||
+ | * Dela upp ytan i 23 lika stora delar på höjden. | ||
+ | * Loggan tar 15 rutor på höjden. | ||
+ | * Piratpartiet skrivs alltid i versaler och i Lato Light, och är två rutor på höjden. | ||
+ | * Det horisontella höjdmåttet bestämmer bredden på vertikal ledd. | ||
+ | |} | ||
=====Liggande logga===== | =====Liggande logga===== | ||
− | * | + | {| class="wikitable" style="background: #e0dede; width: 900px;" |
+ | |[[File:Uppbyggnad2.jpg|500px|frameless]] | ||
+ | | | ||
+ | * Logotyp – standardfärg lila, men får även användas i de andra [[Grafisk_manual#F.C3.A4rger|PP-färgerna]]. | ||
+ | * Dela upp ytan i 8 lika stora delar på höjden. | ||
+ | * Loggan tar 4 rutor på höjden. | ||
+ | * Piratpartiet skrivs alltid i versaler och i Lato Light, och är två rutor på höjden. | ||
+ | * Det horisontella höjdmåttet bestämmer bredden på vertikal ledd. | ||
+ | |} | ||
= Logotypens användning = | = Logotypens användning = | ||
=====Regioner/föreningar===== | =====Regioner/föreningar===== | ||
− | + | {| class="wikitable" style="background: #e0dede; width: 900px;" | |
− | Piratpartiet behöver inte vara utskrivet vid logotypen om sammanhanget gör det tydligt att det är Piratpartiet. Exempel: en Facebooksida där sidans namn redan anger ”Piratpartiet Västra Götaland”, el.dyl. | + | |[[File:Regioner.jpg|500px|frameless]] |
+ | |Piratpartiet behöver inte vara utskrivet vid logotypen om sammanhanget gör det tydligt att det är Piratpartiet. Exempel: en Facebooksida där sidans namn redan anger ”Piratpartiet Västra Götaland”, el.dyl. | ||
+ | |} | ||
=====Webbadress, osv.===== | =====Webbadress, osv.===== | ||
− | + | {| class="wikitable" style="background: #e0dede; width: 900px;" | |
− | Ska helst alltid vara i det stående formatet. | + | |[[File:Webbadresser.jpg|500px|frameless]] |
+ | |Ska helst alltid vara i det stående formatet och alltid Lato Bold i gemener. | ||
+ | |} | ||
= Färger = | = Färger = | ||
Line 45: | Line 78: | ||
|- | |- | ||
|Orange – sekundärfärg | |Orange – sekundärfärg | ||
− | |# | + | |#f28903 |
|50-10-100-0 | |50-10-100-0 | ||
− | | style="width: 30%; background-color: # | + | | style="width: 30%; background-color: #f28903;"| |
+ | |- | ||
+ | | | ||
+ | |- | ||
+ | |Gul | ||
+ | |#eabd00 | ||
+ | |0-20-100-10 | ||
+ | | style="width: 30%; background-color: #eabd00;"| | ||
|- | |- | ||
| | | | ||
|- | |- | ||
|Grön | |Grön | ||
− | |# | + | |#95b420 |
|0-55-100-0 | |0-55-100-0 | ||
− | | style="width: 30%; background-color: # | + | | style="width: 30%; background-color: #95b420;"| |
|- | |- | ||
| | | | ||
Line 62: | Line 102: | ||
|10-90-0-0 | |10-90-0-0 | ||
| style="width: 30%; background-color: #d82e8a;"| | | style="width: 30%; background-color: #d82e8a;"| | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|- | |- | ||
| | | | ||
|- | |- | ||
|Röd | |Röd | ||
− | |# | + | |#cf232c |
|15-95-85-0 | |15-95-85-0 | ||
| style="width: 30%; background-color: #cf242c;"| | | style="width: 30%; background-color: #cf242c;"| | ||
Line 101: | Line 134: | ||
= Kombination logotyp och färger = | = Kombination logotyp och färger = | ||
− | + | {| class="wikitable" style="background: #e0dede;" | |
+ | | [[File:Lila_segel.svg|170px|frameless]] | ||
+ | | [[File:Orange_segel.svg|170px|frameless]] | ||
+ | | [[File:Gult_segel.svg|170px|frameless]] | ||
+ | | [[File:Grönt_segel.svg|170px|frameless]] | ||
+ | | [[File:Rosa_segel.svg|170px|frameless]] | ||
+ | |- | ||
+ | | [[File:Rött_segel.svg|170px|frameless]] | ||
+ | | [[File:Ljusblått_segel.svg|170px|frameless]] | ||
+ | | [[File:Mörkblått_segel.svg|170px|frameless]] | ||
+ | | [[File:Turkost_segel.svg|170px|frameless]] | ||
+ | | [[File:Vitt_segel.svg|170px|frameless]] | ||
+ | |} | ||
= Typsnitt = | = Typsnitt = | ||
− | [[File:Lato.jpg| | + | {| class="wikitable" style="background: #e0dede; width: 900px;" |
− | 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. | + | |[[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] | * 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. | + | * [http://www.google.com/fonts/specimen/Lato Google fonts], för webb. |
+ | |} | ||
= Formgivning = | = Formgivning = | ||
− | |||
− | [[File: | + | {| 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|]] | ||
+ | |- | ||
+ | |} | ||
+ | = Ikoner och illustrationer = | ||
− | + | {| class="wikitable" style="background: #e0dede; width: 900px;" | |
− | + | |[[File:Raket.jpg|300px|frameless]] | |
+ | | Ibland kan man behöva använda sig av ikoner eller illustrationer. För det ändamålet rekommenderas [http://fortawesome.github.io/Font-Awesome Font Awsome]. Används med fördel tillsammans med vårt typsnitt och våra färger. | ||
+ | |} | ||
− | + | = 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 = | = Länkresurser = | ||
− | PDF | + | =====Manual för utskrift===== |
+ | * [https://piratpartiet.se/wp-content/uploads/2020/02/grafisk_manual_enkelsidig.pdf PDF] - A4, enkelsidig | ||
+ | * [https://piratpartiet.se/wp-content/uploads/2020/02/grafisk_manual_uppslag.pdf PDF] - A4, uppslag | ||
=====Typsnitt===== | =====Typsnitt===== | ||
− | * [ | + | * [https://www.latofonts.com Lato] – vårt officiella typsnitt |
− | * [ | + | * [https://www.google.com/fonts/specimen/Lato Google Fonts] Lato på webbsidor |
− | * [ | + | * [https://fontawesome.com/ Font Awesome] – Stort, fritt ikonset för webb och illustrationer |
=====Logotyper för nedladdning===== | =====Logotyper för nedladdning===== | ||
− | * | + | * [https://docs.piratpartiet.se/products/files/#383 Bildbank > Logotyper] Alla logotyper i alla format, svg, png, även eps för tryck. (Kräver att du har ett konto i Piratpartiets docs, kontakta [[Partisekreterare | partisekreteraren]] om du vill få ett) |
− | * | + | * [https://web.archive.org/web/20160326061426/http://opassande.se/wp-content/uploads/2015/10/svg.zip Loggor] - samtliga loggor i ett paket, svg RGB för webb o.dyl. |
+ | * [https://web.archive.org/web/20160326060726/http://opassande.se/wp-content/uploads/2015/10/loggomall.idml_.zip Loggomall] indesign-dokument, inklusive cmyk och rgb-färginställningar. | ||
=====Fria bilder===== | =====Fria bilder===== | ||
− | * [ | + | * [https://stocksnap.io stocksnap.io] Snygga högupplösta bilder som får användas fritt |
− | * [ | + | * [https://www.freepik.com/popular-vectors www.freepik.com/popular-vectors] Fria vectorbaserade illustrationer |
− | * [ | + | * [https://compfight.com Flickr] För att hitta CC-bilder på Flickr |
− | * [ | + | * [https://www.flickr.com/search/advance www.flickr.com/search/advance] Ställ in CC när du söker |
− | * [ | + | * [https://docs.piratpartiet.se/products/files/#277 docs.piratpartiet.se] Piratpartiets interna bildbank (Kräver att du har ett konto i Piratpartiets docs, kontakta [[Partisekreterare | partisekreteraren]] om du vill få ett) |
− | * [ | + | * [https://bildbank.piratpartiet.se/main.php bildbank.piratpartiet.se/main.php] Piratpartiets gamla bildbank |
− | * [ | + | * [https://commons.wikimedia.org commons.wikimedia.org] Många fria bilder finns tillgängliga här |
− | + | * [https://search.creativecommons.org search.creativecommons.org] Portal för CC-bildsidor | |
=====Tips===== | =====Tips===== | ||
− | * [ | + | * [https://web.archive.org/web/20200112083851/https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/ Guider för format i sociala medier] |
− | * [ | + | * [https://creativecommons.org/music-communities/ Fri musik], för exempelvis film |
− | + | * [https://freesound.org Fria ljudeffekter] | |
− | * [ | ||
− | |||
=====Inspiration===== | =====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, [https://framtidspolitik.nu/ framtidspolitik.nu] |
− | + | ||
− | + | [[category:Grafisk manual]] | |
+ | |||
+ | {{partiet}} |
Latest revision as of 16:02, 17 February 2020
Välkommen till Piratpartiets grafiska manual. Detta är ej stenhårda regler utan är tänkt som ett stöd för när man gör saker med Piratpartiet som avsändare.
This manual has also been translated to English and Spanish.
För partiets gamla grafiska profil, se här.
Contents
Officiell logotyp
Det lila (eller vita) seglet är vår logotyp, som tillsammans med namnet används som vår primära logga. Seglet får användas ensamt, och även läggas i nån av våra officiella färger. Till höger kan du se den s.k. serpentin-versionen av loggan som kombinerar våra färger och symboliserar rörelse och flexibilitet. Olika versioner finns nedladdningsbara här.
Stående logga
Liggande logga
Logotypens uppbyggnad
Logotypen får även användas utan text till, samt i olika PP-färger.
Stående logga
|
Liggande logga
|
Logotypens användning
Regioner/föreningar
Webbadress, osv.
Ska helst alltid vara i det stående formatet och alltid Lato Bold i gemener. |
Färger
Färgerna får även användas i procentad form.
Färgkoder | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Webb | Tryck (CMYK) | |||||||||||
Lila – primärfärg | #512483 | 85-100-0-0 | ||||||||||
Orange – sekundärfärg | #f28903 | 50-10-100-0 | ||||||||||
Gul | #eabd00 | 0-20-100-10 | ||||||||||
Grön | #95b420 | 0-55-100-0 | ||||||||||
Rosa | #d82e8a | 10-90-0-0 | ||||||||||
Röd | #cf232c | 15-95-85-0 | ||||||||||
Blå | #00a6d0 | 90-0-15-0 | ||||||||||
Mörkblå | #005c9f | 100-60-10-0 | ||||||||||
Turkos | #00a09b | 79-12-44-0 |
Kombination logotyp och färger
Typsnitt
|
Formgivning
Ikoner och illustrationer
Ibland kan man behöva använda sig av ikoner eller illustrationer. För det ändamålet rekommenderas Font Awsome. Används med fördel tillsammans med vårt typsnitt och våra färger. |
Remix av logotyp
Exempel på partianknuten avsändare – mix av gammalt och nytt
Exempel på helt fri remix
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.
Bild | Syfte | Filer |
---|---|---|
En färg för vit/ljus bakgrund | SVG PDF PNG JPEG | |
Två färger för ljus bakgrund | SVG PDF PNG JPEG |
Den gamla loggan stående
Bild | Syfte | Filer |
---|---|---|
En färg för vit/ljus bakgrund | SVG PDF PNG JPEG | |
Två färger för ljus bakgrund | SVG PDF PNG JPEG |
Länkresurser
Manual för utskrift
Typsnitt
- Lato – vårt officiella typsnitt
- Google Fonts Lato på webbsidor
- Font Awesome – Stort, fritt ikonset för webb och illustrationer
Logotyper för nedladdning
- Bildbank > Logotyper Alla logotyper i alla format, svg, png, även eps för tryck. (Kräver att du har ett konto i Piratpartiets docs, kontakta partisekreteraren om du vill få ett)
- Loggor - samtliga loggor i ett paket, svg RGB för webb o.dyl.
- Loggomall indesign-dokument, inklusive cmyk och rgb-färginställningar.
Fria bilder
- stocksnap.io Snygga högupplösta bilder som får användas fritt
- www.freepik.com/popular-vectors Fria vectorbaserade illustrationer
- Flickr För att hitta CC-bilder på Flickr
- www.flickr.com/search/advance Ställ in CC när du söker
- docs.piratpartiet.se Piratpartiets interna bildbank (Kräver att du har ett konto i Piratpartiets docs, kontakta partisekreteraren om du vill få ett)
- bildbank.piratpartiet.se/main.php Piratpartiets gamla bildbank
- commons.wikimedia.org Många fria bilder finns tillgängliga här
- search.creativecommons.org Portal för CC-bildsidor
Tips
- Guider för format i sociala medier
- Fri musik, för exempelvis film
- Fria ljudeffekter
Inspiration
- Filmer gjorda med Piratpartiets grafiska form: Infofilm, film om migration.
- Fristående hemsida med nedslag i Piratpartiets politik, framtidspolitik.nu