Warning: Trying to access array offset on value of type bool in /var/www/vhosts/xogdjphu.host248.checkdomain.de/ps.de/wp-content/themes/Divi/epanel/custom_functions.php on line 629
Einführung in Vektorgrafiken

Einführung in Vektorgrafiken

Als Fotograf arbeitetet man ja naturgemäß mit sogenannten Rastergrafiken, bei denen jeder Bildpunkt ein oder mehrere Werte zu gewiesen ist. Wer nichts anderes kennt, wird sich jetzt fragen: Wie gehts denn sonst?
Die Antwort lautet: keine Pixel speichern, sondern Informationen. Genauso funktioniert auch die Darstellung von Websiten im Internet. Diese Webseite wird nicht als Pixelgrafik vom Webserver geliefert, sondern nur die Informationen à la Mach den Hintergrund in grau, und platzier dort oben das Logo, die Schrift ist so und so und da ist ein Strich mit der Farbe. Ansonsten müssten alle die gleiche Bildschirmauflösung haben. Aber mal alles von vorn.

Vergleich des Speicherformates anhand eines Buchstaben

Das Linke Bild zeigt das Prinzipp einer Vektorgrafik: Um den Buchstaben “A” darzustellen, werden die Pixel eines Rasters eingefärbt, sodass sie der Betrachter als Buchstaben erkennen kann.

Im rechten Bild ist eine Vektorgrafik zu sehen, im Hintergrund deren Darstellung als Rastergrafik. In der Vektorgrafik stehen nicht die Informationen für jedes Pixel, sondern die Formen: Eine Linie geht von (0, 5) bis (2, 0). Wird die Grafik nun gerastert, wird sie umgewandelt in eine Rastergrafik (was für jede Darstellung nötig ist, da alle modernen Darstellungsmedien rasterorientiert arbeiten), was bedeutet, dass alle Pixel, die auf der Linie liegen gefärbt werden.

Skalierungsproblem der Pixelgrafiken; Wenn das Bild nicht angezeigt wird, aktualisiere bitte deinen Browser!

Der große Vorteil der Vektorgrafik ist, dass sie beliebig skalierbar sind, es geht beim verkleinern keine Information verloren und beim vergrößern stellt sich heraus, dass sie unendlich genau sind. Hört sich nach Geometrie an? Ist es auch! Denn in der Geometrie wird ein Kreis durch 2 Informationen beschrieben: den Mittelpunkt und den Radius. Bei Vektorgrafiken gibt es weiters noch die Linienstärke sowie die Füll- und Linienfarbe. Bei einer Rastergrafik sind, je nach Auflösung und Größe des Kreises, erheblich mehr Informationen nötig: Für jeden Punkt, der auf dem Umfang liegt, wird eine Information benögt. Bei rein digital erstellten Grafiken lässt sich also auch einiges an Speicherplatz sparen.

Pfade

Nun kommt endlich ein Thema das auch für Fotographen interessant wird: Jedes Bildbearbeitungsprogramm bietet die Funktion der Pfade an. Pfade sind bekannterweise einfach Linien, die dazu dienen Auswahlen zu speichern. Diese Pfade werden allerdings nicht rasterorientiert gespeichert, sondern als Vektoren. Jede .psd oder .xcf-Datei ist somit ein Hybrid aus den bekannten Rastergrafiken und Vektorgrafiken.[1]

Die Pfade in diesen Programmen (mit GIMP getestet) lassen sich als SVG (Scalable Vector Graphics) importieren und exportieren. SVG ist das einzige Dateiformat für Vektorgrafiken. Es gibt sehr viele Möglichkeiten zur Bildgestaltung in SVG, aber Pfade sind der Grundbaustein. Vektoren lassen sich (wie schon die Abkürzung zeigt) skalieren, beliebig genau. Jede Schrift, jedes Objekt wie ein Rechteck oder ein Kreis, jede beliebige Form kann man als Pfad sehen. Die obige Abbildung mit dem S deutete es bereits an: Es wird nicht die Position der Pixel des Buchstaben gespeichert, sondern die Kontur. Und diese Kontur lässt sich beliebig verändern: skalieren, dehnen, stauchen, deformieren. Das bedeutet nicht, dass jeder text automatisch zu einem Pfad wird, ansonsten könnte man keinen Text in einer SVG-Datei bearbeiten, sondern dass sie grundsätzlich konvertierbar sind. Das ist dann praktisch, wenn ein Schriftzug eben als Pfad verändert werden soll, um einen Effekt abzubilden.

