Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Gravit Designer

Erste Schritte mit Gravit Designer

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Gravit Designer ist meiner Meinung nach das nächste große Vektorbearbeitungsprogramm. Es ist benutzerfreundlich, professionell und wirklich plattformübergreifend, da es im Browser, unter Linux, Mac, ChromeOS und Windows funktioniert und zu einem späteren Zeitpunkt auch auf iPad und Android verfügbar sein wird. Es befindet sich in der aktiven Entwicklung, und neue Funktionen werden schnell hinzugefügt.

Darüber hinaus ist es zu 100% kostenlos, ohne Werbung oder aufdringliche Monetarisierungsmethoden. Mit den Worten von Alex von Gravit, wenn er gefragt wird, ob das Programm kostenlos bleibt:

„Ja, es wird definitiv frei bleiben und niemals von dummem Fremium oder was auch immer verkrüppelt werden. Wir werden später möglicherweise einige zusätzliche Dinge für Teams anbieten, die möglicherweise bezahlt werden (da wir auch diese Serverrechnungen bezahlen müssen), aber der Designer bleibt kostenlos, da wir möchten, dass jeder Zugriff auf ein kostenloses Pro-Design-Werkzeug erhält. “

In diesem Tutorial werde ich Sie durch die Funktionen führen, die Gravit Designer so hoffnungsvoll machen. Wir werden uns nicht zu sehr mit dem Unkraut befassen und jedes Werkzeug unter die Lupe nehmen, sondern einen umfassenden Überblick geben, damit Sie die bestmögliche Vorstellung davon bekommen, was in dieser Software enthalten ist. Lassen Sie uns anfangen!

Installieren und zum ersten Mal ausführen

Wenn Sie eine der Desktop-Versionen von Gravit verwenden möchten, gehen Sie zu designer.io/#download und holen Sie sich das Installationsprogramm für Ihr Betriebssystem. (Beachten Sie, dass im Moment ein Fehler in den Dropdown-Menüs des Linux-Builds vorliegt. Daher bevorzugen alle Pinguine derzeit möglicherweise die Browserversion).

Für diejenigen, die es vorziehen, die Browserversion zu verwenden - die den Vorteil hat, immer auf dem neuesten Stand zu sein und im Moment möglicherweise eine bessere Leistung zu erzielen - gehen Sie zu: designer.gravit.io/

Von Anfang an wird es cool. Wir werden mit einem Begrüßungsbildschirm begrüßt, auf dem wir die bevorzugte Höhe und Breite für unser Dokument festlegen können. Wir können jedoch auch die Felder für Höhe und Breite leer lassen, und unsere Leinwand ist unendlich. Eine fantastische Funktion, wenn Sie sich nicht sicher sind, wie groß Ihr Design sein wird.

Auch auf diesem ersten Bildschirm stehen über fünfzig vordefinierte Maßsätze zur Auswahl, darunter neunzehn Voreinstellungen für den Druck, acht für das Website-Design, fünfzehn für Cover und Inhalte in sozialen Medien, sechs für Telefone und Uhren und sieben für Tablets.

Wenn Sie sich für ein kostenloses Gravit Cloud-Konto anmelden, können Sie auf die neue Reihe vorgefertigter Vorlagen zugreifen, indem Sie auf der Registerkarte Neu von Vorlage auf der linken Seite des Begrüßungsbildschirms klicken.

Einige der vorgefertigten Social-Media-Vorlagen von Gravit

Hier finden Sie fünfzig gebrauchsfertige Social-Media-Grafiken, sechsunddreißig Folienpräsentationen, achtzehn Poster, vierundzwanzig Facebook-Post-Grafiken, dreiundzwanzig Blog-Grafiken, sechsundzwanzig A4-Poster und zwanzig Kartengrafiken. Diese sind alle sofort einsatzbereit oder können als Basis für die Iteration verwendet werden. Diese Kollektion ist erst vor ein paar Wochen brandneu. Erwarten Sie also, dass sie im Laufe der Zeit wächst.

Schnelle Schnittstellenübersicht

Zum Glück ist die Benutzeroberfläche von Gravit Designer sehr intuitiv, sodass Sie sich nicht besonders verloren fühlen sollten, selbst wenn Sie blind werden, um die Software zu erkunden. Trotzdem haben wir einen schnellen Überblick über die wichtigsten Komponenten.

Das erste, was Sie vielleicht wissen möchten, ist, dass die Benutzeroberfläche nicht lila sein muss. Wenn Sie das Lila graben, können Sie es unverändert lassen. Wenn Sie jedoch eine monochrome Benutzeroberfläche bevorzugen, gehen Sie zum Hauptmenü in der oberen linken Ecke, wählen Sie Bearbeiten > Einstellungen (Edit > Settings) und wählen Sie entweder „Dunkles Thema“ oder „Helles Thema“.

