Google Web Designer Artikelbild
SEO / SEM Webtechniken

Animierte Anzeigen für AdWords mit dem Google Web Designer erstellen

AdWords beschränken sich nicht nur auf Textanzeigen. Mit dem Google Werbenetzwerk können auch grafische Anzeigen auf Webseiten geschaltet werden, die Google Adsense zur Monetarisierung verwenden. Statische Anzeigen sind ja schnell erstellt, aber wie bekommt man Bewegung bzw. Animation hinein? Dafür bietet die Suchmaschine mit dem Google Web Designer selbst eine Lösung an.

Der Name des Programms klingt nach einer Software, um Webseiten zu gestalten. Im Grunde kann man das wahrscheinlich auch tun, genau genommen ist der Google Web Designer aber für die Gestaltung animierter Werbeanzeigen oder großflächiger Animationen konzipiert.
Die fertigen Animationen werden allerdings nicht als Flash, Gif oder Video exportiert. Das Ergebnis ist ein Quelltext aus HTML5 + CSS3 und JavaScript und kann als ZIP-Datei direkt als Anzeige in Google AdWords importiert werden. Das Projekt gibt es am Ende des Artikels auch als Download. Doch der Reihe nach…

Google Web Designer

Die Oberfläche vom Google Web Designer

Um die Software zu nutzen, muss diese natürlich zuerst heruntergeladen und installiert werden. Der Google Web Designer ist kostenlos und kann unter diesem Link heruntergeladen und dann installiert werden.

Nach der Installation kann das Programm gestartet und ein erster Blick auf die Benutzeroberfläche geworfen werden. Wer schon einmal mit eine Grafikprogramm und einem Videoschnittprogramm gearbeitet hat, dürfte einige Elemente wiederentdecken. Wer gänzlich ohne Vorkenntnisse rangeht, dem seien an dieser Stelle ein paar Dinge erläutert:

Der Google Web Designer eignet sich bestens für einfache Animationen. Dabei sollte man jetzt keine Trickfilme vor Augen haben, die in minutenschnelle zusammengeklickt werden können. Mit viel Aufwand wird das auch möglich sein, hier geht’s allerdings um Animationen wie Drehungen, von A nach B usw. Animationen also, während denen das Objekt eine vorgegebene Strecke zurücklegt und dabei nicht selbst animiert werden muss. Dabei bestimmt man immer nur den Startpunkt und den Endpunkt der Animation, die eigentliche Bewegung wird vom Google Web Designer selbst berechnet. Es muss also nicht jeder Frame der Animation mühsam selbst erstellt werden. Bei der Gestaltung der Anzeige heißt es allerdings auch sparsam vorzugehen, denn AdWords erlaubt momentan eine maximale Uploadgröße von 150 KiloByte.

Google Web Designer Arbeitsbereiche
Google Web Designer Oberfläche

Die Oberfläche des Google Web Designer gliedert sich grob in fünf Hauptbereiche. Am linken Bildschirmrand befindet sich die Werkzeugleiste. Hier gibt es Tools für Texte, für Freihandzeichnungen oder 3D-Drehungen eines Objekts. Ist ein Werkzeug ausgewählt, ändern sich die Optionen in der Leiste über der Arbeitsfläche entsprechend mit. Die Arbeitsfläche erklärt sich wohl von selbst. Am rechten Rand blendet das Programm alle wichtigen Informationen und Einstellmöglichkeiten zum momentan ausgewählten Objekt dar.
Mit der wichtigste Arbeitsbereich ist die Timeline am unteren Bildrand. Diese hat gleich zwei Funktionen: Sie sorgt für die Animationen und hier kann auch die Reihenfolge der Ebenen bestimmt werden. Doch dazu gleich mehr.

Um mit dem Erstellen des ersten Banners loszulegen, muss zunächst eine neues Projekt erstellt werden. Das geschieht über Datei -> Neue Datei und es öffnet sich folgender Dialog:

Neue Datei im Google Webdesigner
Neue Datei im Google Webdesigner anlegen

 

