Een logo exporteren voor je website, e-mail en documenten

Een logo dat goed oogt in een ontwerpprogramma kan na het uploaden klein, wazig of onzichtbaar worden. Lege randen, te weinig pixels, een ontbrekend lettertype of een verkeerde achtergrond kunnen de oorzaak zijn. Bepaal eerst waar het logo komt te staan en kies daarna de exportinstellingen.

Begin met het beste beschikbare origineel

Werk vanuit het bewerkbare bestand van de ontwerper of een echte vectorversie. Bewaar dat bronbestand apart van de kopieën die je publiceert. SVG kan vectorpaden bewaren, maar ook een bitmap met een lage resolutie bevatten. De extensie .svg bewijst niet dat elk onderdeel scherp blijft bij vergroting.

Heb je alleen een klein JPG-bestand, vraag dan om het origineel voordat je een grotere export maakt. Omzetten naar PNG of SVG bouwt de letters en randen niet opnieuw op. De handleiding over SVG en PNG helpt je vaststellen wat voor bestand je hebt.

Kies het formaat voor de bestemming

SVG bewaart vectorvormen; PNG slaat een vast raster van pixels op. De verliesloze PNG-compressie past bij letters, effen kleuren en scherpe randen: opslaan voegt niet de compressiefouten toe die JPG kan veroorzaken. JPG kan randen vervagen of gekleurde randjes rond letters geven en bewaart geen transparantie.

WebP ondersteunt compressie met en zonder verlies. Pixilo’s SVG-naar-WebP-tool heeft een kwaliteitsinstelling, geen afzonderlijke verliesloze modus. De waarde 100 garandeert dus geen identieke pixels. Gebruik WebP wanneer de bestemming het accepteert en de daadwerkelijke export er goed uitziet. Bij een eenvoudig logo kan SVG of een passend PNG-bestand de betere keuze zijn.

Stem de export af op de weergavegrootte

Maak onderscheid tussen de pixelafmetingen van het bestand en de grootte waarop het verschijnt. Stel dat de geëxporteerde afbeelding viermaal zo breed als hoog is en op 160 × 40 CSS-pixels moet worden getoond. Een PNG van 320 × 80 pixels levert in beide richtingen twee beeldpixels per CSS-pixel, een bruikbaar uitgangspunt voor een scherm met hoge pixeldichtheid. Dit is een voorbeeld, geen vaste logomaat en geen regel om elke afbeelding op dubbele grootte te exporteren.

Vergrendel de beeldverhouding en voer meestal maar één afmeting in. Is het logo tweemaal zo breed als hoog, dan geeft een weergavebreedte van 160 pixels een hoogte van 80 pixels, geen 40. Laat het zonder vervormen binnen de beschikbare breedte en hoogte passen. Gebruik een goedgekeurde andere indeling als het volledige logo niet past.

De afmetingen omvatten transparante randen. Vult het zichtbare logo slechts de helft van een canvas van 320 pixels breed, dan verschijnt het ongeveer 80 pixels breed wanneer de hele afbeelding op 160 pixels wordt getoond. Verwijder onbedoelde lege ruimte in het origineel en behoud de voorgeschreven vrije ruimte. Stel ook de weergavebreedte in de website- of handtekeningeditor in en controleer of de dienst een verkleinde kopie maakt.

Alleen de DPI-waarde veranderen voegt geen details toe. Lees de handleiding over DPI, PPI en pixels. Vraag voor professioneel drukwerk om afzonderlijke eisen voor bestand, kleur en resolutie.

Controleer het exportgebied en de letters

Laat het exportgebied aansluiten op het logo, maar behoud de voorgeschreven vrije ruimte en ruimte voor lijnen of schaduwen. Een groot leeg tekengebied laat het zichtbare logo klein lijken, ook als het bestand veel pixels bevat. Snijd de bedoelde witruimte van het merk niet weg om de afbeelding strakker te maken. De exporthandleiding van Inkscape laat het verschil zien tussen pagina, tekening en selectie.

Controleer lettertypen en gekoppelde afbeeldingen vóór het exporteren. Tekst omzetten naar paden verandert letters in vectorvormen, zodat het uiterlijk niet langer afhangt van de lettertypen bij de ontvanger. Die letters zijn daarna niet meer als gewone tekst te bewerken. Doe dit dus op een exportkopie en bewaar het origineel. Het omzetten van tekst maakt een kleine ingesloten bitmap niet vectorieel.

