Haupt / Wie Man

HTML5 animiertes Logo-Design leicht gemacht

Wir sehen überall Marken, die die Wände und Produkte des täglichen Lebens schmücken. Sie sind zu einer weiteren Schicht in unserem Sichtfeld geworden. Diejenigen, die dazu neigen, mehr zu beleuchten als andere, haben ein Gefühl von Demut und Resonanz - ihre Erzählungen haben etwas Dynamisches und Menschliches.

Mir ist oft aufgefallen, dass sich die Marken, in die ich mich verliebe, mit der Zeit ständig ändern. Tief im Inneren werden wir uns jedoch nie wirklich von einem statischen Gerät lösen. Vielmehr werden wir seinen Status in unseren sozialen Blasen weiterentwickeln.

Der Begriff „dynamisches Branding“ gibt es bereits seit einigen Jahren - vor allem von Branding-Spezialisten wie dem globalen Kreativunternehmen Moving Brands. Heutzutage besitzt fast jeder ein digitales Gerät, und in diesem Wissen können wir beginnen, unsere Designansätze zu berücksichtigen, damit unsere Marken atmen und mehrere Persönlichkeiten annehmen können.

Game Changer

Im Folgenden stelle ich Ihnen Adobe Edge Animate CC vor - ein Game Changer in meinen Augen. eine, die die Fähigkeit hat, ihr Gewicht mit den großen Perücken der Design-Software herumzuwerfen.

Eine der bemerkenswertesten Facetten von Edge Animate CC besteht darin, dass der Benutzer Erfahrungen erstellen kann, die mit den meisten gängigen Mobilgeräten und Browsern kompatibel sind. Dies bedeutet, dass Ihr Design von jeder Person zu nahezu jeder Zeit und auf jede Art und Weise gesehen werden kann du hast es beabsichtigt.

Am Beispiel des hier vorgestellten Projekts werde ich Sie durch den gesamten Prozess der Erstellung eines Logos für eine fiktive Kreativagentur namens Mind Altering Design, kurz MAD, führen. Ich animiere es dann und wende es mit dem Muse CC von Adobe auf eine Website an.

01. Skizzieren

Wie bei jedem Projekt beginne ich immer mit einem guten Kritzeln, und für dieses spezielle Projekt habe ich zunächst den Stil des Logos in meinem Skizzenbuch herausgefunden. Dies ist wirklich eine Sitzung, die Ideen generiert. Hoffentlich können Sie sehen, wie ich zu dem endgültigen Konzept gekommen bin, das ich in Illustrator CC übernehmen werde, wenn ich es ausgearbeitet habe.

02. Skizzieren der Animation

In der nächsten Phase wird grob skizziert, wie die verschiedenen Elemente potenzielle interaktive Bewegungen animieren und planen. Es ist praktisch, dies früh im Prozess zu tun, anstatt nur in Edge Animate CC einzutauchen. Um ein animiertes Logo richtig zu machen, geht es oft genauso um gute Planung wie um alles andere.

03. In Illustrator CC

Hier habe ich begonnen, die Punkte in Illustrator CC zu bearbeiten. Wenn es ein komplizierteres Design wäre, hätte ich die Skizze möglicherweise in Illustrator importiert und so gearbeitet. Da dies ein einfacherer Ansatz ist, kann ich ihn direkt in Illustrator ausführen. Hier habe ich begonnen, ein 3x3-Spalten-Punktraster zu erstellen, mit dem ich den Typ erstellen werde.

04. Logo Struktur

Wenn das Punktraster fest sitzt, ist es an der Zeit, die kreisförmigen Elemente zu subtrahieren, um die Struktur des MAD-Logos zu erstellen. Ich habe dies zunächst in Graustufen durchgeführt, um mir eine Vorstellung davon zu geben, ob das Konzept funktioniert, bevor ich eine Farbpalette hinzufüge.

05. Farbpalette auswählen

Ich habe eine Reihe subtiler Farben ausgewählt, um sie an den fünf Elementen auszurichten, aus denen die einzelnen Buchstaben des Logos bestehen. Wenn Sie Probleme mit einer Farbpalette haben, probieren Sie Adobe Kuler aus - entweder die App für das iPhone oder die hervorragende Website unter https://kuler.adobe.com. Sie können Ihre Paletten über Kuler und Illustrator CC hinweg synchronisieren. Weitere Informationen hierzu finden Sie auf Seite 68.

06. Anwenden der Palette

Wenn die Farben ausgewählt sind, ist es an der Zeit, sie auf das Logo anzuwenden, wobei jeder Buchstabe aus Gründen der Konsistenz dieselbe Behandlung erhält. Wenn Sie Kuler verwendet haben, können Sie das Kuler-Bedienfeld in Illustrator CC öffnen und Ihre Farben direkt von dort aus hinzufügen. Es ist eine großartige Möglichkeit, sich von der realen Welt inspirieren zu lassen und sie in Ihre Arbeit zu integrieren.

