Als je een logo voor (in de kop van) een website maakt op een simpele recht-toe-recht-aan-manier, dan is het resultaat al snel een pixelplaatje met letters en/of een afbeelding binnen een rechthoekige achtergrond. Als je dat plaatst in een gekleurd vak, de vorm soms van de kop of header) van een website, dan ziet dat er niet fraai uit. Want je ziet dan een gekleurd vlak, daarbinnen een witte rechthoek (het gemaakte plaatje) en daarbinnen de tekst en/of afbeelding die het logo vormen. Zie de voorbeelden hieronder.
Fout
Ook fout
Goed
Je kunt bovenstaand vraagstuk op twee manieren oplossen:
- door het maken van een logo met transparante achtergrond;
- door het maken van een logo met een achtergrond die van exact dezelfde kleur is als het vlak van de kop/header van je website.
Ik leg hierna uit hoe ik een logo volgens a en b maak, en wat daarvan bij mij het resultaat is.
Logo met transparante achtergrond
GIMP staat voor 'GNU Image Manipulation Program'. Daarbij betekent GNU iets betekent in de werreld van de besturingssystemen Unix en Linux dat in dit verband niet relevant is. GIMP is een gratis programma voor fotobewerking en digitaal design. Het werkt met het eigen opslagformaat XCF en wordt beschouwd als een alternatief voor Photoshop.
Inkscape is een gratis illustratieprogramma voor het maken van vectorgeöriënteerde afbeeldingen die je opslaat in het SVG-formaat voor vectorafbeeldingen. Het wordt beschouwd als een alternatief voor onder andere Adobe Illustrator.
Beide programma's werken met - op elkaar gestapelde - lagen oftewel layers. Als je werkt met meerdere lagen, dan kun je in elke laag inhoud aanmaken. Het resultaat is de inhoud van alle lagen alsof die op elkaar worden gelegd.
In principe kun je in beide programma's een afbeelding maken met een transparante achtergrond. Maar ik vind Inkscape daarvoor het makkelijkst werken. Voor een tekst begin je gewoon als volgt:
- klik met de cursor op de knop met het symbool van een A in de linker kolom klikt (dat is de knop/functie: tekstobjecten maken en aanpassen);
- klik met de cursor op een plek in het document en 'trek' een rechthoek open. Dat wordt het tekstobject;
- na het trekken van de rechthoek en loslaten van de cursor, staat deze in het tekstobject. Je begint dan gewoon te typen;
- door met de cursor te klikken op andere symbolen in de linkerkolom, kun je onder andere vormen toevoegen. Pixelplaatjes invoegen kan echter niet, omdat het een vectorgeöriënteerd programma is.
Als je een zo gemaakt logo bestaande uit in dit geval alleen tekst vervolgens opslaat als een SVG-bestand, dan is het resultaat, zonder dat je extra maatregelen hebt hoeven te treffen, een transparant logo. Je kunt zo'n bestand ook exporteren naar een pixelgeöriënteerd PNG-bestand. Dat doe je als volgt:
- klik de ladder open onder de optie Bestand in de knoppenbalk bovenin en kies in de ladder voor PNG-afbeelding exporteren;
- vul de details daarvoor in in het venster rechts (onder andere de directory voor en de naam van het doelbestand links van de knop Exporteren als;
- klik vervolgens in hetzelfde venster rechts op de knop Exporteren voor het uitvoeren van de export.
Het resulterende logo in PNG-formaat kan vervolgens opgenomen worden in je website als je website-programma dat formaat accepteert. Maar dat is niet altijd het geval. Zo werk ik ook met een wiki-website die als logo alleen een GIF-plaatje accepteert. In GIMP kun je daarvoor een conversie uitvoeren: van PNG naar GIF. Het resultaat van zo'n conversie van PNG naar GIF valt bij mij in de praktijk tegen. Het levert rafelige randen op, ook als ik voor de conversie niet GIMP gebruik, maar een online conversieprogramma zoals http://www.online-convert. Daarom werk ik als een conversie naar GIF nodig is, liever met methode b.
Logo met achtergrond in kleur van website
Als de achtergrondkleur van een logo exact dezelfde is als van het vlak van de website waarin het geplaatst wordt, dan is het effect vergelijkbaar met dat van een logo met transparante achtergrond.
Zo'n logo kun je maken met elk grafisch programma waarin je een kleur exact kunt instellen. Ik gebruik daarvoor Visio van Microsoft. Daarin kun je teksten maken, vormen invoegen en ook pixelafbeeldingen. Ik maak daarin eerst het logo. Dan zet ik er een achtergrondvlak in in de vorm van een rechthoek dat ik met de daarvoor bedoelde functie naar de achtergrond verplaats. De rechthoek laat ik naar alle kanten wat uitsteken en geef de rechthoek de kleur die overeenkomt met die van het vlak van de website waarin het geplaatst gaat worden.
Maar hoe weet je wat de kleurcode is van het vlak van de website waarin je het logo gaat plaatsen?
Daarvoor gebruik ik het gratis programma ColorCop. Als je dat opstart, dan verschijnt dat in een klein venster waarin een pipet-symbool. Als je dat aanklikt en met de muis vasthoudt, dan kun je het over het scherm bewegen. In het venster wordt dan twee kleurcodes getoond: RGB en hexadecimaal. Die veranderen zodra je het pipet op het scherm verplaatst naar andere kleurvlakken. Die kleur geef je dus als 'vulling' aan de achtergrondrechthoek in Visio. De resulterende afbeelding sla je vervolgens op als Visio- oftewel VSD-bestand; dit om het later zonodig verder te bewerken. Voor opname in de website sla je het resultaat ook op als pixel-bestand in PNG-, JPG- of GIF-formaat. Zelf kies ik over het algemeen voor PNG.
Vervolgens gebruik ik Picture Manager van Microsoft om het pixel-bestand bij te snijden naar de gewenste afmetingen. Dat is onder andere praktisch omdat Visio bij het opslaan van een plaatje in pixelformaar soms een smalle witte rand toevoegt die je niet in elke versie van Visio op nul kan zetten.
Een aandachtspunt daarbij is nog de beschikbaarheid van Picture Manager> Tegenwoordig hoort dat niet meer standaard bij een Microsoft Office-omgeving. Maar je kunt het installeren door het downloaden van het programma Microsoft Sharepoint Designer. Bij het installeren daarvan kies je dan voor een maatwerkinstallatie en selecteer je daarvoor alleen Picture Manager. Op deze website wordt uitgelegd hoe je dat doet.
Tot slot
Van wat ik hiervoor heb vastgelegd, heb ik geen diepgaande kennis. Op dit vlak ben ik slechts een hobbyist. Daarom: als ik zaken heb gemist, niet goed zie, en je kunt me aanvullen of zelfs corrigeren, dan stel ik een reactie op prijs. Dat kan via de contactpagina.