Meine Skizzenexporte scheinen verpixelt zu sein, selbst wenn ich sie in 1x exportiere

Ich habe festgestellt, dass meine Exporte nicht so scharf sind, wie sie auf der Zeichenfläche aussehen. Um ein Beispiel zu geben, versuche ich, das Google Play-Abzeichen aus dieser Dribbble-Datei zu exportieren: https://dribbble.com/shots/1849549-Free-Vector-App-Store-Badges

Aber der Text scheint verschwommen zu sein.

Das exportierte Abzeichen ist verschwommen

Welchen Text siehst du verschwommen? Gibt es eine Chance, dass Sie dies auf einem Retina-Macbook anzeigen?
Hallo, wenn Sie den Export auf der rechten Seite "Get it on Google Play" sehen, ist er verschwommen. Und ja bin auf Retina Mackbook!
Für mich ist es nicht verschwommen ... also vermute ich, dass es daran liegt, dass Sie sich auf einem Retina-Macbook befinden. Denken Sie daran, dass einige Apps - wie PhotoShop - versuchen, Ihnen Pixel in "tatsächlicher Größe" anzuzeigen, jedoch auf einem 2x-Bildschirm. Es ist das MacBook, das die Unschärfe hinzufügt – nicht das Bild selbst.
(Jemand, bitte korrigieren Sie mich, wenn ich falsch liege) ... Ich denke, wenn Sie ein echtes 1px im Bild = 1 echtes px auf Ihrem Retina-Bildschirm haben möchten, müssen Sie Ihre Bilder mit 50% in Ihrer Bearbeitungssoftware anzeigen. Leider bin ich mit Sketch nicht so vertraut, daher bin ich mir nicht sicher, ob dies in diesem bestimmten Programm der Fall ist oder nicht.

Antworten (4)

Dies ist ein Problem mit der Benutzeroberfläche.

Wenn Sie die tatsächlichen Pixelabmessungen des Exportvorschauelements in Ihrer Bildschirmaufnahme untersuchen, betragen die tatsächlichen Pixelabmessungen der Vorschau etwa 370 x 113 Pixel.

Wenn ich den Screenshot richtig lese, scheinen Ihre tatsächlichen Exporteinstellungen 130 x 40 Pixel zu sein.

Die Exportvorschau rendert ein Bild als 130 x 40 und dehnt dieses Bild dann um das Dreifache ("Zoomen" oder "Vergrößern"), wenn es Ihnen angezeigt wird.

Dies kann ein Nebenprodukt/Problem mit der Software UX sein, die mit High-Density-Einstellungen oder MacOS „Retina 2x“ ausgeführt wird, wo die UX mit hohen Pixelabmessungen gerendert wird, aber eine Auflösung von 1920 x 1080 (usw.) simuliert.

Danke für die Antwort. Wegen meiner Anzeige war ich verwirrt. Jede Problemumgehung, damit es WYSIWYG ist.
Ich verwende weder diese Software noch dieses Betriebssystem, aber die einfachste Problemumgehung besteht darin, sie an einen einfachen Ort zu exportieren und eine Vorschau mit 100 % Pixelgröße mithilfe eines Browsers oder einer Bildvorschau anzuzeigen, die die Pixel nicht „vergrößert“. Sie sollten die Vorschau auch auf mehreren Geräten anzeigen.

Ich hatte das gleiche Problem. Ich habe einen der neuen (Retina?) Mac Pros. Die Standard-Exporteinstellung ist 1x Größe. Als ich es auf 2x und 3x erhöhte, wurde die Auflösung immer besser. 3x war optimal. Probieren Sie es aus!

Fazit: In Sketch 3 sah meine Zeichenfläche scharf aus und war nicht verpixelt. Als ich das Board als PNG oder JPG exportierte, führte die standardmäßige 1x-Exportgröße zu einem verpixelten Ergebnis. Wenn Sie die Exportgröße auf das Dreifache erhöhen, sollte es genauso aussehen, wie es in Ihrer Sketch-App aussieht – scharf und schön! Beachten Sie, dass Sie diese Änderungen in Echtzeit auf der rechten Seite Ihres Bildschirms sehen können, wenn Sie mit den Exporteinstellungen spielen. Sobald Sie 2x und/oder 3x klicken, werden Sie den Unterschied direkt im Vorschaufenster des Exports bemerken.

Hoffe das hilft! Prost

Dadurch werden lediglich die Pixelabmessungen des Bildes verdoppelt oder verdreifacht. Wenn die 1x-Pixelgröße die Spezifikation ist, dann ist 2x oder 3x keine Option.

Vertrauen Sie der Vorschau nicht

Die Exportvorschau dient nur der Bequemlichkeit*. Sie werden bemerkt haben, dass es immer noch nur eine Vorschau gibt, wenn Sie zusätzliche Exporte für dasselbe Asset erstellen.

Die Pixelansicht ist dein Freund

Wenn Sie die Nicht-Vektor-Degradation sehen möchten, schalten Sie einfach View> Canvas> Show pixels on Zoom(auch bekannt als Ctrl+ P) ein. Schalten Sie jetzt auf 100 % Zoom um und Sie sehen Ihre Arbeit in ihrer ganzen pixeligen Pracht.

Die Ausnahme

Sketch geht davon aus, dass Sie Interface-Assets erstellen und nicht das faule Auge Ihrer Freundin retuschieren. Es ist auf PNG ausgerichtet. Wenn Sie sehen möchten, wie schlecht die JPG-Komprimierung ist, müssen Sie sie exportieren und in einem Browser oder Ihrem bevorzugten Bildbetrachter überprüfen.

* Sie können den Export tatsächlich von diesem Miniaturbild in einen Ordner ziehen, wenn Sie möchten.

Ich habe Ihre Datei von Dribble heruntergeladen und alle 3 Schaltflächen in der Datei exportiert, und die exportierten Dateien sind bei keiner Größe (1x, 2x, 3x) unscharf. Für das Vorschau-Miniaturbild, das Sie rechts im Exportbereich sehen, ist es meiner Meinung nach immer so unscharf :)