Cratief kleurenpalet

Wie gelezen wil worden moet opvallen! Dat kan je op verschillende manieren doen. Maar laten we vandaag eens bij het begin beginnen: een originele header maken voor je blog.

Voor dit blogbericht kropen Marga en ik samen in de pen.

De header is “het hoofd” van je website of blog. We hebben het hier al eerder over gehad. In deze blog gaan we iets dieper in op de headers omdat het vaak lastig is om foto’s passend te maken en een originele en mooie header te creëren. Enkele tips om je op weg te helpen

Wat is een header?

De header – ook wel omslag of banner genoemd – is een meestal erg visueel getint element bovenaan je blog. Heel vaak bestaat het uit:

  • een markante foto of afbeelding die over de volle breedte van het blog is uitgerold
  • de naam van je blog
  • een ondertitel (vertelt waar je blog over gaat)
  • eventueel een logo

De vorm, de plaats en de opmaak van al die elementen mag je in de meeste gevallen helemaal zelf kiezen. Laat je creativiteit de vrije loop, zouden we durven zeggen.

Aan welke criteria moet de header van je blog voldoen?

In de eerste plaats moet de header opvallen. Nogmaals het is het eerste wat bezoekers te zien krijgen wanneer ze je blog bezoeken. Een beetje lezer of blogliefhebber bezoekt algauw enkele tientallen sites per dag. Wil je dat je lezer je blog op een later tijdstip nog voor de geest kan halen dan helpt het als de header van je blog wat uit de band springt.

Ook je blognaam moet duidelijk zichtbaar zijn. Het liefst toon je die naam in de vorm van het (in de browser) in te tikken adres (zoals Blogtrommel.com). Het kan immers nooit kwaad je bezoekers alvast het exacte internetadres van je blog subtiel in het hoofd te laten prenten.

Vergeten we ook niet de ondertitel of baseline van je blog. Deze geeft een (onbekende) bezoeker meteen van bij het begin al een idee waarover je blogt. Die baseline is bij voorkeur erg kort. Maximaal 10 woorden. Het oogt immers al snel slordig als je meerdere regels tekst in de header zet. Wil je meer over jou(w) blog vertellen, maak dan een About-pagina. Oh ja, die baseline mag best een beetje cryptisch en prikkelend van inslag zijn. Denk erom: je bezoeker nieuwsgierig maken, daar is het je allemaal om te doen.

We zien al enkele jaren een trend naar erg compacte headers, waarbij alleen een beeldmerk of een websitenaam en eventueel een slogan te zien is. Strak en functioneel; een toefje saai misschien. Volgens sommigen ziet dat er “professioneler” uit. Belangrijker is dat deze optie doorgaans beter werkt op smartphones en tablets. Bijkomend voordeel: zo’n compacte banner (vooral dan wat de afmetingen in de hoogte betreft) laat meer ruimte voor de content “boven de vouw.” In wat volgt gaan we een originele header maken (met foto).

Hoe maak je een header voor je blog?

De ideale afmetingen van een header of blog kun je vaak vinden in de templates van de website of door met je rechtermuis-klik de ruimte of reeds bestaande voorbeeld-foto te gaan staan en op eigenschappen te klikken. Doorgaans geeft een WordPress-thema duidelijk aan wat de ideale afmetingen van de banner zijn. Veel voorkomende afmetingen voor websitebanners zijn:

  • 840 x 400
  • 1140 x 380
  • 1100 x 104
  • 1350 x 350
  • 1600 x 440

Dit wordt aangegeven in pixels. De foto zal dus sowieso erg lang en smal moeten zijn. Op zoek naar een foto voor de website of het blog, in je eigen media-bibliotheek of op internet moet je dus kijken naar foto’s die in de breedte zijn georiënteerd. Vaak worden dit ‘landscape’ foto’s genoemd, of “horizontaal” of “liggend”.

Zoek je je afbeelding via één van de sites waar je gratis foto’s kan vinden, dan moet je er wel op letten dat het om rechtenvrije afbeeldingen gaat. Met een zogeheten CCO-licentie zit je veilig.

Deze foto’s kun je vervolgens in een foto-bewerkprogramma bijsnijden tot het juiste formaat. Photoshop en GIMP bieden veel mogelijkheden. GIMP is een gratis programma waarvoor zelfs vele creatieve filters beschikbaar zijn. De G’MIC-Qt filters bieden oneindig veel mogelijkheden om foto’s uniek en zeer creatief te maken.

