Hallo! Heute werde ich versuchen, die Fähigkeiten des Programms zu beschreiben Adobe IllustratorVergleich mit den Fähigkeiten der Spülung. Dies wird keine globale Analyse des Programms nach Knochen sein, sondern eine Beschreibung einiger interessanter Tricks, die ich in diesem Programm entdeckt habe. Ich sammelte die Informationen Stück für Stück, während ich sie studierte, um alles in einem Beitrag zusammenzufassen. Ich gebe sofort zu, dass ich nicht nur ein sehr erfahrener Illustrator bin letzten sechs Monate Ich benutze es beim Zeichnen (vorher habe ich alles in Flash gezeichnet). Viele Leute beschweren sich, dass der Illustrator kompliziert und nicht immer intuitiv ist. Bis zu einem gewissen Grad stimme ich zu, dass dieses Programm nach dem Flash schwierig ist. Aber die Hauptsache hier ist nicht aufzuhören, sondern weiter zu lernen. Und nach ein paar Wochen taucht der Gedanke auf, wie könnte ich vorher ohne ihn auskommen!
Also, was mir an dem Illustrator gefallen hat und was ich für mich selbst gefunden habe, ist nicht in Flash.
1. Ich beginne mit dem einfachsten, aber gleichzeitig notwendigen. Versuchen Sie, Objekte blitzschnell in einem Kreis anzuordnen. War vorher Deko-Werkzeug , aber es wurde entfernt, anscheinend als unnötig angesehen. Wir haben beschlossen, dass es mehr Spaß macht, es mit Stiften zu machen. Illustrator hat folgende Funktion: Effekt - Verzerren & Transformieren - Transformieren.
Alles ist schnell und einfach, die Werte (Abstand zwischen Objekten, Anzahl der Kopien) werden von uns in den Einstellungen festgelegt.
2. Zick-Zack
Noch einfacher, aber dennoch nützlich. Es scheint eine Kleinigkeit zu sein, aber blitzschnell muss man von Hand zeichnen, in einem Illustrator ist es eine Frage von Sekunden.
3. Verformung von Objekten (Warp)
Es gibt nichts im Nu. Im folgenden Beispiel habe ich nur zwei Möglichkeiten gezeigt, um einfache Formen zu verformen (Effekt - Warp - Bogen / Fisch). In der Tat gibt es 15 von ihnen letzte Version Programme.
4. Automatisches Abrunden von Ecken (Round Corners)
Sie können dies manuell tun: Auf einem Grafikobjekt werden bei Auswahl ein weißer Punkt und ein abgerundetes Liniensymbol in der Ecke angezeigt (bei allen Augen). Wir ziehen mit der Maus, passen uns Ihrem Geschmack an.
Dies gilt jedoch nur für Formen mit einer Bleistiftlinie auf etwas andere Weise - wenden Sie den Rundungseffekt an ( Effekt - Stilisieren - Runde Ecken). Am Ausgang erhalten wir das gleiche Ergebnis.
5. Aufrauen (Vergröberung)
Der Effekt wird auf einfache Formen angewendet ( Effekt - Verzerren & Transformieren - Aufrauen). Am Ausgang erhalten wir etwas, das einem Low-Poly-3D-Modell ähnelt. Meiner Meinung nach cool :) Und vor allem - sehr einfach.
6. Pucker & Bloat (Falten und Aufblähen)
Ein Beispiel im Bild unten:
7. Erweiterung des Formulars (Offset Path)
Flash verfügt über eine Funktion zum Erweitern der Füllung und funktioniert im Gegensatz zum Illustrator überhaupt nicht mit Bleistiftlinien.
8. Pinsel (Kunstpinsel, Musterpinsel, Streupinsel)
Siehe das Bild unten mit Beispielen:
9. Texturpinsel (Texturpinsel)
Illustrator enthält auch viele Texturpinsel, über die ich geschrieben habe und wie sie erschienen sind neue Version spülen -. Es wurde festgestellt, dass die Verwendung von Pinseln in Adobe Animate extrem langsam ist. Das ist es:(
10. Ich bin mir nicht sicher, ob dies ein einfacher Trick ist, aber ich möchte mich auf einen Pinsel mit einem lustigen Namen konzentrieren KlecksBürste... Befindet sich in der Toolbox, ein sehr schöner Pinsel. Es hat eine Reihe von Einstellungen, ich mag es mehr als üblich. Es ist schwer in Worten über seine Vorteile zu erklären, es ist besser, es einmal zu versuchen.
10.Split to Grid
Ebenfalls nützlich ist die Funktion Auf Gitter teilen (Objekt-Pfad-Auf Gitter teilen), mit der Sie eine Form in gleiche Segmente schneiden können. Woran erinnert uns das? Das stimmt - Fenster in einem Hochhaus. Was mich betrifft, eine coole Sache zum Zeichnen, zum Beispiel Stadtlandschaften;)
Einer noch nützliches Werkzeugpräsentiert in Illustrator, wahrscheinlich seit seiner ersten Veröffentlichung. Es kann zum Beispiel verwendet werden, um Holzstrukturen zu erstellen:
12. Verschieben (rechts - Transformieren - Verschieben)
Verschiebung eines Objekts um eine bestimmte Entfernung. Wenn Sie möchten, können Sie sofort eine Kopie erstellen, die im gewünschten Abstand vom ausgewählten Objekt horizontal / oder vertikal platziert wird. Eine frühere Version von Flash hatte ein Plugin, das dies tat diese Funktion... Leider erinnere ich mich nicht an den Namen.
Es ist sehr praktisch, nahtlose Muster in Illustrator zu erstellen ( Objektmuster machen). Ich erinnere mich, wie ich im Blitz mit der Schöpfung hektisch raffiniert war. In der Illustrator-Version von CC 2015 ist alles automatisiert. Eine Reihe von Einstellungen hilft dabei, das Muster in Dutzenden von Variationen zu formen, wobei nur wenige grafische Elemente zur Verfügung stehen. In mehr frühe Versionen Alle Programme mussten manuell ausgeführt werden, wie bisher im Flash.
(Hinweis - Mit der Analysefunktion kann ein Muster zu einem vektorbearbeitbaren Objekt gemacht werden ( Objekt - Darstellung erweitern).
14. Objektmosaik
Erstellung einer Farbpalette basierend auf einem vorhandenen Bild. Wir importieren dann das Bild, das wir mögen, in krank (offen) Objekt - Objektmosaik erstellen... In den Einstellungen geben wir die Häufigkeit der Teilung in Höhe und Breite an.
Und am Ausgang bekommen wir:
15.Blend
Wird zum Erstellen von Verläufen verwendet. Sie können schrittweise Übergänge erstellen, z. B. im Bild. Ich werde nicht sagen, dass ich es oft benutze, aber es kann für jemanden nützlich sein. Ich denke, es kann verwendet werden, um einfache Hintergrundbilder zu erstellen.
Das Tool kann auch zum Klonen von Objekten verwendet werden. Platzieren Sie zwei Objekte in einem Abstand voneinander und wenden Sie Mischoptionen an. Wählen Sie die Anzahl der Schritte (die Anzahl der geklonten Objekte).
16. Werkzeug Formwerkzeug erstellen. Eine sehr praktische Sache für die Arbeit mit Grundelementen. Blitzschnell schien es mir weniger bequem.
Halten Sie die Alt-Taste gedrückt und klicken Sie auf die ausgewählten Segmente. Löschen Sie die Segmente. Wenn wir nur die Maus über mehrere ausgewählte Bereiche ziehen - Verbindungen.
Add-on ist ein Tool, mit dem Sie automatisch schneiden, verbinden usw. können. hervorgehobene Formulare. Was mich betrifft, ist es nicht sehr praktisch, ich benutze es oft BauenGestaltenWerkzeug.
(Zeichenflächen)
18.Custom Tool Panel
Möglichkeit, eine eigene Symbolleiste zu erstellen, unnötige zu verwerfen und nur die von Ihnen verwendeten auszuwählen.
In Flash Zeichenflächen, nämlich Szenen ( Szene 1,2,3 ..) befinden sich separat und Sie müssen zwischen ihnen wechseln (Umschalt + F2). In Illustrator können Sie sie alle vor Ihren Augen platzieren. Es ist praktisch, wenn Sie mehrere Versionen derselben Zeichnung erstellen, sodass alle Optionen zum Vergleich vor Ihren Augen liegen.
19.Isometrie mit Grafikstile
Und die letzte besteht darin, eine Isometrie zu erstellen, ohne sie mit 1 Klick (oder genauer gesagt mit 3 Klicks, da wir 3 Seiten haben;) mithilfe von Grafikstilen zu verwenden ( Grafikstile). Wie das gemacht wird, werde ich beim nächsten Mal unterschreiben.
Illustrator hat mit flash gemeinsam - die Möglichkeit, ein Objekt in einem Symbol zu speichern, und ebenso einfach kann dieses Symbol auf einen Flash übertragen werden (in einer flash.ai-Datei von öffnen Importieren - In die Bühne importieren).
Ein Symbol in Illustrator hat dieselben Eigenschaften wie in Flash.
Und am Ende werde ich schreiben, dass der Illustrator meiner Meinung nach dem Blitz unterlegen ist. Ja Ja es ist. Und das ist das Füllwerkzeug ( Farbeimer). Egal wie ich mich bei Krankheit daran gewöhne, es ist im Flash bequemer.
Wenn meine Notizen für Sie nützlich wurden oder Sie etwas von sich selbst hinzufügen möchten - willkommen in den Kommentaren! Allen viel Glück;)
Sie haben ein oder zwei Symbole, die Sie mit Animation animieren möchten. Wo würdest du anfangen? Angenommen, Sie haben SVG-Dateien, Illustrator CC-Programme und After Effects CC, aber die Lösung entgeht Ihnen.
In diesem Artikel werde ich zeigen, wie Sie eine SVG-Datei einfach animieren können, einschließlich der Vorbereitung der SVG-Datei in Illustrator und des Imports in After Effects CC. Ich werde auch erklären, wie Sie es in Formebenen konvertieren und Bewegung hinzufügen können. Lassen Sie uns abschließend über das Exportieren und Rendern sprechen.
Das Endergebnis der Arbeit.
Kommen wir nun zum lustigen Teil - wie man Bilder animiert.
Vorbereiten einer SVG-Datei in Illustrator
Beginnen wir mit dem Öffnen Ihrer SVG-Datei in Adobe Illustrator CC. Ich werde ein kleines Autosymbol animieren, das bei Week Of Icons kostenlos erhältlich ist.
Nach dem Öffnen der Datei müssen wir die Gruppierung aufheben und alle Objekte in Ebenen aufteilen. Sie können es manuell tun oder verwenden Freigabe für Ebenen (Sequenz) um den Prozess zu beschleunigen. Bevor Sie die Datei in After Effects importieren, müssen Sie sie als Illustrator-Datei speichern.
Wir können die Gruppierung von Objekten mithilfe von Release to Layers (Sequence) aufheben, um keine kostbare Zeit zu verschwenden. Importieren und Organisieren einer Datei in After Effects CC
Sie können jetzt in After Effects CC importieren. Verwenden wir die Tastenkombination Strg + I (Windows)oder Befehl + I. (Mac)um den Dialog zu laden Datei importierenoder gehen Sie zu Datei\u003e Importieren\u003e Datei ... Wählen Sie an derselben Stelle die von uns vorbereitete Illustrator CC-Datei aus und klicken Sie auf Importieren.Ein kleines Dialogfeld mit dem Namen der ausgewählten Datei sollte angezeigt werden. Bitte auswählen Komposition aus der Dropdown-Liste unter dem Namen Art importieren.
Eine schnellere Möglichkeit zum Importieren einer Datei besteht darin, auf die Spalte im Projektfenster zu doppelklicken. Im Timeline-Panel sehen wir eine neue Komposition. Doppelklicken Sie darauf. Wir sollten jetzt die Illustrator CC-Ebenen mit orangefarbenen Symbolen links neben den Titeln sehen.
Bevor wir zur Sache kommen, müssen wir alle diese Ebenen in konvertieren Ebenen formen... Wir müssen sie alle mit auswählen Strg + A / Befehl + A.oder manuell mit Umschalt + linke Maus... Klicken Sie danach mit der rechten Maustaste auf die Ebene und wählen Sie Erstellen\u003e Formen aus Vektorebene erstellen.
Nachdem Sie die neuen Ebenen ausgewählt haben, ziehen Sie sie auf oberer Teil Bedienfelder über den Illustrator CC-Ebenen und löschen Sie dann die Illustrator CC-Ebenen, damit sie nicht im Weg sind.
Konvertieren von Illustrator CC-Ebenen in Formebenen in After Effects CC Obwohl dies nicht erforderlich ist, ist es wichtig, dass wir jeder Ebene einen geeigneten Namen geben und / oder sie kolorieren. Dies ermöglicht es uns, effizienter zu arbeiten, wenn wir uns darauf konzentrieren schlüsselbilder... Im folgenden Beispiel stimmen die Farben der Etiketten mehr oder weniger mit der Füllung der jeweiligen Ebenen überein.
Es ist sehr praktisch, Formebenen mit geeigneten Namen, Farben, Beschriftungen und Positionen zu kennzeichnen. Verwenden Sie die Tastenkombination, um Optionen zu konfigurieren Strg + K / Befehl + K. oder Komposition\u003e Kompositionseinstellungen… In den Kompositionseinstellungen müssen Sie die Breite, Höhe, Bildrate und Dauer (Breite, Höhe, Bildrate und Dauer) auswählen. Für dieses Projekt habe ich 60 Bilder pro Sekunde ausgewählt, um die Animation reibungslos zu gestalten.
Auf dieser Moment Alles scheint bereit zu sein, aber es gibt noch etwas zu tun. Wir müssen bestimmte Ebenen gruppieren, damit ihre Bewegungen mit der Hauptebene synchronisiert sind, die wir steuern können. Diese Methode wird aufgerufen Erziehung.
Verwenden Sie Pick Whip, um die übergeordnete Ebene mehreren Ebenen zuzuweisen. In unserem Beispiel habe ich die weniger signifikanten Schichten (untergeordnete Schichten) wie Windschutzscheibe, Körperteile, Holz und Seile der primären Körperschicht (übergeordnete Schicht) zugewiesen. Dadurch konnte ich die Position und Drehung des gesamten Autos (ohne die Räder) mithilfe einer übergeordneten Schicht steuern.
Animationserstellung
Ich wollte, dass das Auto gegen einen Felsen stößt und ein wenig in der Luft schwebt. Ich wollte auch, dass sich der Baum auf und ab bewegt und den Stamm öffnet. Ich begann mit der Herstellung von Steinen, Autos und Rädern. Dann war es Zeit, die größte Hürde zu überwinden - dem Baum die Handlung aufzuzwingen. Nachdem ich das beendet hatte, ging ich die kleinen Details wie den Kofferraum und die Seile an.
Skizze mit Animationsbeschreibung Der erste Schritt bestand darin, das Element oder die Ebene wie einen Stein aussehen zu lassen. Statt jedoch zu Illustrator CC zurückzukehren, um eine weitere Ebene hinzuzufügen, habe ich in After Effects CC nur das Stiftwerkzeug verwendet. Dadurch konnte ich schnell einen kleinen Stein entwerfen.
Oh, das mächtige Stiftwerkzeug! Der Kofferraum war eine relativ einfache Aufgabe. Ich habe es hinten im Auto installiert und getan anhaltspunkt unten links oben. Mit Pick Whip habe ich es der übergeordneten Körperebene zugewiesen. Der vorletzte Schritt bestand darin, den Spinneffekt zu erzielen, was wiederum den Sprungmoment des Autos realistischer machte. Bodymovin kombiniert mit der mobilen Bibliothek von Lottie.
P.S. du kannst meine finden illustrator-Dateien CC und After Effects CC.
Das Icon-Set steht zum kostenlosen Download unter zur Verfügung.
Heute haben wir ein ungewöhnliches Adobe Illustrator-Tutorial. Denn diesmal machen wir kein statisches Bild, sondern eine echte Animation. Stellen Sie sich vor, es stellt sich heraus mit mit Adobe Illustrator kann auch Cartoons zeichnen :)
Und dafür brauchen wir überhaupt nichts. Kompetente Organisation von Schichten und Export abschlussarbeit in das SWF-Format, in dem jede Ebene in einen Animationsrahmen konvertiert wird. Im heutigen Tutorial werden wir eine Countdown-Animation im Retro-Filmstil zeichnen. Die Ausgabe sollte ein Flash-Video mit genau diesem Countdown sein.
Als erstes müssen Sie alle notwendigen Elemente für die zukünftige Animation zeichnen. Zu diesem Zweck habe ich in einem separaten Dokument zwei Positionen des Filmrahmens erstellt, einen Kreis als Referenz, der in separate Sektoren geschnitten wurde, eine Textur und einen vertikalen Kratzer, um den Effekt der Antike sowie alle Zahlen und Inschriften hinzuzufügen.
Wenn alle Teile unseres Cartoons fertig sind, können Sie mit der Erstellung der Animation selbst beginnen. Der Einfachheit halber wird dies am besten in einem neuen Dokument durchgeführt. In diesem Fall spielen die Ebenen die Rolle von Animationsrahmen. Und in der allerersten Ebene müssen Sie nur den Rahmen des Filmstreifens kopieren. Stellen Sie es in die Mitte des Arbeitsbereichs.
Erstellen Sie nun eine zweite Ebene und kopieren Sie den Filmstreifen hinein, in dem die Löcher entlang der Kanten versetzt sind. Es muss auch zentriert werden.
Aus diesen beiden Ebenen können Sie bereits eine bewegte Filmanimation erhalten. Aber später brauchen wir viel mehr Schichten. Wählen Sie also die ersten beiden Ebenen aus, gehen Sie zu den Bedienfeldoptionen und erstellen Sie eine Kopie der Ebenen.
Ebenso müssen wir 12 Schichten von Filmen des Films akkumulieren.
Jetzt haben wir eine ganze Reihe von Schichten und sie sind alle sichtbar. In dem Sinne, dass die oberen Schichten die unteren behindern, was für die Arbeit nicht sehr praktisch ist. Daher können Sie einige Ebenen deaktivieren, indem Sie auf das Symbol mit dem Auge links neben dem Ebenennamen klicken. Um alle Ebenen gleichzeitig aus- oder einzuschalten, halten Sie die Alt-Taste gedrückt, während Sie auf das Augensymbol klicken. Durch Ein- und Ausschalten von Ebenen können Sie genau sehen, was sich in einem bestimmten Frame unserer zukünftigen Animation befindet. Und jetzt müssen wir die resultierenden Bilder leicht in verschiedene Richtungen bewegen, damit wir der Bewegung des Films einen leichten Jitter hinzufügen können. Aktivieren Sie dazu nur die Ebene, mit der Sie gerade arbeiten, und verschieben Sie den Rahmen dann um einige Pixel in eine beliebige Richtung.
Wenn Sie alle Ebenen durchlaufen und eine leichte Verschiebung hinzugefügt haben, können Sie mit der Erstellung der Animation des sich bewegenden Kreises beginnen. Kopieren Sie dazu den aus Sektoren bestehenden Kreis mit Cartoon-Teilen aus dem Dokument und platzieren Sie ihn auf der ersten Ebene über dem Rahmen des Filmstreifens.
Wenn Sie die Auswahl des Kreises aufheben, sieht er wie ein einzelnes Ganzes aus. Genau das brauchen wir.
Da es sich jedoch um separate Sektoren handelt, können Sie Animationen sehr schnell und einfach erstellen, indem Sie deren Farbe ändern. Kopieren Sie dazu diesen Kreis in die zweite Ebene und machen Sie den ersten Sektor heller. Sie werden sich daran erinnern, dass unser Film während der Bewegung zittert, so dass es überhaupt nicht notwendig ist, den Kreis genau in die Mitte des Rahmens zu setzen. Legen Sie es über das Auge.
In ähnlicher Weise müssen Sie den Kreis in jede nächste Ebene kopieren, während Sie einen Sektor mehr als beim vorherigen Mal mit einer helleren Farbe malen. Zusammen bilden diese 12 Schichten ein Film-Tween mit einem Füllkreis.
Als nächstes müssen wir unseren Ebenen Textur hinzufügen. Schalten Sie die erste Ebene ein und kopieren Sie dort die Textur aus der Originaldatei mit Ersatzteilen.
Schalten Sie dann nacheinander die nächsten Ebenen ein und kopieren Sie dort dieselbe Textur. Drehen Sie es einfach um 90 Grad, damit es auf jedem Bild anders aussieht. Wie Sie vielleicht erraten haben, müssen wir allen 12 Frames Textur hinzufügen.
Wenn Sie es schon satt haben zu kopieren, kann ich Ihnen gefallen - es ist nur noch sehr wenig übrig. Der schwierigste Teil ist vorbei. Es bleibt, vertikale Kratzer und fast alles hinzuzufügen. Kopieren Sie dazu erneut den ursprünglichen Kratzer und platzieren Sie ihn an einer beliebigen Stelle in mehreren Ebenen. In meinem Fall erscheinen Kratzer nur in zwei Schichten.
Nachdem die Hauptschleife mit der Animation des Films fertig ist, müssen die Zahlen noch hinzugefügt werden. Da wir von 3 auf 1 plus das Wort Go !!! herunterzählen, brauchen wir noch mehr Schichten. Nicht 12, sondern bis zu 48. Dazu müssen Sie drei weitere Kopien der vorgefertigten Ebenen mit Filmanimation erstellen.
Und dann ist alles einfach. Schalten Sie die allererste Schicht ein und setzen Sie dort die Nummer drei.
Dann müssen Sie diese Nummer in die nächsten Ebenen kopieren, bis die Kreisanimation endet. Wenn Sie zur nächsten Kopie der Ebenen gelangen, in der der Kreis wieder vollständig ausgefüllt wird, müssen Sie bereits die Nummer zwei eingeben. Kopieren Sie auf die gleiche Weise die Nummer eins in die gewünschten Ebenen. Und wenn Sie zu den letzten Ebenen für die Beschriftung Go !!! gelangen, löschen Sie einfach den Kreis, bevor Sie die Beschriftung auf die gewünschte Ebene kopieren.
Das ist alles mit Animation. Die Hauptsache hier ist, nicht verwirrt zu werden. Sie können den Ebenen einige bequeme Namen geben, aber ich war irgendwie zu faul :) Und wenn Sie fertig sind, müssen Sie alle Ebenen wieder einschalten, indem Sie auf das Augensymbol klicken.
Stellen Sie sicher, dass Exportieren als: AI-Ebenen in SWF-Frames im Fenster mit den Exporteinstellungen festgelegt ist. Mit dieser Option werden Illustrator-Ebenen in Animationsrahmen umgewandelt. Klicken Sie dann auf die Schaltfläche Erweitert.
Wird Öffnen zusätzliche Einstellungen... Hier müssen Sie die Bildrate einstellen. Ich habe 12 Bilder pro Sekunde. Das Kontrollkästchen Schleifen ist für das Schleifen der Animation verantwortlich. Dank ihr wird das Video im Kreis abgespielt. Mit der Option Ebenenreihenfolge: Von unten nach oben werden Illustrator-Ebenen im Bedienfeld von unten nach oben reproduziert. Genau so haben wir unsere Animation erstellt.
Am Ausgang erhalten wir ein Flash-Video mit unserer Animation.
Jetzt siehst du das einfache Animation In Adobe Illustrator zu tun ist nicht so schwierig, wie es auf den ersten Blick scheint.
Um jedoch lange Videos oder interaktive Anwendungen zu erstellen, ist es immer noch besser, Adobe Flash oder andere Flash-Editoren zu verwenden. Zum Beispiel habe ich diese Katze in einem alten Macromedia Flash gemacht, den ich bei meiner Arbeit ausgegraben habe.
In letzter Zeit wurden HTML5 und CSS3 zunehmend zum Erstellen von Animationen verwendet. Dieser Code wird von modernen Browsern unterstützt und erfordert keinen Flash-Player.
Roman aka Dacascas speziell für den Blog Notizen eines Microstock-Illustrators
Abonnieren Sie unseren Newsletter, um nichts Neues zu verpassen:
Heute haben wir ein ungewöhnliches Adobe Illustrator-Tutorial. Denn diesmal machen wir kein statisches Bild, sondern eine echte Animation. Stellen Sie sich vor, Sie können auch Cartoons mit Adobe Illustrator zeichnen :)
Und dafür brauchen wir überhaupt nichts. Kompetente Organisation von Ebenen und Export der endgültigen Arbeit im SWF-Format, wobei jede Ebene in einen Animationsrahmen konvertiert wird. Im heutigen Tutorial werden wir eine Countdown-Animation im Retro-Filmstil zeichnen. Die Ausgabe sollte ein Flash-Video mit genau diesem Countdown sein.
Als erstes müssen Sie alle notwendigen Elemente für die zukünftige Animation zeichnen. Zu diesem Zweck habe ich in einem separaten Dokument zwei Positionen des Filmrahmens erstellt, einen Kreis als Referenz, der in separate Sektoren geschnitten wurde, eine Textur und einen vertikalen Kratzer, um den Effekt der Antike sowie alle Zahlen und Inschriften hinzuzufügen.
Wenn alle Teile unseres Cartoons fertig sind, können Sie mit der Erstellung der Animation selbst beginnen. Der Einfachheit halber wird dies am besten in einem neuen Dokument durchgeführt. In diesem Fall spielen die Ebenen die Rolle von Animationsrahmen. Und in der allerersten Ebene müssen Sie nur den Rahmen des Filmstreifens kopieren. Stellen Sie es in die Mitte des Arbeitsbereichs.
Erstellen Sie nun eine zweite Ebene und kopieren Sie den Filmstreifen hinein, in dem die Löcher entlang der Kanten versetzt sind. Es muss auch zentriert werden.
Aus diesen beiden Ebenen können Sie bereits eine bewegte Filmanimation erhalten. Aber später brauchen wir viel mehr Schichten. Wählen Sie also die ersten beiden Ebenen aus, gehen Sie zu den Bedienfeldoptionen und erstellen Sie eine Kopie der Ebenen.
Ebenso müssen wir 12 Schichten von Filmen des Films akkumulieren.
Jetzt haben wir eine ganze Reihe von Schichten und sie sind alle sichtbar. In dem Sinne, dass die oberen Schichten die unteren behindern, was für die Arbeit nicht sehr praktisch ist. Daher können Sie einige Ebenen deaktivieren, indem Sie auf das Symbol mit dem Auge links neben dem Ebenennamen klicken. Um alle Ebenen gleichzeitig aus- oder einzuschalten, halten Sie die Alt-Taste gedrückt, während Sie auf das Augensymbol klicken. Durch Ein- und Ausschalten von Ebenen können Sie genau sehen, was sich in einem bestimmten Frame unserer zukünftigen Animation befindet. Und jetzt müssen wir die resultierenden Bilder leicht in verschiedene Richtungen bewegen, damit wir der Bewegung des Films einen leichten Jitter hinzufügen können. Aktivieren Sie dazu nur die Ebene, mit der Sie gerade arbeiten, und verschieben Sie den Rahmen dann um einige Pixel in eine beliebige Richtung.
Wenn Sie alle Ebenen durchlaufen und eine leichte Verschiebung hinzugefügt haben, können Sie mit der Erstellung der Animation des sich bewegenden Kreises beginnen. Kopieren Sie dazu den aus Sektoren bestehenden Kreis mit Cartoon-Teilen aus dem Dokument und platzieren Sie ihn auf der ersten Ebene über dem Rahmen des Filmstreifens.
Wenn Sie die Auswahl des Kreises aufheben, sieht er wie ein einzelnes Ganzes aus. Genau das brauchen wir.
Da es sich jedoch um separate Sektoren handelt, können Sie Animationen sehr schnell und einfach erstellen, indem Sie deren Farbe ändern. Kopieren Sie dazu diesen Kreis in die zweite Ebene und machen Sie den ersten Sektor heller. Sie werden sich daran erinnern, dass unser Film während der Bewegung zittert, so dass es überhaupt nicht notwendig ist, den Kreis genau in die Mitte des Rahmens zu setzen. Legen Sie es über das Auge.
In ähnlicher Weise müssen Sie den Kreis in jede nächste Ebene kopieren, während Sie einen Sektor mehr als beim vorherigen Mal mit einer helleren Farbe malen. Zusammen bilden diese 12 Schichten ein Film-Tween mit einem Füllkreis.
Als nächstes müssen wir unseren Ebenen Textur hinzufügen. Schalten Sie die erste Ebene ein und kopieren Sie dort die Textur aus der Originaldatei mit Ersatzteilen.
Schalten Sie dann nacheinander die nächsten Ebenen ein und kopieren Sie dort dieselbe Textur. Drehen Sie es einfach um 90 Grad, damit es auf jedem Bild anders aussieht. Wie Sie vielleicht erraten haben, müssen wir allen 12 Frames Textur hinzufügen.
Wenn Sie es schon satt haben zu kopieren, kann ich Ihnen gefallen - es ist nur noch sehr wenig übrig. Der schwierigste Teil ist vorbei. Es bleibt, vertikale Kratzer und fast alles hinzuzufügen. Kopieren Sie dazu erneut den ursprünglichen Kratzer und platzieren Sie ihn an einer beliebigen Stelle in mehreren Ebenen. In meinem Fall erscheinen Kratzer nur in zwei Schichten.
Nachdem die Hauptschleife mit der Animation des Films fertig ist, müssen die Zahlen noch hinzugefügt werden. Da wir von 3 auf 1 plus das Wort Go !!! herunterzählen, brauchen wir noch mehr Schichten. Nicht 12, sondern bis zu 48. Dazu müssen Sie drei weitere Kopien der vorgefertigten Ebenen mit Filmanimation erstellen.
Und dann ist alles einfach. Schalten Sie die allererste Schicht ein und setzen Sie dort die Nummer drei.
Dann müssen Sie diese Nummer in die nächsten Ebenen kopieren, bis die Kreisanimation endet. Wenn Sie zur nächsten Kopie der Ebenen gelangen, in der der Kreis wieder vollständig ausgefüllt wird, müssen Sie bereits die Nummer zwei eingeben. Kopieren Sie auf die gleiche Weise die Nummer eins in die gewünschten Ebenen. Und wenn Sie zu den letzten Ebenen für die Beschriftung Go !!! gelangen, löschen Sie einfach den Kreis, bevor Sie die Beschriftung auf die gewünschte Ebene kopieren.
Das ist alles mit Animation. Die Hauptsache hier ist, nicht verwirrt zu werden. Sie können den Ebenen einige bequeme Namen geben, aber ich war irgendwie zu faul :) Und wenn Sie fertig sind, müssen Sie alle Ebenen wieder einschalten, indem Sie auf das Augensymbol klicken.
Stellen Sie sicher, dass Exportieren als: AI-Ebenen in SWF-Frames im Fenster mit den Exporteinstellungen festgelegt ist. Mit dieser Option werden Illustrator-Ebenen in Animationsrahmen umgewandelt. Klicken Sie dann auf die Schaltfläche Erweitert.
Zusätzliche Einstellungen werden geöffnet. Hier müssen Sie die Bildrate einstellen. Ich habe 12 Bilder pro Sekunde. Das Kontrollkästchen Schleifen ist für das Schleifen der Animation verantwortlich. Dank ihr wird das Video im Kreis abgespielt. Mit der Option Ebenenreihenfolge: Von unten nach oben werden Illustrator-Ebenen im Bedienfeld von unten nach oben reproduziert. Genau so haben wir unsere Animation erstellt.
Am Ausgang erhalten wir ein Flash-Video mit unserer Animation.
Jetzt können Sie sehen, dass einfache Animationen in Adobe Illustrator nicht so schwierig sind, wie es auf den ersten Blick scheint.
Um jedoch lange Videos oder interaktive Anwendungen zu erstellen, ist es immer noch besser, Adobe Flash oder andere Flash-Editoren zu verwenden. Zum Beispiel habe ich diese Katze in einem alten Macromedia Flash gemacht, den ich bei meiner Arbeit ausgegraben habe.
In letzter Zeit wurden HTML5 und CSS3 zunehmend zum Erstellen von Animationen verwendet. Dieser Code wird von modernen Browsern unterstützt und erfordert keinen Flash-Player.
Roman aka Dacascas speziell für den Blog
Abonnieren Sie unseren Newsletter, um nichts Neues zu verpassen:
In letzter Zeit sind verschiedene Arten von SVG-Grafiken (Scalable Vector Graphics) auf Websites und Anwendungen sehr beliebt geworden. Dies liegt an der Tatsache, dass alle neueste Browser unterstützen dieses Format bereits. Hier finden Sie Informationen zur Unterstützung von SVG-Browsern.
Dieser Artikel behandelt das einfachste Beispiel für die Animation eines SVG-Vektors mit dem leichten Jquery-Plugin Lazy Line Painter.
QuelleUm diese Aufgabe abzuschließen und vollständig zu verstehen, sind Grundkenntnisse in HTML, CSS und JQuery wünschenswert, aber nicht erforderlich, wenn Sie nur SVG animieren möchten.) Los geht's!
Und so die Schritte, denen wir folgen müssen:
- Erstellen Sie die richtige Dateistruktur
- Plugin herunterladen und verbinden
- Zeichnen Sie coole Umrissbilder in Adobe Illustrator
- Konvertieren Sie unser Bild in Lazy Line Converter
- Fügen Sie den resultierenden Code in main.js ein
- Fügen Sie etwas CSS hinzu, um zu schmecken
1. Erstellen Sie die richtige Dateistruktur
Der Initializr-Dienst hilft uns dabei, wo Sie die Parameter wie in der Abbildung unten auswählen müssen.
- Klassisches H5BP (HTML5 Boiler Plate)
- Keine Vorlage
- Nur HTML5 Shiv
- Minimiert
- IE-Klassen
- Chromrahmen
- Dann klicken Sie auf Download it!
2. Laden Sie das Plugin herunter und verbinden Sie es
Da initializr mit der neuesten jquery-Bibliothek aus dem Archiv geliefert wird, das wir aus dem Lazy Line Painter-Projekt-Repository herunterladen müssen, müssen wir nur 2 Dateien in unser Projekt übertragen. Die erste ist "jquery.lazylinepainter-1.1.min.js" (die Version des Plugins kann abweichen) und befindet sich im Stammverzeichnis des resultierenden Ordners. Das zweite ist Beispiel / js / vendor / raphael-min.js.
Legen Sie diese 2 Dateien in den Ordner js. Und wir verbinden sie mit unserer index.html vor main.js wie folgt:
3. Zeichnen Sie in Adobe Illustrator ein cooles Umrissbild
- Zeichnen Sie unser Umrissbild in Illustrator (der einfachste Weg, dies mit dem Stiftwerkzeug zu tun).
- Es ist notwendig, dass die Konturen unserer Zeichnung nicht geschlossen werden, da für unsere Wirkung ein Anfang und ein Ende notwendig sind
- Es sollten keine Füllungen vorhanden sein
- Maximale Dateigröße - 1000 × 1000 px, 40 KB
- Auf Objekt zuschneiden\u003e Zeichenflächen\u003e An Zeichenflächengrenzen anpassen
- Speichern im SVG-Format (Standard-Speichereinstellungen reichen aus)
Beispielsweise können Sie die Symbole im Anhang verwenden.
4. Konvertieren Sie unser Bild in Lazy Line Converter
Ziehen Sie einfach Ihr Symbol in das Feld unten.
Die Dicke, Farbe der Kontur und die Geschwindigkeit der Animation können im Code selbst geändert werden, der nach der Konvertierung angezeigt wird!
5. Fügen Sie den resultierenden Code in main.js ein
Fügen Sie nun einfach den resultierenden Code in eine leere Datei main.js ein
Parameter:
Strichbreite - Umrissdicke
StrokeColor - Umrissfarbe
Sie können auch die Zeichengeschwindigkeit jedes Vektors ändern, indem Sie die Werte des Dauerparameters ändern (standardmäßig 600).
6. Fügen Sie nach Belieben etwas CSS hinzu
Absatz aus index.html entfernen
Hallo Welt! Dies ist HTML5 Boilerplate.
Und stattdessen fügen wir einen Block ein, in dem unsere Animation stattfinden wird
fügen Sie dann der Datei main.css etwas CSS hinzu, um ein besseres Aussehen zu erhalten:
Körper (Hintergrund: # F3B71C;) #icons (Position: fest; oben: 50%; links: 50%; Rand: -300px 0 0 -400px;)
speichern Sie alle Dateien.
Öffnen Sie jetzt einfach index.html in einem modernen Browser und genießen Sie den Effekt.
P.S. Beim Start auf einem lokalen Computer kann sich der Start der Animation um einige Sekunden verzögern.