Der Abschnitt Google Anzeigen umfasst drei Punkte zur Auswahl: Banner, Expandable und Insterstitial. Banner sind das, was wohl die meisten kennen werden. Diese Anzeigen in verschiedenen Größen werden im Google Display Netzwerk benutzt. Expandable Ads sind ebenfalls Werbebanner, werden beim Überfahren mit der Maus (Hover-Effekt) aber größer, sie expandieren also. Interstitials sind eine für Apps geeignete Werbeform, die als Werbebanner beim Start der App für einige Sekunden angezeigt werden.
In diesem Workshop erstellen wir ein normales Banner, wählen als Umgebung DoubleClick Studio Rich Media und wählen eine Bannergröße von 300×250 Pixeln. Ein Dateiname muss vergeben werden, wer alles in einem bestimmten Ordner gespeichert haben möchte, wählt diesen im Dialogfeld Pfad einfach aus. Den Animationsmodus stellen wir auf „Erweitert“. Auch wenn Einsteiger mit dem einfachen Modus besser zurecht kommen mögen, im erweiterten Modus sind die Möglichkeiten größer und sooooo viel schwieriger ist das auch nicht ;-)
Sind alle Einstellungen korrekt, wird mit einem Klick auf „OK“ das Projekt erstellt und es kann losgehen.

Werbebanner gestalten mit Google Web Designer

Zuallererst wird natürlich eine passende Idee benötigt, die zur Branche und Zielgruppe passt. Als kleines Beispielprojekt erstellen wir eine kleine Anzeige für den Google Web Designer.

Da ein weißer Hintergrund nicht gerade cool aussieht, erstellen wir einen Strahlenhintergrund mit Gimp. Wer mag kann natürlich auch einen anderen Hintergrund wählen, beim Speichern jedoch sollte das Format (GIF, JPG, PNG) gewählt werden, das am wenigsten Speicher benötigt. Um Speicher zu sparen, sollte die Hintergrundgrafik direkt in der passenden Größe erstellt werden, in unserem Fall also 300 x 250 Pixel groß sein.

Ist die Datei gespeichert, kann sie ganz einfach per Drag and Drop aus dem Dateimanager in die Arbeitsfläche gezogen werden. Um die Position zu zentrieren, kann die Grafik mit dem Auswahl-Tool (erstes Werkzeug von oben in der Werkzeugleiste) auf der weißen Arbeitsfläche verschoben werden bis die Grafik an den Rändern „einrastet“.
Dem aufmerksamen Beobachter wird die Bewegung in der Timeline beim Importieren nicht entgangen sein: Web Designer hat für das importierte Bild eine neue Ebene angelegt. Diese ist nun die unterste Ebene und dient als Hintergrund. Beim Erstellen von neuen Objekten, gleich welcher Art, erstellt Google Web Designer wieder neue Ebenen und stapelt den Ebenenhaufen munter weiter.
Um die Position von Ebenen zu ändern, genügt es, sie mit der Maus zu greifen und an die entsprechende Stelle im Ebenenstapel der Timeline zu verschieben.

Google Web Designer Ebene in Timeline
Neue Ebene in der Timeline

Mit Text arbeiten

Auch wenn Bilder mehr als tausend Worte sagen – ohne Text kommt man meistens dann doch nicht weit. Um die Textbearbeitung zu aktivieren, muss in der Werkzeugleiste am linken Rand das Texttools ausgewählt werden. Die Optionsleiste oben wechselt daraufhin in den Textbearbeitungsmodus und bietet die üblichen, gängigen Optionen. Standardmäßig wird der Text in ein DIV-Element gepackt, in der Optionsliste Tag können aber auch andere HTML-Elemente ausgewählt werden. Nach dem Aktivieren des Textwerkzeugs verwandelt sich der Mauszeiger beim Überfahren der Arbeitsfläche in eine Hand mit Fadenkreuz. Bevor mit der Texteingabe begonnen werden kann, muss das Element (in unserem Fall das DIV) zunächst aufgezogen werden. Der blaue Rahmen markiert die Größe des DIV-Elements. Ist das getan, kann mit der Texteingabe begonnen werden und dieser dann beliebig formatiert werden. Google Web Designer stellt die gängigsten Schriftarten zur Verfügung und erlaubt über die bereits erwähnte Funktionsleiste oben Einstellungen für Schriftgröße, Farbe usw.