Pfade sind das Grundprinzip von Vektorgrafiken!

deformierter Text und eine runde Bézierkurve mit Anfasspunkten

deformierter Text und eine Bézierkurve

In der Abbildung rechts habe ich das versucht zu verdeutlichen. Der Text ‘test’ wurde in einen Pfad umgewandelt, somit lassen sich die Konturen der einzelnen Buchstaben frei verändern. Ein Punkt, der die Kontur des ‘e’ oben beschreibt wurde versetzt und somit ist der Buchstabe (besser gesagt nur die obige Linie) dicker. Gleich daneben habe ich einen einfacheren Pfad gezeichnet, aber mit den Anfasspunkten, die zur Deformierung verwendet werden. Die Quadrate zeigen Punkte an, auf denen die Pfade liegen. Die Kreise bestimmen den Verlauf, dabei wird die Richtung beieinflusst, sowie die Stärke der Deformierung durch den Abstand der Kreise vom Quadrat. Diese Art von Linien wird als Bézierkurve bezeichnet und finden in der Bildbearbeitung überall Verwendung, da sie die geeignetste Form sind, Kurven (also nicht-gerade Linien) mathematisch zu beschreiben.

Effekte

Bild mit und ohne Unschärfe-Filter

Filter

Was wären Grafiken ohne tolle Filter? Die Filter funktionieren wie die Filter in bekannten Pixelgrafik-Bearbeitungsprogrammen. Die Arten von Effekten sind im Grunde auch sehr ähnlich wie in diesen Programmen, so gibt es Unschärfefilter, Verzerrungsfilter, verschiedenste Farbfilter, Körnungen, Lichter und Schattierungen, Texturen usw.

Mit der Kombination aller Möglichkeiten, eröffnet sich ein großes Gebiet von Anwendungsmöglichkeiten, da mit Vektorgrafiken fast nichts unmöglich ist, sie sind ideal für digital erstellte Grafiken. Bspw. wurde folgende Grafik mit Inkscape, einem sehr bekannten Vektorzeichenprogramm, das noch detailliert behandelt wird, erstellt:

Eine als Vektorgrafik erstellte Discokugel mit Effekten

(Quelle)

Animationen

Aber auch Animationen sind möglich, programmiert werden diese mit einfachem JavaScript, das auch für Webseiten verwendet wird. Das ermöglicht wiederum viele Anwendungen, beliebt sind hier u.a. Präsentationen. Der große Vorteil von Präsentationen mit SVG und JavaScript ist, dass nur ein einfacher Browser benötigt wird, um sie inklusiver aller Effekte darstellen zu können.

Ich hoffe dies  hier ist ein verständlicher Einstieg in Vektorgrafiken. Beim Nächsten Teil der Serie geht es um die Anwendung, also das Erstellen von Vektorgrafiken.

Links:

Quellen:

Über den Autor:

Sebastian Wagner steht als Schüler kurz vor seiner Matura. In seiner Freizeit fotografiert der netzaffine Geek gerne und befasst sich neben der Fotoausarbeitung auch mit verschiedenen Informatikthemen wie Programmierung, Linux, Verschlüsslung und Netzwerken. Außerdem ist er Österreichs viertbester Nachwuchsprogrammierer.


Warning: Trying to access array offset on value of type bool in /var/www/vhosts/xogdjphu.host248.checkdomain.de/ps.de/wp-content/themes/Divi/epanel/custom_functions.php on line 629
Einführung in Vektorgrafiken

Fotomosaik erstellen kostenlose Freeware

Sicherlich kennt jeder die Bilder die aus einem großen “Hintergrund-Bild” und vielen kleinen Bildern ein Foto-Mosaik ergeben. Oft findet man solche bei Postern von Musikbands. Ich habe jetzt relativ lange nach einem PS Plugin gesucht und leider keines gefunden. Sicherlich kann man auch händisch ein solches Mosaikbild erstellen nur würde man damit vermutlich sehr lange zubringen und mans chaft es auch nur schwer den Effekt mit dem Hintergrundbild herauszuholen. Wer eine einfache Collage seiner Bilder auf einem großen Poster zusammenstellen möchte wird mit dem Zusatzmodul von PS via Kontaktabzug bereits zufrieden sein. Hier kann man das Endformat, sowie die Anzahl der Spalten und Zeilen bestimmen (Erklärung gibt es im verlinkten Beitrag). Auch die Zeitschrift DOCMA hat in Heft 18 ein sehr gutes TuT dazu veröffentlicht, derzeit gibt es alte DOCMA-Hefte zum halben Preis.