07. Zeichenflächen für Vermögenswerte

Als Nächstes ist es an der Zeit, Ihre Assets für die Animation in Edge Animate CC vorzubereiten. Dazu müssen wir jede Form mit einer eigenen Zeichenfläche einrichten, damit sie einzeln exportiert werden kann. Verwenden Sie dazu das Zeichenflächenwerkzeug, erstellen Sie Zeichenflächen und speichern Sie jede Zeichenfläche einzeln.

08. Speichern im richtigen Format

Beim Erstellen von Assets für Edge Animate CC stehen Ihnen einige Optionen zur Verfügung. Die beliebtesten finden Sie im Dialogfeld 'Für Web speichern' (Datei> Für Web speichern). Für diese Art von Projekten sind GIF und PNGs am besten geeignet, Sie können sie jedoch auch im JPEG-Format speichern.

09. SVG Vorteile

Edge Animate CC kann auch das XML-basierte Dateiformat SVG lesen, ein Vektorformat, das für seine winzigen Dateigrößen bekannt ist. Wenn Ihr Projekt vollständig vektorbasiert ist, sollten Sie Ihre Assets in diesem Format über Datei> Speichern unter speichern und dann SVG auswählen.

10. Gehen Sie nun zu Edge Animate CC

Jetzt ist es Zeit, sich zu animieren. Beim Öffnen von Edge Animate CC müssen Sie zunächst die Größe Ihrer Bühne festlegen. Für dieses spezielle Projekt stütze ich mich auf ein Header-Logo für ein Website-Portfolio. 320x114 Pixel funktionieren sehr gut, aber die Größe hängt natürlich von Ihrem eigenen Projekt ab.

11. Importieren von Assets

Um Ihre Assets in Edge zu integrieren, navigieren Sie zu Datei> Importieren und wählen Sie die bereits erstellten Assets aus. Stellen Sie sicher, dass Ihre Assets korrekt benannt und in entsprechend gekennzeichneten Ordnern abgelegt sind. Es wird es viel einfacher machen, wenn Sie sie zu irgendeinem Zeitpunkt wieder finden müssen.

12. Grundsteinlegung

Wie bereits erwähnt, ist es wichtig, dass Sie Ihre Animation planen, bevor Sie loslegen (obwohl Sie natürlich auch unterwegs experimentieren können). Aus diesem Grund ist das erste Asset, mit dem ich beginne, ein JPEG der endgültigen Komposition des Logos, wodurch die Deckkraft verringert wird, damit ich es besser bearbeiten kann. Dies dient als Leitfaden, während Sie die Bausteine für die Animation erstellen.

13. Inszenierung der Animation

Wenn Sie die ersten kreisförmigen Assets mit dem Befehl Importieren einfügen, werden sie direkt außerhalb des Staging-Bereichs platziert, sodass sie von oben abgelegt werden können. Genau wie in Illustrator, After Effects oder sogar InDesign können Sie das Pasteboard verwenden, um Ihre grafischen Elemente zu halten, bevor Sie sie animieren.

14. Synchronisieren Sie alles

Wenn der erste Kreis platziert ist und die Animation beginnt, können die restlichen Elemente jetzt synchron mit der JPEG-Anleitung eingefügt und angeordnet werden. Wenn Sie in Illustrator CC die Größe von Grafiken falsch bemessen haben und deren Größe ändern müssen, können Sie dies in Edge Animate mit den normalen kostenlosen Transformationswerkzeugen problemlos tun.

15. Bleiben Sie in der Timeline stecken

In der Zeitleiste geschieht die ganze Magie, insbesondere wenn die Modi Auto Keyframe (1) und Auto Transition (2) ausgewählt sind. Diese füllen die Lücken im Laufe der Zeit: Stellen Sie sich das wie ein Tweening in Flash vor. In der Tat funktioniert Edge Animate CC sehr ähnlich wie After Effects CC und präsentiert Ihre grafischen Elemente visuell auf der Zeitachse. Wenn Sie damit vertraut sind, sind Sie einen Schritt voraus.

16. Keyframing-Optionen

Die Seitenwand ist außerdem mit Keyframing-Optionen ausgestattet, einschließlich Drehbewegungen (1) und Beschneidungsoptionen (2). Experimentieren Sie mit diesen.

17. Bewegungspfad

Ein weiteres fantastisches Merkmal von Edge Animate CC ist die Bewegungspfadfunktion. Der Bogen Ihrer Pfade kann vollständig angepasst werden, indem Sie Bézier-Punkte entlang der Achsen hinzufügen.

18. In Symbole konvertieren