Den Text ins Bild gleiten lassen

Um den eben geschriebenen Text nun ins Bild gleiten zu lassen, muss dieser zunächst außerhalb des Arbeitsbereichs platziert werden. Je nach dem, ob der Text von oben, unten, links, rechts oder schräg kommen soll, muss er auch verschoben werden. Im Beispiel soll der Text von links einfliegen und das ziemlich am Anfang der kompletten Anzeigenanimation. Wem die Positionierung mit der Maus zu ungenau ist, kann Objekte auch mit den Pfeiltasten verschieben.

Google Web Designer - Textfeld aus Arbeitsbereich
Google Web Designer – Textfeld neben Arbeitsbereich platzieren

1. Wenn das Textfeld außerhalb der Arbeitsfläche platziert ist, haben wir den Beginn unserer Animation. Da Google Web Designer das aber nicht weiß, müssen wir dem Programm das durch das Setzen eines Keyframes mitteilen. Ein Keyframe ist gewissermaßen ein Stopper in der Animation. Er enthält Informationen zur Position und Größe des Elements – daraus errechnet das Programm die Bewegung.

2. Um einen Keyframe zu setzen, muss in der Timeline die Textebene ausgewählt werden. Dann klickt man in der Zeile dahinter mit der rechten Mautaste und wählt im Kontextmenü „Keyframe einfügen“.

 

Google Web Designer Keyframe setzen
Keyframe setzen

In der Zeile entsteht nun ein halbtransparenter Balken mit aufeinander zeigenden, blauen Pfeilen an jedem Ende. Dieser Balken zeigt die Länge der Animation, der nach rechts zeigende Pfeil ist der Keyframe der die Informationen des Objekts zum Beginn der Animation enthält, der nach links zeigende Pfeil enthält die Informationen vom Ende der Animation. Die Länge des Balkens zeigt nur wenige Zehntelsekunden an und beginnt direkt am Anfang der kompletten Animation. Um das Gleiten des Textes später beginnen zu lassen, kann der Balken einfach ein Stück nach rechts verschoben werden, auch die Länge kann am Ziehen der Pfeile definiert werden – ganz wichtig für spätere Feinjustierungen.

3. Nun wird es auch schon Zeit für die Animation. Den Startpunkt haben wir durch das Platzieren des Elements bereits festgelegt, nun ist der Endpunkt dran. Um die Position des Textobjekts nun für den Endpunkt festzulegen, wird es einfach wieder in das Bild zurückgeschoben. Dabei muss beachtet werden, dass am Keyframe nur das rechte Dreieck blau markiert ist. Wenn die richtige Endposition passt, kann das Ergebnis mit einem Klick auf den Vorschaubutton angesehen werden. Zur Vorschau öffnet der Google Webdesigner einen neuen Tab im Chrome-Browser. Dort wird die Animation einmal abgespielt. Möglich ist aber auch Vorschau direkt im Google Web Designer (Button Wiedergabe).

Google Web Designer Endpunkt selektiert
Den Endpunkt auswählen

4. Der Text gleitet zu schnell oder zu langsam? Dann kann einfach durch verlängern oder verkürzen des Keyframes die Dauer der Animation verändert werden. Start- und Endpunkt der Animation bleiben dabei erhalten.

Das ist das Grundprinzip für die Animationen. Startpunkt -> Dauer der Animation -> Endpunkt. Wer die Werkzeugleiste durchgeht, findet auch Möglichkeiten für 3D-Bewegungen oder auch für Freihandlinien.

