Eenvoudig tekst toevoegen aan een foto

Tekst toevoegen aan een foto kan zonder Photoshop of ander fotobewerkingspakket, dankzij de online tool http://pixlr.com. Deze is gratis en je hoeft geen persoonlijke gegevens achter te laten.

Kijk mee hoe deze headerfoto tot stand is gekomen.

Bij http://pixlr.com/editor/ koos ik ‘Open afbeelding van computer’.

Voor een headerafbeelding is een foto van je camera of smartphone veel te hoog.

Vóórdat je tekst gaat plaatsen, knip je de foto naar het juiste formaat. Dan zie je straks beter hoe de tekst zich verhoudt tot de foto..

Headerfoto uitsnijden op het juiste formaat

In je theme wordt aangegeven hoe groot de headerfoto mag zijn.
Voor de themes van WordPress heb ik de formaten hieronder op een rijtje gezet:
Twenty Ten: 940×198 pixels (ik gebruik dit theme niet meer, het is niet responsive)
Twenty Eleven: 1000×288 pixels
Twenty Twelve: 960×250 pixels
Twenty Thirteen: 1600×230 pixels
Twenty Fourteen: 1260x240pixels

Afb. 2. Klik op het Uitsnij-gereedschap.

Kies Outputgrootte in het dropdownmenu en geef de formaten op.

Toets Enter (= OK) en je foto wordt automatisch geknipt op 1000px breed en 288px hoog.

Wordt je foto erg klein weergegeven, klik dan de volgende optie aan:

Niet tevreden met het resultaat? Ga een stapje terug voor een nieuwe poging:

Tekst toevoegen aan foto

Kies het Tekstgereedschap.
Je cursor wordt een tekstcursor.
Plaats ‘m op de foto, dáár waar je tekst moet beginnen (je kunt de tekst later verplaatsen, zie afb. 9 en 10) en klik.
Je krijgt nu een venster om je tekst in te voeren en vorm te geven (lettertype, kleur, grootte).
Klik OK om het resultaat te bekijken.

  Afb. 9. Tekst verschuif je met het Verplaatsgereedschap.

Niet tevreden? Klik met de teksttool weer op je tekst om de bewerkingsopties terug te krijgen.
Lukt dit niet, dan is de juiste laag niet geselecteerd, zie afb. 10.

Voor een subtitel in een ander lettertype of andere kleur, grootte
herhaal je de stappen uit afb. 7, 8 en 9.

Foto opslaan op je PC: Kies Bewaren onder Bestand.

Vervolgens ga je naar WordPress, bij Weergave – Header kun je je header uploaden.

Verwijder de tekst boven de headerfoto

Waarschijnlijk heb je nu website-titel en ondertitel 2x in beeld: boven de foto en in de foto.

(* Biedt jouw theme deze mogelijkheid niet, kijk dan of je Custom CSS kunt toevoegen. Daarin kun je opgeven dat titel en ondertitel niet getoond moeten worden.
Afhankelijk van je theme voeg je toe
.site-header h1, .site-header h2 {display: none;}
Vraag je webbouwer om hulp, voor de juiste benaming van titel en ondertitel in de code.)

LET EVEN OP…

Denk je nu: “de website-titel en ondertitel staan nu in de foto,
dus dat kan weg bij ‘Instellingen – Algemeen’ “:
NIET DOEN, laat deze informatie daar staan!
Dit is voor Google de allerbelangrijkste informatie van je website.

Foto’s verkleinen: werkt in je voordeel

Lees hier hoe en waarom je grote foto’s verkleint vóórdat je ze in je blog of in een pagina zet. Beter voor jou èn voor je bezoeker.
Ook handig voor foto’s in een widget.

Je foto en Google

Google gebruikt robots om je site te indexeren, geen mensen, en leest dus geen tekst op plaatjes.
Geef daarom altijd in de ALT-tekst op welke tekst (steekwoorden) in je afbeelding staan.
Optimaliseer je afbeeldingen voor Google, waardoor je website nog beter geïndexeerd wordt, en in Googles afbeeldingsresultaten eerder getoond wordt.

Voor een WordPress-header kun je geen Alt-tekst opgeven; ook daarom laat je de teksten bij ‘Instellingen – Algemeen’ staan.

Vond je deze tutorial handig? Heb je nog een vraag?
Laat hieronder je reactie achter.