Difference between revisions of "Grafisk manual"
(28 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;" | {| class="wikitable" style="background: #e0dede;" | ||
Line 101: | Line 106: | ||
|- | |- | ||
|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 144: | Line 149: | ||
= 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 = | ||
Line 166: | Line 175: | ||
* 1 rutas marginal runt om. | * 1 rutas marginal runt om. | ||
* Ska materialet skrivas ut på skrivare, lägg en halv rutas vit kant 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 | + | * 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|]] | | [[File:Form2.jpg|300px|frameless|]] | ||
|- | |- | ||
Line 172: | Line 181: | ||
= Ikoner och illustrationer = | = Ikoner och illustrationer = | ||
− | [[File:Raket.jpg| | + | |
− | 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. | + | {| 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 = | = Remix av logotyp = | ||
− | |||
=====Exempel på partianknuten avsändare – mix av gammalt och nytt===== | =====Exempel på partianknuten avsändare – mix av gammalt och nytt===== | ||
− | [[File:Remix1.jpg| | + | {| 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===== | =====Exempel på helt fri remix===== | ||
− | [[File:Remix2.jpg| | + | {| 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 gamla loggan - liggande ===== | ||
Line 193: | Line 210: | ||
!|Filer | !|Filer | ||
|- | |- | ||
− | || [[File:logga_text.enfärg_svart.preview.PNG|enfärg_svart.preview.PNG]] || | + | || [[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]] || | + | || [[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]] |
|} | |} | ||
Line 205: | Line 222: | ||
!|Filer | !|Filer | ||
|- | |- | ||
− | || [[File:under_enfärg_svart.preview.png|enfärg_svart.preview.png]] || | + | || [[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]] || | + | || [[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 = | ||
=====Manual för utskrift===== | =====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) |
− | * [http://opassande.se/wp-content/uploads/2015/10/ | + | * [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. |
− | * [http://opassande.se/wp-content/uploads/2015/10/loggomall.idml_.zip Loggomall] indesign-dokument, inklusive cmyk och rgb-färginställningar. | + | * [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]. | * 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, [ | + | * 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