Je hebt een screenshot van een app en je moet een knoptekst wijzigen van "Aanmelden" naar "Aan de slag", of een prijzenkaart aanpassen van "$9.99" naar "€8,99". Het klinkt als een simpele handeling: tekst selecteren, typen en opslaan. Maar zodra je beeldbewerkingssoftware opent, stuit je op het werkelijke probleem: tekst in een screenshot is geen tekstobject meer. Het is vastgelegd in pixels door het samenspel van de lay-outengine van het besturingssysteem, font hinting, anti-aliasing, subpixel-rendering en beeldschermdichtheid. Je bewerkt geen woorden — je reconstrueert een gerasterd typografisch eindresultaat.
Het centrale inzicht van deze gids is: als je toegang hebt tot de broncode of de oorspronkelijke ontwerpbestanden van het product, is de beste aanpak meestal niet "de afbeelding bewerken", maar "het screenshot opnieuw genereren". Apple heeft de export van gelokaliseerde screenshots direct ingebouwd in de testworkflows van Xcode; Android biedt pseudotalen om afkappingen en lay-outproblemen vroegtijdig op te sporen. Voor meertalige app-stores, A/B-tests en lokalisatie wint het opnieuw genereren vanuit de broncode het altijd van bitmapbewerking op het gebied van consistentie, onderhoud en schaalbaarheid.
Heb je geen toegang tot de broncode, hanteer dan deze prioriteitsvolgorde: laag-/vectorreconstructie > OCR + her-rendering > beeldbewerking op pixelniveau > AI-inpainting als hulpmiddel. De reden is helder: het overtuigend nabootsen van tekst hangt af van je vermogen om de oorspronkelijke typografische omgeving te reproduceren, niet van hoe goed je de oude letters kunt "overplakken".
Als je snel enkele woorden wilt vervangen zonder je in ingewikkelde software te verdiepen, kun je met tools zoals ReWords AI een afbeelding uploaden, het tekstgebied selecteren en de tekst direct vervangen. Maar voor taken die uiterste typografische controle of bewerkelijke achtergronden vereisen, helpt het begrijpen van onderstaande principes om onderbouwde keuzes te maken.
Drie vragen voordat je software opent
1. Kun je het screenshot opnieuw genereren vanuit de bron?
Als je toegang hebt tot de applicatie — een tekststring aanpassen, een UI-test draaien en een vers screenshot exporteren — begin dan niet met het handmatig wissen van pixels. De documentatie voor lokalisatietests van Apple legt uit hoe je gelokaliseerde screenshots exporteert uit geslaagde UI-tests. De lokalisatiegids van Android biedt kaders voor resources en pseudotests. Als teksten vaker wijzigen, verdient geautomatiseerd hergenereren zichzelf altijd terug.
2. Beschik je over ontwerpbronbestanden voor reconstructie?
Figma en Sketch zijn opgebouwd rondom componentmodellen die naadloos aansluiten bij een reconstructie in lagen: tekstlaag + icoonlaag + achtergrondvorm + schaduwlaag. Als je niet één screenshot maar een hele set moet aanpassen over meerdere talen en resoluties, is het herbouwen van componenten in een vectortool veel stabieler dan het stuk voor stuk bewerken van losse afbeeldingen.
3. Moet dit op grote schaal gebeuren?
Wanneer het vraagstuk verschuift van "één afbeelding" naar "tientallen screenshots in vijftien talen", is een geautomatiseerde pipeline noodzakelijk. Handmatige pixelbewerkingen lopen bij grote volumes qua tijd exponentieel uit de hand.
Beslissingsschema:
`` Je hebt een screenshot ├─ Kun je opnieuw genereren vanuit de bron? → Tekst aanpassen en nieuw screenshot maken (beste route) ├─ Heb je ontwerpbestanden? → Componenten herbouwen in Figma/Sketch, batchgewijs exporteren └─ Geen van beide → Beoordeel de complexiteit van de achtergrond ├─ Effen kleur / eenvoudig verloop → Pixelbewerking + overtypen (snel) ├─ Doorschijnend / matglas / schaduwen → Vector-overlay + nauwkeurige typografie (stabiel) └─ Complexe textuur / foto-achtergrond → AI-inpainting voor achtergrond + handmatige typografie (complex) ``
Niet alle screenshots zijn hetzelfde
Verschillende soorten screenshots vragen om verschillende bewerkingsstrategieën. Het correct categoriseren van je situatie is belangrijker dan de specifieke softwarekeuze.
| Type screenshot | Typische bron | Veelvoorkomende aanpassing | Aanbevolen strategie |
|---|---|---|---|
| Systeemeigen UI-screenshot | iOS / Android / macOS / Windows | Knoplabels, statusteksten, formuliervelden, vertalingen | Opnieuw genereren indien mogelijk; anders OCR + vectorreconstructie |
| Webpagina-screenshot | Browser, SaaS-dashboards, websites | Tekstwijzigingen, tarieven, knoppen, mockup-varianten | HTML/CSS bewerken en opnieuw vastleggen; alternatief: vector-overlay |
| Marketing- / demo-screenshot | App Store, landingspagina's, advertenties | Verkoopargumenten, taalvarianten, badges | Laagreconstructie in ontwerptools |
| Handleiding / Kennisbank | Helpcentra, trainingsdocumenten | UI-versie-updates, markeringen, toelichtingen | Vector-overlay met behoud van basisbeeld |
| Zakelijk screenshot met persoonsgegevens | Chat, CRM, tickets, beheerrapportages | Namen, nummers, e-mails, ordernummers afschermen | OCR-detectie + lokaal maskeren/herschrijven |
| Screenshots met complexe badges/iconen | Instellingen, kaartoverzichten, meldingen | Badgenummers, statusiconen, sterwaarderingen | Reconstructie op componentniveau; voorkom kaal wissen |
Het spectrum aan methoden: vier routes met verschillende grenzen
Methode 1: Bewerking op pixelniveau — direct maar begrensd
Het basisprincipe: verwijder de oude tekst en plaats nieuwe tekst op die locatie. Dit is het domein van Photoshop (Verwijderen en Generatieve vulling), GIMP (Repareren en Klonen) en OpenCV (inpaint).
De documentatie van GIMP benadrukt dat het reparatiegereedschap rekening houdt met de omringende context in plaats van simpelweg pixels te dupliceren. OpenCV's inpaint-handleiding beschrijft het herstellen van geselecteerde gebieden vanuit aangrenzende randpixels. Het voordeel: snel en doeltreffend voor losse afbeeldingen. Het nadeel: het exact nabootsen van typografische finesses op doorschijnende achtergronden, matglas of schaduwen is lastig.
Geschikt voor drie scenario's: korte tekstregels op effen of rustige achtergronden; het aanpassen van losse cijfers of knopwoorden; het anonimiseren van gevoelige gegevens met placeholders. Ongeschikt voor complete alinea's — de achtergrond herstellen lukt vaak wel, maar de nieuw geplaatste tekst valt visueel snel door de mand.
Methode 2: Vector-overlay en laagreconstructie — het ideale compromis zonder bronbestanden
Het uitgangspunt is niet het herstellen van pixels, maar het screenshot gebruiken als achtergrondplaat waarop je elementen opnieuw opbouwt met vectortekst, vormen en icooncomponenten.
Dit blinkt uit bij: badges, prijskaartjes, tabs, knoppen, navigatiebalken, lijstregels en statusindicators. Zodra je deze elementen ontleedt in "tekstlaag + icoonlaag + achtergrondvorm + schaduwlaag", worden latere vertalingen en A/B-tests een gestructureerde routine in plaats van nattevingerwerk.
Praktische tip: meet vooraf de linkerpositie, basislijn en kaderhoogte van de oorspronkelijke tekst op. Lijn niet op het oog uit — subpixelverschuivingen vallen bij inzoomen direct op.
Methode 3: OCR + her-rendering — de technische route voor batchverwerking
De grootste meerwaarde van OCR is niet het "lezen" van de tekst, maar het aanleveren van coördinaten van tekstkaders, geometrie op woordniveau en typografische hiërarchie. Tesseract ondersteunt TSV- en hOCR-uitvoer met exacte begrenzingskaders. Google Vision en AWS Rekognition bieden vergelijkbare coördinatendata.
OCR heeft echter beperkingen: het vertelt waar de tekst staat, maar niet welk lettertype, regelafstand of renderinstelling is toegepast. Daarom fungeert OCR het best als detectielaag, niet als eindstation. De beproefde opzet: OCR voor positionering + achtergrondherstel + sjabloongebaseerde heropmaak.
Methode 4: AI-inpainting — voor achtergrondherstel, niet voor typografie
AI-inpainting (zoals de inpainting-pipeline van Diffusers) is waardevol voor het herstellen van de ondergrond, niet voor het zetten van letters. Het gaat uitstekend om met complexe texturen, matglaseffecten, slagschaduwen en gloed — maar zodra je AI vraagt om direct nieuwe tekst te genereren, ontstaat er snel variatie in lettertype en scherpte.
De conclusie: AI dient als achtergrondreiniger, niet als typografische zetter. Gebruik AI om sporen van oude tekst weg te poetsen en stap daarna over naar vector- of ontwerptools om nieuwe tekst volgens een vast stramien te plaatsen.
Overzicht van de methoden
| Methode | Snelheid | Kwaliteit | Automatiseringspotentieel | Belangrijkste risico | Meest geschikt voor |
|---|---|---|---|---|---|
| Pixelbewerking + handmatig typen | Snel | Gemiddeld | Laag | Tekstranden ogen onnatuurlijk | Kleine bewerkingen op enkele beelden, knoppen |
| Vector-overlay / laagreconstructie | Gemiddeld | Hoog | Gemiddeld tot Hoog | Vraagt vooraf meetwerk van componenten | Marketingvisuals, A/B-varianten |
| OCR + her-rendering | Gemiddeld | Hoog | Hoog | Posities kloppen, lettertype vraagt verificatie | Batchverwerking, sjabloonvertalingen |
| AI-inpainting + handmatige afwerking | Gemiddeld | Gemiddeld tot Hoog | Gemiddeld | Afwijkingen in gegenereerde tekststijl | Complexe achtergronden, glas, verlopen |
| Broncode / hergenereren | Trager per opzet, snel op schaal | Hoogst | Hoogst | Vereist toegang tot het bronsysteem | Grootschalige app-store-lokalisatie |
Vijf details die het resultaat bepalen
Het succes van een bewerkt screenshot hangt af van deze vijf typografische en technische details:
1. Nauwkeurige lettertype-identificatie
Voor Latijnse schriften kan WhatTheFont helpen bij het vinden van kandidaten. Voor UI-screenshots is het echter betrouwbaarder om terug te redeneren vanuit de standaardlettertypen van het platform:
- Apple-omgevingen: raadpleeg de San Francisco-familie en SF Symbols.
- Android / Material: controleer Material 3 Typography en Material Symbols.
- Windows: controleer Segoe UI Variable en Segoe Fluent Icons.
2. Correcte lettergrootte en -dikte
De meest gemaakte fout is niet het verkeerde lettertype, maar het verkeerde gewicht (font weight). Het verschil tussen Regular en Medium betreft in een screenshot vaak slechts één pixel dikte, maar het visuele effect is aanzienlijk. Meet de pixelhoogte van de oorspronkelijke tekst om de juiste corpsgrootte te bepalen.
3. Spatiëring en basislijnuitlijning
Figma, Sketch, UI-engines en browsers renderen typografie net even anders. Zelfs met hetzelfde lettertype kunnen letterspatiëring (tracking) en basislijnen afwijken. Meet de linkerpositie, basislijn en kaderhoogte van de originele tekst en lijn nieuwe elementen uit op gehele pixels.
4. Reconstructie van kleur en schaduwen
Neem niet slechts één kleurmonster. Bemonster bij knoppen en badges meerdere punten rondom de tekst om vast te stellen of de ondergrond effen is, een verloop heeft of halftransparant is.
5. Uitlijning op het pixelraster
ClearType op Windows maakt gebruik van subpixel-antialiasing in plaats van standaard grijswaarden-antialiasing. Een Windows-screenshot dat op macOS opnieuw wordt opgemaakt, vertoont vaak kleurrandjes. Render bij voorkeur op hetzelfde platform en met dezelfde schaalfactor als het originele screenshot.
Platformverschillen: dezelfde tekst, andere weergave
iOS en macOS
De Apple HIG Typography geeft aan dat San Francisco specifieke varianten heeft voor verschillende formaten. SF Symbols sluit hier naadloos op aan. Gebruik voor Apple-screenshots altijd deze standaardsystemen.
Android
De documentatie van Material 3 en Icons laat zien dat typografie en dichtheidscategorieën (mdpi tot xxxhdpi) nauw samenhangen. Schaal geen mdpi-afbeelding op naar xxhdpi; dit leidt onherroepelijk tot wazige randen.
Web
Een veelgemaakte fout is het handmatig verkleinen van een desktop-screenshot naar mobiel formaat. Volgens de richtlijnen voor responsive design van MDN renderen pagina's fundamenteel anders bij verschillende breekpunten en pixelverhoudingen. Maak altijd een nieuwe opname op het gewenste mobiele breekpunt.
Windows
Windows 11 maakt gebruik van Segoe UI Variable en ClearType. Voor uiterste precisie bij Windows-screenshots voer je de opmaak en controle het beste uit in een Windows-omgeving.
Batch-automatisering: van "één afbeelding" naar een schaalbaar systeem
Wanneer je tientallen screenshots in meerdere talen moet verwerken, is handmatig werk niet langer toereikend.
De ideale route blijft het opnieuw genereren vanuit de testomgeving. Beschik je niet over toegang tot de broncode, kies dan voor OCR + sjablonen + batchexport: gebruik Tesseract om begrenzingskaders vast te leggen en groepeer screenshots per sjabloon (zoals "prijzentabel", "instellingenlijst"). Zo definieer je de lay-out eenmalig per sjabloon.
Praktische voorbeelden via de opdrachtregel
```bash
Tesseract: begrenzingskaders op woordniveau exporteren
tesseract screen.png - -l eng+chi_sim --psm 6 tsv > screen.tsv
ImageMagick: nauwkeurige tekst-overlay plaatsen
magick input.png \ -font "Inter-Regular" \ -pointsize 16 \ -fill "#1F2328" \ -gravity northwest \ -annotate +120+48 "Nieuw Label" \ output.png ```
De -annotate-documentatie van ImageMagick biedt volledige controle over coördinaten. Gecombineerd met Pillow in Python bouw je eenvoudig een reproduceerbare batchpipeline.
Checklist voor kwaliteitscontrole
Controleer bewerkte screenshots altijd bij 100%, 200% en 400% zoom:
| Controlepunt | Norm voor akkoord | Typische fouten |
|---|---|---|
| Tekstinhoud | Komt exact overeen met de doeltaal/versie | Vergeten woorden, typefouten, oude tekstresten |
| Positie en uitlijning | Linkerkantlijn, basislijn en marges zijn stabiel | Tekst oogt zwevend of samengedrukt |
| Lettertype en gewicht | Consistent met het platformsysteem | Afwijkend karakter, ongelijke lijndikte |
| Anti-aliasing | Schone randen zonder afwijkende kleurfranjes | Wazigheid, kartelranden, rode/blauwe randjes |
| Achtergrondherstel | Geen herhalende patronen of inpainting-naden | Vlekken, zichtbare overgangen, verloren matglaseffect |
| Iconen en badges | Stijl, formaat en uitlijning kloppen | Verkeerde verhoudingen, cijfers niet gecentreerd |
Juridische en ethische kaders
Onder de Europese AVG (GDPR) en vergelijkbare privacywetgeving vallen persoonsgegevens zoals namen, e-mailadressen, telefoonnummers en bestelnummers onder strikte bescherming. Screenshots met dergelijke gegevens mogen niet zomaar worden gedeeld of extern geüpload. Anonimiseer deze gegevens altijd onomkeerbaar en bij voorkeur lokaal op je apparaat.
De richtlijnen voor de App Store van Apple benadrukken dat screenshots de daadwerkelijke gebruikerservaring moeten weerspiegelen. Het verzinnen van niet-bestaande functies of prijzen geldt als misleidend.
Gebruik daarnaast uitsluitend lettertypen en iconen met de juiste licenties. Material Symbols vallen onder de Apache 2.0-licentie; Google Noto-lettertypen onder de SIL Open Font License.
Samenvatting: splits één probleem in tweeën
Het belangrijkste praktische advies luidt:
Splits "tekst in screenshots bewerken" in twee afzonderlijke taken — "de achtergrond herstellen" en "de typografie opnieuw opbouwen" — en probeer niet beide in één magische stap op te lossen.
Achtergrondherstel: gebruik reparatietools, klonen of AI-inpainting. Typografische opbouw: gebruik systeemlettertypen, vector-overlays, componenten en nauwkeurige tekstinstellingen. Deze scheiding levert een stabieler resultaat op dan one-click oplossingen en maakt je werk schaalbaar en controleerbaar.
De aanbevolen werkwijze:
- Controleer eerst of je kunt hergenereren of herbouwen — bij codetoegang opnieuw vastleggen; bij ontwerpbestanden componenten aanpassen.
- Kies een achtergrondherstelmethode op basis van complexiteit — effen vlakken direct vullen, complexe structuren via inpainting.
- Stem lettertype en spatiëring nauwkeurig af — redeneer terug vanuit het besturingssysteem en lijn uit op gehele pixels.
- Voer een kwaliteitscontrole uit bij meerdere zoomniveaus — 100% voor het totaalbeeld, 200% voor de randen en 400% voor anti-aliasing.
Of je nu Photoshop gebruikt voor een losse visual, Figma inricht voor componenten of ReWords AI inzet voor een snelle tekstvervanging: met deze basisprincipes werk je altijd doelgericht.
_Dit artikel baseert zich op officiële documentatie van Tesseract, OpenCV, ImageMagick, GIMP, Pillow, Material Design, Apple HIG en toepasselijke privacywetgeving._
