Bilder

KI-Bilder für einen E-Mail-Newsletter: Header, Trenner und Footer in einem Stil

Header, Trenner und Footer für einen Newsletter mit KI: die Breiten, die Mail-Clients akzeptieren, Text außerhalb des Bildes, eine Palette und leichte Dateien.

5 Min. Lesezeit
Drei dünne mattierte Glasplatten schweben über einem dunklen, glänzenden Boden, oben eine breite, in der Mitte ein haarfeiner Streifen und unten eine kürzere, alle violett getönt mit leuchtenden Kanten und weicher Spiegelung

Eine E-Mail ist der strengste Ort, an dem ein Bild je leben wird. Die Mail-App des Lesers bestimmt die Breite, blockiert Bilder womöglich bis zum Antippen, kehrt im Dunkelmodus eventuell Ihre Farben um und zeigt Ihre Schrift vielleicht gar nicht. Ein KI-Bild für einen Newsletter muss deshalb von diesen Grenzen aus rückwärts geplant werden. Das hier ist eine Checkliste für ein Set aus drei Teilen, Header, Trenner und Footer-Grafik, das aussieht, als hätte eine Hand es gemacht.

Von der Spalte ausgehen, nicht vom Bild

Die meisten Newsletter stehen in einer einzigen zentrierten Spalte von etwa 600 Pixeln Breite, und nur für diese Spalte müssen Sie gestalten. Telefone verkleinern sie, Desktop-Clients zentrieren sie einfach in leerem Raum. Legen Sie zuerst die Spaltenbreite fest und leiten Sie daraus die drei Formate ab.

  • Header: volle Spaltenbreite, breit und niedrig. Wählen Sie im Ratio-Menü ein breites Format und beschneiden Sie die Höhe dann im Editor.
  • Trenner: volle Breite, sehr dünn. Kein Modell zeichnet direkt einen so schmalen Streifen; rendern Sie ein breites Bild und schneiden Sie aus der ruhigsten Stelle ein schlankes Band heraus.
  • Footer-Grafik: gleiche Breite wie der Header, etwas höher als der Trenner, damit die E-Mail mit einer Form endet und nicht mit Rechtstext.

Rendern Sie in etwa der doppelten Spaltenbreite und skalieren Sie im Editor herunter, damit die Bilder auf hochauflösenden Telefonen scharf bleiben. Das Studio erzeugt Bilder bis 2K, mehr als eine Spalte braucht. Die Anleitung zum Seitenverhältnis erklärt, warum ein breites Format besser ist als ein quadratisches, das Sie später beschneiden.

Kein einziges Wort ins Bild

Diese Regel rettet die meisten Newsletter. Steckt die Überschrift fest im Header-Bild, sehen Leser, deren App Bilder blockiert, eine leere Box, Screenreader lesen nichts vor, und ein Tippfehler bedeutet ein neues Rendering. Setzen Sie Titel, Datum und Button als echten Text und nutzen Sie das Bild nur als Hintergrund.

Text lässt sich leichter auf einen Header setzen, wenn das Bild schon eine ruhige Fläche hat. Benennen Sie sie im Prompt, wie der Beitrag zu Platz für Text zeigt, und setzen Sie das Motiv auf die gegenüberliegende Seite. Ergänzen Sie außerdem einen Alt-Text, denn manche Leser sehen nur diesen. Ein kurzer, schlichter Satz reicht; der Beitrag zum Alt-Text zeigt das Muster.

Prompt
A wide, low panoramic strip: a calm dark plum gradient wall on the left two thirds, completely smooth and empty, and on the right a small cluster of paper lanterns glowing soft violet and warm sand, shallow depth of field, gentle haze, no letters or symbols anywhere
Die leere Fläche wird ausdrücklich beschrieben, die Palette benannt und Buchstaben ausgeschlossen.

Eine Palette, in alle drei Prompts geschrieben

Drei einzelne Renderings laufen auseinander, wenn Sie sie nicht festnageln. Wählen Sie zwei oder drei Farben, nennen Sie sie in jedem Prompt und behalten Sie dieselbe Art von Motiv und dasselbe Licht bei. Im Beispiel oben sind das Pflaume, Violett und Sand mit weichem Laternenglühen. Die Anleitung zu Farbpaletten zeigt, wie man sie formuliert, damit das Modell sie nicht vertauscht.

