Scrollen Sie über jeden News-Account oder Marken-Feed und die meisten Beiträge teilen sich eine Form: ein Foto, eine fette Überschrift, eine dünne Akzentleiste, ein Datum und einen Griff in der Ecke Das sind Fotokarten Sie sehen so aus, weil sie aus einem festen Layout gebaut sind, wo sich nur die Wörter und das Bild ändern, weshalb ein Team auch Dutzende pro Woche veröffentlichen kann, ohne dass jede anders aussieht.
Diese Anleitung behandelt, was eine Karte bei Feedgröße lesbar macht, wie Textgrößen auf einem Telefon schrumpfen, welche Farben Kontrastrichtlinien passieren, warum Karten als PNG exportiert werden sollten, wie man eine quadratische Karte für andere Plattformen anpasst, und wo die Sichtschutzkanten sind Die Fotokartengenerator Wird für die Schritt-für-Schritt-Teile verwendet und jede unten beschriebene Einstellung ist eine, die das Tool bietet.
tl; dr: Eine Fotokarte ist eine soziale Grafik, die aus einer Vorlage erstellt wurde: Ihr Bild, eine Überschrift und unterstützender Text, der in ein festes Layout eingefügt wurde Der Fotokartengenerator verfügt über acht Vorlagen (Classic Newspaper, Modern Bold, Breaking News, Zitatkarte, Minimalist, Feature Card, Gradient News und Vertical Zitat), 50 Google Fonts, Akzent, Hintergrund - und Textfarbabnehmer, Bildskala und Positionskontrolle sowie ein optionales Logo Jede Karte exportiert als 1080 x 1080 PNG, gerendert in Ihrem Browser Ihr Bild wird lokal gelesen und nicht hochgeladen, obwohl Schriftarten von Google Fonts geladen werden Es ist kostenlos, keine Anmeldung.
Was ist eine Fotokarte?
Eine Fotokarte ist ein quadratisches oder rechteckiges Social-Media-Bild, das ein Foto mit überlagertem oder angrenzendem Text kombiniert und aus einer wiederverwendbaren Vorlage zusammengestellt wird. Nachrichtenagenturen verwenden sie, um Schlagzeilen zu teilen, Marken verwenden sie für Ankündigungen und Ersteller verwenden sie für Zitate. Die Vorlage fixiert die Typografie, den Abstand und die Positionen; Der Autor liefert den Inhalt.
Diese Aufteilung ist der springende Punkt Eine Vorlage regelt die Designentscheidungen einmal: Wie groß die Überschrift im Verhältnis zum Bild ist, wohin das Datum geht, wie viel Platz den Text umgibt Das Ändern der Wörter kann diese Beziehungen nicht unterbrechen, daher liest sich ein Feed von Karten aus derselben Vorlage als eine konsistente Veröffentlichung.
Welche Vorlage soll man auswählen?
Wählen Sie nach dem, was die Karte tragen muss Jede Vorlage legt nur die Textfelder offen, die ihr Layout verwendet, sodass sich das Inhaltsfeld beim Wechsel ändert.
| Vorlage | Layout | Textfelder | am besten für |
|---|---|---|---|
| Klassische Zeitung | Großes Bild, Textbereich unten | Überschrift, Unterüberschrift, Datum, Domain | Allgemeine News und Blogbeiträge |
| Moderner Fettdruck | Bild obere Hälfte, Überschrift und Zusammenfassung unten, fixiert & quot; Mehr lesen" Button | Überschrift, Unterüberschrift, Datum | Ankündigungen |
| Aktuelle Nachrichten | Roter Kopfstreifen, Bild, Überschrift, Tickerleiste im Scrollstil | Überschrift, Unterüberschrift, Datum | Zeitsensitive Updates |
| Angebotskarte | Zitat über einem abgedunkelten Hintergrundfoto | Überschrift (das Zitat), Unterüberschrift (die Zuschreibung), Datum | Ziehen Sie Zitate, die Sie teilen dürfen |
| Minimalistisch | Gerahmtes Bild mit viel Leerraum | Überschrift, Unterüberschrift, Datum | Einfache Aussagen, Veranstaltungstermine |
| Feature-karte | Bild, überlappendes rundes Logo, Fußleiste | Überschrift, Unterüberschrift, Datum, Domain | Langformartikel |
| Gradient News | Vollblutbild, Akzentverlauf, Fußleiste | Überschrift, Kategorie, Datum, Domain | Bildergeführte Geschichten |
| Vertikales Zitat | Zitatfeld links, Porträtbild rechts | Inhalt (das Zitat), Autor, Bezeichnung, Datum, Domain | Zitate mit einem Foto des Sprechers |
Die meisten Vorlagen haben eine Datumszeile, und mehrere fügen ein Domain - oder Handle-Feld hinzu; jedes Feld kann gelöscht werden Einige Beschriftungen sind im Layout fixiert, wie z.B. & quot;BREAKING NEWS" auf dem Breaking News-Streifen und & quot; Lesen Sie mehr" auf Modern Bold. Der Logo-Slot erscheint nur, wenn Sie ein Logo hinzufügen; ohne eines, verbirgt die Vorlage den Logo-Bereich, anstatt einen leeren Rahmen anzuzeigen.
Wie groß sollte Text auf einer Sozialkarte sein?
Größer als es auf Ihrem Monitor aussieht Eine Karte ist mit 1080 Pixeln Breite ausgelegt, wird aber in einem Telefon-Feed in etwa der Breite des Bildschirms betrachtet, und ein typisches Telefon ist etwa 390 CSS-Pixel breit Das bedeutet, dass alles auf der Karte mit etwa 390 / 1080 = 36% seiner entworfenen Größe angezeigt wird.
Folgendes bewirkt Text in den Größen, die die Vorlagen verwenden:
| Größe auf der 1080 px Karte | Ungefähre Größe in einem 390 px breiten Futter | Lesbarkeit |
|---|---|---|
| 64 px Schlagzeile | 23 px | Ganz klar |
| 48 px Schlagzeile | 17 px | Klar |
| 32 px Unterposition oder Fußzeile | 12 px | Lesbar |
| 24 px Detailtext | 9 px | Klein, braucht Aufmerksamkeit |
| 20 px Metadaten | 7 px | Schwer zu lesen |
Die Arithmetik ist einfach Größe × 390 / 1080. Bei einer 48 Pixel Überschrift sind 48 × 0,361 = 17,3 Pixel, vergleichbar mit komfortablem Fließtext auf einem Telefon, bei 20 Pixeln ergibt sich etwa 7, weshalb Datteln und Griffe auf Karten eher dekorativ als wesentlich sind Alles, was ein Leser sehen muss, in die Überschrift einfügen, nicht die Fußzeile.
Damit wird auch eine praktische Längenbeschränkung gesetzt Eine Schlagzeile, die sich bei 48 Pixeln auf fünf Zeilen wickelt, zwingt die Vorlage, das Bild zu quetschen oder zu überlaufenZiel ist eine Schlagzeile von etwa 6 bis 12 Wörtern.
Welche Farben sollte eine Fotokarte verwenden?
Wählen Sie Farben aus, die den Text im Vergleich zu dem, was dahinter steht, lesbar halten. Die Richtlinien zur Barrierefreiheit von Webinhalten setzen einen nützlichen Maßstab: WCAG 2.2 Erfolgskriterium 1.4.3 Fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text, was WCAG als mindestens 18 Punkte definiert, oder 14 Punkte fett Ein soziales Bild ist keine Webseite, aber die gleichen Schwellenwerte beschreiben, was Menschen mit Sehschwäche oder einem schwachen Bildschirm lesen können.
Der Generator gibt Ihnen drei Farben:
- Akzent Farben Balken, Pillen, Farbverläufe und Highlight-Formen Es trägt die Marke.
- Hintergrund Farben die Bereiche, die nicht vom Bild abgedeckt werden.
- Text Farben der Hauptkopie auf Vorlagen, die sie verwenden; Einige Vorlagen legen weißen Text über ihre Akzentfelder.
| Kombination | Kontrastverhältnis | Normaler Text (4,5:1) | Großer Text (3:1) |
|---|---|---|---|
Nahezu schwarz #111827 Auf weiß #ffffff |
Ungefähr 17,7:1 | Passierschein | Passierschein |
Weiß auf dem standardmäßigen roten Akzent #D9232D |
Ungefähr 5,0:1 | Passierschein | Passierschein |
Weiß auf einem mittleren Grau #999999 |
Ungefähr 2,8:1 | Versagen | Versagen |
Weiß auf hellgelb #facc15 |
Ungefähr 1,5:1 | Versagen | Versagen |
Die ersten beiden Zeilen sind die Voreinstellungen des Generators' s. Sie können jedes Paar Ihrer eigenen Markenfarben mit dem Farbkontrastprüfungund das Farbkontrastführer Erklärt, wie das Verhältnis berechnet wird.
Text, der direkt über einem Foto platziert wird, hat kein einzelnes Kontrastverhältnis, da das Foto variiert. Vorlagen wie Gradient News verarbeiten das mit einem Farbverlauf unter dem Text und einem Textschatten. Wenn Sie ein Foto für diese Vorlagen auswählen, wählen Sie eines mit einem dunkleren oder ruhigeren Bereich, in dem die Überschrift sitzt.
Wie man eine Fotokarte macht, Schritt für Schritt
- Öffne das Fotokartenmacher und wählen Sie eine Vorlage aus dem Dropdown Vorlage Sein Beispieltext wird in die Inhaltsfelder geladen.
- Ersetzen Sie den Text in jedem Feld Drücken Sie die Eingabetaste in einer Überschrift oder einem Inhaltsfeld, um einen Zeilenumbruch dort zu erzwingen, wo Sie einen wünschen.
- Fügen Sie Ihr Hauptbild hinzu: Klicken Sie auf den Upload-Bereich, um eine Datei auszuwählen, oder fügen Sie eine Bild-URL in das Feld darunter ein.
- Passen Sie das Bild mit dem Scale-Slider (0,5 x bis 2,0 x) und den X - und Y-Positions-Sliders (jeweils -200 bis 200 Pixel) an, bis das Motiv dort sitzt, wo die Vorlage es einrahmt.
- Fügen Sie optional ein Logo auf die gleiche Weise hinzu Ein quadratisches Logo-Bild passt am besten zu den kreisförmigen und quadratischen Logo-Slots.
- Öffnen Sie den Font-Dropdown, suchen oder filtern Sie nach Kategorie (ohne Serifen, Serifen, Anzeige, Handschrift oder Monospace) und wählen Sie eine Schriftart aus.
- Stellen Sie mit den Farbwählern den Akzent, den Hintergrund und die Textfarben ein.
- Klicken Sie auf Download PNG. Die Datei wird gespeichert als
photocard-<template>-<timestamp>.png, so dass wiederholte Exporte sich nie überschreiben.
Ihre Einstellungen, Text und Bild werden während der Arbeit im Browser gespeichert, sodass das Neuladen der Seite die Karte zurückbringt Reset löscht sie und stellt die Classic-Vorlage wieder her.
Warum laden die Karten als PNG herunter?
Denn Karten sind meist großer Text und flache Farbe, und dieser Inhalt komprimiert sich besser und sieht sauberer aus als als PNG. JPEG' s verlustbehaftete Komprimierung funktioniert in 8 x 8 Pixel Blöcken und verworfen feine Details, die um scharfe Buchstabenkanten herum als schwache Halos und Sprenkel angezeigt werden, oft als Klingeln bezeichnet PNG speichert jedes Pixel genau mit der verlustfreien Komprimierung, die in der definiert ist W3 C PNG Spezifikation„Eine Überschrift bleibt also klar.
| Format | Kompression | Scharfer Text | Flache Farbflächen | Fotografien |
|---|---|---|---|---|
| PNG | verlustlos | Knusprig | Klein und genau | Große Dateien |
| JPEG | schlaff | Halos um Kanten | Kann Bänder und Sprenkel zeigen | Kleine Dateien |
Die meisten Plattformen kodieren Uploads sowieso neu Ausgehend von einem sauberen PNG gibt ihr Encoder die bestmögliche EingabeWenn ein PNG mit einem großen Foto zu groß für ein Upload-Limit ist, wird die Bildkomprimierungshandbuch Hüllt ab, wie man es schrumpft.
Wie benutzt man eine eckige Karte auf anderen Plattformen?
Jede Vorlage exportiert bei 1080 x 1080, einem Quadrat 1:1. Das ist die Standardquadrat-Feedgröße auf Instagram und Facebook, und sie wird ohne Zuschneiden auf den meisten Feeds angezeigt Andere Platzierungen wollen andere Formen.
| Ziel | Gesuchte Größe | Von einem 1080-Quadrat |
|---|---|---|
| Instagram oder Facebook Feed | 1080 x 1080 | Verwendung wie sie ist |
| Instagram Portrait Feed | 1080 x 1350 | Platz oben und unten mit einer Matte hinzufügen |
| LinkedIn- oder X-Link-Bild | 1200 x 627 oder 1600 x 900 | Auf einen breiten Streifen schneiden oder auf eine breite Matte legen |
| YouTube-thumbnail | 1280 x 720 | Auf 16:9 schneiden, dann leicht vergrößern |
| Instagram-story | 1080 x 1920 | Auf einen hohen matten Platz |
Beim Zuschneiden geht ein Teil der Karte verloren; eine Matte behält das alles bei Bei einem YouTube-Miniaturbild behält das Zuschneiden eines 1080 Quadrates auf 16:9 einen 1080 x 608 Streifen und entfernt 236 Pixel von oben und unten, das Vergrößern dieses Streifens auf 1280 x 720 ist ein Maßstab von 1280 / 1080 = 1,19, eine leichte Vergrößerung Halten Sie die Überschrift nahe der vertikalen Mitte der Karte, wenn Sie dies planen, damit der Zuschnitt nicht durchschneidet Die Social Media Bilderbeschneider Erzeugt das Zuschneiden mit Plattformvoreinstellungen und dem Leitfaden zur Größenänderung des Bildes Erklärt, was die Erweiterung mit der Qualität macht.
Um die gesamte quadratische Karte stattdessen auf einer höheren oder breiteren Leinwand zu halten, legen Sie sie auf einen Hintergrund mit der Matte Generatordrohen
Werden deine Fotos hochgeladen?
Ihr Foto wird nicht auf Toolz hochgeladen Wenn Sie eine Datei auswählen, liest der Browser sie als Daten-URL in den Speicher ein, die Karte wird auf der Seite ausgelegt und der Download wird lokal von der html2canvas-Bibliothek gerendert, die die Seite neu zeichnet' s HTML auf eine Leinwand Es gibt jedoch drei wissenswerte Netzwerk- und Speicherdetails:
- Schriftarten stammen von Google Fonts. Die Schriftliste wird geladen von
fonts.googleapis.com„Ihr Browser stellt also Anfragen an Google nach den Schriftartendateien, die Google in seinen Beschreibungen beschreibt Häufig gestellte Fragen zum Datenschutz von Google Fonts. Der Text und das Bild, das Sie hinzufügen, sind nicht Teil dieser Anfragen Offline fallen Schriftarten, die nicht bereits geladen wurden, auf eine Standardschriftart zurück. - Bild-URLs werden von ihrem Host abgerufen. Wenn Sie eine Bild-URL einfügen, anstatt eine Datei hochzuladen, lädt Ihr Browser das Bild von dieser Adresse, wie es bei jeder Webseite der Fall wäre.
- Arbeit wird in Ihrem Browser gespeichert. Ihr Text, Ihre Farben und Ihr Bild werden im lokalen Browser' gespeichert, damit sie einen Neuladen überstehen Drücken Sie auf einem gemeinsam genutzten Computer auf Zurücksetzen, wenn Sie mit dem Löschen fertig sind.
Häufige Probleme und wie man sie behebt
Die heruntergeladene Karte zeigt eine andere Schriftart als die Vorschau. Die Schriftart war beim Klicken auf Download PNG noch nicht fertig geladen, so dass der Export auf eine Standardschrift zurückfiel Warten Sie nach der Auswahl einer Schriftart ein oder zwei Sekunden, dann exportieren Sie erneut.
Ein als URL eingefügtes Bild fehlt im Download. Um ein Remote-Bild auf einer herunterladbaren Leinwand wiederzugeben, muss der Bildhost die ursprungsübergreifende Verwendung mit CORS-Headern ermöglichen, eine Einschränkung html2canvas Dokumentation Notizen. viele Seiten senden sie nicht herunter Laden Sie das Bild herunter und laden Sie es stattdessen als Datei hoch.
Das Bild ist abgeschnitten oder hat leeren Platz. Verwenden Sie den Scale-Schieberegler und die X - und Y-Positionsschieber Skalierung unter 1,0 x kann den Vorlagenhintergrund um das Foto herum erkennen lassen; Skalierung darüber wird enger.
Text überläuft seinen Bereich. Die Überschrift ist zu lang für die Vorlage Kürzen, oder wechseln Sie zu einer Vorlage, die Text mehr von der Karte gibt.
Die Karte wird nach einem Neuladen zurückgesetzt, oder große Bilder bleiben nicht bestehen. Browser beschränken den lokalen Speicher auf einige Megabyte pro Seite, und ein großes Foto, das als Daten-URL gespeichert ist, kann diesen überschreiten Die Karte exportiert immer noch; es überlebt möglicherweise nur ein Reload nicht Größe sehr großer Fotos ändern, bevor sie hinzugefügt werden.
Winkelklammern im Text sehen falsch aus. Text wird als Markup in die Vorlage eingefügt, sodass Zeilenumbrüche funktionieren, was Zeichen wie z < Als Anfang eines Tags gelesen werden können Vermeiden Sie eckige Klammern im Kartentext.
Tipps für Karten, die Menschen lesen
- Führen mit einer Idee pro Karte, braucht es zwei Schlagzeilen, braucht es zwei Karten.
- Schneiden Sie das Foto so zu, dass sein Motiv nicht unter dem Überschriftenbereich Ihrer Vorlage liegt.
- Halten Sie Ihre Marke konstant: die gleiche Vorlage, Schriftart und Akzentfarbe über eine Serie hinweg.
- Alt-Text hinzufügen, wenn Sie posten Das Bild ist ein Bild von Wörtern zu einem Screenreader, also schreiben Sie die Überschrift und die wichtigsten Details in das Textfeld platform's alt.
- Veröffentlichen Sie nur Zitate und Fotos, zu deren Verwendung Sie berechtigt sind, und schreiben Sie Zitate korrekt zu.
Alternativen zu einem Vorlagenkartengenerator
- Allgemeine Designwerkzeuge Weit mehr Vorlagen, kostenlose Positionierung und Teambibliotheken, meist mit Account, bieten beispielsweise Canva, Figma oder Adobe Express.
- Newsroom- und Social-Deplaying-Plattformen Fügen Sie manchmal Markenkartenvorlagen hinzu, die an einen Veröffentlichungsworkflow gebunden sind.
- Codebasierte Generatoren Das Rendern von HTML auf Bildern auf Websites mit Serverfarbe, die automatisch eine Karte für jeden Artikel erstellen.
Ein Browser-Vorlagen-Tool passt in den Mittelweg: schnell, kein Konto, konsistente Ausgabe, und Ihre Bilder bleiben auf Ihrem Computer Für verwandte Schritte vor dem Posten wird die Bild Wassermarker Einem Foto ein Logo oder einen Credit hinzufügt, und die Hub für Social-Media-Tools Listet den vollständigen Satz auf.
