Animationen und Grafiken online erstellen: 4 kostenlose Tools

Animationen und Grafiken online erstellen: 4 kostenlose Tools

Christoph Paterok
Christoph Paterok
17.05.2016

Inhaltsverzeichnis

Software wie Adobe Photoshop oder InDesign ist super. Für mich persönlich lohnt sich die Anschaffung allerdings nicht. Einerseits brauche ich sie nicht wirklich regelmäßig und zum anderen bieten sie einen Funktionsumfang, den ich niemals ausnutzen werde, geschweige denn beherrschen möchte.

Grafiken, bearbeitete Bilder oder kleine Animationen brauche ich allerdings trotzdem gelegentlich. Sie steigern die Lesbarkeit und Verständlichkeit von Blog Artikeln und erhöhen somit auch die Chance damit in Suchmaschinen gefunden zu werden. Auch Social Media Posts erlangen mit einem unterstützendem Bild meistens mehr Reichweite.

Übersicht der Tools

  • Canva: Erstellung von einfachen Grafiken für Web und Print.
  • Google Zeichnungen: Erstellung von sehr einfachen Grafiken für Web.
  • Gravit Designer: Erstellungen von detaillierten Grafiken bis hin zu Logos.
  • Animatron Studio: Erstellung von Animation als SVG, GIF oder Video-Datei

Canva

Screenshot Canva: Grafiken online erstellen

Canva ist mein persönlicher Favorit, wenn es um das Erstellen von Grafiken geht. Es ist super einfach zu bedienen und bietet sehr viele Vorlagen, die einem gerade beim ersten Benutzen des Tools sehr helfen. Mit Canva könnt ihr nicht nur Grafiken für’s Web erstellen. Die Qualität reicht sogar für Print-Zwecke aus. Beim Fertigstellen einer Datei könnt ihr den Qualitätsgrad einfach festlegen.

Lesetipp:

Beim Erstellen der Grafik könnt ihr auf eine riesige Bibliothek von Fotos, Illustrationen, Icons oder Shapes zurückgreifen. Hier ist zu beachten, dass es Premium Artikel gibt, die man zunächst kostenlos verwenden kann um seine Grafik zu erstellen, allerdings beim Download dann bezahlen muss. Jedoch ist die Auswahl der kostenlosen Vorlagen in der Überzahl. Ich persönlich musste noch nie auf die Premium-Versionen zurückgreifen.

Auch wenn ihr in eure Bilder Text einfügen möchtet, seid ihr bestens bedient. Es gibt wahnsinnig viele Schriftarten und auch hier sehr coole Vorlagen für Textblöcke.

QuickTipp: Die erzeugten Grafiken und Bilder von Canva haben eine enorm gute Qualität. Um die Ladezeiten Deiner Webseiten-Besucher so gering wie möglich zu halten, empfiehlt es sich die Dateien nochmal mit tinypng.com zu optimieren. Hier werden die Bilder ohne erkennbaren Qualitätsverlust komprimiert.

Google Zeichnungen

Screenshot Google Zeichnungen

Google Zeichnungen“ ist Bestandteil von Google Drive. Dort allerdings leicht zu übersehen. Um eine neue Zeichnung zu erstellen, müsst ihr in eurem Google Drive auf den Button „Neu“ und dann auf den Reiter „Mehr…“ klicken. Dort findet ihr dann den Eintrag zu Google Zeichnungen.

Dieses Tool steht mit seiner Funktionalität leider sehr weit hinten bei den hier vorgestellten Tools. Jedoch reicht es für das schnelle erstellen von ganz einfach Grafiken. Es gibt hier leider keine Vorlagen, jedoch können vorhandene Bilder in das Canvas eingefügt und dann mit den gängigen Werkzeugen Text, Shapes und Linien bearbeitet werden. Das Ergebnis kann dann über „Datei“ -> „Herunterladen als…“, als JPG, PNG oder PDF heruntergeladen werden.

Zusätzlich besteht die Möglichkeit die Grafik als SVG herunterzuladen. Dies ist eine Funktionalität, die beispielsweise bei Canva nicht vorhanden ist. Ich persönlich bin ein großer Fan des SVG Dateiformats, weil es quasi eine Vektorgrafik ist und somit nicht verpixeln kann. Gerade in der Zeit von hochauflösenden Bildschirmen und mobilen Endgeräten, ein Faktor, dem man Beachtung schenken sollte.

Gravit Designer

Gravit Designer

Auf den Gravit Designer bin ich erst vor Kurzem gestoßen. Von der Funktionalität des Tools wird man auf dem ersten Blick erschlagen. Wer jedoch schon ein bisschen Erfahrung mit Grafikprogramm hat, dürfte sich schnell zurecht finden. Zudem ist das Design des Tools sehr aufgeräumt und bietet viel Raum zum Arbeiten.

In meinen Augen spielt der Gravit Designer gerade bei Vektorgrafiken seine Stärken aus. Man kann die Grafikdateien sehr detailliert bearbeiten und dann als JPG, PNG oder SVG herunterladen. Meiner Meinung nach reicht die Funktionalität sogar aus, um einfache Logos zu erstellen. Die Auswahl der Schriftarten ist auch hier enorm. Es stehen unter anderem alle Google Webfonts zur Verfügung.

Animatron Studio

Animatron 2

Animatron Studio ist mit keinem der hier vorgestellten Tools direkt vergleichbar. Mit Animatron kann man, wie der Name schon sagt, Animationen für Webseiten erstellen. Die Funktionalität ist enorm. Für den Einstieg in das Tool gibt es sehr gute Tutorials, die während des Onboardings gezeigt werden. Gerade das Switchen zwischen Design- und Animationsmodus kann bei Beginn ziemlich verwirrend sein.