Benutzer von Sketch werden die Benutzeroberfläche als etwas vertraut empfinden, da das Layout sehr ähnlich ist. Oben haben wir unsere Symbolleiste mit allen Werkzeugen, die Sie in einer Vektor-App erwarten würden, wie z. B. Steuerelemente zum Verschieben und Einrasten von Zeichenflächen, Werkzeuge zum Erstellen und Auswählen von Pfaden und Text, Umdrehen und Drehen von Formen, Operationen mit mehreren Formen und Stapelreihenfolge Hotkeys für Steuerung sowie Export und Präsentation. Beachten Sie auch, dass mehrere Dokumente gleichzeitig geöffnet sein können und über Registerkarten oben rechts angezeigt werden.

Gravit menu options

Auf der linken Seite haben wir drei Registerkarten: Ebenen, Bibliotheken und Tutorials. Die Tutorials-Registerkarte (die in Version 3.2 in der Menüleiste in Hilfe verschoben werden soll) dient als Anleitung, wenn Sie Gravit zum ersten Mal verwenden. Auf der Registerkarte Bibliotheken finden Sie eine umfangreiche Sammlung von Drag & Drop-Assets - diese sind zusätzlich zu den Vorlagen, über die wir oben gesprochen haben. Die Ebenen-Registerkarte ist die meiste Zeit geöffnet, da sie eine Liste Ihrer Seiten (mehr auf Seiten in Kürze) und natürlich Ihrer Ebenen anzeigt.

Auf der rechten Seite haben Sie kontextspezifische Entwurfssteuerelemente für Ihr aktuell ausgewähltes Objekt. Wenn nichts ausgewählt ist, werden stattdessen die Dokumenteinstellungen angezeigt.

Seiten; Wie Zeichenflächen mit Bonus "Powerpoint"

Seiten in Gravit Designer sind eine Mischung aus Seiten und Zeichenflächen, die Sie möglicherweise in anderen Anwendungen finden. Jede Seite ist wie ein in sich geschlossenes Dokument mit eigenen Einstellungen für Abmessungen, Beschnitt, Rand und Leinwandfarbe. Sie beginnen standardmäßig mit einer einzelnen Seite und fügen weitere hinzu, indem Sie auf die kleine Schaltfläche Neue Seite erstellen oben rechts im Seiten-Bedienfeld klicken. Sie können dann jede Seite anzeigen, indem Sie sie in diesem Bereich auswählen.

Wenn Sie Seiten so verwenden möchten, wie Sie normalerweise Zeichenflächen verwenden würden, aktivieren Sie den Schalter links neben dem Löschen-Symbol und Sie sehen alle Ihre Seiten gleichzeitig im "Mehrseitenmodus". Diese Seiten können ausgewählt, verschoben, manuell in der Größe geändert oder in verschiedene voreingestellte Größen geändert werden, als wären sie einzelne Dokumente. Im mehrseitigen Modus können Sie Seiten auch duplizieren, indem Sie auf ihren Titel auf der Leinwand klicken, um sie auszuwählen, und dann entweder ALT + Ziehen oder CTRL / CMD + D drücken.

Gravit-Seiten haben auch die großartige Funktion „Masterseiten“. Mit dieser Funktion können Sie eine Seite so einrichten, dass sie als „Masterseite“ fungiert, mit Elementen wie Hintergründen oder Überschriften, die anderen Seiten gemeinsam sind. Anschließend können Sie festlegen, dass diese anderen Seiten von dieser Masterseite gezeichnet werden, wobei der gesamte Inhalt eingefügt wird, über den Sie zusätzliche Elemente erstellen. Wenn Sie die Elemente auf der Masterseite aktualisieren, werden auch alle anderen Seiten in Echtzeit aktualisiert.

Und in einer sehr coolen Funktion haben Sie durch die Verwendung der Gravit-Seiten sofort die Möglichkeit, eine "Powerpoint-ähnliche" Präsentation zu erstellen. Klicken Sie einfach auf die Wiedergabe (Play)-Taste ganz rechts in der Symbolleiste und jede Ihrer Seiten wird zu einer Folie. Drücken Sie den Abwärtspfeil (down arrow), um zur nächsten Folie zu gelangen, und den Aufwärtspfeil (up arrow), um zurück zu gelangen.

Gravit spielt eine Präsentation

Wege und Formen