Maak een zelfstandig SVG-bestand met de benodigde afbeeldingen en stijlen erin. Een bestand dat los geopend goed oogt, kan zich als websiteafbeelding anders gedragen doordat externe bronnen daar beperkt zijn. De MDN-documentatie legt dit uit. Vergelijk de export met het ontwerp en controleer vervolgens de geplaatste versie. Bekijk letters, afstanden, afgesneden delen en effecten, niet alleen of het bestand opent.

Bereid schermkleuren los van drukbestanden voor

Gebruik de goedgekeurde RGB-kleuren van het merk voor schermversies. Voor PNG- en JPG-webexporten is sRGB een praktisch uitgangspunt. Adobe’s uitleg over online kleuren beschrijft de omzetting. Gebruikt de bron een ander kleurprofiel, converteer de kleuren dan in het ontwerpprogramma in plaats van alleen een ander profiel toe te wijzen en controleer het resultaat.

Bewaar een CMYK- of steunkleurenorigineel voor drukwerk apart. Voor scherm en druk kunnen verschillende goedgekeurde kleurwaarden gelden; een bestandsconverter kan die niet voor je kiezen. Vergelijk met de goedgekeurde schermversie. Verschillende beeldschermen kunnen nog steeds afwijken. Bij een zichtbaar verschil helpt de handleiding voor kleurverschillen.

Maak versies voor lichte en donkere achtergronden

Transparantie verandert de logokleuren niet. Exporteer zo nodig een goedgekeurd donker logo voor lichte vlakken en een wit of licht logo voor donkere vlakken. Op een website moet de template of de ontwikkelaar de juiste versie kiezen. Twee bestanden maken zorgt niet dat ze automatisch wisselen.

Controleer e-mail apart. Apps kunnen in donkere modus de berichtachtergrond aanpassen; ondersteuning voor wisselende afbeeldingen verschilt. Test ontvangen berichten in lichte en donkere modus. Verdwijnt het donkere logo, vraag de ontwerper dan om een goedgekeurde versie die zichtbaar blijft, bijvoorbeeld met een contrasterende omlijning of een geschikt achtergrondvlak. Geen van beide garandeert dezelfde weergave in elke app. Mailchimps uitleg over donkere modus laat zien waarom testen nodig is.

PNG kan bestaande transparantie bewaren; JPG heeft een dekkende achtergrond nodig. Kies die vóór de JPG-export. Een transparantievakje verwijdert geen witte rechthoek uit het ontwerp. De handleiding voor transparante achtergronden helpt een echte achtergrond van het voorbeeldvlak te onderscheiden.

Maak de PNG-, JPG- of WebP-versies in Pixilo

1. Open het voorbereide SVG-bestand in SVG naar PNG. Kies SVG naar JPG als de bestemming JPG vereist, of SVG naar WebP wanneer je daarvoor WebP hebt gekozen.
2. Voer de exportbreedte of -hoogte in met de beeldverhouding vergrendeld. Behoud transparantie waar dat kan of kies de definitieve achtergrondkleur.
3. Converteer en download. Controleer het gedownloade bestand, niet alleen de voorvertoning van de bron. PNG-compressie is verliesloos en heeft geen kwaliteitsniveau om in te stellen; controleer bij JPG en WebP letters en dunne lijnen na het aanpassen van de kwaliteit.
4. Plaats de kopie, stel de weergavegrootte in en controleer de gepubliceerde pagina, het ontvangen bericht of het geëxporteerde document. Zorg dat je het nieuwe bestand ziet en geen oude versie uit de cache.

Pixilo maakt statische afbeeldingskopieën, geen bewerkbaar logo of geoptimaliseerde SVG. De SVG-lezer weigert externe bronnen en niet-ondersteunde inhoud. Wordt het bestand geweigerd, exporteer dan vanuit het ontwerpprogramma een zelfstandige kopie met tekst zo nodig als paden. De toolpagina vermeldt de actuele bestands- en afmetingslimieten. Bewaar het origineel voor latere exporten.

Geef bestanden namen die hun doel duidelijk maken

Beschrijf de kleur van het ontwerp los van de achtergrond. dark-artwork betekent bijvoorbeeld donkere vormen, niet een bestand voor een donkere achtergrond:

• Bewerkbaar origineel: bewaar het oorspronkelijke ontwerpbestand met zijn echte extensie apart van publicatiekopieën.
• brand-logo-dark-artwork.svg en brand-logo-white-artwork.svg: donkere vormen voor lichte achtergronden en witte vormen voor donkere achtergronden.
• brand-logo-dark-artwork-320x80.png: een transparante PNG voor de voorbeeldweergave van 160 × 40 pixels. De bestandsnaam noemt de pixelafmetingen van het bestand.
• brand-logo-white-background.jpg: een optionele JPG met dekkende witte achtergrond voor een bestemming die dat vereist.

