Grafiken erstellen mit Vectr

Bilder online erstellen mit Vectr

Die Website vectr.com bietet sich an, um Infografiken oder kleine Grafiken mit wenig Text (in SVG, PNG oder JPG) zu erzeugen, beispielsweise für Branching Scenarios. Vectr ist ein reines Online-Tool, weswegen kein Download eines Designprogramms notwendig ist. Das Programm sichert automatisch Ihre Arbeitsschritte. Es ist auch möglich, kollaborativ an Grafiken zu arbeiten.

Durch ein Update hat sich das Design in Vectr etwas verändert. Die Funktionen sind aber unverändert.

1. Datei neu erstellen

Wenn Sie eine neue Datei erstellen möchten, klicken Sie oben links auf den blauen Button “Create File”. Anschließend öffnet sich eine neue leere Datei, die Sie bearbeiten können. Wenn Sie wieder zurück in das Menü gehen, können Sie Ihrer Datei einen Namen geben.

eine neue Datei erstellen

eine neue Datei wurde erstellt

2. Texte und Formen einfügen

Die Bedienung ist sehr intuitiv. Links neben dem Bearbeitungsfenster unter dem “Zurück-Pfeil” befinden sich alle wichtigen Werkzeuge. Diese sind von oben nach unten angeordnet, um z. B. Formen oder Texte einzufügen. Um die Übersichtlichkeit dieses Artikels einzuhalten, wird nur auf Text und Formelemente eingegangen. Für mehr Informationen schauen Sie sich bitte weitere Hilfen und Tutorials unter dem Informations-Icon an (siehe Abschnitt 5 Weitere Tutorials und Hilfen).

Rechts neben dem Bearbeitungsfenster öffnen sich weitere Optionen, wenn Sie im linkes Bildschirmbereich unter dem Reiter “Layer” das entsprechende Element auswählen.

Um Text hinzuzufügen, klicken Sie zunächst auf das “T” im linken Werkzeugmenü und dann in das Grafikfeld.

Nutzen Sie bitte die Schrift “Open Sans” für Grafiken mit Textelementen, die für das Portal “ZfL Lernen” erstellt werden sollen.

Text einfügen

Um Formen einzufügen, wählen Sie beispielsweise das Rechteck im linken Werkzeugmenü und ziehen Sie ein Rechteck auf die Arbeitsfläche. Auch bei diesem Tool öffnet sich ein weiteres Bearbeitungsfenster auf der rechten Seite.

Form einfügen

Als Grundlage wird empfohlen, ein weißes Rechteck als Hintergrund einzufügen. Bei neu erstellten Dateien müssen alle Elemente selbst eingefügt werden. Daher wird empfohlen, eine der Vorlagen zu verwenden.

3. Vorlagen bearbeiten

In den Vorlagen befinden sich bereits alle Elemente, die Sie für die Infobilder benötigen.

Alle Elemente unter “Layers” sind aus Sicherheitsgründen gesperrt, sodass Sie nicht ungewollt Elemente verschieben können.

3.1 Elemente auswählen und entsperren

Wenn Sie unter “Layers” auf die Elemente klicken, erscheint kurz darauf ein Rahmen um das ausgewählte Element im Ansichtsfenster, sodass Sie erkennen können, um welches Element es sich handelt. Zur Übersicht wurden die Elemente sinnvoll benannt “Text 1”, “Text 2” etc.

ausgewähltes Element

Um einen neuen Text einzufügen, entsperren Sie das gewünschte Element mit einem Klick auf das Schloss-Symbol. Die folgende Abbildung zeigt, dass das Schloss bei “Text 1” nicht aktiviert ist.

entsperrtes Element

Nun können Sie individuell Ihre Textbausteine in bestehende Textelemente einfügen.

3.2 Elemente unsichtbar schalten

Im nebenstehenden “Augen-Symbol” können Sie Elemente unsichtbar schalten.

Element versteckt

3.3 Weitere hilfreiche Funktionen kompakt

• Löschen: Mit einem Rechtsklick können Sie Elemente löschen.
• Zurücksetzen: Mit dem gängigen Shortcut Strg + Z können Sie Bearbeitungsschritte zurücksetzen.
• Ausrichten mit Hilfslinien: Beim Verschieben von Elementen erscheinen automatisch Linien, die Ihnen helfen, Elemente in einer geraden Linie auszurichten. Beim Ausrichten muss zusätzlich Folgendes beachtet werden: Gleiche Abstände sind in der Gestaltung sehr wichtig. Um Elemente zu verschieben, können Sie die Pfeiltasten oder auch die Maus benutzen. Um detailliert in gleich großen Schritten verschieben zu können, nutzen Sie dafür die Shift-Taste in Kombination mit den Pfeiltasten. Dadurch können Sie Elemente in 10er-Schritten verschieben. Dabei können Sie z. B. immer in gleich großen Schritten die Abstände zählen.
• In den Vorlagen finden Sie zwei Aufzähloptionen vor: Ellipsen bzw. Aufzählungszeichen oder Zahlen. Beide Elemente befinden sich in allen Vorlagen, die Sie nach Belieben einsetzen können. Wir empfehlen, bei mehreren Unterpunkten die gelben Aufzählungszeichen zu benutzen.

4. Dateien exportieren

Um das finale Ergebnis zu exportieren, klicken Sie in der rechten Navigation auf das dritte Icon von links.

Exportieren

Nun öffnet sich ein finales Exportfenster, in dem Sie unter anderem

• die Breite und Höhe des zu exportierenden Elements einstellen können,
• das Format (svg, png oder jpg) auswählen können,
• die fertige Grafik downloaden können.

Exportfenster

5. Weitere Tutorials und Hilfen

Weitere Tutorials oder Hilfen finden Sie in der rechten Navigation unter dem Informations-Icon.

weitere Hilfen