Nutzen Sie dann den ersten freigegebenen Header als Referenz für Trenner und Footer und sagen Sie, was bleiben soll (Palette und Licht) und was sich ändert (das Motiv). Der Beitrag zu Referenzbildern behandelt das. Verwenden Sie für alle drei dasselbe Modell; Still ist ein guter Standard ab €0.40 pro Rendering, und Still Lite ab €0.30 genügt, um Kompositionen vor dem Finale auszuprobieren.

Das Bild an den E-Mail-Hintergrund anpassen

Wählen Sie zuerst die Hintergrundfarbe der E-Mail und lassen Sie die Ränder jedes Bildes darin übergehen. Ein Header, der an einer harten Linie auf einer weißen Seite endet, wirkt wie ein aufgeklebtes Rechteck. Eine Lösung: das Bild am unteren Rand in genau die Seitenfarbe auslaufen lassen; eine andere: die Seitenfarbe in den Prompt schreiben und eine weiche Vignette verlangen. Prüfen Sie das Ergebnis in Ihrem Mail-Tool, nicht nur im Studio.

Der Dunkelmodus ist der zweite Test. Manche Apps invertieren helle Hintergründe, und ein Bild mit hellem Rand kann einen hässlichen Hof bekommen. Ein Bild mit dunklem oder mitteltonigem Rand übersteht beide Modi am besten, ein guter Grund, die Palette eher dunkel zu halten.

Dateien: flach, klein und in einem langweiligen Format

Mail-Apps sind weit weniger modern als Browser. Speichern Sie jedes Teil als JPEG, bei flächigen Farben als PNG, und meiden Sie neuere Formate, die Mail-Apps nur lückenhaft unterstützen. Die Datei sollte so klein sein, dass die E-Mail auch bei schlechter Mobilverbindung sofort lädt; ein ruhiges, detailarmes Bild lässt sich viel besser komprimieren als ein unruhiges, und die freie Fläche für den Titel hilft auch hier. Prüfen Sie nach dem Komprimieren glatte dunkle Verläufe in voller Größe, denn dort zeigt sich Banding zuerst.

Was das Studio hier nicht kann

Es erzeugt Rasterbilder und baut die E-Mail nicht: kein HTML, kein Slicing, keine Anpassung an Ihre Spalte und keine Kompression für Mail-Apps. Das geschieht in Ihrem Editor oder Newsletter-Tool. Einen Haarlinien-Trenner als solchen zeichnet es nicht, deshalb schneiden Sie ihn aus einem breiteren Rendering heraus. Transparente Ausgabe gibt es nur bei einigen Modellen, und für E-Mail lohnt das Risiko nicht, da Clients eine durchsichtige Datei im Dunkelmodus unvorhersehbar behandeln; legen Sie die Grafik stattdessen auf eine einfarbige Fläche. Und es kann nicht versprechen, dass drei Renderings exakt zusammenpassen: Palette und Referenz bringen Sie nahe heran, korrigieren Sie das Set also im Editor, wenn Ihre Marke exakte Farben braucht.

Öffnen Sie das Studio, rendern und bestätigen Sie zuerst den Header und erstellen Sie daraus Trenner und Footer. Stimmt der Stil nicht, vergleichen Sie die Bildmodelle auf der Modellseite. Unser Beitrag zu Blog-Headerbildern behandelt dasselbe Handwerk für eine Webseite, wo die Regeln lockerer sind.

Fragen

Welche Größe sollte ein KI-Bild für einen E-Mail-Header haben?

Gestalten Sie für eine einzelne Spalte von etwa 600 Pixeln Breite, rendern Sie das Bild breit und skalieren Sie es auf etwa die doppelte Breite, damit es auf hochauflösenden Displays scharf bleibt. Beschneiden Sie die Höhe im Editor.

Soll der Newsletter-Titel Teil des KI-Bildes sein?

Nein. Lassen Sie im Bild eine ruhige Fläche frei und setzen Sie den Titel als echten Text, damit er auch bei blockierten Bildern sichtbar bleibt und ohne neues Rendering bearbeitet werden kann.

Kann ich ein transparentes Bild in einer E-Mail verwenden?

Besser nicht. Mail-Apps behandeln durchsichtige Dateien unvorhersehbar, vor allem im Dunkelmodus. Legen Sie die Grafik auf eine einfarbige Fläche in der Hintergrundfarbe der E-Mail.

Wie halte ich Header, Trenner und Footer in einem Stil?

Nennen Sie in allen drei Prompts dieselben zwei oder drei Farben und dasselbe Licht, nutzen Sie den ersten freigegebenen Header als Referenz und verwenden Sie für das ganze Set dasselbe Modell.

#Bilder#E-Mail#Design

Weiterlesen

Alle Artikel →