Grafiken vorbereiten

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

Sie müssen ein Key Visual-Grafik erstellen, die über dem Countdown Timer angezeigt wird und eine zweite Grafik, die den Hintergrund des Countdown Timers bildet.

Die Key Visual-Grafik muss diese Bedingung erfüllen:

• Breite zwischen 100 und 800 Pixeln

Die Hintergrund-Grafik muss diese Bedingungen erfüllen:

• Breite zwischen 100 und 800 Pixeln (sollte der Breite der Key Visual-Grafik entsprechen)
• höchstens 256 Farben (andernfalls werden Farben später verfälscht dargestellt)
• sollte einfarbig sein oder ein einfaches Bild enthalten (wird in eine animierte gif-Datei mit 60 Frames konvertiert; diese Datei darf nicht größer werden als 1,5MB)

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.

   

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.

   

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.

   

   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.

   

   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.

   

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.

   

   

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.

   

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.