Hoe bewerk je een foto als header?

Een foto op een vrij simpele wijze bewerken door ze bij te snijden of schalen naar het juiste formaat, lijkt een eenvoudig kunstje. Maar helaas is het niet altijd zo simpel want foto’s kunnen hun waarde verliezen op het moment dat je ze gaat afsnijden tot de ideale afmetingen. Zeker als het gaat om headers die echt heel smal moeten zijn. Zodra je de foto’s gaat schalen naar die afmetingen houd je vaak grote vlakken witruimte over aan de zijkanten. Dit oogt niet erg professioneel voor een blog of website. Bijgaand voorbeeld laat zien wat het probleem is.

Dit is de totale foto; een businessdame met industrie op de achtergrond. Een prima foto voor een header van een website of blog omdat de vrouw rechts is georiënteerd en er voldoende ruimte is om de header van logo, titel of subteksten te voorzien.

Businessdame in de haven. Marga van der Vet

Gaan we deze foto bijsnijden van 840 x 400 dan blijft er een prima header over:

bijgesneden header voor blog. Marga van der Vet

Het thema van de foto is niet veranderd en er is genoeg ruimte voor titels en subtitels.

Moeten de afmetingen echter 1140 x 380 zijn of zelfs nog smaller dan zien we dit gebeuren:

Header businessdame in de haven. Niet ideaal bijgesneden. Marga van der Vet

De foto verliest de inhoud en ziet er erg onprofessioneel uit. Schalen is ook geen optie omdat de foto te veel ruimte verliest in de breedte en er grote witte vlakken overblijven.

Wat kunnen we wel doen om een originele header te maken?

Je kan bijvoorbeeld een header maken door twee foto’s op elkaar te leggen en de achtergrond te vervagen. De foto is expres naar rechts verplaatst zodat er genoeg ruimte voor het logo, de titel of subtitels is. Je zou de foto natuurlijk ook in het midden kunnen centreren.

Je kan bijvoorbeeld ook het Droste effect gebruiken en een portret-foto heel creatief afsnijden:Originele header maken met vervaging-effect. Marga van der Vet

Originele header voor een blog of website met droste-effect. Marga van der Vet

Of zorgen voor veel ruimte voor uitgebreide logo’s en tekst:

Originele banner voor blog met veel ruimte voor tekstopmaak. Marga van der Vet

Een foto kun je ook kopiëren, spiegelen en naast elkaar plaatsen. In het midden houd je dan ruimte over voor logo, titel of tekst:

Originele hoofding voor blog of website. Experimenteer met het kopiëren, spiegelen en plaatsen van verschillende elementen. Marga van der Vet

Als laatste een creatief voorbeeld van een portret-foto door midden gesneden. Geplaatst naast een zwart vlak. In dit zwarte vlak kun je logo, titel of teksten plaatsen. De foto wekt nieuwsgierigheid en is uniek:

Creatieve header met doormidden gesneden portret. Marga van der Vet

of:

websitebanner met doormidden gesneden portret voorzien van ruimte voor tekst. Marga v0an der Vet

Of nog:

Header voor blog of website met headshot. Marga van der Vet

Originele header maken: niet zo moeilijk!

Zoals je ziet is het niet zo heel moeilijk om headers te maken van foto’s. Met foto bewerkprogramma’s zoals Photoshop en GIMP kun je vrij eenvoudig aan de slag. Op youtube vind je vele tutorials. Enkele tips op een rijtje:

  1. Zorg altijd voor een foto die in de breedte is georiënteerd
  2. Zorg dat de foto past bij het thema van de website of het blog, denk aan de boodschap die je wil uitdragen
  3. Houd genoeg ruimte over op de foto voor logo, titel of subtitels
  4. Ruimte in de foto creëert ook rust en dat is prettig voor het oog
  5. Speel met kleuren maar maak er geen kermis van
  6. Je header is het eerste dat iemand ziet van de website of blog; maak het aantrekkelijk en krachtig!
  7. Zie meer tips over headers
  8. Maak een paar variaties; laat ze even liggen en kies later degene die je het meest aanspreekt
  9. Of vraag derden hun mening alvorens en vergelijk die met jouw voorkeur
  10. Maak van je header je visitekaartje! Figuurlijk maar ook letterlijk!

Tot zover onze tips voor een originele header. Nu jij! Zorg dat je blog van bij de eerste aanblik de kop boven het maïsveld steekt!


Meer van dat?

Omslagfoto: via Shutterstock.com