Grafiken online mit Vectr erstellen

Du bist hier:
< Alle Themen


1 Einleitung

Die Web­site vectr.com bie­tet sich an, um Info­gra­fi­ken oder klei­ne Gra­fi­ken mit wenig Text (in SVG, PNG oder JPG) zu erzeu­gen, bei­spiels­wei­se für Bran­ching Sce­n­a­ri­os. Vectr ist ein rei­nes Online-Tool, daher ist kein Down­load eines Design­pro­gramms not­wen­dig. Das Pro­gramm sichert auto­ma­tisch ihre Arbeits­schrit­te. Es ist mög­lich kol­la­bo­ra­tiv an Gra­fi­ken zu arbeiten.

2 Erste Schritte

Sie müs­sen kei­nen neu­en Account anle­gen.
Mel­den Sie sich zunächst auf vectr.com mit fol­gen­den Daten an:

E‑Mail: zfl-digitalelehre@uni-koeln.de
Pass­wort: Digi­Leh­re

Es ist ein gemein­schaft­lich genutz­ter Account.
Ach­tung: Bit­te benut­zen Sie des­halb nur die zur Ver­fü­gung gestell­ten Vor­la­gen und ver­än­dern Sie kei­ne bereits ver­wen­de­ten Dateien.

Log­in

Sie sind nun im Menü des Digi­Leh­re-Accounts mit allen erstell­ten Vor­la­gen und bereits ver­wen­de­ten Infografiken.

Für Sie ste­hen zwei Optio­nen zur Aus­wahl, um eine neue Datei im Menü zu erzeugen:

2.1 Sie kopie­ren eine der Vor­la­gen im Menü (emp­foh­len & für die Erstel­lung von Bran­ching Sce­n­a­ri­os zur Ver­fü­gung gestellt)

2.2 Sie erstel­len eine neue Datei

2.1 Sie kopieren eine der Vorlagen im Menü

Suchen Sie sich zunächst eine der Vor­la­gen aus.

Hin­weis: Die ers­ten Datei­en, die oben links ange­zeigt wer­den, sind immer die zuletzt bear­bei­ten Datei­en aller Autoren des Digi­Leh­re-Accounts.
Um eine Vor­la­ge aus­zu­su­chen, kön­nen Sie in der Über­sicht scrol­len oder sich die Such­funk­ti­on zu Nut­ze machen, in dem Sie z.B. „Vor­la­ge” in die obi­ge Such­zei­le ein­ge­ben.
Indem Sie auf das gewünsch­te Ele­ment und auf „OPEN” kli­cken, kön­nen Sie sich die ein­zel­nen Vor­la­gen im Detail anschauen.

Über­sicht aller Ele­men­te und Vorlagen
Suche nach Vor­la­gen und Öff­nen einer Vor­la­ge mit mou­se-over „OPEN”


Hin­weis: Bit­te neh­men Sie kei­ne Ände­run­gen in den Vor­la­gen (oder wie erwähnt in den bear­bei­te­ten Datei­en) vor! Erst nach­dem Sie die Vor­la­gen kopiert haben, kön­nen Sie die­se indi­vi­du­ell mit Ihren Tex­ten anpas­sen.

Um zurück zur Über­sicht zu gelan­gen, kli­cken Sie auf den „Zurück-Pfeil” links oben neben der Arbeits­flä­che im Menü.

Zurück zum Menü

Wenn Sie sich nun für eine Vor­la­ge ent­schie­den haben, kön­nen Sie die­se dupli­zie­ren, indem Sie auf das „Dupli­zie­ren-Icon” kli­cken. (Die Icons ent­ste­hen bei Mou­seo­ver über den ent­spre­chen­den Elementen.)

Dupli­zie­ren

Nun haben Sie ein Dupli­kat erzeugt, dass nun den Namen „unti­t­led” besitzt. Geben Sie Ihrer Datei einen neu­en Namen nach fol­gen­dem Schema:

ZFL (oder Kooperationspartner)_Name_Zweck oder LM für Lern­mo­dul
Z.B.: ZFL_Natascha_LM_Kommunikation

Umbe­nen­nen der Datei

Anschlie­ßend kön­nen Sie Ihre Vor­la­ge bear­bei­ten.

Im Kapi­tel 4Vor­la­gen bear­bei­ten” wer­den Ihnen die wich­tigs­ten Funk­tio­nen erläu­tert.
Wei­te­re Tipps zum Hin­zu­fü­gen von Ele­men­ten fin­den Sie im Kapi­tel 3Tex­te und For­men ein­fü­gen”.

2.2 Sie erstellen eine neue Datei

Wenn Sie eine neue Datei erstel­len möch­ten, kli­cken Sie oben links auf den blau­en But­ton „Crea­te File”. Anschlie­ßend öff­net sich eine neue lee­re Datei, die Sie bear­bei­ten kön­nen. Wenn Sie wie­der zurück in das Menü gehen, kön­nen Sie Ihrer Datei einen Namen geben. Unter 2.1Sie kopie­ren eine der Vor­la­gen im Menü” wur­de das Sche­ma zur Benen­nung bereits erläutert.

Neue Datei erstellen
eine neue Datei wur­de erstellt

3 Texte und Formen einfügen

Die Bedie­nung ist sehr intui­tiv. Links neben dem Bear­bei­tungs­fens­ter unter dem „Zurück-Pfeil” befin­den sich alle wich­ti­gen Werk­zeu­ge. Die­se sind von oben nach unten ange­ord­net, um z.B. For­men oder Tex­te ein­zu­fü­gen.
Um die Über­sicht die­ses Wiki-Arti­kels ein­zu­hal­ten wird nur auf Text und Form­ele­men­te ein­ge­gan­gen, bei wei­te­ren Infor­ma­tio­nen schau­en Sie sich bit­te wei­te­re Hil­fen und Tuto­ri­als unter dem Infor­ma­ti­ons-Icon an (sie­he Kapi­tel 6 „Wei­te­re Tuto­ri­als und Hil­fen”).

