Bilder und Fotos · Browser-Bild- und Zeichnungseditor
Raster- oder Vektorgrafiken: Warum Zeichnungen auf einem Foto zu Pixeln werden
· Hintergrund
Bildbearbeitung Leinwand Browser-Verarbeitung
Rasterbilder sind Raster aus Pixeln; Vektorgrafiken sind Anleitungen zum Zeichnen von Formen. Dieser Beitrag erklärt den Unterschied, warum ein Foto immer nur ein Raster sein kann und warum alles, was Sie darauf zeichnen, beim Export das gleiche Schicksal erbt.
Das verschwommene Logo und das Foto, das nie „vektorisiert“ werden konnte – zwei alltägliche Verwirrungen mit einer Erklärung
Einem verschwommenen Logo und einem mit Anmerkungen versehenen Foto wird oft das gleiche Problem zugeschrieben, aber sie sind zunächst unterschiedliche Arten von Material. Ein Vektorlogo besteht aus einer Reihe von Anweisungen für Pfade, Striche und Füllungen. Ein Foto ist ein endliches Feld aus abgetasteten Farben. Der Editor öffnet das Foto als Raster-Bitmap in Leinwandgröße, sodass seine Arbeitswelt bereits ein Pixelraster ist, bevor eine Linie oder ein Rechteck gezeichnet wird.
Zeichnen Sie einen Rahmen über das Foto, exportieren Sie es und zoomen Sie in den Rand hinein. Das Ergebnis ist ein Rasterbild, dessen Anmerkung Pixel neben dem Foto einnimmt. Vergleichen Sie diese Datei mit einer Original-SVG in einer größeren Anzeigegröße, und der Unterschied wird sichtbar: Durch die Vergrößerung des Exports wird das Raster neu berechnet, während durch die Vergrößerung der SVG-Datei der Pfad neu berechnet wird. Dieser Editor verwandelt das erste Objekt nicht in das zweite.
Raster: ein Raster aus farbigen Zellen – wie PNG, JPEG und WebP Bilder speichern und warum beim Hochskalieren Pixel entstehen
Rasterbilder zeichnen Farben an Positionen in einem Raster auf. PNG, JPEG und WebP unterscheiden sich in ihrer Kodierung und Komprimierung, aber das exportierte Bild wird bei der Anzeige immer noch in Pixel aufgelöst. Eine Ein-Pixel-Grenze, eine Anti-Aliasing-Kurve und eine kleine Beschriftung sind allesamt endliche Beispiele im endgültigen Bild. Das Hochskalieren der Datei erfordert einen Interpolationsprozess, um zusätzliche Stichproben zu schätzen. Eine ursprüngliche Zeichenanweisung wird nicht wiederhergestellt.
Diese Einschränkung ist wichtig, wenn eine Anmerkung in vielen Größen scharf bleiben muss. Ein Screenshot-Callout, der für eine feste Anzeige bestimmt ist, kann als Rasterexport genau das Richtige sein, während ein Markenzeichen, das für Schilder, Druck und mehrere Schnittstellen bestimmt ist, normalerweise als Vektor-Asset verfügbar bleiben sollte. Verwenden Sie den Editor für das zusammengesetzte Bild, nicht als Ersatz für die Quellgrafik, die unabhängig skaliert werden muss.
Vektor: Mathematisch beschriebene Formen – Pfade, Striche und Füllungen in Formaten wie SVG und warum sie verlustfrei skaliert werden
Vektoren beschreiben die Geometrie, anstatt jedes angezeigte Pixel zu speichern. Ein SVG-Pfad kann eine Kurve, eine Strichstärke, eine Füllung und eine Transformation angeben; Ein Renderer berechnet dann die der aktuellen Größe entsprechenden Pixel. Aus diesem Grund kann dieselbe einfache Markierung sauber bleiben, wenn sie in mehreren Dimensionen platziert wird. Bei der Erklärung handelt es sich um einen Hintergrund auf Formatebene, nicht um einen Anspruch darauf, dass dieser Editor solche Anweisungen ausgibt oder speichert.
Der Browser-Editor verwendet vorübergehend geometrische Informationen für Linien- und Formgesten, sodass vor der Freigabe eine Vorschau dem Zeiger folgen kann. Sobald die Geste abgeschlossen ist, wird das Ergebnis in eine Rasterebene gemalt. Export setzt die sichtbaren Ebenen zusammen und ruft canvas.toBlob für PNG, JPEG oder WebP auf. In diesem Pfad gibt es kein SVG-Export- oder Vektorprojektdokument, sodass die Geometrie nicht als unabhängiges Objekt erhalten bleibt.
Warum Fotos von Natur aus Raster sind – Sensoren erfassen Muster, keine Formen, und daran ändert keine Konvertierung etwas
Fotos sind Rastermaterial, da eine Kamera Lichtproben über einen Sensor aufzeichnet und diese Proben als Bilddaten speichert. Die Beschreibung eines Fotos als Vektoren würde eine Interpretation erfordern, die seine Textur, sein Rauschen, seine Schattierung und seine unregelmäßigen Details durch erfundene Formen ersetzt. Eine Hochskalierung oder ein anderer Export ändert möglicherweise das Raster, aber keiner der beiden Vorgänge ändert, welche Art von Informationen die ursprüngliche Aufnahme enthält.
Diese Unterscheidung erklärt auch, warum ein Foto und ein Logo in einer Bearbeitung nebeneinander existieren können, ohne dasselbe zu werden. Das Logo kann an anderer Stelle als Vektor beginnen, doch nachdem es in diesem Editor auf ein Rasterfoto gezeichnet wurde, ist das kombinierte Ergebnis ein Pixelraster. Bewahren Sie das Originallogo separat auf, wenn eine zukünftige Wiederverwendung wichtig ist, und behandeln Sie den Browser-Export als fertiges Bild für seinen aktuellen Zweck.
Zeichnen auf einem Raster: Was der Editor tut – Anmerkungen können während der Bearbeitung Formen sein, aber das exportierte Bild ist ein einzelnes Raster
Während einer Geste können sich Linien- und Formwerkzeuge wie kompakte geometrische Anweisungen verhalten: Der Editor kennt den Startpunkt, den Endpunkt, den Umriss und die aktuelle Vorschau. Bei der Veröffentlichung werden diese Anweisungen in eine Rasterebene gerendert. Pinselmarkierungen sind bei ihrer Erstellung Rasterfarben, und der Text wird bei der Platzierung gerastert und nicht als bewegliches Textobjekt beibehalten. Die Sitzung bietet daher Komfort, ohne spätere Bearbeitbarkeit auf Objektebene zu versprechen.
Export macht die Grenze explizit. Sichtbare Rasterebenen werden zu einer Leinwand zusammengefasst und dann über den Browser als PNG, JPEG oder WebP codiert. Wenn Sie diese Datei erneut öffnen, erhalten Sie das Foto und die Markierungen als normale Pixel. Es gibt dem Empfänger kein auswählbares Rechteck, keinen wiederverwendbaren Pfad oder keine bearbeitbare Beschriftung. Behalten Sie die geschichteten Sitzungs- oder Quellressourcen bei, wenn Sie die Anmerkung ändern müssen, anstatt nur das Bild freizugeben.
Die richtige Art für den Job auswählen – wann Sie nach einem Vektorlogo fragen sollten und wann ein Rasterexport genau das ist, was Sie wollen
Wählen Sie ein Vektor-Asset, wenn die Markierung selbst übertragen werden muss: Ein Logo benötigt mehrere Größen, ein Diagramm kann überarbeitet werden oder ein Symbol muss auf vielen Hintergründen platziert werden. Wählen Sie einen Rasterexport, wenn das Ziel ein Screenshot zur Weitergabe, ein Proof mit Beschriftung oder ein Foto mit einer sichtbaren Notiz ist. Die richtige Entscheidung ergibt sich aus der nächsten Verwendung und nicht aus der Überzeugung, dass ein Format immer überlegen ist.
Der Browser Image & Drawing Editor eignet sich für die zweite Kategorie. Es kann Pinsel-, Linien-, Rechteck-, Ellipsen- und Rastertextmarkierungen auf einem Foto platzieren und die Komposition dann als Rasterdatei exportieren. Es kann weder SVG ausgeben noch ein Vektorobjektmodell beibehalten. Wenn ein Kunde das Logo als eigenständiges Asset anfordert, kehren Sie zur ursprünglichen Vektorquelle zurück, anstatt eine größere Version aus den bearbeiteten Pixeln zu extrahieren.
Takeaway: Wissen Sie, welches Sie in der Hand haben – wie der Browser Image & Drawing Editor Rasterbilder bearbeitet und Rasterbilder exportiert, ganz bewusst
Das zuverlässige mentale Modell ist einfach: Der Editor verwendet möglicherweise Geometrie, um eine Geste zu beschreiben, aber das Dokument und sein Export sind Rasterbilder. Jedes geöffnete Foto und jede Editorebene verfügt über ein endliches Pixelraster. Durch die Vergrößerung dieses Rasters werden vorhandene Informationen neu abgetastet, und durch den Export werden die sichtbaren Ebenen in einem anderen Raster zusammengesetzt. Kein Schritt in diesem Workflow erstellt einen wiederverwendbaren Vektorpfad aus einer Linie, die bereits zu Pixeln geworden ist.
Überprüfen Sie den Dateityp und den beabsichtigten Empfänger, bevor Sie zeichnen. Wenn der Empfänger ein fertiges Bild ansehen möchte, exportieren Sie das Raster und überprüfen Sie seine Kanten in der tatsächlichen Anzeigegröße. Wenn der Empfänger Markierungen bearbeiten, ein Logo neu einfärben oder Kunstwerke wiederholt skalieren muss, stellen Sie eine geeignete Vektor- oder Ebenenquelle bereit. Diese Unterscheidung verhindert, dass ein technisch gültiger Export mit einer anderen Art von Liefergegenstand verwechselt wird.