Scroll door een nieuwsaccount of merkfeed en de meeste berichten delen een vorm: een foto, een gewaagde kop, een dunne accentbalk, een datum en een handvat in de hoek Dit zijn fotokaarten Ze zien er ontworpen uit omdat ze zijn opgebouwd uit een vaste lay-out waarbij alleen de woorden en het beeld veranderen, wat ook de reden is waarom een team tientallen per week kan publiceren zonder dat ze er allemaal anders uitzien.
Deze gids behandelt wat een kaart leesbaar maakt op feedgrootte, hoe tekstgroottes krimpen op een telefoon, welke kleuren contrastrichtlijnen passeren, waarom kaarten geëxporteerd moeten worden als PNG, hoe je een vierkante kaart aanpast voor andere platforms, en waar de privacyranden zijn De fotokaartgenerator wordt gebruikt voor de stapsgewijze onderdelen en elke hieronder beschreven instelling is er een die de tool biedt.
tl;dr: Een fotokaart is een sociale grafische weergave gemaakt van een sjabloon: uw afbeelding, een kop en ondersteunende tekst geplaatst in een vaste lay-out De Fotokaartgenerator heeft acht sjablonen (Classic Newspaper, Modern Bold, Breaking News, Quote Card, Minimalist, Feature Card, Gradient News en Vertical Quote), 50 Google Fonts, accent, achtergrond - en tekstkleurkiezers, beeldschaal en positiecontroles, en een optioneel logo Elke kaart exporteert als een 1080 x 1080 PNG, weergegeven in uw browser Uw afbeelding wordt lokaal gelezen en niet geüpload, hoewel lettertypen worden geladen van Google Fonts Het is gratis, geen aanmelding.
Wat is een fotokaart?
Een fotokaart is een vierkante of rechthoekige afbeelding op sociale media die een foto combineert met overlappende of aangrenzende tekst, opgemaakt vanuit een herbruikbare sjabloon Nieuwsmedia gebruiken ze om koppen te delen, merken gebruiken ze voor aankondigingen en makers gebruiken ze voor citaten. De sjabloon repareert de typografie, spatiëring en posities; de auteur levert de inhoud.
Die splitsing is het hele punt Een sjabloon regelt de ontwerpbeslissingen een keer: hoe groot de kop is ten opzichte van de afbeelding, waar de datum naartoe gaat, hoeveel ruimte er om de tekst heen zit Het veranderen van de woorden kan die relaties niet verbreken, dus een feed van kaarten gemaakt van hetzelfde sjabloon luidt als één consistente publicatie.
Welke sjabloon moet u kiezen?
Kies op basis van wat de kaart moet dragen Elke sjabloon legt alleen de tekstvelden bloot die de lay-out gebruikt, dus het inhoudspaneel verandert wanneer u overschakelt.
| Sjabloon | Indeling | Tekstvelden | het beste voor |
|---|---|---|---|
| Klassieke krant | Grote afbeelding, tekstgebied hieronder | Kop, onderkop, datum, domein | Algemeen nieuws en blogposts |
| Modern Bold | Afbeelding bovenste helft, kop en samenvatting hieronder, vast & quot;Lees meer" knop | Rubriek, onderverdeling, datum | Aankondigingen |
| Breaking News | Rode kopstrook, afbeelding, kop, tickerbalk in scrollende stijl | Rubriek, onderverdeling, datum | Tijdgevoelige updates |
| Citaatkaart | Citaat over een verduisterde achtergrondfoto | Rubriek (de quote), subrubriek (de attributie), datum | Trek aan citaten die u mag delen |
| Minimalist | Ingelijste afbeelding met veel witruimte | Rubriek, onderverdeling, datum | Eenvoudige uitspraken, gebeurtenisdata |
| Feature Card | Afbeelding, overlappend rond logo, voetstrip | Kop, onderkop, datum, domein | Lange artikelen |
| Gradient Nieuws | Volledig ontluchtingsbeeld, accentverloop, voetbalk | Kop, categorie, datum, domein | Beeldgeleide verhalen |
| Verticaal citaat | Citaatpaneel links, portretafbeelding rechts | Inhoud (de quote), auteur, aanduiding, datum, domein | Citaten met een foto van de spreker |
De meeste sjablonen hebben een datumregel, en verschillende voegen een domein of handvatveld toe; elk veld kan worden gewist Sommige labels zijn vast in de lay-out, zoals & quot; BREAKING NEWS" op de Breaking News-strip en & quot; Lees meer" op Modern vet Het logo slot verschijnt alleen wanneer u een logo toevoegt; zonder één, verbergt de sjabloon het logogebied in plaats van een leeg frame te tonen.
Hoe groot moet tekst zijn op een sociale kaart?
Groter dan het op uw monitor lijkt Een kaart is ontworpen met een breedte van 1080 pixels, maar wordt bekeken in een telefoonfeed op ongeveer de breedte van het scherm, en een typische telefoon is ongeveer 390 CSS-pixels breed. Dat betekent dat alles op de kaart wordt weergegeven op ongeveer 390 /1080 = 36% van het ontworpen formaat.
Dit is wat dat doet met tekst in formaten die de sjablonen gebruiken:
| Grootte op de 1080 px kaart | Geschatte grootte in een voer van 390 px breed | leesbaarheid |
|---|---|---|
| 64 px kop | 23px | Heel duidelijk |
| 48 px kop | 17 px | Clear |
| 32 blz. onderverdeling of voettekst | 12 px | Leesbaar |
| 24 px detail tekst | 9px | Klein, heeft aandacht nodig |
| 20 px metadata | 7px | Moeilijk te lezen |
De rekenkunde is gewoon maat × 390 /1080 Voor een kop van 48 pixels is 48 × 0,361 = 17,3 pixels, vergelijkbaar met comfortabele bodytekst op een telefoon Bij 20 pixels is het resultaat ongeveer 7, daarom zijn datums en handvatten op kaarten eerder decoratief dan essentieel Zet alles wat een lezer in de kop moet zien, niet de voettekst.
Dit stelt ook een praktische limiet aan lengte Een kop die bij 48 pixels tot vijf regels wordt verpakt, dwingt de sjabloon om de afbeelding of overflow samen te knijpen Richt op een kop van ongeveer 6 tot 12 woorden.
Welke kleuren moet een fotokaart gebruiken?
Kies kleuren die de tekst leesbaar houden tegen wat erachter zit De Web Content Accessibility Guidelines zetten een handige benchmark: WCAG 2.2 Succescriterium 1.4.3 vraagt om een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst, die WCAG definieert als minimaal 18 punten, of 14 punten vet Een sociale afbeelding is geen webpagina, maar dezelfde drempels beschrijven wat mensen met een slecht zicht of een dimscherm kunnen lezen.
De generator geeft je drie kleuren:
- Accent kleuren bars, pillen, gradiënten en highlight vormen Het draagt het merk.
- achtergrond kleurt de gebieden die niet door de afbeelding worden gedekt.
- Tekst kleurt de hoofdkopie op sjablonen die deze gebruiken; sommige sjablonen plaatsen witte tekst over hun accentpanelen.
| Combinatie | Contrastverhouding | Normale tekst (4,5:1) | Grote tekst (3:1) |
|---|---|---|---|
Bijna zwart #111827 op wit #ffffff |
Ongeveer 17,7:1 | Pass | Pass |
Wit op het standaard rode accent #D9232D |
Ongeveer 5,0:1 | Pass | Pass |
Wit op een middengrijs #999999 |
Ongeveer 2,8:1 | Fail | Fail |
Wit op een lichtgeel #facc15 |
Ongeveer 1,5:1 | Fail | Fail |
De eerste twee rijen zijn de standaardinstellingen generator's U kunt elk paar kleuren van uw eigen merk controleren met de kleurcontrastcontrole, en de kleur contrast gids legt uit hoe de verhouding wordt berekend.
Tekst die direct over een foto wordt geplaatst heeft geen enkele contrastverhouding, omdat de foto varieert Sjablonen zoals Gradient News behandelen dat met een verloop onder de tekst en een tekstschaduw Wanneer u een foto kiest voor die sjablonen, kiest u er een met een donkerder of rustiger gebied waar de kop staat.
Hoe maak je een fotokaart, stap voor stap
- Open de fotokaart maker en kies een sjabloon uit de vervolgkeuzelijst Sjabloon De voorbeeldtekst wordt in de inhoudsvelden geladen.
- Vervang de tekst in elk veld Druk op Enter binnen een kop of inhoudsvak om een regeleinde te forceren waar u dat wilt.
- Voeg uw hoofdafbeelding toe: klik op het uploadgebied om een bestand te kiezen, of plak een afbeeldings-URL in het veld eronder.
- Pas de afbeelding aan met de Schaalschuifregelaar (0,5x tot 2,0x) en de X - en Y-positieschuifregelaars (elk -200 tot 200 pixels) totdat het onderwerp zit waar de sjabloon het kadert.
- Optioneel op dezelfde manier een logo toevoegen Een vierkante logo afbeelding past het beste bij de ronde en vierkante logo slots.
- Open de vervolgkeuzelijst Lettertype, zoek of filter op categorie (zonder schreef, schreef, display, handschrift of monospace) en kies een lettertype.
- Stel het accent, de achtergrond en de tekstkleuren in met de kleurenkiezers.
- Klik op PNG downloaden Het bestand wordt opgeslagen als
photocard-<template>-<timestamp>.png, dus herhaalde export overschrijft elkaar nooit.
Uw instellingen, tekst en afbeelding worden opgeslagen in de browser terwijl u werkt, dus het herladen van de pagina brengt de kaart terug Reset wist ze en herstelt de Classic sjabloon.
Waarom downloaden de kaarten als PNG?
Omdat kaarten meestal grote tekst en platte kleur hebben, en die inhoud beter comprimeert en er schoner uitziet als PNG dan als JPEG. JPEG' s compressie met verlies werkt in blokken van 8 x 8 pixels en gooit fijne details weg, die rond scherpe letterranden verschijnen als zwakke halo's en spikkels, vaak rinkelen genoemd. PNG slaat elke pixel precies op met behulp van de verliesvrije compressie gedefinieerd in de W3C PNG specificatie, dus een kop blijft helder.
| formaat | Compressie | Scherpe tekst | Vlakke kleurgebieden | Foto's |
|---|---|---|---|---|
| Great | zonder verlies | Crisp | Klein en exact | Grote bestanden |
| JPEG | verlies- | Halo's rond randen | Kan strepen en spikkels vertonen | Kleine bestanden |
De meeste platformen hercoderen uploads toch Beginnend vanaf een schone PNG geeft hun encoder de best mogelijke input Als een PNG met een grote foto te groot is voor een uploadlimiet, dan is de Afbeeldingscompressiegids dekt hoe je het kunt verkleinen.
Hoe gebruik je een vierkante kaart op andere platforms?
Elke sjabloon exporteert op 1080 x 1080, een vierkant van 1:1 Dat is de standaard vierkante feedgrootte op Instagram en Facebook, en het wordt weergegeven zonder bij te snijden op de meeste feeds Andere plaatsingen willen verschillende vormen.
| Bestemming | Gezocht maat | Van een 1080 vierkante |
|---|---|---|
| Instagram of Facebook feed | 1080 x 1080 | Gebruik zoals het is |
| Instagram portretfeed | 1080 x 1350 | Boven en onder ruimte toevoegen met een mat |
| LinkedIn- of X-link-achtige afbeelding | 1200 x 627 of 1600 x 900 | Bijsnijden tot een brede strook of op een brede matte plaatsen |
| YouTube miniatuur | 1280 x 720 | Bijsnijden tot 16:9, dan iets vergroten |
| Instagram verhaal | 1080 x 1920 | Plaats op een hoge matte |
Bijsnijden verliest een deel van de kaart; een mat houdt het allemaal bij Voor een YouTube-miniatuur houdt bijsnijden van een 1080 vierkant naar 16:9 een strook van 1080 x 608 en verwijdert 236 pixels van boven en onder Vergroot die strook naar 1280 x 720 is een schaal van 1280 /1080 = 1,19, een milde vergroting Houd de kop bij het verticale midden van de kaart als je dit plant, zodat het gewas er niet doorheen snijdt De krop social media afbeelding cropper wordt de crop uitgevoerd met platformvoorinstellingen, en de gids voor het wijzigen van de grootte van de afbeelding legt uit wat uitbreiding doet met kwaliteit.
Om de hele vierkante kaart op een groter of breder canvas te houden, plaatst u deze op een achtergrond met de Matte Generator.
Worden uw foto's geüpload?
Uw foto wordt niet geüpload naar Toolz Wanneer u een bestand kiest, leest de browser het in het geheugen als een gegevens-URL, de kaart wordt op de pagina ingedeeld en de download wordt lokaal weergegeven door de html2canvas-bibliotheek, die de pagina opnieuw tekent's HTML op een canvas Er zijn echter drie netwerk- en opslagdetails die de moeite waard zijn om te weten:
- Lettertypen komen van Google Fonts. De lettertypelijst wordt geladen vanaf
fonts.googleapis.com, dus uw browser doet verzoeken aan Google voor de lettertypebestanden, die Google beschrijft in zijn Google Fonts privacy FAQ. De tekst en afbeelding die u toevoegt maken geen deel uit van die verzoeken Offline vallen lettertypen die nog niet geladen waren terug naar een standaard lettertype. - Afbeeldings-URL's worden opgehaald bij hun host. Als u een afbeeldings-URL plakt in plaats van een bestand te uploaden, laadt uw browser de afbeelding vanaf dat adres, zoals bij elke webpagina.
- Werk wordt opgeslagen in uw browser. Uw tekst, kleuren en afbeelding worden opgeslagen in de browser' s lokale opslag zodat ze een herlaadbeurt overleven Op een gedeelde computer drukt u op Reset wanneer u klaar bent om ze te wissen.
Veelvoorkomende problemen en hoe deze op te lossen
De gedownloade kaart toont een ander lettertype dan de preview. Het lettertype was nog niet klaar met laden toen u op PNG downloaden klikte, dus de export viel terug naar een standaardlettertype Wacht een seconde of twee na het kiezen van een lettertype en exporteer vervolgens opnieuw.
Een afbeelding die als URL is geplakt, ontbreekt in de download. Voor het renderen van een afbeelding op afstand naar een downloadbaar canvas moet de afbeeldingshost cross-origin gebruik met CORS-headers toestaan, een beperking html2canvas documentatie opmerkingen Veel sites sturen ze niet Download de afbeelding en upload deze als bestand.
De afbeelding is afgesneden of heeft lege ruimte. Gebruik de schuifregelaar Schaal en de schuifregelaars X en Y positie Schalen onder 1.0x kan de achtergrond van de sjabloon rond de foto onthullen; schalen erboven wordt strakker gewassen.
Tekst overstroomt zijn gebied. De kop is te lang voor de sjabloon Verkort het, of schakel over naar een sjabloon die tekst meer van de kaart geeft.
De kaart wordt opnieuw ingesteld na het herladen, of grote afbeeldingen blijven niet bestaan. Browsers beperken de lokale opslag tot een paar megabytes per site, en een grote foto die als data-URL is opgeslagen, kan deze overschrijden. De kaart exporteert nog steeds; het overleeft mogelijk niet een herlaadbeurt. Formaat wijzigen van zeer grote foto's voordat u ze toevoegt.
Hoekhaken in tekst zien er verkeerd uit. Tekst wordt als opmaak in de sjabloon ingevoegd, zodat regeleinden werken, wat betekent dat tekens zoals < kan gelezen worden als het begin van een tag Hoekhaken in kaarttekst vermijden.
Tips voor kaarten die mensen lezen
- Leid met één idee per kaart Als het twee koppen nodig heeft, heeft het twee kaarten nodig.
- Snijd de foto bij zodat het onderwerp niet onder het kopgedeelte van uw sjabloon staat.
- Houd uw merk constant: dezelfde sjabloon, lettertype en accentkleur in een serie.
- Voeg alt-tekst toe wanneer u post De afbeelding is een afbeelding van woorden naar een schermlezer, dus schrijf de kop- en sleuteldetails in het platform's alt-tekstveld.
- Plaats alleen aanhalingstekens en foto's die u mag gebruiken en schrijf aanhalingstekens nauwkeurig toe.
Alternatieven voor een sjabloonkaartgenerator
- Algemene ontwerptools zoals Canva, Figma of Adobe Express bieden veel meer sjablonen, gratis positionering en teambibliotheken, meestal met een account.
- Newsroom- en sociale planningsplatforms soms bevatten merkkaartsjablonen die zijn gekoppeld aan een publicatieworkflow.
- Codegebaseerde generatoren die HTML renderen naar afbeeldingen op een server, past bij sites die automatisch een kaart voor elk artikel produceren.
Een browser template tool past in het midden: snel, geen account, consistente uitvoer, en uw afbeeldingen blijven op uw machine Voor gerelateerde stappen voor het plaatsen, de Afbeelding Watermarker voegt een logo of tegoed toe aan een foto, en de hub voor sociale media-instrumenten geeft de volledige set weer.
