7 — Vectr: Grafiken online erstellen

7 — Vectr: Grafiken online 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.

 Durch ein Update hat sich das Design in Vectr etwas ver­än­dert. Die Funk­tio­nen sind aber unverändert. 

 

2 Datei neu erstellen

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. Beach­ten Sie dabei das unter 2.1.4 Datei umbe­nen­nen erläu­ter­te Sche­ma zur Benen­nung von Dateien.

 

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.

 Um Text hin­zu­zu­fü­gen, kli­cken Sie zunächst auf das T im lin­ken Spal­ten­me­nü und dann in da Grafikfeld.

 

Text ein­fü­gen

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 ein­fü­gen

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­ers” aus Sicher­heits­grün­den gesperrt, sodass Sie nicht unge­wollt Ele­men­te ver­schie­ben können.

 

4.1 Elemente auswählen und entsperren

Wenn Sie unter „Lay­ers” 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 Elemente unsichtbar schalten

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

 

Ele­ment versteckt

4.3 Weitere hilfreiche Funktionen 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 aus­zu­rich­ten.
    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 Dateien 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