Succes met je Site

voor coaches • trainers • consultants

  • WebsiteCoach stopt
  • Blog

8 januari 2014 door Riet 9 Reacties

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.

headerfoto-met-tekst

Update 2020: met Canva is er tegenwoordig ook heel veel mogelijk, misschien vind je dat handiger.

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.

pixlr.com: foto-geupload
Afb. 1. Een headerfoto heeft meestal een ‘brievenbus’-formaat: breed en niet zo hoog; dus moet je een uitsnede maken. Dat kan heel eenvoudig heel precies.

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

pixlr.com-Croptool


Afb. 2. Klik op het Uitsnij-gereedschap.

Kies Outputgrootte in het dropdownmenu en geef de formaten op.

pixlr.com: Croptool en Outputgrootte
Afb. 3. Geef de gewenste breedte en hoogte op van je header, bv. 1000 x 288 pixels.
Afb. 4. Trek met je cursor een kader over je foto. Dit kader heeft automatisch de goede verhoudingen. Je kunt het kader nog verslepen als je je muis erin plaatst. Toets Enter = OK en je foto wordt automatisch geknipt op 1000px breed en 288px hoog,
Afb. 4. Trek met je cursor een kader over de foto. Dit uitsnij-kader heeft automatisch de goede verhoudingen. Je kunt het kader nog verslepen als je je muis erin plaatst. De blauwe bolletjes op de hoeken zijn hendeltjes waarmee je, door ze te verslepen, het kader wijzigt.

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

pixlr.com: Kader op juiste formaatgeknipt

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

Kies ‘Alles Weergeven’ om de foto vergroot weer te geven.
Afb. 5. Kies ‘Alles Weergeven’ om de foto vergroot weer te geven.

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

pixlr.com: Ongedaan maken
Afb. 6. Met de optie ‘Ongedaan maken’ onder Bewerken, of in de rechterkolom onder Geschiedenis, kun je altijd één of meerdere stappen terug.
pixlr.com-Geschiedenis

Trek supersnel de aandacht en maak klanten van je bezoekers:
met overtuigende teksten door het simpele TaxiTrucje. 
Uitleg vind je in de minitraining ‘SUCCES met je Site’.
Gratis! Zodat jij ook snel meer klanten krijgt.

Tekst toevoegen aan foto

Kies het Tekstgereedschap
Afb. 7. Kies het Tekstgereedschap

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.

pixlr.com: Text-opties
Afb. 8. Voor de kleur kun je je webbouwer vragen welk hexa-kleurnummer er bij je huisstijl hoort, en invullen achter het hekje #. Op een donkere achtergrond is wit het duidelijkst.

pixlr.com: Verplaats-gereedschap  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.

Voor iedere tekst wordt een nieuwe laag aangemaakt. Wil je later de teksten verschuiven, check of je de juiste laag geactiveerd hebt.
Afb. 10. Voor iedere tekst wordt een nieuwe laag aangemaakt.
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.

pixlr.com: Opslaan met 'Bestand bewaren', je kunt nu kiezen waar je je foto wil opslaan.
Afb. 11. Kies waar je je foto wil opslaan.
Afb. 12. Probeer je foto rond de 50 kb te houden. Een headerfoto mag tegen de 80 kb zijn
Afb. 12. Probeer je foto rond de 50 kb te houden. Een headerfoto mag tegen de 80 kb zijn

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.

Websitetitel in foto èn bovenaan je site als tekst is dubbelop. Hoe verwijder je de tekst boven de headerfoto??
Websitetitel in foto èn bovenaan je site als tekst is dubbelop.
Verwijder de Koptekst onder Weergave - Header, door het vinkje achter Koptekst te verwijderen.
Ga naar ‘Weergave – Header’, verwijder het vinkje achter ‘Koptekst’. Heeft jouw theme deze optie niet, zie*.

