PRESS

Niet toegestaan: tekst, andere logo’s, knoppen of grafische elementen binnen deze vrije ruimte plaatsen.

Voor persmateriaal kan je dit ook in een vectorbestand laten zien door een lichtgrijs kader rondom het logo toe te voegen dat de vrije ruimte markeert.

Huisstijlkleuren GEENMAAR – Press-pagina

KleurHEX-codeGebruik
Grijs#939598Tekst, secundaire elementen, achtergrond
Blauw#2C92C0Hoofdaccent, logo, knoppen

Tips:

  • Gebruik altijd deze exacte HEX-codes, zodat pers en partners het logo correct weergeven.

  • Vermijd kleurvariaties of filters die de grijs- en blauwtinten veranderen.

  • Voor print kun je eventueel de corresponderende CMYK-waarden aangeven, bijvoorbeeld:

    • Grijs: C=0 M=0 Y=0 K=40

    • Blauw: C=80 M=30 Y=0 K=0

Waarom altijd SVG gebruiken (en wanneer PNG)

1. Vector vs Raster (pixels)

Vectorlogo’s (SVG, EPS, PDF):

  • Bestaan uit punten, lijnen en paden, niet uit pixels.

  • Voordelen:

    • Oneindig schaalbaar zonder kwaliteitsverlies → je kunt een logo van een visitekaartje tot een A0-poster vergroten en het blijft scherp.

    • Bestandsgrootte vaak kleiner dan hoge-res PNG’s of JPEG’s.

    • Perfect voor drukwerk, websites, animaties en presentaties.

  • Gebruik: altijd als de vorm en kleuren scherp moeten blijven, of als het logo aangepast moet worden (kleur, grootte, effecten).

Rasterlogo’s (PNG, JPEG):

  • Bestaan uit pixels.

  • Nadelen:

    • Schaal je te veel op → het logo wordt korrelig of onscherp.

    • Kleuren en lijnen kunnen vervagen bij vergroten.

  • Voordelen:

    • Direct klaar voor webgebruik met transparante achtergrond (PNG).

    • Geschikt voor digitale toepassingen waar een vector niet nodig is.

  • Gebruik: alleen voor web, digitale documenten, of situaties waarin het bestand niet hoeft te worden vergroot.

2. Waarom SVG de voorkeur heeft

  • Oneindige schaalbaarheid: elk punt en pad wordt opnieuw berekend, geen pixelvorming.

  • Kleur en aanpassingen: kleuren kunnen direct in de file worden aangepast zonder kwaliteitsverlies.

  • Transparantie: SVG ondersteunt transparantie net zoals PNG, maar blijft scherp.

  • Print & media: drukkerijen werken bijna altijd het liefst met vectorbestanden, omdat het kwaliteitsverlies nul is.

3. Praktische richtlijn voor pers

  • Altijd geven: SVG of EPS → pers kan logo overal gebruiken zonder kwaliteitsverlies.

  • Extra: PNG (transparant) → voor direct gebruik op websites of digitale documenten.

  • No-go: JPEG → altijd kwaliteitsverlies, geen transparantie.

Logo downloaden via klikken / rechtermuisknop

  1. Klik op het bestand of het logo in de preview.

  2. Rechtermuisknop → “Opslaan als…” (Save As…)

    • Zo kan je het logo direct downloaden in het originele formaat (SVG, PNG of EPS).

  3. Tip:

    • Gebruik de juiste bestandsversie:

      • SVG → voor web of schaalbare toepassingen

      • PNG → voor digitale documenten of web met transparante achtergrond

      • EPS / ZIP → voor drukwerk en persbestanden

.SVG Grijs

.SVG Blauw

grijs-logo

3000 pixel Grijs .png.

3000 pixel blauw .png.

Logo in  .eps

grijs .eps

Logo in  .eps

Blauw .eps

Interactieve 

  1. Zoom in of uit

    • Gewoon met de browserzoom (Cmd + / Ctrl + + of -) of het venster vergroten/verkleinen. onderaan de pagina zie je de voor beelden 

    • Zo kunnen ze het logo goed bekijken op verschillende groottes zonder kwaliteitsverlies (SVG blijft scherp).

  2. Maak een screenshot / download

    • Met de downloadknop wordt een afbeelding van de logo-preview gemaakt, inclusief de gekozen achtergrondkleur.

    • Ideaal voor digitale toepassingen, presentaties of digitale niewsbrieven  

Tips voor gebruikers

  • Altijd HEX-code noteren:
    Bijvoorbeeld: #2C92C0 voor blauw of #939598 voor grijs.

  • Gebruik SVG voor scherpte:
    SVG-bestanden blijven scherp, ook als je in- of uitzoomt in de browser.

  • Screenshot / download:

    • Knop genereert een PNG van het logo met de gekozen achtergrond.

    • Zo kunnen ze het direct gebruiken zonder extra software.

Extra voorbeeld op de pagina

Je kunt onder de preview alle officiële kleuren tonen, zodat ze snel een kleur kunnen kiezen:

Kleur HEX-code Voorbeeld
Blauw #2C92C0 ▉
Grijs #939598 ▉
Wit #FFFFFF ▉

Technische implementatie

  • SVG-logo wordt geladen in een container (div) met aanpasbare achtergrondkleur.

  • Color picker laat gebruiker HEX-code instellen.

  • html2canvas.js of soortgelijke library maakt een screenshot van de container en zet het om naar PNG.

  • Downloadknop downloadt de PNG automatisch.

Vectorpunten minimaliseren – waarom het telt

Een logo in vectorformaat bestaat uit punten en paden. Elk punt telt: hoe meer punten, hoe zwaarder en complexer het bestand wordt.

  • Snellere online animaties: minder punten betekent dat animaties vloeiender en soepeler lopen.

  • Makkelijker bewerken: een logo met enkel de noodzakelijke punten is overzichtelijker in programma’s zoals Illustrator of Affinity.

  • Kleinere bestanden: sneller laden op websites en eenvoudiger delen met pers of partners.

Tip: een goed ontwerp laat zien dat er geen punt te veel is – alleen wat nodig is om de vormen perfect weer te geven. Zo blijft je logo zowel scherp als efficiënt.