Als zweiter Schitt soll nun ein weiterer Text von rechts in die Anzeige hineingleiten und dabei den anderen Text wieder nach links „wegschieben“. Dazu wird einfach ein neuer Text erstellt oder durch Bearbeiten -> Kopieren -> Einfügen der bisherige einfach dupliziert. Das Kopieren hat den Vorteil, dass die Größe des DIV-Elements mit übernommen wird.
Der neue Text wird rechts von der Arbeitsfläche so positioniert, dass beide Elemente auf der gleichen Höhe stehen. In der Timeline wird dann für den neuen Text ein neuer Keyframe eingefügt. Dieser sollte die identische Länge haben, wie der von Text 1, die Animationsdauer also identisch sein. Wie beim ersten Objekt ist Startpunkt außerhalb des sichtbaren Bereichs, der Endpunkt wird deckungsgleich mit dem dem ersten Objekt gesetzt.

Damit der zweite Text den ersten verschiebt, wird für den ersten Text eine weitere Animation benötigt. Auf der entsprechenden Ebene muss dafür hinter dem ersten Keyframe ein weiterer hinzugefügt werden. Dadurch wird der Bestehende verlängert. Die Zwischenstationen in den Animationen werden durch Rauten dargestellt. Durch markieren der Raute kann die Position des Objekts festgelegt werden.

Google Web Designer Keyframes
Rauten stehen für Zwischenschritte

Um den ersten Text von links reinfahren zu lassen, eine gewisse Anzeigedauer zu erreichen und den Text vom anderen Text wieder wegschieben zu lassen, werden insgesamt 4 Keyframes benötigt.

Keyframe 2 und 3 sollten also die gleiche Position des Objekts beinhalten. Keyframe 3 startet kurz nachdem die Animation des zweiten Textes startet, dadurch entsteht der Effekt des „Wegschiebens“.

Damit der zweite Text nach kurzer Anzeigedauer auch wieder verschwindet, benötigt er auch 4 Keyframes. Wer Probleme hat, kann unten das Beispielprojekt herunterladen, im Webdesigner öffnen und die Positionen der Objekte an den Keyframes überprüfen.

Anzeige in AdWords importieren

Wenn die Anzeige fertig gestaltet ist, kann diese in Adwords importiert werden. Dazu muss die Anzeige über Datei -> Veröffentlichen gespeichert werden.
Im folgenden Optionsfenster ist eigentlich bereits alles korrekt eingestellt. Google Web Designer erstellt aus allen Dateien im Projekt eine ZIP-Datei, die im AdWords-Konto als Image Anzeige importiert werden kann.

 

Google Web Designer Veröffentlichen
Der Export-Dialog

Google Web Designer Adwords anzeige erstellenVoraussetzung für einen Import in AdWords ist natürlich eine entsprechende Kampagne mit Display-Anzeigen im Werbenetzwerk. Ist diese ausgewählt und der Reiter Anzeigen aktiviert, muss durch einen Klick auf den roten Button „+ Anzeige“ und anschließender Auswahl des Punktes „Image-Anzeige“ eine neue Anzeige erstellt werden. Danach öffnet sich ein Dialogfeld mit der Option „Anzeige Hochladen“. Wird diese ausgewählt, muss die eben vom Google Web Designer exportierte Zip-Datei einfach in das nun folgende Feld gezogen werden, oder über den Button „Anzeige hochladen“ ausgewählt werden.

Der Upload dauert je nach Dateigröße ein wenig. Das Adwords-System zeigt die Anzeige nach Fertigstellung aber direkt an. Nun müssen für die Anzeige noch ein Name, die angezeigte URL und die Ziel-URL angegeben werden. Nach einem Klick auf „Speichern“ wird die Anzeige nun zunächst von Google geprüft und freigegeben.

Wer es bis hierher geschafft hat, hat nur wenige Funktionen des Programms kennen gelernt. Obwohl noch eine Beta-Version, verfügt es doch schon über vielfältige Funktionen. Vereinzelt kommt es vor, dass der Export nicht ordentlich funktioniert oder Schriften nicht korrekt übernommen werden. In dem Fall muss man dann nochmal ran und überarbeiten. Oder im Schlimmsten Fall von vorn anfangen…

Beispieldatei zum Download: Webdesigner.zip

1 Kommentar zu “Animierte Anzeigen für AdWords mit dem Google Web Designer erstellen

  1. Pingback: Animierte Anzeigen für Google AdWords erst...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere die Datenschutzhinweise.