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.
Wil je later de teksten bewerken of verplaatsen, check of je de juiste laag geactiveerd hebt.
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.
RT @WebsiteCoachRdW: Eenvoudig tekst toevoegen aan een foto – Blog http://t.co/mNMLXVmjlz
RT @WebsiteCoachRdW: Eenvoudig tekst toevoegen aan een foto – Blog http://t.co/mNMLXVmjlz
Eenvoudig tekst toevoegen aan een foto: http://t.co/SMAaCnXFR8
@PatrickMundus hier de link: http://t.co/UbEzZgVnk7
Hartelijk dank! Vooral ook voor de tip van het online fotobewerkprogramma. Was naar iets dergelijks opzoek. Wel een vraag: je werkt in de cloud, blijft de foto daar ook ergens opgeslagen?
Hoi Jacqueline,
ben even gaan zoeken in de info van pixlr.com.
“From Flash 10 and later, images are opened direct and local in your browser (i.e we don’t see them in any way and they don’t leave your computer).”
Je werkt via je browser op je eigen PC, zij slaan niets op.
Fijn om te weten, dankjewel voor je vraag!
Mooie stap-voor-stap uitleg, Riet!
Voor het verkleinen van afbeeldingen gebruik ik zelf over het algemeen IrfanView, maar voor een uitsnijding in een vooraf bepaald formaat is Pixlr zo te lezen wel erg handig. Die ga ik zéker onthouden, dankjewel!
Graag gedaan René 🙂
dank je wel Riet! voor de heldere info, de precies te zetten stappen en waarschuwingen.
Graag gedaan, succes!