Share
Was Sie erstellen werdenMit Adobe Illustrator und Adobe Photoshop ist das Animieren von Vektor-Icons und -Designs ein Kinderspiel. Erstellen Sie einfach einfache flache Symbole, und importieren Sie sie zur einfachen GIF-Erstellung in Photoshop. Wir erstellen drei animierte Icons und erkunden ein paar Techniken, um flüssige, einfache Animationen zu erstellen.
Brauchen Sie eine Inspiration? Entdecken Sie weitere unglaubliche Vektor-Icons auf Envato Market und Envato Elements.
Ein ... kreieren Neues Dokument im Adobe Illustrator. Ich werde verwenden Adobe Illustrator CC, Sie können diese Techniken und Designs jedoch leicht an frühere Versionen anpassen.
Mit dem Rechteckwerkzeug (M), Zeichne ein hellblaues Rechteck. Wählen Sie die beiden unteren Ankerpunkte mit Direktauswahl-Tool (A), und ziehen Sie die Live-Ecken nach innen, um diese beiden Ecken abzurunden. Verwenden Sie die Stiftwerkzeug (P) eine gestrichelte Linie in mittlerem Blau zu zeichnen, die die Öffnung des Umschlags definiert.
Zeichnen Sie entweder zwei Linien mit Stiftwerkzeug oder der Liniensegment-Werkzeug (/) die treffen sich in der Nähe der Mitte des Umschlags. Erweitern deine Schläge unter Objekt, und benutze die Form-Builder-Werkzeug (Shift-M) um die nicht schneidenden Teile der Linien aus dem Rechteck auszuwählen, um sie zu löschen. Dies ist unser grundlegendes Umschlagobjekt.
Kopieren (Control-C) und Einfügen (Kontrolle-V) das Umschlagdesign. Zeichnen Sie ein Dreieck von der oberen Ecke zur oberen Ecke, um den Umschlag zu öffnen. Wählen Sie das Dreieck bei gedrückter Taste Alt, und ziehen Sie ein Duplikat des Dreiecks heraus. Drehen (R) um die Öffnung des Umschlags zu erstellen, und stellen Sie die Füllfarbe auf ein dunkleres Blau. Aus Gründen dieser Demonstration fehlen meine Linien im untenstehenden Design, werden aber in der endgültigen Version verwendet.
Jetzt sollten Sie zwei Umschläge haben: einen offenen und einen geschlossenen. Unser Ziel ist es, mehrere Iterationen von Hüllkurven zu erstellen, die die Lücke zwischen der geschlossenen und der offenen Hüllkurve für unsere letzte Animation überbrücken. Gruppe (Control-G) zusammen alle Komponenten Ihres Umschlags.
Duplikat der offene Umschlag Verwenden Sie die Direktauswahlwerkzeug Um den oberen Ankerpunkt des oberen Dreiecks zu ergreifen, ziehen Sie ihn nach unten, bis er das dunkle Dreieck fast vollständig bedeckt. Duplikat ziehen Sie den unteren Punkt des helleren Dreiecks etwas nach oben, damit der Umschlag so aussieht, als würde er sich mehr öffnen. Wir werden weiterhin jeden Umschlag duplizieren und das Dreieck nach oben verschieben, bis es wieder zum Ausgangspunkt zurückkehrt.
Am Ende habe ich, einschließlich der geschlossenen und offenen Umschläge, neun Umschläge für mein animiertes Symbol. Sie können die Platzierung der Dreiecke und ihrer Ankerpunkte unten überprüfen. Vergewissern Sie sich, dass jeder Umschlag separat gruppiert ist, damit er problemlos importiert werden kann Adobe Photoshop später.
Zeichnen Sie ein hellgelbes Rechteck und Kopieren und Einfügen es über jedem Umschlag. Das Ziel ist, das Rechteck beim Öffnen in gleichmäßigen Schritten nach oben zu bewegen. Ich entschied mich für sieben Rechtecke für mein Design.
Wählen Sie den ersten Umschlag und das überlappende Rechteck aus. Verwendung der Form-Builder-Werkzeug, Wählen Sie den Teil des gelben Rechtecks aus, der das Innere des Umschlags schneidet. Löschen Sie den nicht schneidenden Teil des gelben Rechtecks, sodass nur noch ein kleines Dreieck des gelben Rechtecks angezeigt wird. Wiederholen Sie diese Technik für die anderen Umschläge.
Definieren Sie die gelbe Buchstabenform für jeden Umschlag. Sie können sehen, wie meine Briefe mit dem entsprechenden Umschlag unten aussehen.
Zeichnen Sie mehrere dünne Rechtecke, um auf dem Brief geschriebene Linien zu simulieren. Ausrichten und Verteilen die Rechtecke in der Ausrichten Panel. Dann, Vereinen sie in der Pfadfinder Panel.
Platzieren Sie mehrere Rechtecksätze über jedem Umschlag. Beachten Sie, dass einige Buchstaben mehr Zeilen aufweisen als andere. Ich habe sechs meiner neun Umschläge mit Rechtecksätzen versehen.
Wählen Sie die Buchstabenform und die Rechtecke aus. Verwendung der Form-Builder-Werkzeug, Wählen Sie den nicht überlappenden Teil jedes Rechtecks aus und löschen Sie sie. Wiederholen Sie diesen Schritt für alle Ihre Umschläge.
Gruppe zusammen um jeden Umschlag und seine Komponenten, so dass Sie insgesamt neun separate Gruppen haben. Jetzt können wir unser Design animieren!
Öffnen Adobe Photoshop und ein ... kreieren Neues Dokument. Da wir eine einfache Webgrafik erstellen, habe ich meine festgelegt Dokumentgröße beim 72 dpi (kein Grund für eine höhere Auflösung, da wir unsere Druckvorlagen nicht drucken), 250 px Breite und 300 px Höhe. Sie können eine größere oder kleinere Datei erstellen, wenn Sie möchten, und Ihr Dokument auch beschneiden, wenn Sie dies benötigen.
Im Adobe Illustrator, Kopieren jede Umschlaggruppe und Einfügen sie in deine Adobe Photoshop dokumentieren. Wenn Sie die Bildgröße ohne Qualitätsverlust ändern möchten, fügen Sie jede Gruppe als ein Intelligentes Objekt. Wenn Sie mit der Größe zufrieden sind, Einfügen sie in eine neue Ebene als Pixel.
Stellen Sie sicher, dass jedes Objekt nacheinander geschichtet ist. Außerdem möchten Sie alle neun Ebenen und auswählen Ausrichten sie zu ihren Mitten und Unterkanten.
Öffne das Zeitleiste Panel und erstellen Sie ein Neue Frame-Animation. Beginnen Sie mit der geschlossenen Umschlagebene (blenden Sie die anderen aus) und erstellen Sie eine Neuer Rahmenund stellen Sie die Verzögerung des Frames auf 0,1 Sekunden. Blenden Sie für jedes Bild die nächste Ebene ein und blenden Sie die vorherige Ebene aus, bis der Umschlag geöffnet ist. Stellen Sie dann die Verzögerung auf 0,2 bis 0,5 Sekunden.
Wiederholen Sie das Ausblenden und Ausblenden der Ebenen. Gehen Sie diesmal jedoch in umgekehrter Reihenfolge vor, damit der Umschlag wieder geschlossen wird. Stellen Sie sicher, dass es sich in einer Schleife befindet "Für immer"So öffnet und schließt sich die Animation.
Lehnen Sie sich zurück und schlagen Sie abspielen auf der Zeitleiste Panel, um Ihre GIF-Schleife zu sehen. Sie können die Bildverzögerungen für ein langsameres oder schnelleres GIF einstellen und die Dauer des geschlossenen oder des offenen Umschlags im ändern Zeitleiste Panel. Gehen wir weiter zu den anderen Symbolen und zusätzlichen Techniken zum Animieren.
Zurück in Adobe Illustrator, Zeichnen Sie entweder in einem neuen Dokument oder auf einer neuen Ebene einen Kreis mit Ellipsenwerkzeug (L). Dann überlappen Sie den Kreis mit einem kleinen Dreieck und Vereinen Die zwei Formen zusammen: Dies ist Ihre grundlegende Sprechblase. Zeichnen Sie drei Kreise für Ellipsen, die später in der Animation verwendet werden sollen.
Kopieren und Einfügen die Sprechblase und Reflektieren es über einem Vertikale Achse. Ändern Sie die Farbe der zweiten Blase in einen dunkleren Farbton. Rahmen die Ellipsen nach unten, damit sie in die Sprechblase passen. Als nächstes fügen wir etwas Text hinzu.
Zeichnen oder tippen Sie einfache Wörter wie "hey" und "hi" aus. Entweder verwenden Sie eine handgeschriebene Schriftart, die Sie mögen, oder zeichnen Sie jeden Buchstaben mit dem Zeichen Pinselwerkzeug (B) mit einem Standardkalligrafiepinsel. Stellen Sie sicher, dass Text oder Striche in Objekte konvertiert werden und dass jeder Buchstabe ein separates Objekt ist.
Geben oder zeichnen Sie einfache Text-Emoticons innerhalb der Chat-Blasen. Alternativ können Sie auch Emojis zeichnen. Es ist Ihr Chat-Symbol und der Gesamtstil liegt bei Ihnen. Insgesamt gibt es 14 verschiedene Komponenten: drei Ellipsen, fünf Buchstaben, zwei Sprechblasen und vier Objekte, die Emoticons erstellen. Jeder wird sein Kopiert und Eingefügt in ein neues Dokument in Adobe Photoshop als separate Schicht.
Im Adobe Photoshop, Einfügen Jede der 14 Symbolkomponenten wird als neue Ebene in Ihr Dokument eingefügt. Gruppe zusammen Objekte wie ich unten in der getan habe Schichten Panel: Die Komponenten für jedes Wort, Emoticon, Ellipsen und Chat-Blasen. Das hält dein Dokument organisiert und animiert Ihre GIF insgesamt einfacher.
Zu Beginn möchte ich, dass meine erste Sprechblase von links hereinkommt. Ich habe alle Komponenten außer der ersten Chat-Blase ausgeblendet und für den ersten Bereich außerhalb meines Dokumentrahmens platziert Zeitleiste Rahmen. Innerhalb von sieben Frames habe ich meine Chatblase von der linken Seite in die Mitte des Dokuments verschoben. Sie können eine Ebene für jeden neuen Frame verschieben und ändern, ohne den vorherigen Frame zu beeinflussen.
Sobald die Sprechblase sichtbar ist, starte ich den "Tipp" -Effekt. Jede Ellipse ist in der ersten Sprechblase nacheinander sichtbar, gefolgt von der ersten Nachricht "hi". Dann fange ich an, die zweite Chatblase in den Rahmen zu schieben, während die erste Chatnachricht (gruppiert im Schichten Panel als "hi") wird in seiner Deckkraft (um 20% jeden Frame) in der Schichten Panel.
Hier ist ein Blick auf meine Zeitleiste Panel für die gesamte GIF. Ich habe vorbei 30 Bilder insgesamt und die meisten von ihnen haben eine 0,1 Sekunden Verzögerung. Einige Komponenten, wie die Ellipsen, gehen bei a "Punkt, Punkt, Punkt" ein 0,3 Sekunden Verzögerung, Das Verblassen von Wörtern oder das Eingeben von Buchstaben und Emoticons ist jedoch schneller, wenn dies möglich ist. Sie können Ihre bevorzugten Verzögerungen nach Belieben anpassen. Sie möchten, dass das Tippen reibungslos und lesbar ist, ohne zu langsam und abgehackt zu sein.
Sie können sich meine endgültige Animation unten ansehen: Die erste Chatblase tritt ein und beginnt zu tippen, die zweite Blase antwortet und beide senden Emoticons und bewegen sich dann wieder aus dem Bild heraus. Wir müssen ein letztes animiertes Symbol erstellen, das die zuvor verwendeten Ideen und Techniken kombiniert.
Im Adobe Illustrator, Zeichne ein Rechteck. Wählen Sie die oberen zwei Ankerpunkte mit Direktauswahlwerkzeug, und ziehen Sie die Live-Ecken innere. Zeichnen Sie ein zweites, dunkleres Rechteck unter dem ersten und runden Sie die unteren Ecken ab. Beachten Sie, dass das zweite Rechteck kleiner als das erste ist, aber beide die gleiche Breite haben.
Zeichnen Sie in dunkelgrau ein dünnes Rechteck für die Sofortbildöffnung in der unteren Hälfte der Kamera. Zeichnen Sie abgerundete Rechtecke und einen Kreis für das Objektiv der Kamera, den Sucher und weitere Designs auf das Gesicht der Kamera.
Fügen Sie einen roten Kreis und einen dunklen, warmen grauen Kreis für den Kameraknopf hinzu. Für das Objektiv stapeln Sie graue und blaue Kreise übereinander und wechseln dabei zwischen hell und dunkel. Verwenden Sie die Direktauswahlwerkzeug um den oberen Ankerpunkt des inneren Kreises nach unten zu drücken, damit die Linse glänzend aussieht (siehe Design unten).
Für die Shutter-Animation wollte ich eine einfache Animation zum Öffnen und Schließen. Sie können natürlich auch komplexere Formen erstellen, wenn Sie möchten. Für meinen Fensterladen habe ich einen dunkelgrauen Kreis gezeichnet. Kopieren und Einfügen den Kreis und halbieren Sie ihn (überlappen Sie den horizontalen Mittelpunkt des Kreises mit einem Liniensegment und dann Teilen die zwei formen in der Pfadfinder Panel).
Kopieren und Einfügen die beiden Kreishälften. Bewegen Sie jede Hälfte von der Mitte weg und verwenden Sie die Direktauswahlwerkzeug um die unteren zwei Ankerpunkte zu verschieben, um jeden Kreis zur Hälfte leicht zu zerquetschen. Wiederholen Sie den Vorgang für insgesamt sechs Iterationen, bei denen der Verschluss vom geschlossenen zum offenen Zustand gebracht wird. Alle sechs dieser Gruppen werden sein Kopiert und Eingefügt in die Photoshop Dokument während der Animationsphase.
Jetzt können wir an dem Sofortfilm arbeiten. Im Wesentlichen zeichnen Sie eine Reihe von Rechtecken, die immer größer werden. Beginnen Sie mit einem dünnen, hellgrauen Rechteck in der Mitte der unteren Hälfte des Kamerasymbols. Nach ein paar Rechtecken fügen Sie dem hellgrauen ein dunkelgraues Rechteck hinzu. Beachten Sie, wie beide länger und länger werden.
Hier ein letzter Blick auf alle Kamerakomponenten: die Kamera, die sechs Shutterformen und die acht (einschließlich der auf der Kamera befindlichen) Filmformen. Insgesamt werde ich sein Kopieren und Einfügen 15 Komponenten in die Photoshop Dokument im nächsten Abschnitt. Lassen Sie uns diese Kamera animieren!
Wie bei den Icons vorher, Kopieren und Einfügen jede Komponente in Ihre Photoshop dokumentieren. Ich fand es am einfachsten, für jedes Symbol ein eigenes Dokument in Photoshop zu haben, sodass ich mich jeweils auf eine Animation konzentrierte.
Gruppieren Sie die Verschlussschichten und die Filmschichten im Schichten über der Kameraebene. Ich begann mit der Shutter-Animation: Schließen und öffnen Sie den Shutter, damit das Objektiv so aussieht, als würde es blinken.
Dann sollten Sie den Film animieren, der in den Filmschlitz ein- und ausgeht (alternativ kann er von der Kamera herunterfallen, wie es wirklich der Fall wäre). Wieder durchlaufen Sie die einzelnen Filmkomponenten nacheinander und erstellen dann für jede eine Umkehrung.
Zum Schluss noch ein kurzer Hinweis zum Speichern Ihres GIF Dateien. Gehe zu Datei> Exportieren> Für Web speichern (Legacy) (Alt-Shift-Control-S) und wählen Sie GIF aus dem Dropdown-Menü. Begrenzen Sie die GIF zu 32 Farben oder weniger, wenn möglich. Sie können die Animation in der Vorschau anzeigen, die Größe Ihrer Datei ändern und die Qualität der Datei festlegen, bevor Sie sie treffen sparen.
Hier ist mein letztes Kamera-Icon in Aktion!
Gibt an, ob Sie mit jedem gezeichneten Bild ein GIF erstellen Adobe Illustrator, Manipulation von Komponenten während der GIF Die Erstellung von Animationen oder eine Mischung aus beiden Techniken, das Animieren von Vektorgrafiken, ist einfach und macht Spaß. Teilen Sie Ihre Kreationen im Kommentarbereich weiter unten oder bringen Sie diese Ideen an ihre Grenzen und erstellen Sie eine Reihe von animierten Symbolen oder sogar Szenen, die für das Web-Publishing und mehr bereit sind!
Für weitere epische Ikonendesigns besuchen Sie Envato Elements. Dort können Sie Tausende von hochwertigen Design-Assets für eine monatliche Gebühr freischalten! Schauen Sie sich unten einen unserer Favoriten an!
Mit diesem pulsierenden Pack mit Vektor-Icons können Sie sich auf einen köstlichen Leckerbissen freuen! Dieses Paket enthält 30 minimalistische Symbole, die für verschiedene Projekte geeignet sind. Bearbeiten Sie diese Symbole einfach mit Adobe Illustrator und bringen Sie Ihre Designs in aufregende Farben!
Accentsconagua