Ich habe bei meiner Suche verschiedene Anbieter einer eigenständigen Software gefunden, allerdings hat mich nur eine wirklich überzeugt. Hier mal die verschiedenen Programme:

  1. http://www.foto-freeware.de/fotomosaik.php
  2. http://www.foto-freeware.de/mosanick.php
  3. http://www.docma.info/Mosaikerstellung-mit.3449.0.html

Entschieden habe mich mich für Edda, da es deutsch ist und in der kostenloses Version die meisten Einstellungsmöglichkeiten bietet. Ich werde es hier ein wenig näher erklären, beginnen wir.

Ihr könnt euch die Software hier beim Autor downloaden: http://sixdots.de/mosaik/de/download.php

Die Installation ist selbsterklärend und weiter zum nächsten Schritt.

1. Wir starten das Programm und sehen den Willkommensbildschirm. Wir erstellen zunächst eine Datenbank mit den Fotos die für das Mosaik genutzt werden sollen. Hier gilt je mehr desdo besser! Mit klick auf Datenbank erstellen öffnet sich ein Dialog in dem man die Qualität der Bilder einstellen kann und die Datenbank benennen kann (der Speicherort für die Datenbank kann unter Einstellungen definiert werden). Wenn das Endbild groß wird, solltet ihr auch die Qualität der einzelnen Bilder relativ hoch setzen. Habt ihr alles eingestellt wird es je nachdem wie viele Bilder ihr angegeben habt eine ganze Weile dauern bis Edda alle Bilder in die Datenbank importiert hat.

2. Nun auf Mosaikbild erstellen klicken und das “Hintergrundbild” definieren und wo die erstellte Mosaik-Bild-Datei gespeichert werden soll.

3. Jetzt kann man die vorhin importierte oder später aus allen importierten Datenbanken wählen.

4. Anschließend kommt nun ein schon wichtiger Dialog hier werden die Anzahl der Mosaiksteinchen angegeben und das Endformat kann praktisch definiert werden. Bei meinem Beispiel ist die Ausgangsdatei, also das Hintergrundbild sehr groß, ca. 50mb und Edda scheint dabei ein wenig in die Knie zugehen, die Veränderungen/Einstellungen werden nur verzögert angezeigt.

5. Nun auf weiter gedrückt landen wir bei den Mosaikoptionen, hier kann man definieren wie oft ein Einzelbild wiederholt werden darf. Wenn man nicht sehr viele Einzelbilder hat sollte man hier eine verhältnismäßig hohe Zahl wählen. Hat man viele Bilder, in meinem Fall sind es 2000 kann die Zahl sehr niedrig gewählt werden, in meinem Beispiel habe ich es auf 2 gesetzt. Der Überblenfaktor bestimmt quasi die Transparenz der Mosaikbilder in Relation zum Hintergrundbild. Hier ist es schwer eine Empfehlung zu geben das sollte man Bild für Bild ausprobieren. Die beiden Option zum an haken kann man nur in der kostenpflichtigen Version nutzen, daher kann ich bei meinem Beispiel nicht näher darauf eingehen. Die Anschaffung ist aber in Planung, dann reiche ich diesen Teil nach.Auf fertig klicken und warten :)! Bei mir ist auf Grund des hochaufgelösten Ausgangsbild die Meldung erschienen, das das Bild direkt auf der Festplatte gerendert wird – leider ist auch diese Option in der kostenlosen version nicht verfügbar, also das Bild einfach kleiner machen oder bei der Auflösung des Ausgangsbild (ein Schritt zurück) nochmal nachbessern und eine geringere angeben. Bei mir ging es dann so, ich habe mein Ausgangsbild von 300ppi auf 150ppi runter gerechnet und anschließend im Mosaik-Dialog auch von 300ppi auf 200ppi gestellt, jetzt dauert es eine Weile bis das Bild generiert wurde.

6. Fertig das Bild ist generiert und kann nun als Poster bestellt werden oder als Abzug oder was auch immer.

Ergebnis Parkett Stil

Ergebnis Parkett Stil