Die Kunst der animierten Icons: Entwerfen und Animieren mit Adobe Photoshop und Illustrator

1. Einführung: Die Kunst der animierten Symbole: Hallo und willkommen bei The Art of Animated Icons, Design and Animate with Photoshop und Illustrator Ich bin Cynthia Oswald, Künstlerdesignerin und Gründerin einer florierenden Boutique-Branding-Agentur mit Hintergrundwissen und Kommunikationsdesign sowie Erfahrung als Hochschullehrerin. Ich habe meine Liebe zur Kreativität und zum Unterrichten kombiniert, zum Unterrichten kombiniert um Ihnen diesen umfassenden Kurs anbieten zu können Wir werden im Art Forum in die reiche Welt der Ikonenanimation eintauchen Ikonenanimation Ich praktiziere seit Jahren beruflich, egal ob Sie ein erfahrener Designer oder Neuling auf diesem Gebiet sind. Dieser Kurs zielt darauf ab, Sie zu inspirieren, zu stärken und mit den Fähigkeiten auszustatten, die in der heutigen digitalen Landschaft anwendbar sind in der heutigen digitalen Landschaft anwendbar Aber was das Besondere an der Animation von Icons und deren Digitalisierung ist, ist, dass Bewegung in der Welt der Schlüssel zur Interaktion ist Stellen Sie sich vor, Sie fügen animierte Symbole zu Ihrem Markenpaket oder Ihren E-Mail-Kampagnen Es ist eine kreative Art, Ihr Design zum Leben zu erwecken und mit Ihrem Publikum in Kontakt zu treten. Das Schöne ist, dass Sie keine spezielle Software benötigen. Wir werden Industriestandards, Adobe Photoshop und Illustrator verwenden , bevor wir beginnen Hier finden Sie einen kurzen Überblick darüber, was Sie benötigen Grundkenntnisse von Adobe Photoshop und Adobe Illustrator Beide Plattformen sind auf Ihrem Computer installiert, ein Sketchpad. Schnappen Sie sich also Ihre digitalen Stifte und Notizblöcke, denn gleich danach tauchen wir direkt in ein spannendes Klassenprojekt ein Sie können Ihr eigenes Symbol entwerfen und animieren und dabei die Elemente Design und Bewegung kombinieren, die Elemente Design und Bewegung kombinieren um etwas wirklich Spektakuläres zu schaffen Ich kann es kaum erwarten, zu sehen, welche Kreativität Sie mitbringen. Lass uns anfangen. 2. Das Kursprojekt: Animierte Ikone: Willkommen zurück zu unserem Kurs, Ikonenanimation mit Photoshop und Illustrator Der heutige Tag ist besonders aufregend, weil wir uns mit einem transformativen Klassenprojekt befassen Du entwirfst und animierst deine eigene, einzigartige Ikone, sei es für eine Marke, eine Idee oder einen kreativen Ausdruck mithilfe der magischen Kombination Wählen Sie dieses Projekt mithilfe der magischen Kombination aus Adobe Illustrator und Photoshop aus, damit Sie praktische Erfahrungen mit den gleichen professionellen Tools sammeln praktische Erfahrungen mit können, die Diese Erfahrung ermöglicht es Ihnen, Inhalte für verschiedene Plattformen zu erstellen, sei es für E-Mails, Websites oder soziale Medien Bevor Sie loslegen, habe ich einige wichtige Tipps für Sie. Überlegen Sie, wo Sie dieses Symbol verwenden möchten damit Sie die entsprechende Größe und das passende Format auswählen können. Streben Sie nach reibungslosen und optisch ansprechenden Übergängen. Vergessen Sie aber auch nicht, Ihrer Arbeit Ihren eigenen einzigartigen Stil und Ihr eigenes Flair Was die Schritte angeht, wählen Sie zunächst ein Thema , das Sie persönlich anspricht Entwerfen Sie Ihr Symbol und Illustrator und achten Sie dabei genau auf Form, Farbe und Ausrichtung Lassen Sie uns ihm dann Leben einhauchen , indem wir ihn in Photoshop animieren Scheuen Sie sich nicht, mit den besprochenen Animationstechniken zu experimentieren und kreativ zu werden Wenn Sie mit Ihrer Kreation zufrieden sind , exportieren Sie sie als GIF- oder Filmdatei. Teilen Sie es zusammen mit einer kurzen Beschreibung Ihres Konzepts und des von Ihnen verfolgten Prozesses in unserer Projektgalerie einer kurzen Beschreibung Ihres Konzepts und des von . Durch die Teilnahme. Sie reichen nicht nur ein Projekt ein, Sie sammeln auch wertvolle Erfahrungen, bereichern Ihr Portfolio und erweitern Ihr kreatives Netzwerk durch Interaktionen mit Ihren Kollegen Schnappen Sie sich also Ihre Designtools , beflügeln Sie Ihre Kreativität und lassen Sie uns gemeinsam auf diese bemerkenswerte Reise und lassen Sie uns gemeinsam auf diese bemerkenswerte Reise gehen. Viel Spaß beim Animieren 3. Skizzieren und Erstellen von Illustrator-Icons: Willkommen zurück. In diesem Kurs geht es darum, Ihre Ikone von einem bloßen Gedanken zu einem lebendigen Design in Illustrator zu machen Ihre Ikone von einem bloßen Gedanken zu einem lebendigen Design in Illustrator Lassen Sie uns diese kreativen Gänge in Gang bringen. Jedes Meisterwerk beginnt mit Inspiration. Neigen Sie zu Natur, Technologie und Vintage-Atmosphäre? Ihr Thema oder Konzept bildet die Grundlage für Ihr Design. Denken Sie an eine Idee, die Anklang findet, wenn sie zu Ihrem Kompass wird Um ein aussagekräftiges Symbol zu erstellen, müssen Sie einige grundlegende Gestaltungsprinzipien verstehen Balance, Kontrast, Ausrichtung. Das sind nicht nur Worte, das sind deine Werkzeuge. Wenn sie gut verstanden werden, heben sie Ihr Design von gut zu umwerfend an. Wenn sich also etwas nicht richtig anfühlt, sollten Sie darüber nachdenken, wie Sie Hierarchie, Kontrast und Wiederholung anpassen oder besser durchdenken können Hierarchie, Kontrast und Wiederholung anpassen oder besser durchdenken Wir stehen für Konsistenz, Nähe, Ausgewogenheit, Farbraum und allgemeine Bewegung oder Fluss Lassen Sie uns nun skizzieren. Denken Sie daran, so viele Ideen wie möglich niederzulegen. Mehrere Skizzen bieten Ihnen eine Reihe von Konzepten, aus denen Sie auswählen können Ich liebe dieses Zitat, das ich kürzlich von Louise Fili gelesen habe. Die Skizze ist die Seele eines Designs. Eine gute Skizze hat das Potenzial, großartig zu sein oder nicht, je nachdem, wie gut die Oberfläche ausgeführt ist Nun, ich werde dir in diesem Kurs nichts über meinen Sketch-Prozess beibringen in diesem Kurs nichts über meinen Sketch-Prozess Ich möchte darauf hinweisen , wie wichtig diese Phase für das Endergebnis sein wird. Es ist Zeit zu digitalisieren. Wählen Sie einige Skizzen aus, die Sie lieben, und beginnen Sie sie in Adobe Illustrator nachzuzeichnen und zu wiederholen Sie werden überrascht sein, wie sich eine grobe Bleistiftlinie in eine scharfe digitale Kurve verwandelt Ich habe ein paar Tipps für Sie, wie Sie Ihre Skizzen vektorisieren können. Wenn Sie ein iPad zur Hand haben, sollten Sie zunächst erwägen, sie in Adobe Illustrator neu zu zeichnen oder sogar mit Ihrem iPad fortzupflanzen Wenn Sie es gewohnt sind , das als Teil Ihrer Praxis zu verwenden Ich habe damit herumgespielt, aber letztendlich beschlossen, mit einem Neuanfang und Adobe Illustrator auf meinem Computer mit dem Stiftwerkzeug Und das liegt daran, dass ich ein polnisches Design wollte , das ich für eine Schrift und nicht unbedingt für einen handgezeichneten Look weitergeben konnte , aber beides könnte funktionieren Es ist wichtig zu beachten, dass Sie diese Klasse auch ohne Vektorisierung von Schrift durchführen können diese Klasse auch ohne Vektorisierung Ich verwende ein Logo, das ich gerade entwickle, das heißt, verwenden Sie, was auch immer Sie erstellen möchten Wenn Sie sich für die Typroute entscheiden, sollten Sie zunächst einige Kurse für Fortgeschrittene belegen. Hier sind einige meiner Lieblingstipps für den Einstieg. Halten Sie es zunächst einfach. Je weniger Punkte, desto besser. Jede Kurve sollte nur einen Punkt haben und die Anker sollten nicht über den vorherigen oder den nächsten Punkt hinausragen Ich verstoße manchmal beim Erstellen gegen die Regeln und löse sie dann, wenn ich fertig bin Die Verwendung von Linealen hilft dir dabei, den Überblick zu behalten. Manchmal schalte ich die Lineale erst ein, nachdem ich meine Zeichnung zurückverfolgt Prüfen Sie aus Konsistenzgründen noch einmal, ob die größte und die kleinste Dicke gleich bleiben Oft verwende ich verschiedenfarbige Blöcke auf einer separaten Ebene, um die Dicke der Buchstaben zu überprüfen der Ich empfehle, sich über Serifs sans serif, end script fonts zu informieren, um einige Grundregeln zu verstehen, bevor Sie beginnen einige Zum Beispiel reichen gebogene Buchstaben wie Oh und See oft über die X-Höhe hinaus Und die X-Höhe ist die Höhe des Kleinbuchstabens X. Bevor wir zur Gestaltung des Symbols zurückkehren, möchte ich Ihnen nur einige Tools vorstellen , die ich in dieser Lektion hauptsächlich verwende Ich zeichne meine Skizze mit dem Stiftwerkzeug nach, und Sie können sie aufrufen, indem Sie P auf Ihrer Tastatur eingeben Wenn Sie das Stiftwerkzeug ausgewählt haben, können Sie mit Punkten zeichnen und Kurven erstellen, indem Sie klicken und ziehen, wenn Sie einen Punkt markieren, um einen bestimmten Punkt auszuwählen und zu bearbeiten. Sie können das Direktauswahl-Werkzeug verwenden oder a eingeben, Sie können das Direktauswahl-Werkzeug verwenden oder a eingeben um Ihr gesamtes Objekt zu erfassen Verwenden Sie das Auswahlwerkzeug oder geben Sie V ein. Um schließlich Ankerpunkte zu bearbeiten, sind die Kurven Ihre Punkte Sie können das Stiftwerkzeug in der Werkzeugleiste gedrückt halten und der Ankerpunkt wird unten angezeigt, oder Sie können Shift plus C eingeben . Jetzt, wo ich den Hauptteil meines Icon-Designs habe, möchte ich einige Elemente erstellen, die das Wachstum rund um den Buchstaben veranschaulichen. Ich werde das Stiftwerkzeug verwenden, um Striche für die Linien zu erstellen , die die Stängel darstellen, und dann mit dem Stiftwerkzeug Formen oder Objekte für die Blätter und die Blüte erstellen . Während der Arbeit werde ich das Design vergrößern und verkleinern , um zu sehen, wie es in verschiedenen Größen funktioniert. Das hilft dabei, alles ins Rampenlicht zu rücken, was sich unausgewogen anfühlen könnte Ich denke auch, dass es wichtig ist, Zeit zu haben, um an diesem Teil zu arbeiten Sobald Sie es in Photoshop übernommen haben, möchten Sie, dass es poliert wird damit Sie keinen Rückzieher machen müssen. Ich habe beschlossen, die Kappen meiner Striche abgerundet zu machen , da die Stängel von Natur aus runder sind Ich wollte dieses organische Gefühl haben Ich wollte auch jedes Element für Animationszwecke getrennt halten . Anstatt also jeden Stiel anzuhängen, klicke ich das dazwischen liegende Design ab, indem ich zwischen dem Stiftwerkzeug und dem Auswahlwerkzeug hin- und Wenn ich mit einer neuen Form oder Linie beginnen möchte, tippe ich einfach auf V und dann erneut auf P, um eine neue Linie oder Form zu beginnen Dadurch wird sichergestellt, dass jedes Element für sich alleine steht, und wir machen die Animation im Endergebnis flüssiger und interessanter. Sie können auch damit beginnen, nach Ebenen zu organisieren, wenn Sie das bevorzugen. Aber ich habe diesen Prozess später durchgemacht , als ich die Datei für Photoshop vorbereitet habe. Sie werden auch feststellen, dass ich nur ein Blatt gezeichnet habe, und das liegt daran, dass ich sie am Ende dupliziere , indem ich das Blatt und die Option auf der Tastatur und es dann an die neue Position ziehe. Dadurch wird es automatisch Sie können ein Blatt auch einfach umdrehen indem Sie in der oberen Menüleiste die Option Objekttransformation reflektieren auswählen in der oberen Menüleiste die Option Objekttransformation reflektieren Ich verwende dann die vertikale Ein letzter Illustrationstipp, den ich beachten sollte, ist, wie ich mithilfe von Strichen die Formen erstelle. Sobald sie jedoch fertig sind, müssen Sie die Form von Anfang bis Ende mit dem Zeichenstiftwerkzeug umschließen die Form von Anfang bis Ende mit dem Zeichenstiftwerkzeug Dann tausche ich Kontur gegen Fläche aus, indem ich Shift X auf der Tastatur eintippe oder die Option „ Fehler beim Vertauschen“ in der Werkzeugleiste verwende Denken Sie daran, dass ich weiß, dass ich das animieren möchte, und ich werde darüber nachdenken, wenn ich die Illustration entwerfe Wie könnte das in Bewegung aussehen? Welche Teile der Originaldatei muss ich beibehalten? Sie werden feststellen, dass ich meine Arbeit während des gesamten Vorgangs kopiere und einfüge Und das ist so, dass ich für jede Version eine Historie habe, falls mir die Richtung, in die sie sich entwickelt, nicht gefällt und ich dann rückwärts weitergegangen bin Ich habe meine Datei auch während des gesamten Entwurfsprozesses gespeichert, indem einfach Command S auf meiner Tastatur ausgewählt Ich habe einige Elemente , die ich gleichmäßig verteilen möchte , sobald ich sie allgemein dort habe, wo ich sie haben möchte, wähle sie alle aus und das Verteilungssymbol erscheint für mich im oberen Menü. Sie können auch zu „Fenster ausrichten“ gehen, um das Bedienfeld zu öffnen, und dann, je nach Design, die horizontale oder vertikale Verteilung auswählen , die unten oder mittig angeordnet ist. Im Moment bin ich mit dem Design ziemlich zufrieden und obwohl ich schon andere gerendert habe, bin ich von dieser Version für die Animation überzeugt, aber jetzt muss ich sie verfeinern. Ich werde einen kurzen Schritt zurücktreten und sehen, was ich sonst noch tun möchte. Ich werde einige Optionen vergleichen, um herauszufinden , welche am stärksten ist, und einige letzte Anpassungen an der Abbildung vornehmen einige letzte Anpassungen an , damit sie besser zu meiner langfristigen Vision passt. Es ist wichtig, bei der Gestaltung das Ende im Hinterkopf zu haben, vor allem, wenn es sich um ein Branding-Projekt wie meins handelt. Sobald Sie alle Ihre endgültigen Designs gerendert haben, verkleinern Sie die Ansicht und treffen Sie die endgültige Entscheidung. In diesem Video haben wir uns mit der Entscheidung für eine Richtung, dem Erstellen von Skizzen, Erstellen von Skizzen Rendern Ihrer Skizzen und Und ich habe Ihnen einen Blick hinter die Kulissen meines Prozesses und meiner Lieblingswerkzeuge für die Gestaltung des Symbols Als Nächstes gehen wir Schritt für Schritt durch, wie Sie Ihre Datei für Photoshop vorbereiten Sie Ihre Datei für Photoshop 4. Vorbereitung des Icons für Photoshop: Bereit loszulegen. Als allererstes müssen Sie das Erscheinungsbild unserer Illustrator-Datei erweitern Dadurch sieht alles klar und sauber aus, wenn wir die Datei vergrößern Aber bevor wir loslegen, speichern wir eine Kopie unseres aktuellen Designs Man weiß nie, woran man vielleicht zurückkommen und basteln möchte , vor allem, wenn man vorhat, es in einem anderen Programm wie Adobe After Effects zu verwenden einem anderen Programm wie Adobe After Effects Das Duplikat. Wählen Sie einfach das gesamte Symbol aus, indem Sie die Umschalttaste gedrückt halten und auf den Bereich um das Symbol herum klicken Halten Sie dann die Wahltaste gedrückt. Klicken und ziehen Sie an eine neue Stelle auf Ihrer Leinwand. Alles bereit. Gehen Sie nun zum oberen Menü, wählen Sie Objekt, Erweitern und dann Objekt, Strich, Füllung, Walla Ihre Linien haben sich jetzt in Formen verwandelt. Als Nächstes kopieren wir das neu transformierte Symbol in eine neue, saubere Datei Für dieses Beispiel strebe ich ein quadratisches Format an, perfekt für Instagram. Denken Sie daran, da es sich um Vektorgrafiken handelt, können wir ihre Größe ändern, ohne an Qualität zu verlieren , wenn wir zu Photoshop wechseln Jetzt ist es an der Zeit, unsere Organisationshüte aufzusetzen. Wir werden unsere Ebenen so anordnen , dass das Animieren zum Kinderspiel wird Sie werden dies in Photoshop erneut tun, gruppieren aber vorerst ähnliche Elemente auf derselben Ebene oder in einzelnen Ebenen Lassen Sie uns zum Beispiel alle Dekorationsgegenstände auf eine Ebene, Blätter auf eine andere und Stängel auf eine weitere Ebene verschieben alle Dekorationsgegenstände auf eine Ebene, Blätter auf eine andere . Du verstehst die Idee. In Ordnung, lassen Sie uns in die Einzelheiten eintauchen. Es ist an der Zeit, herauszufinden, wie sich Ihre Illustration während der Animation zeigen wird Ich werde einiges davon später in Photoshop machen. Aber lassen Sie mich Ihnen einen Weg zeigen, wie Sie dies hier in Illustrator erreichen können , falls Sie das bevorzugen Wählen Sie zunächst die Linie aus, die Ihren Stamm darstellt , und drücken Sie Befehl C, um sie zu kopieren und wieder an derselben Stelle Verwende die Umschalt-Taste und V. Verschiebe diese Linie in eine neue Ebene. Konzentrieren wir uns nun auf diese Ebene. Mach weiter und verstecke alle anderen Ebenen. Sie können das Stiftwerkzeug aktivieren, indem Sie die Taste Peaky drücken. Wir werden einige Teile des Stiels leicht ausradieren , indem wir das Stiftwerkzeug als Scheibe verwenden Platzieren Sie mit dem Stiftwerkzeug eine Linie ohne Kontur über der Abbildung, an der Sie die erste Markierung erstellen möchten. Öffnen Sie dann das Pathfinder-Bedienfeld, wählen Sie „Teilen“ löschen Sie dann den oberen Teil oder den Teil, der später sichtbar wird Dies dient als Wachstumsmarker, also im Wesentlichen das, was Ihr Publikum sehen wird, bevor der gesamte Stamm erscheint, oder was auch immer Sie illustrieren oder animieren Je mehr Wachstumsmarker Sie erstellen, desto flüssiger wird Ihre Animation aussehen Geschwindigkeit ist auch ein Faktor. Eine schnellere Enthüllung führt zu einer gleichmäßigen oder animierten Darstellung. Sobald Sie den Stamm oder was auch immer Sie illustrieren, angepasst haben , schalten Sie die Ebenen ein und aus, um Vorschau Ihrer Animationsschritte Auf diese Weise erhalten Sie eine Vorstellung davon, wie alles in der endgültigen Animation zusammenfügen wird Bereit für ein Mischwerkzeug. FUN hier wird Stufen erstellt oder wie die Blätter und Blüten wachsen werden. Mit anderen Worten, wie Ihre Illustration sichtbar und animiert wird Lassen Sie uns zunächst den Startpunkt zeichnen. In meinem Fall ist das eine kleine Knospe. Mit dem Blend-Tool werde ich fünf Wachstumsstadien erstellen. Doppelklicken Sie in der Werkzeugleiste auf das Mischwerkzeug , um die Mischoptionen zu öffnen, wählen Sie die angegebenen Schritte und wählen Sie dann die gewünschte Anzahl von Schritten aus. Ich werde sie ein wenig trennen und fünf Schritte auswählen. Wir können immer einige entfernen. Die Idee ist, sicherzustellen, dass Sie jeden Schritt klar und getrennt sehen können . Achten Sie darauf, dass sie sich nicht berühren, passen Sie sie gegebenenfalls an und erweitern Sie dann das Erscheinungsbild, erweitern Sie dann das Erscheinungsbild sodass jeder Schritt ein separates Objekt ist. Schließlich werden Sie sie an ihrem Startpunkt ausrichten . Denken Sie daran, dass Sie die Anzahl der Schritte an das Tempo Ihrer Animation anpassen können . Mehr Schritte für eine langsame, glatte oder weniger sichtbare Schritte für etwas Schnelleres. Lassen Sie uns diesen Vorgang nun für die gesamte Animation wiederholen. Sie sich überlegen, wie jedes Objekt während des gesamten Vorgangs sichtbar und animiert werden soll, haben Sie mehr Zeit für die Iteration in Photoshop, aber Sie benötigen die Knochen , um das Ganze abzuschließen, bevor Sie es abschließen Nehmen Sie sich also Zeit und machen Sie erst weiter, wenn Sie begeistert sind, dieses Ding zum Tanzen zu bringen Sie nun alle Wachstumsschritte erstellt haben, stellen wir sicher, dass sich jeder oder an seiner endgültigen Position befindet , und trennen Sie jeden Schritt auf einer eigenen Ebene Achten Sie darauf, das Etikett so zu kennzeichnen , dass es für Sie sinnvoll ist. Meine endgültige Animation hat 100 Ebenen, aber Sie könnten auch problemlos 300 oder mehr Ebenen haben. Je klarer Sie sich also mit Ihrer Dateiorganisation auskennen, desto schneller und reibungsloser wird die Animationserstellung ablaufen Zeit für einen kurzen Rückblick. Jetzt, wo Sie jeden Schritt auf einer eigenen Ebene haben, können Sie zwischen Ihren Ebenen hin und her schalten, um eine Vorschau der Animation zu erhalten. Nehmen Sie Bedarf Anpassungen vor Mir ist zum Beispiel aufgefallen, dass meine kleineren Blätter näher am Stängel sein sollten Ein letzter Profi-Tipp: Denke über Farbe nach. Der Ablauf Ihrer Animation kann Ihre Farbauswahl beeinflussen. Denken Sie also daran, dass ich bei Ihrer Auswahl zunächst meine primäre Markenfarbe gewählt habe und sekundäre Farbtöne für den zusätzlichen Akzent hinzugefügt habe. Denken Sie daran, dass Sie sogar Übergänge mit Farbe animieren können Übergänge mit Farbe animieren Speichern Sie abschließend Ihre Originaldatei für den Fall, dass Sie die Farben später ändern möchten Ordnung, nehmen wir uns einen Moment Zeit, um zu überprüfen, was wir bisher erreicht haben Zunächst haben wir unseren Canvas und unseren Illustrator erweitert , um sicherzustellen, dass alles scharf bleibt Denken Sie daran, eine Kopie zu speichern, von der Sie nie wissen, wann Sie das Originaldesign benötigen Als Nächstes verschieben wir das erweiterte Symbol in ein neues quadratisches Dateiformat. Ideal für Instagram und einfach zu Photoshop überzugehen , ohne an Qualität zu verlieren. Organisation war der Schlüssel. Wir haben angefangen, unsere Ebenen so zu sortieren, dass der Animationsprozess reibungslos oder reibungslos abläuft. Wir haben uns mit den Einzelheiten der Animationsplanung befasst, bis hin zur Erstellung von Wachstumsmarkern für unsere Stängel oder was auch immer Sie für Illustrationen erstellt haben Je mehr Sie haben, desto flüssiger wird Ihre Animation sein. Das Mischwerkzeug kam ins Spiel, um Schritte für die Enthüllung Ihrer Illustration zu erstellen . Animieren Sie, und passen Sie die Anzahl der Schritte an das Objekt an, das Sie anstreben Sobald wir die Schritte abgeschlossen haben, wir unsere Ebenen neu organisiert und dann den Moment der Wahrheit durchgespielt, während wir durch die Ebenen geblättert haben, um eine Vorschau der Animation anzuzeigen. Dabei wurde sichergestellt, dass alles gut aussieht und bei Bedarf angepasst Schließlich haben wir untersucht, wie sich Farbe auf den Ablauf und das Gefühl Ihrer Animation auswirken kann Wählen Sie Farben, die zu der Marke, die Sie dafür kreieren, und zu Ihrem Animationsstil passen . Freust du dich auf die nächsten Schritte? Als Nächstes werden wir all dies in Photoshop integrieren um Ihr Design wirklich zum Leben zu erwecken. Ich kann es kaum erwarten zu sehen, was wir zusammen kreieren. 5. Animation in Photoshop: Hallo nochmal. Nach unserer sorgfältigen Arbeit in Illustrator ist es an der Zeit, unseren Icons einen Hauch von Magie zu verleihen Lassen Sie uns in Photoshop eintauchen und unseren Designs Leben einhauchen Lassen Sie uns unser mehrlagiges Illustrator-Symbol in Photoshop verschieben. Als Erstes erstellen wir eine neue Datei mit der Größe, eine neue Datei die Sie in der endgültigen Form verwenden werden. Ich nehme eine Datei, die etwas größer ist als das, was ich benötige falls ich sie für eine andere Anwendung verwenden möchte Sobald Ihre neue Datei erstellt ist, müssen Sie nur noch zu Illustrator wechseln und Ihr gesamtes Design auswählen Drücken Sie Kopieren oder Befehl C und wechseln Sie zurück zu Photoshop, drücken Sie Einfügen oder Befehl V. Daraufhin werden Ihnen einige Optionen angezeigt Wählen Sie „Als Ebenen einfügen“, um all Ihre harte Arbeit zu übertragen. Stellen Sie sich Animation als eine Abfolge statischer Bilder vor, die schnell angezeigt werden. Hier. Ebenen werden zu Frames und deine Timeline organisiert sie. Dies ist das Storyboard Ihrer Animation. Jetzt, wo wir in Photoshop sind, können wir sehen, dass die Illustrator-Ebenen als Gruppen zusammengefasst wurden und dass sich jedes Objekt in einer eigenen Gruppe in der Ebene befindet Das ist perfekt für die Gründung Ihrer Organisation. Lassen Sie uns jedes Objekt beschriften und es in der Reihenfolge anordnen, in der es angezeigt werden soll. Denken Sie daran, dass dadurch die vorherigen Schritte ausgeschaltet werden, damit die Animation nicht bei jeder Mikroenthüllung unübersichtlich Bei dem Stängel oder der Blüte wird jede Stufe ausgeblendet, sobald die nächste Stufe sichtbar In der letzten Klasse habe ich dir gezeigt, wie du die Wachstumsstadien direkt in Illustrator bearbeiten kannst die Wachstumsstadien direkt in Illustrator bearbeiten Ich habe mich dafür entschieden, die Stems hier in Photoshop zu machen , weil es sich für meinen Prozess einfacher und häufiger anfühlte Ich werde das jetzt machen. Und hoffentlich erhalten Sie dadurch einen Einblick wie Sie das nutzen und etwas Ähnliches tun könnten. Bevor ich weitermache, werde ich alle meine Ebenen rastern Indem ich zu Ebenen gehe. Alle Ebenen rastern. Ich habe gerade die Ebene ausgewählt, für die ich Stufen erstellen möchte, und das Ebenenfenster und dann die Wahltaste gedrückt und gezogen, um sie zu Dann nehme ich das Radiergummi und lösche den Bereich, den ich in der nächsten Phase freilegen möchte . Ich wiederhole diesen Vorgang, bis ich für jeden Stamm etwa drei oder vier Stufen habe für jeden Stamm etwa drei oder vier Stufen Dann teste ich die gesamte Animation indem ich jede Ebene einzeln enthülle Eine wichtige Sache , die es zu beachten gilt, ist, dass diesem Vorgang einige knackige Bereiche in der Animation zum Vorschein einige knackige Bereiche in der Und ich konnte es hier schon einmal reparieren. Ich mag die Animation, wo es viel schwieriger ist, rückwärts zu arbeiten Photoshop ist traditionell ein Bildbearbeitungsprogramm, das eine Fundgrube an Animationsfunktionen verbirgt eine Fundgrube an Animationsfunktionen Schauen wir uns nur einen kleinen Teil , der diese statischen Vektoren aussehen lässt In diesem Kurs erstellen wir zunächst eine Timeline-Animation. Gehen Sie zur Fenster-Zeitleiste und wählen Sie Popup-Fenster Frame-Animation erstellen aus. Sie sollten mit einem Frame beginnen, der alles zeigt, was in Ihrem Ebenenbedienfeld sichtbar ist. Im Moment fungiert es als Foto von dem, was sichtbar ist. Fahren Sie also nicht mit der Erstellung eines neuen Rahmens fort , bis Sie alles versteckt oder angezeigt haben , was Sie im ersten Bild sichtbar haben möchten. Klicken Sie dann auf das Pluszeichen unten in Ihrem Zeitleistenfenster, um einen neuen Frame zu erstellen. Wiederholen Sie den Vorgang und zeigen Sie nur den nächsten Teil Ihrer Animation an. Achten Sie darauf, Ebenen auszuschalten, die überflüssig sind oder erst später in Ihrer Animation angezeigt werden . Jetzt bist du auf dem Weg zu den Rennen. Bevor Sie zu weit kommen, legen Sie das Tempo für Ihre Animation fest. Nachdem Sie neue Frames hinzugefügt haben, können Sie unten in der Timeline auf die Schaltfläche „Abspielen“ klicken , um zu sehen, wie es aussieht. Wenn es sich zu sprunghaft anfühlt, reduzieren Sie die Zeit für jedes Bild kannst du am unteren Rand des Frames tun, indem du auf den Abwärtspfeil klickst und dann die Zeit auswählst, zu der der Frame eingeblendet werden soll. Für meine Animation habe ich mich für 0,02 s entschieden, wortwörtlich einen Bruchteil einer Sekunde, damit sie schnell wiederholt werden konnte. Das bringt mich zu meiner nächsten Folie. Sollte diese Animation wiederholt oder einmal, zweimal, dreimal durchgespielt werden. Das sollten Sie überprüfen, bevor Sie die Datei exportieren. Meins ist für immer auf Standard eingestellt. Wenn du also darauf und im unteren Bereich des Zeitleistenfensters klickst, kannst du wählen, wie oft es wiederholt werden soll. In meinem Fall wollte ich nur einmal passieren. Heute. Ich führe Sie durch die grundlegendsten Animationen. Es gibt weitere Animations- und Videofunktionen in der Timeline, und es gibt noch weitere Effekte, die Sie Ihrer Animation hinzufügen können, wie z. B. das Tweening zwischen Frames, wodurch automatisch Schritte hinzugefügt werden können und Sie auch Ebenen entfernen In diesem Kurs wollte ich Ihnen zeigen, wie Sie mit den Fähigkeiten, die Sie wahrscheinlich bereits haben, eine wunderschöne Animation erstellen mit den Fähigkeiten, die Sie wahrscheinlich bereits haben, eine wunderschöne Animation Fähigkeiten, die Sie wahrscheinlich bereits haben Stellen Sie sich das als Grundlage für das Animieren in Photoshop Konsistenz ist der Schlüssel für ein wirklich professionelles Ergebnis. Stellen Sie sicher, dass Ihre Animation butterweich ist Achten Sie darauf, dass störende Übergänge nicht aufeinander abgestimmt sind. Dauer der Frames. Ihr Symbol sollte sich auf natürliche Weise bewegen , als ob es ein Eigenleben Sie können Frames löschen und neue Frames hinzufügen, aber es ist immer am einfachsten, dies und dann die natürliche Reihenfolge zu tun. Ich empfehle daher, beim Erstellen zu überprüfen, wie Ihre Animation aussieht. Okay, lassen Sie uns kurz zusammenfassen, was wir in diesem Kurs besprochen Zuerst haben wir das Symbol in Photoshop importiert , indem wir es buchstäblich kopiert und eingefügt Wir haben eine Frame-Animation mithilfe von Ebenen eingerichtet. Dann haben wir uns wirklich dem Bearbeiten und Organisieren befasst Dann habe ich mir die Animationswerkzeuge angesehen , die wir Als Nächstes haben wir über das Tempo Ihrer Animation und das Hinzufügen von Animationseffekten gesprochen Ihrer Animation und das Hinzufügen von Animationseffekten Und zum Schluss sollten Sie Ihre Arbeit noch einmal überprüfen einen reibungslosen Übergang zu gewährleisten Fantastische Arbeit, Ihre Ikone sollte jetzt eine Verschmelzung Ihrer einzigartigen Designfähigkeiten und der Magie der Animation Bist du bereit, deine Kreationen mit der Welt zu teilen? Lassen Sie uns in den Export und die Präsentation Ihrer animierten Murmeln eintauchen Präsentation Ihrer animierten Murmeln Ich kann es kaum erwarten zu sehen, was du geschaffen hast. 6. Exportieren deiner Animation: Willkommen zurück, Design-Enthusiasten. unsere Animation abgeschlossen ist, ist es jetzt an der Zeit, einen der wichtigsten Schritte zu exportieren. Stellen wir sicher, dass Ihr animiertes Symbol optimiert und für die ganze Welt sichtbar ist. Wenn es um den Export geht bietet Ihnen Photoshop eine Menge Auswahlmöglichkeiten, und ich werde Sie durch die beiden , die Sie für diese Art von Animation benötigen. Film oder Geschenke. Geschenke eignen sich hervorragend für die breite Funktionalität und den Loop-Charakter, während Filme eine hervorragende Qualität und eine bessere Farbtiefe bieten und eine bessere Farbtiefe Denken Sie daran, dass Sie die Wahl haben, je nachdem, wo Ihre Ikone glänzen soll Beginnen wir mit dem Exportieren Filmdatei für meinen Instagram-Feed Gehen Sie einfach zu Datei, Exportieren, Video rendern und die Filmeinstellungen werden angezeigt. Wählen Sie, wo Sie die Datei speichern und wie groß die Datei sein soll. Denken Sie daran, dass ich mit etwas Größerem angefangen habe, als ich brauchte, um flexibel zu sein. Es ist jedoch nicht erforderlich, ein großes Video für Instagram zu speichern. Verwenden Sie diese Spezifikationen von Ihrer spezifischen Plattform. Das ist es. Laden Sie dann an Ihren bevorzugten Ort und teilen Sie Ihre Animation. Der wahre Grund für die Entstehung von Animationen war das Teilen per E-Mail als GIF-Datei. Sie können Videos einfach nicht per E-Mail teilen, aber Sie können animierte GIF- oder GIF-Dateien teilen , um ein ansprechendes oder qualitativ hochwertiges Bild mit einem professionellen Touch zu erzielen. Behalten Sie stets die Einschränkungen und Vorteile der Plattform im Hinterkopf. Sie können die Befehlstaste, Wahltaste, Umschalttaste und S drücken oder zu Dateiexport > Für Web speichern gehen und dann in den Optionen und in der oberen rechten Ecke Gif auswählen den Optionen und in der oberen rechten Ecke Sie können Ihre Animation sogar testen oder zusätzliche Einstellungen wählen oder Ihre Looping-Einstellungen direkt dort bearbeiten Ihre Looping-Einstellungen direkt dort und dann „Für Ausgabe speichern Stattdessen beherrschen Sie die Kunst der Icon-Animation vom Design bis zum Export — ob für Ihren Kunden, Ihr Portfolio oder einfach nur zum Spaß — jetzt verfügen Sie über die Fähigkeiten, fesselnde animierte Grafiken zu erstellen im nächsten Video zusammenfassen, Lassen Sie uns im nächsten Video zusammenfassen, was wir gelernt haben, und feiern Sie, indem wir unsere feiern 7. Fazit & Lass uns feiern!: Hallo zusammen, herzlichen Glückwunsch, dass Sie es bis zum Ende dieses Kurses geschafft haben. Die Kunst animierter Icons, Entwerfen und Animieren mit Photoshop und Illustrator Was für eine unglaubliche Reise es war, und ich bin so stolz auf die Fortschritte, die Sie gemacht haben Nehmen wir uns einen kurzen Moment Zeit, um über all die neuen Fähigkeiten und Techniken nachzudenken , die Sie gelernt haben. Zunächst einmal haben Sie die Kunst gemeistert, Ihre Skizzen zum Leben zu erwecken , indem Sie mehrschichtige Symbole und Illustrator entworfen haben, wobei wir uns auf Abmessungen, Farben und komplizierte Details konzentriert haben Farben und Dann haben wir den Gang gewechselt und Photoshop übergegangen, wo er gelernt hat, statischen Designs Leben einzuhauchen statischen Designs Leben einzuhauchen indem er Bild-by-Frame-Animationen erstellte Wir haben uns sogar mit fortgeschritteneren Funktionen wie der Festlegung des Tempos Ihrer Animationen und dem Hinzufügen von Spezialeffekten befasst Festlegung des Tempos Ihrer Animationen und dem sind zu Photoshop übergegangen, wo er gelernt hat, statischen Designs Leben einzuhauchen, indem er Bild-by-Frame-Animationen erstellte. Wir haben uns sogar mit fortgeschritteneren Funktionen wie der Festlegung des Tempos Ihrer Animationen und dem Hinzufügen von Spezialeffekten befasst. Was ist Lernen ohne Anwendung, oder? Sie haben die Möglichkeit, all diese Techniken in unserem Klassenprojekt anzuwenden . Jetzt geht es nicht nur um das Endprodukt, sondern auch um die Reise und die Fähigkeiten, die Sie dabei erworben haben. Jeder von Ihnen hat seine einzigartige Vision zum Leben erweckt und Designprinzipien mit Animationstechniken kombiniert, Designprinzipien mit Animationstechniken kombiniert um etwas wahrhaft Magisches zu schaffen. Nun zum großen Finale lade ich Sie ein, Ihr letztes animiertes Icon in die Projektgalerie hochzuladen . Das ist eine großartige Gelegenheit, Ihre Arbeit zu teilen, Feedback zu erhalten und sogar zu sehen, wie Ihre Mitschüler dieselben Herausforderungen gemeistert Vergessen Sie nicht, eine kurze Beschreibung Ihres Konzepts und des kreativen Prozesses, den Sie verfolgt haben, beizufügen Ihres Konzepts und des kreativen Prozesses, den Sie Interaktion mit der Community kann neue Perspektiven eröffnen und sogar Inspiration für Ihr nächstes Projekt anregen. Machen Sie also weiter und präsentieren Sie Ihre Meisterwerke und sonnen Sie sich in den Früchten Ihrer Arbeit Denken Sie daran, dass die Projektgalerie nicht nur eine Ausstellung ist, sondern auch ein Gespräch Steigen Sie ein und machen Sie mit. Vielen Dank, dass Sie an diesem Kurs teilgenommen haben, und ich hoffe, dass Ihre animierten Symbole bald unsere Projektgalerie zum Leuchten bringen. Bis dahin: Gestalte weiter, animiere weiter und, was am wichtigsten ist, gestalte weiter