So erstellen, bearbeiten und animieren Sie SVGs an einem Ort mit SVGator 3.0

Blog

So erstellen, bearbeiten und animieren Sie SVGs an einem Ort mit SVGator 3.0

Heute schauen wir uns das genauer an SVGator 3.0 , eine neue Hauptversion der beliebten SVG-Anwendung, mit der Sie SVG-Dateien erstellen, bearbeiten und animieren und das Beste aus dem Angebot von SVG herausholen können – von Anfang bis Ende.



Bestes CSS-Framework für React

SVGator entwickelt sich weiter und entwickelt sich stark. Vor drei Jahren haben wir eine umfassende Einführung in die grundlegende Verwendung von SVGator veröffentlicht. Damals war es eine App, die ausschließlich zum Animieren von SVG-Dateien gedacht war, die in anderen Apps erstellt wurden. Vor zwei Jahren , haben wir Ihnen eine neue Version von SVGator und seine verbesserten Animationsfunktionen vorgestellt. Dieses Mal führen wir a neue Hauptversion von SVGator die eine ausgereifte, vollständige Umgebung zum Zeichnen von Grund auf und zum Animieren von SVG-Grafiken bietet.

Notiz : Einige der in diesem Tutorial behandelten SVGator-Funktionen sind kostenpflichtig. Im kostenlosen Plan können Sie eine unbegrenzte Anzahl von SVG-Grafiken erstellen und exportieren. Sie können auch grundlegende Animationsfunktionen verwenden und 3 Animationen pro Monat exportieren. Erweiterte Animationsfunktionen sind im Rahmen eines kostenpflichtigen Plans ab 11 USD/Monat verfügbar.



In diesem Artikel werden wir einen Prozess zum Erstellen eines benutzerdefinierten SVG-Loaders verfolgen, vom Neuzeichnen und Anwenden verschiedener visueller Effekte über das Erstellen verschiedener Arten von Animationen bis zum Exportieren Ihrer Datei und deren Vorbereitung für die Verwendung im Web.

Spielen: Ein benutzerdefinierter Loader, der mit reinem SVG erstellt und in SVGator gezeichnet und animiert wurde.



Ein benutzerdefinierter Loader, der mit reinem SVG erstellt und in SVGator gezeichnet und animiert wurde.

visuelle grundlegende Netzprogrammierung

Wir beginnen damit, eine neue leere Datei zu erstellen und ihre Hintergrundfarbe zu ändern.

Ändern der Farbe der Leinwand

Ändern der Farbe der Leinwand. ( Große Vorschau )

Von hier aus können wir mit dem Zeichnen der Illustration beginnen, die wir später animieren werden. Mit SVGator können Sie alle Standard-SVG-Formen wie Ellipsen, Rechtecke und Polygone zeichnen sowie mit Stift- und Bleistiftwerkzeugen eigene zeichnen. Sie können auch boolesche Funktionen verwenden, um Formen miteinander zu kombinieren.

Um mir das Erstellen der gewünschten Form zu erleichtern, habe ich zunächst einen Kreis als Anhaltspunkt in die Mitte der Leinwand gezeichnet. Glücklicherweise macht SVGator das Ausrichten und Messen von Elementen dank eines intelligenten Systems von Hilfslinien und Fangfunktionen kinderleicht. Sie können auch Raster und Lineale für eine bessere Präzision und Wiedergabetreue verwenden.

Verwenden von intelligenten Hilfslinien zum Ausrichten des Kreises an der Mitte

http:fxnetworks.com/activate

Verwenden Sie intelligente Hilfslinien, um den Kreis an der Mitte auszurichten. ( Große Vorschau )

Wusstest du schon? Neben grundlegenden Formen und Zeichenfunktionen bietet SVGator auch eine Bibliothek mit vorgefertigten Assets, um Ihren Workflow zu beschleunigen. Sie können aus einer Vielzahl von Formen, Symbolen und Illustrationen wählen

Wusstest du schon? Neben grundlegenden Formen und Zeichenfunktionen bietet SVGator auch eine Bibliothek mit vorgefertigten Assets, um Ihren Workflow zu beschleunigen. Sie können aus einer Vielzahl von Formen, Symbolen und Illustrationen wählen. ( Große Vorschau )

Als nächstes zeichnen wir mit einem Stiftwerkzeug den ersten Klecks ungefähr der Form des darunter liegenden Kreises folgend. Das Pencil Tool würde sich auch gut für diesen Zweck eignen. Das wirklich Coole an diesem ist, dass das Bleistift-Tool von SVGator normalerweise Formen mit viel weniger Knotenpunkten erstellt als vergleichbare Werkzeuge in anderen Apps, wodurch das Ergebnis nicht nur glatter aussieht, sondern auch viel weniger Dateigröße hat.

wo kaufen hnt

#svgator #svgs

www.smashingmagazine.com

So erstellen, bearbeiten und animieren Sie SVGs an einem Ort mit SVGator 3.0

Heute werfen wir einen genaueren Blick auf SVGator 3.0, eine neue Hauptversion der beliebten SVG-Anwendung, mit der Sie SVG-Dateien erstellen, bearbeiten und animieren und das Beste aus dem Angebot von SVG herausholen können – von Anfang bis Ende.