(* 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?
Laat hieronder je reactie achter.

Trek supersnel de aandacht en maak klanten van je bezoekers:
met overtuigende teksten door het simpele TaxiTrucje. 
Uitleg vind je in de minitraining ‘SUCCES met je Site’.
Gratis! Zodat jij ook snel meer klanten krijgt.

Categorie: Afbeeldingen in je blog Tags: afbeeldingen, Foto verkleinen, Tekst toevoegen aan foto

Reacties

  1. Corrie Heslinga (@CorrieHeslinga) zegt

    30 april 2015 om 13:45

    RT @WebsiteCoachRdW: Eenvoudig tekst toevoegen aan een foto – Blog http://t.co/mNMLXVmjlz

    Beantwoorden
  2. Noor Peels (@Noorganiseert) zegt

    19 september 2014 om 16:35

    Eenvoudig tekst toevoegen aan een foto: http://t.co/SMAaCnXFR8

    Beantwoorden
  3. @Dagnespresso zegt

    4 april 2014 om 19:06

    @PatrickMundus hier de link: http://t.co/UbEzZgVnk7

    Beantwoorden
  4. Jacqueline zegt

    9 januari 2014 om 09:40

    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?

    Beantwoorden
    • Riet zegt

      9 januari 2014 om 14:05

      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!

      Beantwoorden
  5. Renée Daniëls zegt

    8 januari 2014 om 18:33

    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!

    Beantwoorden
    • Riet zegt

      9 januari 2014 om 14:07

      Graag gedaan René 🙂

      Beantwoorden
  6. Berna Wellen zegt

    8 januari 2014 om 13:17

    dank je wel Riet! voor de heldere info, de precies te zetten stappen en waarschuwingen.

    Beantwoorden
    • Riet zegt

      8 januari 2014 om 14:56

      Graag gedaan, succes!

      Beantwoorden

Geef een reactie Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

Onderwerpen:

  • Afbeeldingen in je blog (8)
  • Algemeen (5)
  • Beeldend kunstenaars (1)
  • Bloggen (17)
  • Boeken – aanraders (1)
  • Gevonden worden (17)
  • Grafische vormgeving (6)
  • Handige tools (10)
  • MailChimp (1)
  • Online training (3)
  • Slimmer klanten werven (33)
  • Testimonial (8)
  • Twitter-tips (1)
  • Video (3)
  • Website sneller maken (4)
  • Wordpress (41)

Meest gelezen:

  • Gratis website vergelijken: JouwWeb, Jimdo, Wix, Weebly, WordPress.com. En SquareSpace
  • Online training maken: met LearnDash
  • Foto verkleinen: werkt in je voordeel
  • Eenvoudig tekst toevoegen over een foto
  • Welk lettertype is dat?
  • Linken naar een plek binnen een pagina: met anchorlinks
  • Hoe maak je een email link in WordPress, spam-safe

WordPress

  • Hoe maak je een email link in WordPress, spam-safe
  • Met anchorlinks: linken naar een plek BINNEN een (andere) pagina
  • Helpt jouw 404 pagina je bezoeker, of jaag je hem weg?
  • Stop Spam met Honeypot for ContactForm 7
  • Kies voor betrouwbare WordPress hosting
LEES MEER

Gevonden worden

  • Met anchorlinks: linken naar een plek BINNEN een (andere) pagina
  • Helpt jouw 404 pagina je bezoeker, of jaag je hem weg?
  • Meer bezoekers met een optimale beschrijving van je afbeeldingen
  • SEO booster: kennisbank op je website
  • Genesis 404 pagina
LEES MEER

Bloggen

  • Gratis website vergelijken: JouwWeb, Jimdo, Wix, Weebly, WordPress.com. En SquareSpace
  • Overzicht in je website met Categorieën
  • Meer bezoekers? Gebruik Power Words in je blogtitel
  • Overtuig je lezer: in 4 stappen
  • Moestuintje of Blog?
LEES MEER

Slimmer klanten werven

  • Email funnel maken
  • “Heb jij de oplossing voor mijn probleem?
  • Ontdek jouw ideale klant in 10 minuten
  • Je aanbod Magnetisch maken
  • Messcherpe Teksten en Magnetische Titels
LEES MEER

Handige tools

  • Email funnel maken
  • SEO booster: kennisbank op je website
  • Eenvoudig contactformulier op je wordpress website
  • Hoe Magie werkt. Ook voor jou. En niet moeilijk.
  • MailChimp: laatste nieuwsbrief sturen aan nieuwe inschrijvers?
LEES MEER

Snelle uitleg over:

Klanten werven | SEO |
WordPress | Websitebouw

Connecten?

linkedintwitterfacebook

Privacy verklaring
Algemene info WebsiteCoach

Algemene Voorwaarden | Privacyverklaring | Log in

Ook deze website gebruikt cookies: om de website goed te laten werken, en anoniem het gebruik van de website te analyseren.
En cookies waardoor jij feedback kunt geven of berichten kunt delen op social media.
OkNeeInfo
Mijn cookie instellingenherzien