Die Erstellung von Pfaden und Formen in Gravit verfügt über die bekannten Werkzeuge, die Sie von jedem Vektorgrafikprogramm erwarten. Wir haben das Standard-Stiftwerkzeug zum Zeichnen von geraden Linien und Bezierkurven sowie eine Reihe vordefinierter Formwerkzeuge für Linien, Rechtecke, Ellipsen, Polygone, Dreiecke und Sterne.

Wir haben jedoch auch ein zusätzliches Werkzeug, das sehr hilfreich ist, und das ist das Bezigon-Werkzeug. Wenn Sie beim Festlegen von Punkten mit dem Bezigon-Werkzeug die ALT-Taste gedrückt halten, werden automatisch glatte Kurven um jeden Punkt generiert.

Sobald Pfade und Formen gezeichnet sind, können ihre Eigenschaften in der rechten Spalte geändert werden. Normale Pfade können auf Öffnen oder Schließen eingestellt werden, sodass Sie einen Pfad, der nicht vollständig abgeschlossen wurde, einfach schließen oder einen Pfad öffnen können, um weitere Punkte hinzuzufügen. Formen erhalten kontextspezifische Einstellungen, z. B. die Möglichkeit, Ellipsen in Kreisdiagramm-ähnliche Formen umzuwandeln oder die Anzahl der Punkte festzulegen, die ein Polygon oder Stern haben soll.

Normaler Text und Text auf einem Pfad

Das Textwerkzeug funktioniert auch so, wie Sie es von anderen Anwendungen gewohnt wären. Wenn das Textwerkzeug ausgewählt ist, können Sie auf einen Punkt klicken, um mit der Eingabe von Text mit dynamischer Größe zu beginnen, oder Sie können klicken und ziehen, um ein Feld zu zeichnen, in dem Ihr Text eingeschränkt wird.

Wenn Sie in einer Funktion, die für Webdesigner sehr hilfreich ist, "Lorem" eingeben und dann die Leertaste (SPACE) drücken, wird automatisch ein Absatz mit dem Platzhaltertext "Lorem ipsum" für Sie generiert.

Mit Gravit ist es extrem einfach, Text einem Pfad folgen zu lassen. Zeichnen Sie einfach einen Pfad oder eine Form, wählen Sie das Textwerkzeug aus, bewegen Sie den Mauszeiger über Ihren Pfad, bis eine rote Linie darauf angezeigt wird, und klicken Sie dann auf. Dadurch wird ein nächster Text instanziiert, der der Form des Pfads folgt. Der Pfad kann anschließend geändert werden und der Text wird seine Form entsprechend aktualisieren.

Wenn Sie den Text auswählen, den Sie auf einem Pfad platziert haben, können Sie auch in der rechten Spalte umschalten, um den Text innerhalb oder außerhalb des Pfads festzulegen und den Text umzukehren. Und es gibt eine einfache Möglichkeit, den Text zu positionieren: Klicken Sie einfach auf die kleine orangefarbene Markierung am Anfang des Textes und ziehen Sie sie. Das ist alles, was Sie brauchen.

Integrierte Google Fonts

Die meisten Designer waren schon mehrere Male im Karussell der Web-Schrift: Gehen Sie zu Google Fonts, wählen Sie eine Schrift aus, laden Sie sie herunter, installieren Sie sie (starten Sie die Design-App in einigen Fällen neu) und wählen Sie die Schrift in der Design-App aus, wiederholen Sie, wenn es nicht richtig aussieht. Oder wir verwenden stattdessen einfach Skyfonts, um den Schritt „Herunterladen und Installieren“ zu überspringen.

In Gravit Designer ist die gesamte Auswahl an Google Fonts jedoch sofort inline verfügbar, sodass die Verwendung von Web-Schriftarten genauso einfach ist wie die Verwendung normaler Schriftarten.

Darüber hinaus können Sie Ihre eigenen Schriftarten importieren, wenn Sie die Webversion von Gravit mit Datei > Importieren > Schriftarten hinzufügen (File > Import > Add fonts) ... verwenden.

Das Vorhandensein von Web-Schriftarten bedeutet natürlich nicht, dass Sie keine System-Schriftarten verwenden können. Solange Sie eine Desktop-Version von Gravit verwenden, sind auch alle Ihre lokalen Schriftarten verfügbar.

Mehrere Füllungen und Striche