Rechts neben dem Bear­bei­tungs­fens­ter öff­nen sich wei­te­re Optio­nen, wenn Sie unter „Lay­er” das ent­spre­chen­de Ele­ment aus­wäh­len.
Hin­weis: Nut­zen Sie bit­te die Schrift „Open Sans” für Gra­fi­ken mit Text­ele­men­ten, die für die Digi­leh­re-Web­site erstellt wer­den sollen.

Text

Um For­men ein­zu­fü­gen, wäh­len Sie bei­spiels­wei­se das Recht­eck im lin­ken Werk­zeug­me­nü und zie­hen Sie ein Recht­eck auf die Arbeits­flä­che. Auch bei die­sem Tool öff­net sich ein wei­te­res Bear­bei­tungs­fens­ter auf der rech­ten Seite.

Form

Hin­weis: Als Grund­la­ge wird emp­foh­len ein wei­ßes Recht­eck als Hin­ter­grund ein­zu­fü­gen. Bei neu erstel­len Datei­en müs­sen alle Ele­men­te selbst ein­ge­fügt wer­den, daher wird emp­foh­len eine der Vor­la­gen zu verwenden.

4 Vorlagen bearbeiten

In den Vor­la­gen befin­den sich bereits alle Ele­men­te, die Sie für die Info­bil­der benötigen.

Alle Ele­men­te sind unter „Lay­er” aus Sicher­heits­grün­den gesperrt, sodass Sie nicht unge­wollt Ele­men­te ver­schie­ben können.

4.1 Ele­men­te aus­wäh­len und ent­sper­ren

Wenn Sie unter Lay­er” auf die Ele­men­te kli­cken, erscheint kurz dar­auf ein Rah­men um das aus­ge­wähl­te Ele­ment im Ansichts­fens­ter, sodass Sie erken­nen kön­nen, um wel­ches Ele­ment es sich han­delt. Zur Über­sicht wur­den die Ele­men­te sinn­voll benannt „Text 1, Text 2 .. etc.”

aus­ge­wähl­tes Element

Um neu­en Text ein­zu­fü­gen, ent­sper­ren Sie das gewünsch­te Ele­ment mit einem Klick auf das „Schloss-Sym­bol”. Die fol­gen­de Abbil­dung zeigt, dass das Schloss bei „Text 1” nicht akti­viert ist.

ent­sperr­tes Element

Nun kön­nen Sie indi­vi­du­ell Ihre Text­bau­stei­ne in bestehen­de Text­ele­men­te einfügen.

4.2 Ele­men­te unsicht­bar schalten

Im neben­ste­hen­den „Augen-Sym­bol” kön­nen Sie Ele­men­te unsicht­bar schalten.

unsicht­bar

4.3 Wei­te­re hilf­rei­che Funk­tio­nen kompakt:

  • Löschen: Mit einem Rechtsklick kön­nen Sie Ele­men­te löschen.
  • Zurück­setz­ten: Mit dem gän­gi­gen Short­cut STRG + Z kön­nen Sie Bear­bei­tungs­schrit­te zurücksetzten.
  • Aus­rich­ten mit Hilfs­li­ni­en: Beim Ver­schie­ben von Ele­men­ten erschei­nen auto­ma­tisch Lini­en, die Ihnen hel­fen, Ele­men­te in einer gera­den Linie auszurichten.
  • Beim Aus­rich­ten gilt zusätz­lich Fol­gen­des zu beach­ten: Glei­che Abstän­de sind in der Gestal­tung sehr wich­tig. Um Ele­men­te zu ver­schie­ben, kön­nen Sie die Pfeil­tas­ten oder auch die Maus benut­zen.
    Um detail­liert in gleich gro­ßen Schrit­ten ver­schie­ben zu kön­nen, nut­zen Sie dafür die Shift Tas­te in Kom­bi­na­ti­on mit den Pfeil­tas­ten, dadurch kön­nen Sie Ele­men­te in 10er Schrit­ten ver­schie­ben. Hier kön­nen Sie z.B. immer in gleich gro­ßen Schrit­ten die Abstän­de zählen.
  • In den Vor­la­gen fin­den Sie zwei Auf­zähl­op­tio­nen vor:
    Ellipsen/bzw. Auf­zähl­zei­chen oder Zah­len. Bei­de Ele­men­te befin­den sich in allen Vor­la­gen, die­se kön­nen Sie nach Belie­ben ein­setz­ten. Wir emp­feh­len bei meh­re­ren Unter­punk­ten die gel­ben Auf­zähl­zei­chen zu benutzen.

5 Exportieren

Um das fina­le Ergeb­nis zu expor­tie­ren kli­cken Sie in der rech­ten Navi­ga­ti­on auf das drit­te Icon von links.

Expor­tie­ren

Nun öff­net sich ein fina­les Export­fens­ter, womit Sie unter anderem:

  • die Brei­te und Höhe des zu expor­tie­ren­den Ele­ments ein­stel­len können
  • das For­mat (svg, png oder jpg) aus­wäh­len können
  • die fer­ti­ge Gra­fik down­loa­den können
Export­fens­ter

6 Weitere Tutorials und Hilfen

Wei­te­re Tuto­ri­als oder Hil­fen fin­den Sie in der rech­ten Navi­ga­ti­on unter dem Informations-Icon.

wei­te­re Hilfen
Schlagwörter:
Inhaltsverzeichnis