Grafiken online mit Vectr erstellen

Du bist hier:
< Alle Themen


1 Einleitung

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, daher ist kein Download eines Designprogramms notwendig. Das Programm sichert automatisch ihre Arbeitsschritte. Es ist möglich kollaborativ an Grafiken zu arbeiten.

2 Erste Schritte

Sie müssen keinen neuen Account anlegen.
Melden Sie sich zunächst auf vectr.com mit folgenden Daten an:

E-Mail: zfl-digitalelehre@uni-koeln.de
Passwort: DigiLehre

Es ist ein gemeinschaftlich genutzter Account.
Achtung: Bitte benutzen Sie deshalb nur die zur Verfügung gestellten Vorlagen und verändern Sie keine bereits verwendeten Dateien.

Login

Sie sind nun im Menü des DigiLehre-Accounts mit allen erstellten Vorlagen und bereits verwendeten Infografiken.

Für Sie stehen zwei Optionen zur Auswahl, um eine neue Datei im Menü zu erzeugen:

2.1 Sie kopieren eine der Vorlagen im Menü (empfohlen & für die Erstellung von Branching Scenarios zur Verfügung gestellt)

2.2 Sie erstellen eine neue Datei

2.1 Sie kopieren eine der Vorlagen im Menü

Suchen Sie sich zunächst eine der Vorlagen aus.

Hinweis: Die ersten Dateien, die oben links angezeigt werden, sind immer die zuletzt bearbeiten Dateien aller Autoren des DigiLehre-Accounts.
Um eine Vorlage auszusuchen, können Sie in der Übersicht scrollen oder sich die Suchfunktion zu Nutze machen, in dem Sie z.B. “Vorlage” in die obige Suchzeile eingeben.
Indem Sie auf das gewünschte Element und auf “OPEN” klicken, können Sie sich die einzelnen Vorlagen im Detail anschauen.

Übersicht aller Elemente und Vorlagen
Suche nach Vorlagen und Öffnen einer Vorlage mit mouse-over “OPEN”


Hinweis: Bitte nehmen Sie keine Änderungen in den Vorlagen (oder wie erwähnt in den bearbeiteten Dateien) vor! Erst nachdem Sie die Vorlagen kopiert haben, können Sie diese individuell mit Ihren Texten anpassen.

Um zurück zur Übersicht zu gelangen, klicken Sie auf den “Zurück-Pfeil” links oben neben der Arbeitsfläche im Menü.

Zurück zum Menü

Wenn Sie sich nun für eine Vorlage entschieden haben, können Sie diese duplizieren, indem Sie auf das “Duplizieren-Icon” klicken. (Die Icons entstehen bei Mouseover über den entsprechenden Elementen.)

Duplizieren

Nun haben Sie ein Duplikat erzeugt, dass nun den Namen “untitled” besitzt. Geben Sie Ihrer Datei einen neuen Namen nach folgendem Schema:

ZFL (oder Kooperationspartner)_Name_Zweck oder LM für Lernmodul
Z.B.: ZFL_Natascha_LM_Kommunikation

Umbenennen der Datei

Anschließend können Sie Ihre Vorlage bearbeiten.

Im Kapitel 4Vorlagen bearbeiten” werden Ihnen die wichtigsten Funktionen erläutert.
Weitere Tipps zum Hinzufügen von Elementen finden Sie im Kapitel 3Texte und Formen einfügen“.

2.2 Sie erstellen eine neue Datei

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. Unter 2.1Sie kopieren eine der Vorlagen im Menü” wurde das Schema zur Benennung bereits erläutert.

Neue Datei erstellen
eine neue Datei wurde erstellt

3 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 Übersicht dieses Wiki-Artikels einzuhalten wird nur auf Text und Formelemente eingegangen, bei weiteren Informationen schauen Sie sich bitte weitere Hilfen und Tutorials unter dem Informations-Icon an (siehe Kapitel 6 “Weitere Tutorials und Hilfen“).

Rechts neben dem Bearbeitungsfenster öffnen sich weitere Optionen, wenn Sie unter “Layer” das entsprechende Element auswählen.
Hinweis: Nutzen Sie bitte die Schrift “Open Sans” für Grafiken mit Textelementen, die für die Digilehre-Website erstellt werden sollen.

Text

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

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

4 Vorlagen bearbeiten

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

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

4.1 Elemente auswählen und entsperren

Wenn Sie unter Layer” 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 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.

4.2 Elemente unsichtbar schalten

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

unsichtbar

4.3 Weitere hilfreiche Funktionen kompakt:

  • Löschen: Mit einem Rechtsklick können Sie Elemente löschen.
  • Zurücksetzten: Mit dem gängigen Shortcut STRG + Z können Sie Bearbeitungsschritte zurücksetzten.
  • Ausrichten mit Hilfslinien: Beim Verschieben von Elementen erscheinen automatisch Linien, die Ihnen helfen, Elemente in einer geraden Linie auszurichten.
  • Beim Ausrichten gilt zusätzlich Folgendes zu beachten: 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. Hier 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ählzeichen oder Zahlen. Beide Elemente befinden sich in allen Vorlagen, diese können Sie nach Belieben einsetzten. Wir empfehlen bei mehreren Unterpunkten die gelben Aufzählzeichen zu benutzen.

5 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, womit 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

6 Weitere Tutorials und Hilfen

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

weitere Hilfen
Inhaltsverzeichnis
Zur Werkzeugleiste springen