In das Projekt können Bild-, Video- und Musikdateien importiert werden. Die fertige Animation kann als HTML5-Code, PNG, SVG, MP4 oder GIF heruntergeladen werden.

Fairerweise muss man allerdings erwähnen, dass man in der kostenloses Version immer das Logo von Animatron als Wasserzeichen in der Animation sieht. Für $15 im Monat werden in der Premium-Version dann Animationen ohne Branding ausgeliefert. Ich persönlich finde den Preis absolut in Ordnung.

Lesetipp:

Fazit

Zunächst muss man einmal sagen, dass es Wahnsinn ist, was browserbasierte Software mittlerweile alles kann. Mein persönliches Schweizer Taschenmesser ist und bleibt Canva. Es ist einfach zu bedienen und man erhält schnell gute Ergebnisse. Bei dem Gravit Designer bin ich auf die weitere Entwicklung gespannt. Gerade im Umgang mit SVG Dateien derzeit mein Favorit.

Animatron bietet super Funktionalität, benötigt jedoch eine relativ lange Einarbeitungsphase (so ging es zumindest mir). Bei schwierigen Themen kann eine kleine Animation allerdings Wunder bewirken. Wer also das Bedürfnis in seinen Artikeln oder Webseiten sieht, der sollte die Zeit investieren.

Google Zeichnungen ist leider nur bedingt für die Grafikerstellung geeignet. Hier gilt allerdings zu beachten, dass man immerhin SVG Dateien erstellen kann.

Wir haben ein Tool vergessen? Wir freuen uns auf Deinen Kommentar.

Christoph Paterok
Christoph Paterok
Christoph Paterok ist als SEO Teil eines cross-funktionalem Growth Teams bei einem Düsseldorfer Telekommunikationsunternehmen. 1999 kam er zum ersten Mal mit dem Thema Online Marketing in Kontakt und hat sich seit 2004 auf die Suchmaschinenoptimierung spezialisiert. Seine Erfahrungen konnte er vor allem mit eigenen Projekten sammeln.

21 Kommentare

Annette Chrometz
Annette Chrometz
Vielen Dank für die kurzen, aber sehr informativen Beschreibungen der Tools.
psychotherapie in graz
psychotherapie in graz
herzlichen dank für die auflistung und beschreibung-Animatron kann ich mir mal schon nicht leisten, daber ich checke auch die anderen vorschläge, gruss, michael
Susan
Susan
Danke für die Tips. Leider denke ich das Programm was ich suche nicht dabei ist?!
Ich suche ein Programm mit denen ich aus aus png oder psd files eine figur animieren kann also wo ich meine Figur mit Boones animieren kann. Könntest Du mir weiter helfen?
Danke
Christian Häfner
Christian Häfner
Hey Susan,

stell die Frage doch mal in der LSWW Community: https://www.facebook.com/groups/letsseewhatworks/

Vielleicht hat dort jemand eine Idee.
Viele Grüße
Christian
Susan
Susan
Danke!!!
Sonja
Sonja
Sehr cool, vor allem der Canva Tipp.. !!!
Fettbär
Fettbär
Gut
In 12 Monaten zum erfolgreichen SaaS Unternehmer
[…] einigen Wochen habe ich hier auf LSWW gelesen, wie man online Grafiken und Bilder erstellen kann. Das dort vorgestellte Tool Gravit.io hat mir dabei […]
Uli Ludwig
Uli Ludwig
Danke für den Canva Tipp. Habe ich soeben ausprobiert und bin begeistert :-))
Wolfgang Mauer
Wolfgang Mauer
Danke für den guten Beitrag Christoph. CANVA wird direkt mal ausprobiert!
Christoph Paterok
Christoph Paterok
Gerne :) Gravit.io ist auf jeden Fall auch einen Blick wert.
Tomas Herzberger
Tomas Herzberger
Cooler Beitrag vielen Dank! Canva benutze ich schon lange und ausführlich ist ein super Tool! Vor allen Dingen habe ich dort Zugriff auf qualitativ hochwertige Skockbilder, die ich für 1$ kaufen kann, ohne gleich ein Abo abschließen zu müssen.

Kleiner Tipp: auch PowerPoint kann inzwischen schon eine ganze Menge, u.a. Grafiken freistellen. Mein Favorit, wenn ich Buttons basteln muss oder so gar keine Zeit habe.
Werner Rosin
Werner Rosin
Da ich (leider) ein ziemlicher Grafik Laie bin und mir mit einigen Tools ganz ganz gut helfen kann, habe ich immer noch nicht rausgefunden, mit welcher Softwae/Programmen man existierende .jpg, .png. .gif Dateien editieren und verändern kann (außer Fotoshop). Geht das überhaupt ohne PS also ohne .psd Dateien. Sicher für Profis eine doofe Frage, mir würde eine Antwort aber helfen.
Christoph Paterok
Christoph Paterok
Hallo Werner,
keine doofe Frage! Ja, also um bestehende jpg, png oder gif Dateien zu bearbeiten, bräuchtest Du die Ursprungsdateien. Das sind meistens Vektorgrafiken bzw. PSD-Dateien. Für so etwas habe ich auch noch kein brauchbares Onlinetool gefunden.

Was denkst du?

Kostenloser Newsletter

Schließe dich über 5.000 Abonnenten an, die unseren Newsletter erhalten. Kostenlos und jederzeit abbestellbar.
Deine Daten sind sicher. Hier ist unsere Datenschutzerklärung.
..