Etwas, das ich in Gravit liebe, und eine weitere Funktion, mit der Sketch-Benutzer vertraut sind, sind mehrere Füllungen und Striche. In vielen Anwendungen müssen Sie Ihre Zielform jedes Mal duplizieren, wenn Sie zusammengesetzte Effekte erstellen möchten, indem Sie beispielsweise Rauschen über Kacheln von Bildern über flache Farben platzieren. In Gravit ist das nicht erforderlich, da Sie einer bestimmten Form so viele Füllungen und Ränder hinzufügen können, wie Sie möchten:

Jede Füllung oder jeder Rand verhält sich ähnlich wie eine separate Ebene mit eigenen Einstellungen für den angezeigten oder ausgeblendeten Status, den Mischmodus und die Opazität. Füllungen können auch in beliebiger Reihenfolge sortiert werden. Und weil Sie flache Farben, Bildtexturen, Farbverläufe oder Rauschen verwenden können, gibt es viel Raum für Kreativität.

Auswirkungen; Besser als Ebenenstile

Effekte in Gravit ähneln weitgehend den Ebeneneffekten, mit denen Sie aus anderen Anwendungen vertraut sind. Ähnlich wie bei Füllungen und Strichen sind Sie jedoch nicht auf einen Effekt pro Ebene beschränkt. Sie können so viele haben, wie Sie wollen.

Zu den Effekten gehören der Standardtarif für Schlagschatten (verdoppelt sich als äußeres Leuchten), innerer Schatten (verdoppelt sich als inneres Leuchten) und Überlagerung (Farbe oder Farbverlauf). Stricheffekte und Musterüberlagerungen sind aufgrund der vorhandenen Füll- und Strichwerkzeuge von Gravit natürlich nicht erforderlich. Es gibt jedoch auch einige wirklich interessante zusätzliche Effekte wie „Spiegel“, der einen Reflexionseffekt unterhalb der Form erzeugt, oder „gekrümmter Schatten“, der einen Schatten wie diesen erzeugt:

Es gibt auch eine Gaußsche Unschärfe, eine Vignette, einen einfachen Umfärbungseffekt für den Farbtonregler und einen tieferen Farbanpassungseffekt. Alle diese Effekte können nach Belieben überlagert und konfiguriert und dann zu jedem Zeitpunkt des Entwurfsprozesses optimiert und neu konfiguriert werden.

Geteilte Stile; für Staaten und Zeitersparnis

Mit Gravit können Stile erstellt werden, die die Füll-, Rahmen-, Effekt- und Texteinstellungen einer Ebene definieren. Diese Stile haben einige sehr nützliche Anwendungen.

Zum einen können Sie Stile erstellen, um verschiedene Zustände in derselben Form darzustellen, z. B. die Standardeinstellung und das Hover-Erscheinungsbild einer Schaltfläche. Zweitens können Sie einen Stil auf mehrere Objekte auf der Leinwand anwenden. Wenn Sie den Stil für eines dieser Objekte aktualisieren, können Sie ihn auch auf alle anderen Objekte anwenden.

Anker für Semi-Responsiveness

Mit den Ankereinstellungen können Sie festlegen, wie eine Form reagieren soll, wenn die Größe ihres übergeordneten Elements geändert wird. Auf diese Weise können Sie semi-responsive Funktionen erstellen und eine ganze Menge Zeit sparen.

Doppelte Seite (oben) verankert oben, unten und in der horizontalen Mitte, um die Reaktion auf ein übergeordnetes übergeordnetes Element zu steuern

Wenn Sie beispielsweise eine Benutzeroberfläche erstellen, die mit mehreren Bildschirmgrößen arbeiten muss, können Sie Ihr Layout in einer Größe erstellen und dann Ankerpunkte festlegen, um zu steuern, wie die Elemente des Designs gedehnt, verkleinert oder verschoben werden sollen, wenn sich die Dokumentgröße ändert. Sie können dann ein Duplikat der aktuellen Seite erstellen und deren Größe ändern, wobei der Großteil Ihres vorhandenen Designs erhalten bleibt, ohne dass Sie es wiederholen müssen.

Einpacken

Gravit Designer ist bereits eine fantastische Software und verspricht sehr viel für die Zukunft. In der nächsten Version, Version 3.2, werden Symbole eingefügt, die für einige Benutzer möglicherweise das letzte Teil des Anforderungspuzzles sind. Um einen Überblick über alles zu bekommen, was in den nächsten Versionen auf dem Programm steht, lesen Sie die Roadmap.

Gravit ist leistungsstark, flexibel, aktiv entwickelt, wirklich plattformübergreifend und völlig kostenlos. Was auch immer Ihr Grund für die Arbeit mit Vektoren ist, Gravit Designer ist es absolut wert, dass Sie es sich ansehen.

Weitere Informationen finden Sie unter: designer.io.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.