Nachdem alle Buchstaben animiert sind, können wir alle Ebenen in jedem Buchstaben auswählen und in ein Symbol konvertieren, das durch das Chevron-Segment in der Zeitleiste dargestellt wird.

19. Einfacher Code

Durch Klicken in die geschweiften Klammern neben einem Element wird auf das Codierungselement von Edge zugegriffen. Alternativ können Sie Cmd / Ctrl + E drücken, um den vollständigen Code anzuzeigen. Hier füge ich eine einfache JavaScript-Einstellung 'Stopp' hinzu, wenn das Logo seine Animation abgeschlossen hat (wenn der Abspielkopf das Ende der Zeitleiste erreicht hat - wir möchten nicht, dass dies wiederholt wird). Klicken Sie einfach auf die Schaltfläche Stopp im Codedialog mit dem Abspielkopf am Ende der Animation. Das Timing wird angezeigt (in diesem Fall „Trigger @ 2634 ms“). Es wird einfach eine sym.stop () -Funktion hinzugefügt.

20. Einfacherer Code

Neben dem Logo, das beim Laden der Website animiert wird, soll jeder Buchstabe animiert werden, wenn der Benutzer in einem Desktop-Browser darüber fährt. Wir können dies einfach tun, indem wir einer unsichtbaren Rechteckform über jedem Buchstaben einen Mouseover-Befehl hinzufügen.

21. Und ... zurückspulen

Ein Mouseout rundet das Bild ab und spult den Buchstaben in eine lesbare Struktur zurück. Dies erfolgt mit der Funktion sym.playReverse (), die über den oben gezeigten Dialog hinzugefügt werden kann.

22. Exportieren als HTML5

Wenn Sie mit Ihrer Animation zufrieden sind und alle Timings und Funktionen überprüft haben, klicken Sie auf die Schaltfläche 'Exportieren'. Mit der ersten Option können Sie ein voll funktionsfähiges HTML5-Dokument exportieren. Dies ist nützlich, um die Animation schnell in einem Browser zu testen. Gehen Sie zurück und nehmen Sie gegebenenfalls Änderungen vor.

23. OAM-Format

Die zweite verfügbare Option (Animate Deployment Package) ist das, wonach wir in diesem speziellen Workflow suchen. Dadurch wird eine Datei im OAM-Format (Edge Animate Composition) exportiert, die von InDesign und Muse gelesen werden kann. Auf diese Weise können Sie Ihre Animation in ein Site-Design oder eine digitale Publikation integrieren.

24. Aufschlüsselung der Dateien

Im obigen Screenshot sehen Sie eine Aufschlüsselung der Dateien, die beim Speichern und Exportieren aus Edge Animate erstellt wurden - einschließlich der .an-Arbeitsdatei (der ursprünglichen Edge Animate-Datei) und der .oam-Datei. Edge Animate generiert auch eine HTML-Datei, sodass Sie Ihre Animation erneut schnell in einem Browser in der Vorschau anzeigen können.

25. Platzieren in Muse CC

Da unsere MAD-Portfolio-Site gut zusammenpasst, ist es Zeit für den letzten Schliff - unsere OAM-Animationsdatei in den Header zu importieren. Navigieren Sie in Muse CC zur Registerkarte Design, wählen Sie Datei> Platzieren und wechseln Sie zu der OAM-Datei, die Sie in den vorherigen Schritten generiert haben. Positionieren Sie Ihr animiertes Logo und Sie sind fertig.

26. Vorschauseite

Auf der Registerkarte 'Vorschau' von Adobe Muse CC können Sie schnell und einfach sehen, wie die interaktiven Elemente funktionieren, wenn ein Benutzer den Mauszeiger über die Animation bewegt. Wenn etwas nicht stimmt, können Sie zu Edge Animate CC zurückkehren, das Design optimieren und erneut importieren. Jetzt gibt es nur noch eins zu tun ...

27. Zum Testen veröffentlichen

Der letzte Schritt besteht darin, Business Catalyst zu verwenden, um Ihre Site zum Testen zu veröffentlichen. Gehen Sie zu Datei> In Muse CC veröffentlichen und folgen Sie den Optionen, um eine temporäre Business Catalyst-Site zu erstellen (die 30 Tage online bleibt). Als Referenz finden Sie die Arbeitsversion dieses Projekts online unter: www.james-oconnell.com/MAD .

Wörter :: James O'Connell

O'Connell ist ein preisgekrönter Kreativer mit globaler Reichweite. Seine Liebe zum Detail und seine farbenfrohe Fantasie haben ihm Kunden wie Time Out NY, BBC und das Net Magazine eingebracht.

Dieser Artikel wurde ursprünglich in veröffentlicht Der ultimative Leitfaden für Adobe Creative Cloud .