Wir haben uns and die hochauflösenden Bildschirme von Smartphones, Fernsehern und Monitoren gewöhnt. Dabei kann man manchmal vergessen, dass diese Oberflächen aus Pixeln bestehen, einzelnen kleinen Leuchten. Das ist wichtig, denn wenn du Sketch verwendest, solltest du wissen, dass es sich um ein sogenanntes „vektorbasiertes“ Programm handelt. Das bedeutet, dass jede Form die du zeichnest, ohne Qualitätsverlust verkleinert und vergrößert werden kann. Wie Vektor und Pixel zusammenhängen und wie sie sich unterscheiden, lernst du in diesem Beitrag.

Wie unterscheiden sich Vektor und Pixel?

Nach wie vor werden Grafiken, die wir auf einem Bildschirm sehen von einzelnen Leuchten erzeugt. Die meisten Dateiformate, die für die Darstellung auf Bildschirmen bestimmt sind, lassen sich deshalb in Pixeln bemessen. Sie geben die Länge und eine Breite der dargestellten Informationen an.

Vektoren dagegen sind reine Berechnungen einer Form. Zeilen von Code beschreiben für den Computer lesbar die Form des Elements. Eine Vektordatei ist deswegen unabhängig von der Pixeldarstellung eines Bildschirms – bis sie dargestellt werden muss.

Wann brauche ich viele, wann wenige Informationen?

Die Information, die nämlich in einem hochauflösenden Foto steckt ist wesentlich reichhaltiger an Daten als ein Vektor. Würdest die Informationen eines Bildes aufschreiben, müsste deine Information ungefähr so lauten:

Erster Pixel, erste Zeile: blau, zweiter Pixel, erste Zeile: hellers blau, dritter Pixel, erste Zeile: hellstes blau, und dann noch millionenfach so weiter.

Diese Informationen sind bei Bildbearbeitungsprogrammen wie Photoshop nicht nur nützlich sondern auch durch die Aufnahme vorgegeben. Kameras fotografieren und Filmen mit einem Sensor, dessen Bildpunkte die Informationen speichern – als Pixel. Eine Datei, bei der alle Informationen erhalten sind, kann schnell 200 MB haben.

Eine Vektordatei könnte die Information kompakter darstellen und wäre immer in der Lage eine exakte Auskunft über die Form zu geben. Dann würde die Information ungefähr so aussehen:

Starte an Punkt A mit Farbe Blau, Ende an Punkt B mit Farbe hellstes Blau.

Dieses Prinzip wir zum Beispiel auch bei Schriftarten angewandt. Du kannst die Schriftgröße bis auf die Spitze treiben – alles was sich ändert ist die Information, wie groß oder wie klein die Information ist. Für einen Computer sind das aber nur ein paar Stellen mehr oder weniger. Wir reden hier von Byte oder Kilobyte – hundert bis tausend mal kleinere Datenmengen als Megabyte.

Warum basiert Sketch auf Vektoren?

An dieser Stelle kommt Sketch ins Spiel. Es macht sich die Eigenschaften von Vektoren an  Datensparsamkeit an gleich mehreren Punkten zur Nutze. Als erstes kann ein vektorbasiertes Programm bis zu einem bestimmten Grad Berechnungen, also Zeit und Energie sparen. Das Ergebnis ist idealerweise ein schnell und flüssig laufendes Grafikprogramm.

Zweitens sind die gespeicherten Dateien nicht groß. Sie nehmen auf der Festplatte und im Speicher nicht viel Platz weg und können zum Beispiel leicht versendet werden. Am wichtigsten ist aber drittens, dass Sketch auf Grundlage von Vektoren für alle möglichen Bildschirmgrößen immer eine gestochen scharfe Repräsentation erstellen kann. Ganz ohne Qualitätsverlust werden die Elemente aus Sketch in eine pixelbasierte Datei umgewandelt.

Vergleich von Pixel- und Vektorbasierten Programmen

Dieser Vorteil kommt noch mehr zum tragen, wenn du vorstellst, dass alle Bildschrime mittlerweile verschiedene Pixeldichten haben. Auf deinem Smartphone sind Pixel vielleicht nur noch mit einer Lupe erkennbar. Betrachtest du aber auf die gleiche kurze Distanz einmal einen Fernseher könnte es sein, dass du noch einzelne Pixel mit bloßen Auge erkennen kannst.

 

 

Das Pixelraster in Sketch

Vergrößerung in Sketch mit Pixelraster

Wenn du dir Sketch genau ansiehst, wirst du feststellen, dass jedem Objekt zur Hilfe ein Pixel-Raster zugrunde liegt. Dieses Raster kannst du ausblenden lassen, aber es kann mitunter hilfreich sein. Um in der Darstellung auf dem Bildschirm keine verschwommenen Kanten zu haben, solltest du dich schon in Sketch immer an „volle“ Pixel halten. Vermeide Stellen nach dem Komma bei deinen Designs.

Du kannst in Sketch diese Ansicht umstellen. Wähle im Menü „View“ die Option „Show Pixels“ um zu simulieren, wie sich deine Elemente auf einem Bildschirm mit der angegebenen Auflösung darstellen.

Und was ist mit Bilddateien in Sketch?

Bilder kannst du in Sketch genauso einfügen, wie Vektorelemente. Allerdings bleiben dir die wichtige Funktionen von pixelbasierten Programmen wie Photoshop zu einem großen Teil verwehrt. Nur kleinste Farbanpassungen und das Zuschneiden von Bildern sind mit Sketch möglich. Aufwändige Retuschen und Bildbearbeitung braucht andere Programme.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert