- - Strikingly

Hast du jemals über die Fotos nachgedacht, die du mit deinem Smartphone aufnimmst? Was ist mit den Memes, die du in den sozialen Medien speicherst, um sie mit deinen Freunden zu teilen? Bearbeitest du normalerweise die Bilder in der Galerie deines Telefons?

Wenn du die Größe der Bilder auf deinem Handy änderst, werden sie normalerweise unscharf. Technisch ausgedrückt, werden sie "verpixelt". Hier kommt die Rolle der Vektorgrafik ins Spiel.

Vielleicht hast du den Begriff "Vektorgrafik" noch nie gehört, aber es ist wichtig, dass du weißt, was damit gemeint ist, wenn du mit digitalen Fotos jeglicher Art arbeitest. Lass uns also zuerst besprechen, was Vektorgrafik ist, und dann erklären, wie Vektorgrafiken funktionieren.

Was ist Vektorgrafik?

Vektorgrafik" ist ein technischer Begriff, der sich auf Bilder und Illustrationen bezieht, die mit verschiedenen mathematischen Algorithmen erstellt werden. Vektorgrafik wird mit Software wie Adobe Illustrator und CorelDRAW erstellt. Diese Bilder lassen sich leicht skalieren, bearbeiten, modifizieren, in der Größe verändern oder sogar in der Farbsättigung ändern, ohne dass die Bildqualität darunter leidet oder beeinträchtigt wird.

Zum besseren Verständnis wirf einen Blick auf das folgende Bild.

Das obige Bild ist wie ein Foto, das du mit deinem Handy oder deiner Kamera aufnehmen würdest. Wenn du dieses Bild vergrößerst, wird es unscharf, wie im folgenden Bild gezeigt

Das Bild wurde unscharf und verzerrt, weil dieses Foto mit einer Kamera aufgenommen und nicht mit einer Bildbearbeitungssoftware erstellt wurde.

Wenn du ein Bild eines Hahns in einer Software in Form von Vektorgrafik erstellst, kannst du trotz Vergrößerung ein klares Bild erhalten.

Wenn du dieses Bild zuschneidest oder in der Größe veränderst, wird es immer noch sehr klar sein und scharfe Konturen haben.

Du wirst keinen Unterschied zwischen dem ursprünglichen Vektorgrafikbild des Hahns und dem bearbeiteten Bild erkennen. Das liegt daran, dass Vektorgrafiken ihre Bildqualität nicht verlieren, wenn sie in der Größe verändert werden, so dass sie für den Einsatz auf professionellen Websites sehr nützlich sind.

Arten von Vektordateien

Im Allgemeinen findest du im Internet zwei Arten von Bildern: Raster- oder Bitmaps und Vektoren. Diese beiden Arten können leicht verwechselt werden, sind aber recht einfach zu unterscheiden. Rastergrafiken bestehen aus Pixeln, und jedes Pixel hat eine bestimmte Farbe. Vektoren bestehen nicht aus Pixeln. Vektorgrafiken bestehen aus mathematischen Algorithmen oder Formen wie Kurven und Linien. Vektorgrafiken benötigen kompatible Anwendungen zur Bearbeitung, können aber mit den meisten Webbrowsern oder Bildprogrammen angezeigt werden.

So wie Rasterdateien verschiedene Typen oder Formate haben (.JPG, PNG usw.), gibt es auch für Vektorgrafiken mehrere Formate. Die gebräuchlichsten Formate für Vektorgrafiken sind im Folgenden beschrieben.

1. KI

AI (Artificial Intelligence) steht für Künstliche Intelligenz. Dies ist das native Bilddateiformat von Adobe Illustrator, der beliebtesten Bearbeitungssoftware für Vektorgrafiken. Es wird zum Entwerfen und Erstellen von Vektorgrafiken für Logos, Illustrationen, Zeichnungen, Figuren für Animationen, Apps und mehr verwendet.

2. EPS

EPS steht für Encapsulated Postscript. Dieses Dateiformat für Vektorgrafiken ist relativ älter als AI. Ein Nachteil von EPS ist, dass es nicht mit Bildtransparenz funktioniert, weshalb es nicht so beliebt ist wie AI. Ein Vorteil von EPS ist jedoch, dass es eine Seite enthalten kann, die beide Arten von Bildern enthält: Vektorgrafiken und Rasterbilder.

3. PDF

Du hast sicher schon einmal von PDF in offiziellen Dokumenten oder Dateien gehört, da es für diese häufig verwendet wird. PDF steht für Portable Document Format. Es handelt sich um ein altes Dateiformat für Vektorgrafiken, das den meisten Menschen bekannt ist. Das Gute an PDF-Dateien ist, dass sie plattformübergreifende Dokumente erstellen, d. h. du kannst sie mit verschiedenen Anwendungen oder Softwareprogrammen anzeigen. Unabhängig davon, mit welchem Programm du eine PDF-Datei öffnest, wird sie gleich aussehen. Ursprünglich wurden PDF-Dateien in Adobe-Systemen erstellt und konnten nur in Adobe Reader angezeigt werden, aber inzwischen gibt es so viele Programme, die gut mit PDF-Dateien funktionieren.

4. SVG

SVG steht für Scalable Vector Graphics (skalierbare Vektorgrafiken). Dies ist ein modernes Format, von dem noch nicht viele Leute gehört haben. Es ist einfacher zu handhaben als andere Dateiformate. SVG-Dateien werden häufig für Webinhalte verwendet, weil man sie leicht in Webseiten einfügen kann. Sie sehen ansprechend aus und werden daher für Online-Produktpräsentationen verwendet.

Das waren die gängigen Dateiformate für Vektorgrafiken. Wenn du eine bestimmte App zur Bildbearbeitung verwendest, kannst du unter den Dateiformaten wählen, die mit der App kompatibel sind, um deine Vektorgrafiken zu speichern.

Wie funktionieren Vektorgrafiken?

Es gibt verschiedene Möglichkeiten, eine Vektorgrafikdatei zu öffnen. Je nachdem, was du mit der Datei machen willst, hast du folgende Möglichkeiten:

Wenn du die Vektorgrafikdatei nur ausdrucken oder ansehen möchtest, kann so ziemlich jedes Vektorgrafikprogramm diesen Zweck erfüllen.
Wenn du eine Datei nur ansehen willst, kannst du sie sogar in einem Programm öffnen, das für Rasterbilder gedacht ist. Adobe Photoshop ist eine Möglichkeit. Adobe Photoshop kann sowohl EPS-, SVG-, PDF- als auch AI-Dateien öffnen. Aber du kannst sie nicht bearbeiten und trotzdem im Vektorgrafikformat belassen.
Du kannst die meisten Vektorgrafikdateien auch in einem Webbrowser anzeigen. Dazu musst du die Datei nur in den Browser ziehen, und das Bild wird angezeigt. Leider kannst du die Datei auch hier nicht im Webbrowser bearbeiten.
Wenn du eine Vektorgrafikdatei öffnest und bearbeiten möchtest, musst du eine Vektorgrafikanwendung wie Adobe Illustrator wählen. Eine weitere Möglichkeit zur Bearbeitung einer Vektorgrafikdatei ist CorelDRAW, das etwas weniger verbreitet ist als Adobe Illustrator. Es gibt auch eine Open-Source-Anwendung zur Bearbeitung von Vektorgrafiken namens Inkscape.

Wozu wird Vektorgrafik verwendet?

Da Vektorgrafiken gut aussehen und bei der Bearbeitung nicht an Qualität verlieren, können sie von Unternehmen für viele verschiedene Zwecke verwendet werden. Sie wird häufig für alle Arten von Marketingkampagnen verwendet. Vektorgrafiken können Ihre Plakate, Logos, gedruckten Anzeigen, Website-Themenelemente, Illustrationen, Werbeartikel, Reddit-Art und vieles mehr darstellen.

Hier ist eine Liste von Gegenständen, die du mit Vektorgrafiken erstellen kannst.

1. Illustrationen

Viele erfahrene Illustratoren erstellen ihre Zeichnungen auf einem Tablet oder Computer. Sie verwenden gerne Vektorgrafiken, weil sie ihre Arbeit professionell und ordentlich aussehen lassen. Außerdem sind Illustrationen in Vektorgrafikformaten attraktiv für die Präsentation in einer Galerie oder Kunstausstellung.

2. Logos

Die Logos berühmter Marken, die wir täglich auf Plakatwänden und Websites sehen, werden oft mit Vektorgrafiken erstellt. Beispiele sind Coca-Cola, McDonald's, Facebook und Disney.

3. Webseiten