Voeg een korte notitie over weergavegrootte en achtergrond toe. Maak alleen de versies die worden gebruikt. Een favicon heeft vaak een eigen vereenvoudigd ontwerp nodig, omdat een volledig woordlogo in een browsertab onleesbaar kan zijn. Lees de faviconhandleiding.

Controleer het logo op de plek van gebruik

Controleer eerst het kleinste werkelijke gebruik. Zijn letters leesbaar, fijne lijnen zichtbaar en vrije ruimtes intact? Test daarna de lichte en donkere achtergronden. Verstuur voor e-mail een echt testbericht en bekijk de ontvangen versie. Open bij documenten de geëxporteerde PDF en controleer een afdruk als het papieren resultaat belangrijk is.

Geef een websitelogo een geschikte tekstuele beschrijving. Is het de enige inhoud van een link naar de homepage, benoem dan dat doel, bijvoorbeeld ‘Merk homepage’. Staan naam en functie al als zichtbare tekst in dezelfde link, voorkom dan herhaling. De W3C-handleiding over functionele afbeeldingen toont beide patronen.

Veelgestelde vragen

Waarom is het geüploade logo wazig terwijl het gedownloade bestand scherp is?

Vergelijk de werkelijke pixelafmetingen van het geüploade bestand met de weergavegrootte. Het platform kan een kleinere kopie hebben gemaakt of de pagina kan die vergroten. Controleer welk bestand de gepubliceerde pagina gebruikt en of overbodige transparante randen het ontwerp klein maken. Nog groter exporteren herstelt geen pagina die steeds de verkeerde versie kiest.

Waarom zit er een wit vak om de PNG?

Bekijk het gedownloade bestand op een dambord en op een gekleurde achtergrond. Zit het witte vak in de pixels, controleer dan de bron op een achtergrondobject of een export die transparantie met de achtergrond heeft samengevoegd. Is het bestand transparant maar verschijnt het vak pas na plaatsing, controleer dan de achtergrond of conversie bij de bestemming. Verwijder een getekende achtergrond alleen als het logo dat toestaat.

Kan ik hetzelfde bestand in elke e-mailhandtekening gebruiken?

Begin met PNG en test de handtekeningeditor, ontvangen berichten en lichte en donkere modus. Een gehoste afbeelding moet op haar gepubliceerde adres beschikbaar blijven; een ingesloten afbeelding moet de verwerking door het mailsysteem doorstaan. Houd contactgegevens als echte tekst beschikbaar voor wanneer afbeeldingen worden geblokkeerd. Eén goede voorvertoning in de editor van de afzender is onvoldoende.

Maakt omzetten van PNG naar SVG het logo schaalbaar?

Een PNG in een SVG behoudt zijn oorspronkelijke pixels. Overtrekken of opnieuw tekenen kan vectorpaden maken, maar ook krommen, afstanden of letters veranderen. Vraag eerst om het vectororigineel en laat een gereconstrueerde versie met het goedgekeurde logo vergelijken.

Wat als het logo boven een uploadlimiet zit?

Controleer eerst of de limiet de bestandsgrootte in KB of afmetingen in pixels betreft. Exporteer de benodigde afmetingen, verwijder onbedoelde lege ruimte en vermijd onnodig vergroten. Probeer bij PNG verliesloze compressie voordat je randkwaliteit opoffert. Is een formaat met verlies vereist, vergelijk dan de daadwerkelijke download terwijl je de kwaliteit verlaagt. De handleiding voor kleinere bestanden legt de afwegingen uit. Er is geen enkel KB-doel dat voor elk logo en elke bestemming past.

Waarom veranderen de letters of kleuren na conversie?

Vergelijk het bewerkbare ontwerp, de geëxporteerde SVG, de gedownloade afbeelding en het geplaatste resultaat om de eerste afwijkende stap te vinden. Ontbrekende of vervangen lettertypen wijzen op de tekstexport; ontbrekende effecten of afbeeldingen kunnen niet-ondersteunde SVG-inhoud betekenen. Controleer bij kleurverschillen het bronprofiel en de schermexport. Herstel die stap en exporteer opnieuw in plaats van een onjuiste kopie telkens weer om te zetten.