Google Web Designer Workshop: Grundlagen

Die Beta-Version des Google Web Designer steht mittlerweile zum Download bereit. Grund genug sich das Tool genauer anzuschauen. In einer Workshop Reihe erkläre ich Euch die Handhabung des Google Web Designers und Stelle Euch vor, was bis jetzt möglich ist.

Sobald alle Funktionen zur Verfügung stehen und die Beta-Phase abgeschlossen ist, wird die Reihe natürlich weitergeführt, um Euch auch den letzten Kniff zeigen zu können.

Wofür ist der Google Webdesigner?

Mit dem Google Web Designer könnt Ihr Webseiten, Werbebanner oder Microsites auf HTML5 Basis erstellen. Voreinstellungen gibt es natürlich für Googles eigene Werbeplattformen DoubleClick und AdMob. Eure Entwürfe können aber auch problemlos für andere Plattformen genutzt werden. Die Beta-Version ist derzeit nur für die Erstellung von Werbebannern ausgelegt.

Die Bedienung

Nutzt Ihr bereits Photoshop wird Euch die Oberfläche des Google Web Designer sofort vertraut vorkommen. Auf der linken Seite findet Ihr z.B. Stift-, Text-, Füll- oder 3D-Tools. In der Mitte befindet sich die Arbeitsoberfläche, die Ihr auch jederzeit auf eine Code-Ansicht umschalten könnt. Rechts befinden sich Menü´s für die Farbwahl, Eigenschaften, CSS oder Ereignisse.

Google Web Designer - Oberfläche

Beim Animieren der Inhalte könnt Ihr zwischen einem einfachen und erweiterten Modus wählen, was Anfängern und Profis gleichermaßen entgegenkommt. Wer von Euch schon mal mit Flash gearbeitet hat, wird sich hier schnell zurechtfinden.

Beim ersten Test konnte mich der Google Web Designer trotz früher Beta-Version schon überzeugen. In den folgenden Artikeln werde ich Euch Schritt erklären, wie Ihr einen Werbebanner erstellen und animieren könnt.

Damit Ihr den Schritten folgen könnt, solltet Ihr als Erstes den Google Web Designer herunterladen und installieren.

 

Grundlegende Funktionen von Google Web Designer

Über das Tag-Tool könnt Ihr Div-, Bild-, Video- oder beliebige andere Elemente einfügen. In der Arbeitsoberfläche zieht Ihr das Feld einfach auf die gewünschte Größe.

Google Web Designer - Tag Tool

Verschachtelte Tags…

…sind ebenfalls möglich. Dazu klickt Ihr im linken Menü auf das Auswahl-Tool und macht einen Doppelklick auf den Tag, der übergeordnet sein soll.
Der Tag bekommt dadurch eine rote Umrandung und kann nicht mehr ausgewählt werden. Jetzt einfach das untergeordnete Tag erstellen und den Vorgang so oft wiederholen, wie es für Euch notwendig ist.

Google Web Designer - Verschachtelte Tags

Mit dem Stift-Tool könnt Ihr Gerade- oder Kurvenlinien zeichnen. Über das Setzen von einzelnen Ankerpunkten könnt Ihr auch geschlossene Pfade erstellen. Bei den Eigenschaften auf der rechten Seite vergebt Ihr z.B. Füll- und Linienfarbe oder ändert die 3D-Position und Ansicht der Pfade.

Google Web Designer - Stift Tool

Text, Form und Farbe

Bei dem Text- und Form-Tool stehen Euch die aus anderen Programmen bekannten Möglichkeiten zur Verfügung. Schriftart, breit, kursiv, Link einfügen alles kein Problem. Das Form-Tool hält hier auch keine Überraschungen bereit, bietet aber alles Notwendige.

Google Web Designer: Text- und Form-Tool

Zum Festlegen der Farben von Elementen könnt Ihr auf ein Farbrad, ein Farbsteuerfeld oder ein Farbverlauf-Tool zurückgreifen. Auch das sind bereits bekannte Elemente aus anderen Programmen, allerdings braucht es auch nicht mehr.

Google Web Designer: Farb-Tools

Alles bewegt sich

Für Animationen Eurer Werbebanner gibt es einen einfachen und erweiterten Modus. Im einfachen Modus braucht Ihr Elemente, die animiert werden sollen, nur verschieben, drehen oder die Farbe ändern, der Rest passiert halbwegs automatisch. Für komplexere Animationen müsst Ihr in den erweiterten Modus wechseln. Dort können alle Elemente einzeln animiert werden. Zusätzlich könnt Ihr deren Position in den einzelnen Layern bestimmen und auf die Übergangszeiten und Easing-Funktionen zugreifen.

Google Web Designer: Animations Tool
oben: einfacher Modus
unten: erweiterter Modus

Soweit der Überblick zu den einzelnen Funktionen im Google Web Designer. Beim nächsten Mal beginnen wir mit der Erstellung eines Werbebanners. Habt Ihr noch Fragen zum Google Web Designer, dann stellt Sie einfach im Blog.

VN:F [1.9.22_1171]
Rating: 4.0/5 (9 votes cast)
Google Web Designer Workshop: Grundlagen, 4.0 out of 5 based on 9 ratings

5 Gedanken zu „Google Web Designer Workshop: Grundlagen

  1. Moin, moin,
    mich würden weitere, vertiefende Informationen oder Anleitungen auch interessieren.

    1. Moin Moin Walter,

      weitere Artikel zum erstellen eines Werbebanners und den Komponenten findest du ebenfalls in unserem Blog.
      https://www.checkdomain.de/blog/?s=google+web+designer&submit=Suche

      Leider befindet sich der Google Web Designer immer noch in der Beta-Phase.

      Gruß Arne

  2. Leider kann man sein vorhandenes Grundgerüst nicht importieren.

  3. Die Anleitung ist m.E. didaktisch schlecht. Ein grober Überblick über die Funktionen anhand einer step-by-step-Anleitung mit einer Übungs-Page wäre viel besser als bei jedem Punkt immer zu erklären, was man da alles kann und was man auch noch könnte. Diese Anleitung schafft nur Verwirrung. Da ist es besser selber mit dem Programm zu experimentieren, das werde ich tun.

  4. Hallo,

    danke für die kurze Einführung. Wenn man mit ähnlichen Programmen schon mal gearbeitet hat, fällt es einem wirklich recht leicht, hiermit klar zu kommen. Ich spiele gerade ein bisschen rum mit diesem Google Web Designer, und ich denke, wenn man ein bisschen Übung hat, lassen sich wirklich schöne Animationen damit basteln, nicht nur für Werbeanzeigen. Ich bin gespannt, ob und wie Google das Tool noch weiter entwickelt.

    Meine kleine Schrift-Animation funktioniert in Internet Explorer 10, Firefox 24 und Opera 17. Google Chrome habe ich nicht getestet – dass es dort funktionieren sollte, ist ja eigentlich klar.

    Torsten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.