Da viele Menschen und Unternehmen ihre Websites heutzutage mit Hilfe von Website-Buildern erstellen, ist es für sie einfacher, Vektorgrafiken in ihren Web-Designs zu verwenden. Vektorgrafiken lassen Websites stilvoll, elegant, professionell und raffiniert aussehen. Viele Websites fügen Vektorgrafiken in jede Webseite ein. Sie sind auch deshalb gut für Websites geeignet, weil sie auf allen Bildschirmgrößen klar und deutlich aussehen. Unabhängig davon, ob jemand Ihre Website auf dem Desktop oder auf einem Handy betrachtet, passt sich Ihre Vektorgrafik ständig an und wird nicht verzerrt.

4. Karikaturen

Bevor es Apps und App-Spiele gab, sahen Kinder lieber Zeichentrickfilme und Animationen. Viele beliebte Programme wurden mit der Hand gezeichnet, aber einige wurden auch mit Computergrafiken, d. h. mit Vektorgrafiken, erstellt.

5. Videospiele

Einige der Unternehmen, die Videospiele herstellen, erstellen ihre Bilder ausschließlich mit Vektorgrafiken. Ein Beispiel dafür ist Sega, das zu der Zeit, als es Atari auf den Markt brachte, voll von Vektorgrafiken war. Sie verwendeten Vektorgrafiken, um die Klassiker "Battlezone" und "Asteroids" zu entwickeln.

6. Bücher

Vektorgrafik hat auch einen Platz in der Welt der veröffentlichten Bücher. Vektorgrafiken werden in Büchern häufig verwendet, um Konzepte zu illustrieren und Geschichten zu verschönern. In Comic-Büchern wird die Vektorgrafik sogar noch häufiger verwendet. Außerdem werden viele Buchumschläge mit Vektorgrafiken gestaltet.

7. Gedruckte Anzeigen

Die gedruckten Anzeigen, die du in Broschüren und Magazinen siehst, werden von professionellen Designern gestaltet, von denen viele gerne Vektorgrafiken verweden.

8. Plakatwände

Vektorgrafiken nehmen in der Regel den größten Teil des Platzes auf Plakatwänden ein. Das liegt daran, dass die Bilder auf Plakatwänden kristallklar sein müssen, damit sie aus der Ferne gut zu erkennen sind. Aus diesem Grund ist die Verwendung von Vektorgrafiken auf Plakatwänden sehr verbreitet. Plakatwände, die keine Vektorgrafiken verwenden, sehen nicht sehr professionell aus.

9. Filmplakate

Auf dem Weg ins Kino hast du bestimmt schon einmal ein schickes Filmplakat gesehen. Wenn du ein Filmplakat siehst, das fast so scharf aussieht wie ein 3D-Screenshot aus dem Film, weißt du, dass es mit Vektorgrafik erstellt wurde.

10. Markenartikel

Viele Unternehmen, die Markenartikel zur Präsentation ihrer Produktlinien herstellen, verwenden Vektorgrafiken zur Erstellung ihrer Bilder. Du kannst ihre Bilder dann leicht vergrößern oder verkleinern, damit sie auf Artikel unterschiedlicher Größe passen. Vektorgrafiken können auf T-Shirts, Tassen, Kugelschreiber und Schlüsselanhänger gedruckt werden, ohne dass sie an Präzision verlieren.

Beispiele für Websites mit Vektorgrafikdesign

Um zu verstehen, wie Vektorgrafiken in einem Webdesign aussehen, findest du im Folgenden einige Beispiele von Websites, die Vektorgrafiken in ihren Webseiten verwendet haben.

1. Future Bristol

Bild von Future Bristol genommen

2. Minergie Anniversary Website

Bild von Minergie Anniversary Website genommen

3. My Phone & Me

Bild von My Phone & Me genommen

4. MixPanel

Bild von MixPanel genommen

5. Fieldwork

Bild von Fieldwork genommen

6. Legwork Studio

Bild von Legwork Studio genommen

Wie du sehen kannst, sehen die Grafiken auf diesen Websites sehr klar und attraktiv aus. Das liegt daran, dass sie in Form von Vektorgrafiken vorliegen, die ihre Qualität auch dann nicht verlieren, wenn sie bearbeitet oder in der Größe verändert werden.

Bild von Strikingly genommen

Wenn du eine Website in Strikingly erstellst, ist es sehr einfach, Vektorgrafiken hinzuzufügen. Du kannst Vektorbilder in deine Strikingly-Website hochladen, indem du die Drag-and-Drop-Funktion deines Strikingly-Editors verwendest. Bilder von guter Qualität helfen dir, deine Website farbenfroh, ordentlich und schick aussehen zu lassen!

Die Rolle der Vektorgrafik in professionellen Websites