Grafiken vorbereiten

Wie Sie einen Zähler ohne Grafik oder Foto in Ihre Nachricht einfügen, finden Sie unter Countdown Timer erstellen.

Voraussetzungen

Für die Gestaltung und Vorbereitung des Countdown Timers mit einer Hintergrund-Grafik oder einem Hintergrund-Foto benötigen Sie:

  • ein Bildbearbeitungsprogramm, zum Beispiel Adobe Photoshop
  • ein Produktbild oder Key Visual

Beispiel für das Vorbereiten einer Grafik

Um einen Countdown Timer mit einer Hintergrund-Grafik oder einem Hintergrund-Foto zu erstellen, müssen Sie zwei Teile vorbereiten (siehe Funktionsweise):

  • das Produktbild oder Key Visual
  • den grafischen Bereich, in dem sich der Zähler später befinden soll

Führen Sie für die Vorbereitung der beiden Teile folgende Schritte aus:

  1. Öffnen Sie Ihr Produktbild oder Key Visual mit einem Bildbearbeitungsprogramm.
  2. Stellen Sie die Breite Ihres Produktbilds oder Key Visuals zwischen 100 und 800 Pixel ein. In diesem Beispiel beträgt die Bildbreite 776 Pixel.

    Standardmäßig ist die maximale Breite auf 800 Pixel begrenzt. Wenn Ihre Nachrichtenvorlage oder Ihr Paragraph auf eine geringere Breite begrenzt ist, überschreiten Sie diesen Wert nicht. Der erstellte Countdown Timer wird später nicht automatisch auf den Maximalwert Ihrer Nachrichtenvorlage oder Ihres Paragraphen skaliert.

    Bild: Bildbreite einstellen

  3. Optional: Fügen Sie Ihrem Bild weitere grafische Elemente hinzu. In diesem Beispiel wurden ein blauer Banner und eine Überschrift hinzugefügt.

    Verwenden Sie keine grafischen Elemente mit Transparenz, da diese fehlerhaft angezeigt werden.

    Bild: Grafische Elemente hinzufügen

  4. Exportieren Sie das Bild als JPEG oder PNG.
  5. Legen Sie den Bereich für den Countdown Timer an. Sie können für diesen Bereich mit einer neuen Grafik-Datei starten oder mit Ihrem fertigen Produktbild/Key Visual in der Datei Ihres Bildbearbeitungsprogramms weiterarbeiten (nicht in dem exportierten JPEG oder PNG). Exportieren Sie später nur den Countdown-Timer-Bereich.

    Verwenden Sie keine grafischen Elemente mit Transparenz, da diese fehlerhaft angezeigt werden.

    Arbeiten Sie in der Datei des Produktbilds/Key Visuals weiter. So haben Sie das spätere Ergebnis besser im Griff und sehen, wie die beiden Teile sich am Ende in Ihrer Nachricht zusammenfügen werden.

    Bild: Bereich für den Countdown Timer anlegen

    Wenn Sie einen animierten Countdown Timer erstellen

    Vermeiden Sie für den Bereich des Countdown Timers eine aufwendige grafische Gestaltung, wie zum Beispiel Muster, ein Fotomotiv, viele Farben und Farbverläufe. Der Grund: Optimizely Campaign wandelt später Ihr JPEG oder PNG in eine GIF-Animation mit 60 Einzelbildern um. Diese GIF-Animation darf 1,5 MB nicht überschreiten.

    Wenn Sie einen statischen, nicht animierten Countdown Timer erstellen

    Die maximale Dateigröße für den Bereich des Countdown Timers liegt bei 500 KB.

  6. Legen Sie mit dem Textwerkzeug Ihres Bildbearbeitungsprogramms einen Test-Zähler an, um die Position des späteren Countdown Timers zu testen. In diesem Beispiel ist die Schriftart Arial in der Farbe Weiß (#FFFFFF) eingestellt.

    Bild: Test-Zähler

    Sie können sich zwischen folgenden Formaten entscheiden:

    Statischer Countdown Timer

    • Tage, Stunden, Minuten, Sekunden (in der Schreibweise TT:hh:mm:ss)
    • Stunden, Minuten, Sekunden (in der Schreibweise hh:mm:ss)
    • Tage, Stunden, Minuten (in der Schreibweise TT:hh:mm)
    • Stunden, Minuten (in der Schreibweise hh:mm)
    • nur Tage (in der Schreibweise TT)

    Animierter Countdown Timer

    • Tage, Stunden, Minuten, Sekunden (in der Schreibweise TT:hh:mm:ss)
    • Stunden, Minuten, Sekunden (in der Schreibweise hh:mm:ss)

    Folgende Schriftarten und Schriftschnitte können Sie verwenden:

    • Arial
    • Arial fett
    • Arial kursiv
    • Arial Black
    • Arial Unicod MS
    • Comic Sans MS
    • Comic Sans MS fett
    • Courier New
    • Courier New fett
    • Courier New kursiv
    • Courier New fett und kursiv
    • Times New Roman
    • Times New Roman fett
    • Times New Roman kursiv
    • Times New Roman fett und kursiv
    • Trebuchet MS
    • Trebuchet MS fett
    • Trebuchet MS kursiv
    • Trebuchet MS fett und kursiv
    • Verdana
    • Verdana fett
    • Verdana kursiv
    • Verdana fett und kursiv

    Notieren Sie die Schriftart und den Hexadezimalcode der Schriftfarbe. Sie benötigen diese Angaben zu einem späteren Zeitpunkt.

  7. Optional: Fügen Sie Ihrem Test-Zähler weitere grafische Elemente hinzu. In diesem Beispiel besitzt der Zähler einen Rahmen, die Beschriftung Tage, Minuten, Stunden und Sekunden sowie die Textzeile Angebot endet in:.

    Verwenden Sie keine grafischen Elemente mit Transparenz, da diese fehlerhaft angezeigt werden.

    Bild: Weitere graphische Elemente

  8. Wenn Sie mit Ihrem Layout zufrieden sind, entfernen Sie das Key Visual in Ihrer Grafik, sodass der Bereich für den Countdown Timer allein stehen bleibt – in Adobe Photoshop zum Beispiel mit dem Freistellungswerkzeug. In diesem Beispiel reduziert das Freistellungswerkzeug die Grafik auf den Bereich mit dem Zähler.

    Bild: Key Visual entfernen

    Bild: Key Visual entfernen

  9. Entfernen Sie den Test-Zähler, indem Sie die entsprechende Ebene deaktivieren oder löschen. Lassen Sie, falls von Ihnen eingefügt, alle anderen grafischen Elemente aktiviert. In diesem Beispiel ist in Adobe Photoshop die Ebene mit dem Test-Zähler deaktiviert. Der Rahmen, die Zähler-Beschriftungen und die Textzeile sind weiterhin aktiv.

    Den finalen Zähler fügen Sie später in Optimizely Campaign ein – mit Hilfe der von Ihnen notierten Informationen zu Schriftart und Schriftfarbe. Die grafische Gestaltung des Bereichs, den Sie erstellt haben, dient später als Hintergrund für den finalen Zähler.

    Bild: Test-Zähler entfernen

  10. Exportieren Sie den Bereich beziehungsweise Hintergrund für den Zähler als JPEG oder PNG. Achten Sie darauf, dass die Dateigröße 20 KB (ungefährer Richtwert) nicht überschreitet. Wenn Sie einen statischen, nicht animierten Countdown Timer erstellen möchten, liegt die maximale Dateigröße bei 500 KB.

    Sie haben jetzt erfolgreich beide Teile für den Countdown Timer vorbereitet. Unter Countdown Timer erstellen erfahren Sie, wie Sie in Optimizely Campaign den finalen Zähler erstellen und auf Ihre Hintergrundgrafik setzen.